slate-serializers - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

lib/__tests__/fixtures/elementTags.js

@@ -6,4 +6,4 @@ "use strict";
     {
-        name: "blockquote",
-        html: "<blockquote>Blockquote</blockquote>",
+        name: 'blockquote',
+        html: '<blockquote>Blockquote</blockquote>',
         slate: [
@@ -18,7 +18,7 @@ {
             },
-        ]
+        ],
     },
     {
-        name: "headings",
-        html: "<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>",
+        name: 'headings',
+        html: '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>',
         slate: [
@@ -73,7 +73,7 @@ {
             },
-        ]
+        ],
     },
     {
-        name: "paragraph",
-        html: "<p>Paragraph 1</p>",
+        name: 'paragraph',
+        html: '<p>Paragraph 1</p>',
         slate: [
@@ -88,6 +88,6 @@ {
             },
-        ]
+        ],
     },
     {
-        name: "link",
+        name: 'link',
         html: '<a href="https://github.com/thompsonsj/slate-serializers">Slate Serializers | GitHub</a>',
@@ -105,6 +105,6 @@ slate: [
             },
-        ]
+        ],
     },
     {
-        name: "unordered list",
+        name: 'unordered list',
         html: '<ul><li>Item 1</li><li>Item 2</li></ul>',
@@ -133,6 +133,6 @@ slate: [
             },
-        ]
+        ],
     },
     {
-        name: "nested unordered list",
+        name: 'nested unordered list',
         html: '<ul><li>Item 1<ul><li>Nested item 1</li><li>Nested item 2</li></ul></li><li>Item 2</li></ul>',
@@ -155,3 +155,3 @@ slate: [
                                         ],
-                                        type: "li"
+                                        type: 'li',
                                     },
@@ -164,6 +164,6 @@ {
                                         ],
-                                        type: "li"
-                                    }
+                                        type: 'li',
+                                    },
                                 ],
-                                type: 'ul'
+                                type: 'ul',
                             },
@@ -184,6 +184,6 @@ ],
             },
-        ]
+        ],
     },
     {
-        name: "ordered list",
+        name: 'ordered list',
         html: '<ol><li>Item 1</li><li>Item 2</li></ol>',
@@ -212,4 +212,4 @@ slate: [
             },
-        ]
+        ],
     },
 ];

lib/__tests__/fixtures/textTags.js

@@ -6,4 +6,4 @@ "use strict";
     {
-        name: "strong",
-        html: "<strong>Bold</strong>",
+        name: 'strong',
+        html: '<strong>Bold</strong>',
         slate: [
@@ -14,4 +14,4 @@ {
                         bold: true,
-                        text: "Bold"
-                    }
+                        text: 'Bold',
+                    },
                 ],
@@ -22,4 +22,4 @@ },
     {
-        name: "unarticulated annotation",
-        html: "<u>Unarticulated Annotation</u>",
+        name: 'unarticulated annotation',
+        html: '<u>Unarticulated Annotation</u>',
         slate: [
@@ -30,4 +30,4 @@ {
                         underline: true,
-                        text: "Unarticulated Annotation"
-                    }
+                        text: 'Unarticulated Annotation',
+                    },
                 ],
@@ -38,4 +38,4 @@ },
     {
-        name: "idiomatic text",
-        html: "<i>Idiomatic Text</i>",
+        name: 'idiomatic text',
+        html: '<i>Idiomatic Text</i>',
         slate: [
@@ -46,4 +46,4 @@ {
                         italic: true,
-                        text: "Idiomatic Text"
-                    }
+                        text: 'Idiomatic Text',
+                    },
                 ],
@@ -54,4 +54,4 @@ },
     {
-        name: "strikethrough",
-        html: "<s>Strikethrough</s>",
+        name: 'strikethrough',
+        html: '<s>Strikethrough</s>',
         slate: [
@@ -62,4 +62,4 @@ {
                         strikethrough: true,
-                        text: "Strikethrough"
-                    }
+                        text: 'Strikethrough',
+                    },
                 ],
