slate-serializers - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

lib/index.d.ts

 export { htmlToSlate } from './serializers/htmlToSlate';
-export { slateToHtml } from './serializers/slatetoHtml';
+export { slateToDom, slateToHtml } from './serializers/slatetoHtml';

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slateToHtml = exports.htmlToSlate = void 0;
+exports.slateToHtml = exports.slateToDom = exports.htmlToSlate = void 0;
 var htmlToSlate_1 = require("./serializers/htmlToSlate");
 Object.defineProperty(exports, "htmlToSlate", { enumerable: true, get: function () { return htmlToSlate_1.htmlToSlate; } });
 var slatetoHtml_1 = require("./serializers/slatetoHtml");
+Object.defineProperty(exports, "slateToDom", { enumerable: true, get: function () { return slatetoHtml_1.slateToDom; } });
 Object.defineProperty(exports, "slateToHtml", { enumerable: true, get: function () { return slatetoHtml_1.slateToHtml; } });

lib/serializers/slatetoHtml/index.d.ts

@@ -0,1 +1,2 @@
+import { Document, Element } from 'domhandler';
 import { IattributeMap } from '../../types';
@@ -5,2 +6,6 @@ export declare const slateToHtml: (node: any[], { enforceTopLevelPTags, attributeMap, }?: {
     attributeMap?: IattributeMap[] | undefined;
-}) => string | any[];
+}) => string;
+export declare const slateToDom: (node: any[], { enforceTopLevelPTags, attributeMap, }?: {
+    enforceTopLevelPTags?: boolean | undefined;
+    attributeMap?: IattributeMap[] | undefined;
+}) => Document | Element | import("domhandler").Text;

lib/serializers/slatetoHtml/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slateToHtml = void 0;
+exports.slateToDom = exports.slateToHtml = void 0;
 const html_escaper_1 = require("html-escaper");
 const slate_1 = require("slate");
