@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

package/src/serialization.jsx

@@ -30,7 +30,7 @@ export const BLOCK_TAGS = {
   h3: 'heading-three',
   h4: 'heading-four',
   h5: 'heading-five',
-  h6: 'heading-six',
+  h6: 'heading-six'
 };
 
 /**
@@ -45,10 +45,10 @@ const MARK_TAGS = {
   u: 'underline',
   s: 'strikethrough',
   code: 'code',
-  strong: 'bold',
+  strong: 'bold'
 };
 
-export const parseStyleString = (s) => {
+export const parseStyleString = s => {
   const regex = /([\w-]*)\s*:\s*([^;]*)/g;
   let match;
   const result = {};
@@ -58,18 +58,18 @@ export const parseStyleString = (s) => {
   return result;
 };
 
-export const getBase64 = (file) => {
+export const getBase64 = file => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => resolve(reader.result);
-    reader.onerror = (error) => reject(error);
+    reader.onerror = error => reject(error);
   });
 };
 
-export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
-const attributesToMap = (el) => (acc, attribute) => {
+const attributesToMap = el => (acc, attribute) => {
   const value = el.getAttribute(attribute);
   if (value) {
     if (attribute === 'style') {
@@ -113,7 +113,7 @@ const blocks = {
        * Here for rendering styles for all block elements
        */
       data: { attributes: attributes.reduce(attributesToMap(el), {}) },
-      nodes: next(el.childNodes),
+      nodes: next(el.childNodes)
     };
   },
   serialize: (object, children) => {
@@ -131,7 +131,7 @@ const blocks = {
         return <Tag {...jsonData.attributes}>{children}</Tag>;
       }
     }
-  },
+  }
 };
 
 const marks = {
@@ -142,7 +142,7 @@ const marks = {
     return {
       object: 'mark',
       type: mark,
-      nodes: next(el.childNodes),
+      nodes: next(el.childNodes)
     };
   },
   serialize(object, children) {
@@ -154,10 +154,10 @@ const marks = {
         }
       }
     }
-  },
+  }
 };
 
-const findPreviousText = (el) => {
+const findPreviousText = el => {
   if (el.nodeName === '#text') {
     return el;
   }
@@ -182,9 +182,9 @@ export const TEXT_RULE = {
         leaves: [
           {
             object: 'leaf',
-            text: '\n',
-          },
-        ],
+            text: '\n'
+          }
+        ]
       };
     }
 
@@ -197,9 +197,9 @@ export const TEXT_RULE = {
         leaves: [
           {
             object: 'leaf',
-            text: el.nodeValue,
-          },
-        ],
+            text: el.nodeValue
+          }
+        ]
       };
     }
   },
@@ -212,7 +212,7 @@ export const TEXT_RULE = {
         return array;
       }, []);
     }
-  },
+  }
 };
 
 const RULES = [
@@ -224,7 +224,7 @@ const RULES = [
   responseAreaSerialization,
   TEXT_RULE,
   blocks,
-  marks,
+  marks
 ];
 
 function allWhitespace(node) {
@@ -235,7 +235,7 @@ function allWhitespace(node) {
 function defaultParseHtml(html) {
   if (typeof DOMParser === 'undefined') {
     throw new Error(
-      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.',
+      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.'
     );
   }
 
@@ -259,14 +259,14 @@ function defaultParseHtml(html) {
 const parseHtml =
   typeof window === 'undefined'
     ? () => ({
-        childNodes: [],
+        childNodes: []
       })
     : defaultParseHtml;
 
 const serializer = new Html({
   defaultBlock: 'div',
   rules: RULES,
-  parseHtml,
+  parseHtml
 });
 
 const _extends =
@@ -320,7 +320,7 @@ serializer.deserialize = function deserialize(html) {
     }
 
     const block = _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
-      nodes: [node],
+      nodes: [node]
     });
 
     memo.push(block);
@@ -330,8 +330,8 @@ serializer.deserialize = function deserialize(html) {
   if (nodes.length === 0) {
     nodes = [
       _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
-        nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
-      }),
+        nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }]
+      })
     ];
   }
 
@@ -340,11 +340,11 @@ serializer.deserialize = function deserialize(html) {
     document: {
       object: 'document',
       data: {},
-      nodes: nodes,
+      nodes: nodes
     },
     schema: {
-      rules: [],
-    },
+      rules: []
+    }
   };
 
   let i;