@@ -70,4 +70,4 @@ },
     {
-        name: "strong and idiomatic text",
-        html: "<strong><i>Strong and Idiomatic Text</i></strong>",
+        name: 'strong and idiomatic text',
+        html: '<strong><i>Strong and Idiomatic Text</i></strong>',
         slate: [
@@ -79,4 +79,4 @@ {
                         italic: true,
-                        text: "Strong and Idiomatic Text"
-                    }
+                        text: 'Strong and Idiomatic Text',
+                    },
                 ],
@@ -87,4 +87,4 @@ },
     {
-        name: "strong and unarticulated annotation",
-        html: "<strong><u>Strong and Unarticulated Annotation</u></strong>",
+        name: 'strong and unarticulated annotation',
+        html: '<strong><u>Strong and Unarticulated Annotation</u></strong>',
         slate: [
@@ -96,4 +96,4 @@ {
                         underline: true,
-                        text: "Strong and Unarticulated Annotation"
-                    }
+                        text: 'Strong and Unarticulated Annotation',
+                    },
                 ],
@@ -121,4 +121,4 @@ },
     {
-        name: "strong in paragraph",
-        html: "<p><strong>Bold</strong></p>",
+        name: 'strong in paragraph',
+        html: '<p><strong>Bold</strong></p>',
         slate: [
@@ -129,3 +129,3 @@ {
                         bold: true,
-                        text: "Bold"
+                        text: 'Bold',
                     },
@@ -138,4 +138,4 @@ ],
     {
-        name: "strong mid-sentence",
-        html: "Some <strong>bold text</strong> in a sentence.",
+        name: 'strong mid-sentence',
+        html: 'Some <strong>bold text</strong> in a sentence.',
         /*
@@ -156,5 +156,5 @@ Expected but not received:
             {
-                "children": [
+                children: [
                     {
-                        "text": "Some ",
+                        text: 'Some ',
                     },
@@ -164,6 +164,6 @@ ],
             {
-                "children": [
+                children: [
                     {
-                        "bold": true,
-                        "text": "bold text",
+                        bold: true,
+                        text: 'bold text',
                     },
@@ -173,13 +173,13 @@ ],
             {
-                "children": [
+                children: [
                     {
-                        "text": " in a sentence.",
+                        text: ' in a sentence.',
                     },
                 ],
-            }
-        ]
+            },
+        ],
     },
     {
-        name: "pre",
-        html: "<pre><code>Pre</code></pre>",
+        name: 'pre',
+        html: '<pre><code>Pre</code></pre>',
         slate: [
@@ -190,3 +190,3 @@ {
                         code: true,
-                        text: "Pre",
+                        text: 'Pre',
                     },
@@ -193,0 +193,0 @@ ],

lib/index.d.ts

@@ -1,2 +0,2 @@
-export { htmlToSlate } from "./serializers/htmlToSlate";
-export { slateToHtml } from "./serializers/slatetoHtml";
+export { htmlToSlate } from './serializers/htmlToSlate';
+export { slateToHtml } from './serializers/slatetoHtml';

lib/serializers/htmlToSlate/index.js

@@ -25,3 +25,2 @@ "use strict";
     p: () => ({ type: 'p' }),
-    pre: () => ({ type: 'code' }),
     ul: () => ({ type: 'ul' }),
@@ -31,2 +30,3 @@ };
     code: () => ({ code: true }),
+    pre: () => ({ code: true }),
     del: () => ({ strikethrough: true }),
@@ -48,3 +48,2 @@ em: () => ({ italic: true }),
     const nodeName = (0, domutils_1.getName)(parent);
-    const nodeFirstChildName = parent.childNodes && parent.childNodes[0] && (0, domutils_1.getName)(parent.childNodes[0]);
     const children = parent.childNodes ? Array.from(parent.childNodes).map(deserialize).flat() : [];
@@ -54,7 +53,2 @@ if ((0, domutils_1.getName)(parent) === 'body') {
     }
-    if ((nodeName === 'pre' && nodeFirstChildName === 'code') ||
-        (nodeName === 'code' && nodeFirstChildName === 'pre')) {
-        const attrs = TEXT_TAGS[`code`](parent);
-        return [(0, slate_hyperscript_1.jsx)('text', attrs, (0, domutils_1.textContent)((0, domutils_1.getChildren)(parent.childNodes[0])))];
-    }
     if (ELEMENT_TAGS[nodeName]) {
@@ -64,10 +58,7 @@ const attrs = ELEMENT_TAGS[nodeName](parent);
     }
-    if (TEXT_TAGS[nodeName]) {
-        return [(0, slate_hyperscript_1.jsx)('text', gatherTextMarkAttributes(parent), [])];
-    }
-    else if (el.type === htmlparser2_1.ElementType.Text) {
+    if (TEXT_TAGS[nodeName] || el.type === htmlparser2_1.ElementType.Text) {
         if ((0, domutils_1.textContent)(el).trim() === '') {
             return null;
         }
-        return [(0, slate_hyperscript_1.jsx)('text', { text: (0, domutils_1.textContent)(el) }, children)];
+        return [(0, slate_hyperscript_1.jsx)('text', gatherTextMarkAttributes(parent), [])];
     }
@@ -79,12 +70,24 @@ return children;
     // tslint:disable-next-line no-unused-expression
-    el.childNodes && [el, ...(0, domutils_1.getChildren)(el).flat()].forEach(child => {
-        const name = (0, domutils_1.getName)(child);
-        const attrs = TEXT_TAGS[name] ? TEXT_TAGS[name](child) : {};
+    if (el.childNodes) {
+        ;
+        [el, ...(0, domutils_1.getChildren)(el).flat()].forEach((child) => {
+            const name = (0, domutils_1.getName)(child);
+            const attrs = TEXT_TAGS[name] ? TEXT_TAGS[name](child) : {};
+            const text = (0, domutils_1.textContent)(child);
+            allAttrs = {
+                ...allAttrs,
+                ...attrs,
+                text,
+            };
+        });
+    }
+    else {
+        const name = (0, domutils_1.getName)(el);
+        const attrs = TEXT_TAGS[name] ? TEXT_TAGS[name](el) : {};
         const text = (0, domutils_1.textContent)(el);
         allAttrs = {
-            ...allAttrs,
             ...attrs,
-            text
+            text,
         };
-    });
+    }
     return allAttrs;
@@ -104,5 +107,6 @@ };
                 .map((element) => {
+                // ensure all top level elements have a children property
                 if (!element.children) {
                     return {
-                        children: element
+                        children: element,
                     };
@@ -109,0 +113,0 @@ }

lib/serializers/slatetoHtml/index.d.ts

@@ -1,1 +0,3 @@
-export declare const slateToHtml: (node: any[]) => string | any[];
+export declare const slateToHtml: (node: any[], options?: {
+    enforceTopLevelPTags: boolean;
+}) => string | any[];

lib/serializers/slatetoHtml/index.js

@@ -6,4 +6,15 @@ "use strict";
 const slate_1 = require("slate");
-const slateToHtml = (node) => {
-    const slateNode = { children: node };
+const slateToHtml = (node, options = {
+    enforceTopLevelPTags: false,
+}) => {
+    const nodeWithTopLevelPElements = node.map((el) => {
+        if (!el.type && (options === null || options === void 0 ? void 0 : options.enforceTopLevelPTags)) {
+            return {
+                ...el,
+                type: 'p',
+            };
+        }
+        return el;
+    });
+    const slateNode = { children: nodeWithTopLevelPElements };
     return slateNodeToHtml(slateNode);
@@ -10,0 +21,0 @@ };

package.json

 {
   "name": "slate-serializers",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Serialize Slate JSON objects to HTML and vice versa. Define rules to modify the end result.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -62,2 +62,14 @@ # slate-serializers
 
+#### Options
+
+You may get better results passing the `enforceTopLevelPTags` option.
+
+```js
+slateToHtml(slate, {enforceTopLevelPTags: true})
+```
+
+Objects in the Slate JSON can have no type (e.g. `p`) and contain a number of children. This causes issues for the serializer, which renders each child at the top of the DOM. Example: `Paragraph 1.Paragraph 2.`. Complexity is increased when text marks are involved such as `u`, `strong` and `i`.
+
+To avoid this, `enforceTopLevelPTags` ensures any top level objects without a type are assigned as a `p` tag. Example: `<p>Paragraph 1.</p><p>Paragraph 2.</p>`.
+
 ### htmlToSlate
@@ -64,0 +76,0 @@

No alert changes

Improved metrics

Total package byte prevSize

25074

increased by3.5%

Lines of code

696

increased by2.5%

Number of lines in readme file

92

increased by15%

No dependency changes