Make serialize/deserialize friendlier (#1705)

docs/walkthroughs/saving-and-loading-html-content.md

@@ -103,16 +103,17 @@ const rules = [
     // Switch deserialize to handle more blocks...
     deserialize(el, next) {
       const type = BLOCK_TAGS[el.tagName.toLowerCase()]
-      if (!type) return
+      if (type) {
         return {
           object: 'block',
           type: type,
           nodes: next(el.childNodes),
         }
+      }
     },
     // Switch serialize to handle more blocks...
     serialize(obj, children) {
-      if (obj.object != 'block') return
+      if (obj.object == 'block') {
         switch (obj.type) {
           case 'paragraph':
             return <p>{children}</p>
@@ -125,6 +126,7 @@ const rules = [
               </pre>
             )
         }
+      }
     },
   },
 ]
@@ -154,15 +156,16 @@ const rules = [
   {
     deserialize(el, next) {
       const type = BLOCK_TAGS[el.tagName.toLowerCase()]
-      if (!type) return
+      if (type) {
         return {
           object: 'block',
           type: type,
           nodes: next(el.childNodes),
         }
+      }
     },
     serialize(obj, children) {
-      if (obj.object != 'block') return
+      if (obj.object == 'block') {
         switch (obj.type) {
           case 'code':
             return (
@@ -175,21 +178,23 @@ const rules = [
           case 'quote':
             return <blockquote>{children}</blockquote>
         }
+      }
     },
   },
   // Add a new rule that handles marks...
   {
     deserialize(el, next) {
       const type = MARK_TAGS[el.tagName.toLowerCase()]
-      if (!type) return
+      if (type) {
         return {
           object: 'mark',
           type: type,
           nodes: next(el.childNodes),
         }
+      }
     },
     serialize(obj, children) {
-      if (obj.object != 'mark') return
+      if (obj.object == 'mark') {
         switch (obj.type) {
           case 'bold':
             return <strong>{children}</strong>
@@ -198,6 +203,7 @@ const rules = [
           case 'underline':
             return <u>{children}</u>
         }
+      }
     },
   },
 ]

examples/paste-html/index.js

@@ -50,29 +50,31 @@ const RULES = [
   {
     deserialize(el, next) {
       const block = BLOCK_TAGS[el.tagName.toLowerCase()]
-      if (!block) return
+      if (block) {
         return {
           object: 'block',
           type: block,
           nodes: next(el.childNodes),
         }
+      }
     },
   },
   {
     deserialize(el, next) {
       const mark = MARK_TAGS[el.tagName.toLowerCase()]
-      if (!mark) return
+      if (mark) {
         return {
           object: 'mark',
           type: mark,
           nodes: next(el.childNodes),
         }
+      }
     },
   },
   {
     // Special case for code blocks, which need to grab the nested childNodes.
     deserialize(el, next) {
-      if (el.tagName.toLowerCase() != 'pre') return
+      if (el.tagName.toLowerCase() == 'pre') {
         const code = el.childNodes[0]
         const childNodes =
           code && code.tagName.toLowerCase() == 'code'
@@ -84,12 +86,13 @@ const RULES = [
           type: 'code',
           nodes: next(childNodes),
         }
+      }
     },
   },
   {
     // Special case for images, to grab their src.
     deserialize(el, next) {
-      if (el.tagName.toLowerCase() != 'img') return
+      if (el.tagName.toLowerCase() == 'img') {
         return {
           object: 'block',
           type: 'image',
@@ -99,12 +102,13 @@ const RULES = [
             src: el.getAttribute('src'),
           },
         }
+      }
     },
   },
   {
     // Special case for links, to grab their href.
     deserialize(el, next) {
-      if (el.tagName.toLowerCase() != 'a') return
+      if (el.tagName.toLowerCase() == 'a') {
         return {
           object: 'inline',
           type: 'link',
@@ -113,6 +117,7 @@ const RULES = [
             href: el.getAttribute('href'),
           },
         }
+      }
     },
   },
 ]