@@ -352,7 +352,7 @@ serializer.deserialize = function deserialize(html) {
   for (i = 0; i < 3000; i++) {
     json.schema.rules.push({
       match: { object: 'document' },
-      nodes: [{ match: { object: 'block' } }],
+      nodes: [{ match: { object: 'block' } }]
     });
   }
 
@@ -365,7 +365,7 @@ serializer.deserialize = function deserialize(html) {
   return null;
 };
 
-export const htmlToValue = (html) => {
+export const htmlToValue = html => {
   try {
     return serializer.deserialize(html);
   } catch (e) {
@@ -374,7 +374,7 @@ export const htmlToValue = (html) => {
   }
 };
 
-export const valueToHtml = (value) => serializer.serialize(value);
+export const valueToHtml = value => serializer.serialize(value);
 
 /**
  *

package/src/test-serializer.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import ReactServer from 'react-dom/server';
+import escapeHtml from 'escape-html';
+import { Text } from 'slate';
+import { jsx } from 'slate-hyperscript';
+
+class Html {
+  constructor(props) {
+    this.defaultBlock = props.defaultBlock;
+    this.parseHtml = props.parseHtml;
+    this.rules = props.rules;
+  }
+
+  serializeEls = node => {
+    if (Text.isText(node)) {
+      let string = escapeHtml(node.text);
+      if (node.bold) {
+        string = <strong>{string}</strong>;
+      }
+      return string;
+    }
+
+    let children = (node.children || []).map(n => this.serializeEls(n));
+
+    const correctRule = this.rules.reduce((res, rule) => {
+      return res || rule.serialize(node, children);
+    }, null);
+
+    if (correctRule) {
+      return correctRule;
+    }
+
+    switch (node.type) {
+      case 'quote':
+        return (
+          <blockquote>
+            <p>{children}</p>
+          </blockquote>
+        );
+      case 'paragraph':
+        return <p>{children}</p>;
+      case 'link':
+        return <a href={escapeHtml(node.url)}>{children}</a>;
+      default:
+        return children;
+    }
+  };
+
+  serialize = node => {
+    const deserialized = this.serializeEls(node);
+    const html = ReactServer.renderToStaticMarkup(React.createElement(
+      'body',
+      null,
+      deserialized
+    ));
+    const inner = html.slice(6, -7);
+    return inner;
+  };
+
+  deserialize = html => {
+    let body = this.parseHtml(html);
+
+    if (!body.firstChild || body.firstChild.nodeType === Node.TEXT_NODE) {
+      body = this.parseHtml(`<p>${html}</p>`);
+    }
+
+    return this.deserializeEls(body);
+  };
+
+  deserializeEls = (element, markAttributes = {}) => {
+    if (element.nodeType === Node.TEXT_NODE) {
+      return jsx('text', markAttributes, element.textContent);
+    } else if (element.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+
+    const nodeAttributes = { ...markAttributes };
+
+    // define attributes for text nodes
+    if (element.nodeName === 'STRONG') {
+      nodeAttributes.bold = true;
+    }
+
+    const nextFn = nodes => {
+      const childNodes = Array.from(nodes);
+      const children = Array.from(childNodes)
+        .map(node => this.deserializeEls(node, nodeAttributes))
+        .flat();
+
+      if (children.length === 0) {
+        children.push(jsx('text', nodeAttributes, ''));
+      }
+
+      return children;
+    };
+
+    const correctRule = this.rules.reduce((res, rule) => {
+      return res || rule.deserialize(element, nextFn);
+    }, null);
+
+    if (correctRule) {
+      return correctRule;
+    }
+
+    const childNodes = Array.from(element.childNodes);
+    const children = Array.from(childNodes)
+      .map(node => this.deserializeEls(node, nodeAttributes))
+      .flat();
+
+    if (children.length === 0) {
+      children.push(jsx('text', nodeAttributes, ''));
+    }
+
+    switch (element.nodeName) {
+      case 'TABLE':
+        return jsx('element', { type: 'table' }, children);
+      case 'TBODY':
+        return jsx('element', { type: 'tbody' }, children);
+      case 'TR':
+        return jsx('element', { type: 'tr' }, children);
+      case 'TD':
+        return jsx('element', { type: 'td' }, children);
+      case 'BODY':
+        return jsx('fragment', {}, children);
+      case 'BR':
+        return '\n';
+      case 'BLOCKQUOTE':
+        return jsx('element', { type: 'quote' }, children);
+      case 'P':
+        return jsx('element', { type: 'paragraph' }, children);
+      case 'A':
+        return jsx('element', { type: 'link', url: element.getAttribute('href') }, children);
+      default:
+        return children;
+    }
+  };
+}
+
+export default Html;

package/src/test-serializer.js.rej

@@ -0,0 +1,20 @@
+diff a/packages/editable-html/src/test-serializer.js b/packages/editable-html/src/test-serializer.js	(rejected hunks)
+@@ -4 +4 @@ import { jsx } from 'slate-hyperscript';
+-import { unWrapMath } from "@pie-lib/math-rendering";
++import { unWrapMath } from '@pie-lib/math-rendering';
+@@ -82,4 +82,11 @@ class Html {
+-          return jsx('element', { type: 'math', data: {
+-              latex: unwrapped,
+-              wrapper: wrapType
+-            } }, children);
++          return jsx(
++            'element',
++            {
++              type: 'math',
++              data: {
++                latex: unwrapped,
++                wrapper: wrapType
++              }
++            },
++            children
++          );