-const utilities_1 = require("../../utilities");
+const domhandler_1 = require("domhandler");
+const domhandler_2 = require("../../utilities/domhandler");
+const dom_serializer_1 = require("dom-serializer");
+// Map Slate element names to HTML tag names
+// Only to be used for standard 'wrapper' elements
+const ELEMENT_NAME_TAG_MAP = new Map([
+    ['p', 'p'],
+    ['paragraph', 'p'],
+    ['h1', 'h1'],
+    ['h2', 'h2'],
+    ['h3', 'h3'],
+    ['h4', 'h4'],
+    ['h5', 'h5'],
+    ['h6', 'h6'],
+    ['ul', 'ul'],
+    ['ol', 'ol'],
+    ['li', 'li'],
+    ['blockquote', 'blockquote'],
+]);
 const slateToHtml = (node, { enforceTopLevelPTags = false, attributeMap = [], } = {}) => {
+    const document = (0, exports.slateToDom)(node, { attributeMap, enforceTopLevelPTags });
+    return (0, dom_serializer_1.default)(document);
+};
+exports.slateToHtml = slateToHtml;
+const slateToDom = (node, { enforceTopLevelPTags = false, attributeMap = [], } = {}) => {
     const nodeWithTopLevelPElements = node.map((el) => {
@@ -18,72 +41,53 @@ if (!el.type && enforceTopLevelPTags) {
     const slateNode = { children: nodeWithTopLevelPElements };
-    return slateNodeToHtml(slateNode, { attributeMap });
+    const document = slateNodeToHtml(slateNode, { attributeMap });
+    return document;
 };
-exports.slateToHtml = slateToHtml;
+exports.slateToDom = slateToDom;
 const slateNodeToHtml = (node, { attributeMap = [], } = {}) => {
     if (slate_1.Text.isText(node)) {
-        let str = (0, html_escaper_1.escape)(node.text);
-        if (node.code) {
-            str = `<pre><code>${str}</code></pre>`;
+        const str = (0, html_escaper_1.escape)(node.text);
+        const markElements = [];
+        if (node.strikethrough) {
+            markElements.push('s');
         }
-        if (node.italic) {
-            str = `<i>${str}</i>`;
+        if (node.bold) {
+            markElements.push('strong');
         }
         if (node.underline) {
-            str = `<u>${str}</u>`;
+            markElements.push('u');
         }
-        if (node.bold) {
-            str = `<strong>${str}</strong>`;
+        if (node.italic) {
+            markElements.push('i');
         }
-        if (node.strikethrough) {
-            str = `<s>${str}</s>`;
+        if (node.code) {
+            markElements.push('pre', 'code');
         }
-        return str;
+        return (0, domhandler_2.nestedMarkElements)(markElements, str);
     }
-    const children = node.children
-        ? node.children.map((n) => slateNodeToHtml(n, { attributeMap })).join('')
-        : [];
-    let attrs = attributeMap
-        .map((map) => {
+    const children = node.children ? node.children.map((n) => slateNodeToHtml(n, { attributeMap })) : [];
+    const attrs = {};
+    // tslint:disable-next-line no-unused-expression
+    attributeMap.forEach((map) => {
         if (node[map.slateAttr]) {
-            return `${map.htmlAttr}="${node[map.slateAttr]}"`;
+            attrs[map.htmlAttr] = node[map.slateAttr];
         }
-        return null;
-    })
-        .filter((map) => map);
+    });
+    if (ELEMENT_NAME_TAG_MAP.has(node.type)) {
+        return new domhandler_1.Element(ELEMENT_NAME_TAG_MAP.get(node.type) || '', attrs, children);
+    }
     switch (node.type) {
-        case 'p':
-            return `<p${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</p>`;
-        case 'h1':
-            return `<h1${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h1>`;
-        case 'h2':
-            return `<h2${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h2>`;
-        case 'h3':
-            return `<h3${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h3>`;
-        case 'h4':
-            return `<h4${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h4>`;
-        case 'h5':
-            return `<h5${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h5>`;
-        case 'h6':
-            return `<h6${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</h6>`;
         case 'quote':
-            return `<blockquote${(0, utilities_1.prependSpace)(attrs.join(' '))}><p>${children}</p></blockquote>`;
-        case 'paragraph':
-            return `<p${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</p>`;
-        case 'ul':
-            return `<ul${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</ul>`;
-        case 'ol':
-            return `<ol${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</ol>`;
-        case 'li':
-            return `<li${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</li>`;
+            const p = [new domhandler_1.Element('p', {}, children)];
+            return new domhandler_1.Element('blockquote', attrs, p);
         case 'link':
-            const newTabAttr = node.newTab ? 'target="_blank"' : '';
-            if (newTabAttr) {
-                attrs = [newTabAttr, ...attrs];
+            if (node.newTab) {
+                attrs.target = '_blank';
             }
-            return `<a href="${(0, html_escaper_1.escape)(node.url)}"${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</a>`;
-        case 'blockquote':
-            return `<blockquote${(0, utilities_1.prependSpace)(attrs.join(' '))}>${children}</blockquote>`;
+            return new domhandler_1.Element('a', {
+                href: (0, html_escaper_1.escape)(node.url),
+                ...attrs,
+            }, children);
         default:
-            return children;
+            return new domhandler_1.Document(children);
     }
 };

package.json

 {
   "name": "slate-serializers",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Serialize Slate JSON objects to HTML and vice versa. Define rules to modify the end result.",
@@ -56,2 +56,3 @@ "main": "lib/index.js",
   "dependencies": {
+    "dom-serializer": "^2.0.0",
     "domhandler": "^5.0.3",
@@ -58,0 +59,0 @@ "domutils": "^3.0.1",

README.md

@@ -7,2 +7,3 @@ # slate-serializers
 
+- `slateToDom`
 - `slateToHtml`
@@ -102,2 +103,8 @@ - `htmlToSlate`
 
+### slateToDom
+
+`slateToHtml` is a simple wrapper that runs [`dom-serializer`](https://www.npmjs.com/package/dom-serializer) on the output from `slateToDom`.
+
+`slateToDom` is made available in case you wish to work woth the DOM output yourself or run `dom-serializer` using any of the available options.
+
 ### slateToHtml
@@ -113,14 +120,2 @@
 
-#### 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
@@ -127,0 +122,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31794

increased by11.51%

Number of package files

24

increased by20%

Lines of code

832

increased by12.28%

Worsened metrics

Dependency count

7

increased by16.67%

Number of lines in readme file

136

decreased by-3.55%

Dependency changes

• + Addeddom-serializer@^2.0.0