@pie-lib/mask-markup 1.13.34-next.0 → 2.0.0-beta.2

package/src/mask.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
+import { Text } from 'slate';
 import { withStyles } from '@material-ui/core/styles';
 import { MARK_TAGS } from './serialization';
 
@@ -25,13 +25,9 @@ const addText = (parentNode, text) => {
 };
 
 const getMark = (n) => {
-  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
+  const markTags = Object.values(MARK_TAGS);
 
-  if (mark) {
-    return mark.marks[0];
-  }
-
-  return null;
+  return markTags.includes(n.type);
 };
 
 export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
@@ -41,16 +37,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
 
   const children = [];
 
-  (layout.nodes || []).forEach((n, index) => {
-    const key = n.type ? `${n.type}-${index}` : `${index}`;
+  (layout.children || []).forEach((n, index) => {
+    const key = `${n.type}-${index}`;
 
     if (n.isMath) {
       children.push(
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`,
-          }}
-        />,
+        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />,
       );
       return children;
     }
@@ -63,12 +55,8 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
       }
     }
 
-    if (n.object === 'text') {
-      const content = n.leaves.reduce((acc, l) => {
-        const t = l.text;
-        const extraText = addText(parentNode, t);
-        return extraText ? acc + extraText : acc;
-      }, '');
+    if (Text.isText(n)) {
+      const content = n.text;
       const mark = getMark(n);
 
       if (mark) {
@@ -91,7 +79,7 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
         const Tag = n.type;
-        if (n.nodes && n.nodes.length > 0) {
+        if (Tag !== 'source' && n.children && n.children.length > 0) {
           children.push(
             <Tag key={key} {...n.data.attributes}>
               {subNodes}

package/src/new-serialization.jsx

@@ -0,0 +1,291 @@
+import TestSerializer from './test-serializer';
+import React from 'react';
+import debug from 'debug';
+import { object as toStyleObject } from 'to-style';
+
+import { serialization as imgSerialization } from './plugins/image';
+import { serialization as mathSerialization } from './plugins/math';
+import { serialization as mediaSerialization } from './plugins/media';
+import { serialization as listSerialization } from './plugins/list';
+import { serialization as tableSerialization } from './plugins/table';
+import { serialization as responseAreaSerialization } from './plugins/respArea';
+import { Mark, Value } from 'slate';
+import { jsx } from 'slate-hyperscript';
+
+const log = debug('@pie-lib:editable-html:serialization');
+
+/**
+ * Tags to blocks.
+ *
+ * @type {Object}
+ */
+
+export const BLOCK_TAGS = {
+  div: 'div',
+  span: 'span',
+  p: 'paragraph',
+  blockquote: 'quote',
+  pre: 'code',
+  h1: 'heading-one',
+  h2: 'heading-two',
+  h3: 'heading-three',
+  h4: 'heading-four',
+  h5: 'heading-five',
+  h6: 'heading-six',
+};
+
+/**
+ * Tags to marks.
+ *
+ * @type {Object}
+ */
+
+const MARK_TAGS = {
+  b: 'bold',
+  em: 'italic',
+  u: 'underline',
+  s: 'strikethrough',
+  code: 'code',
+  strong: 'bold',
+};
+
+export const parseStyleString = (s) => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+  while ((match = regex.exec(s))) {
+    result[match[1]] = match[2].trim();
+  }
+  return result;
+};
+
+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);
+  });
+};
+
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+
+const attributesToMap = (el) => (acc, attribute) => {
+  const value = el.getAttribute(attribute);
+  if (value) {
+    if (attribute === 'style') {
+      const styleString = el.getAttribute(attribute);
+      const reactStyleObject = reactAttributes(parseStyleString(styleString));
+      acc['style'] = reactStyleObject;
+    } else {
+      acc[attribute] = el.getAttribute(attribute);
+    }
+  }
+  return acc;
+};
+
+const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
+
+/**
+ * Serializer rules.
+ *
+ * @type {Array}
+ */
+
+const blocks = {
+  deserialize(el, next) {
+    log('[blocks:deserialize] block: ', el);
+    const block = BLOCK_TAGS[el.tagName.toLowerCase()];
+    if (!block) return;
+    log('[blocks:deserialize] block: ', block);
+
+    if (el.childNodes.length === 1) {
+      const cn = el.childNodes[0];
+      if (cn && cn.tagName && cn.tagName.toLowerCase() === block) {
+        log('[we have a child node of the same]...');
+        return;
+      }
+    }
+
+    return jsx(
+      'element',
+      {
+        type: block,
+        /**
+         * Here for rendering styles for all block elements
+         */
+        data: { attributes: attributes.reduce(attributesToMap(el), {}) },
+      },
+      next(el.childNodes),
+    );
+  },
+  serialize: (object, children) => {
+    if (object.object !== 'block') return;
+
+    const jsonData = object.data.toJSON();
+
+    log('[blocks:serialize] object: ', object, children);
+    let key;
+
+    for (key in BLOCK_TAGS) {
+      if (BLOCK_TAGS[key] === object.type) {
+        const Tag = key;
+
+        return <Tag {...jsonData.attributes}>{children}</Tag>;
+      }
+    }
+  },
+};
+
+const marks = {
+  deserialize(el, next) {
+    const mark = MARK_TAGS[el.tagName.toLowerCase()];
+    if (!mark) {
+      return;
+    }
+    log('[deserialize] mark: ', mark);
+
+    return jsx('element', { type: mark }, next(el.childNodes));
+  },
+  serialize(object, children) {
+    /*if (Mark.isMark(object)) {
+      for (var key in MARK_TAGS) {
+        if (MARK_TAGS[key] === object.type) {
+          const Tag = key;
+          return <Tag>{children}</Tag>;
+        }
+      }
+    }*/
+  },
+};
+
+const findPreviousText = (el) => {
+  if (el.nodeName === '#text') {
+    return el;
+  }
+
+  if (el.previousSibling) {
+    return findPreviousText(el.previousSibling);
+  }
+
+  return null;
+};
+
+export const TEXT_RULE = {
+  deserialize(el) {
+    /**
+     * This needs to be called on the dom element in order to merge the adjacent text nodes together
+     * */
+    el.normalize();
+
+    if (el.tagName && el.tagName.toLowerCase() === 'br') {
+      return jsx('text', {});
+    }
+
+    if (el.nodeName === '#text') {
+      if (el.nodeValue && el.nodeValue.match(/<!--.*?-->/)) return;
+
+      log('[text:deserialize] return text object..');
+      return jsx('text', {}, el.nodeValue);
+    }
+  },
+
+  serialize(obj, children) {
+    if (obj.object === 'string') {
+      return children.split('\n').reduce((array, text, i) => {
+        if (i !== 0) array.push(<br />);
+        array.push(text);
+        return array;
+      }, []);
+    }
+  },
+};
+
+const RULES = [
+  listSerialization,
+  mathSerialization,
+  mediaSerialization,
+  imgSerialization,
+  tableSerialization,
+  responseAreaSerialization,
+  TEXT_RULE,
+  blocks,
+  marks,
+];
+
+function allWhitespace(node) {
+  // Use ECMA-262 Edition 3 String and RegExp features
+  return !/[^\t\n\r ]/.test(node.textContent);
+}
+
+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.',
+    );
+  }
+
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+
+  const { body } = parsed;
+  const textNodes = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, null);
+  let n = textNodes.nextNode();
+
+  while (n) {
+    if (allWhitespace(n) || n.nodeValue === '\u200B') {
+      n.parentNode.removeChild(n);
+    }
+    n = textNodes.nextNode();
+  }
+
+  return body;
+}
+
+/** If this lib is used on the server side, we need to bypass using the DOMParser - just put in a stub. */
+const parseHtml =
+  typeof window === 'undefined'
+    ? () => ({
+        childNodes: [],
+      })
+    : defaultParseHtml;
+
+const serializer = new TestSerializer({
+  defaultBlock: 'div',
+  rules: RULES,
+  parseHtml,
+});
+
+const _extends =
+  Object.assign ||
+  function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+export const htmlToValue = (html) => {
+  try {
+    return serializer.deserialize(html);
+  } catch (e) {
+    console.log("Couldn't parse html: ", e);
+    return {};
+  }
+};
+
+export const valueToHtml = (value) => serializer.serialize(value);
+
+/**
+ *
+ * <div><div>a</div></div> -> <div>a</div>
+ *
+ * <div><div>a</div><div>b</div></div> -> <div>a</div><div>b</div>
+ * <div><div>a</div>4444<div>b</div></div> -> <div>a</div>4444<div>b</div>
+ */

package/src/parse-html.js

@@ -0,0 +1,8 @@
+export const parseDegrees = (html) =>
+  html
+    // removes \(   use case: 50°
+    .replace(/\\[(]/g, '')
+    // removes \)   use case: 50°+m<1
+    .replace(/\\[)]/g, '')
+    // removes \degree  use case: 50°
+    .replace(/\\degree/g, '&deg;');

package/src/serialization.js

@@ -1,7 +1,10 @@
-import Html from 'slate-html-serializer';
+import React from 'react';
+import { jsx } from 'slate-hyperscript';
 import { object as toStyleObject } from 'to-style';
 import debug from 'debug';
 
+import Html from './test-serializer';
+
 const log = debug('@pie-lib:mask-markup:serialization');
 
 const INLINE = ['span'];
@@ -105,13 +108,13 @@ export const MARK_TAGS = {
 const marks = {
   deserialize(el, next) {
     const mark = MARK_TAGS[el.tagName.toLowerCase()];
-    if (!mark) return;
+
+    if (!mark) {
+      return;
+    }
+
     log('[deserialize] mark: ', mark);
-    return {
-      object: 'mark',
-      type: mark,
-      nodes: next(el.childNodes),
-    };
+    return jsx('text', { type: mark }, next(el.childNodes));
   },
 };
 
@@ -127,10 +130,7 @@ const rules = [
       }
 
       if (el.nodeType === TEXT_NODE) {
-        return {
-          object: 'text',
-          leaves: [{ text: el.textContent }],
-        };
+        return jsx('text', el.textContent);
       }
 
       const type = el.tagName.toLowerCase();
@@ -142,21 +142,33 @@ const rules = [
       }
 
       const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });
-      const object = getObject(type);
 
       if (el.tagName.toLowerCase() === 'math') {
-        return {
-          isMath: true,
-          nodes: [el],
-        };
+        return jsx('element', {
+          type: 'mathml',
+          data: {
+            html: el.innerHTML,
+          },
+        });
+
+        // return {
+        //   isMath: true,
+        //   nodes: [el]
+        // };
+      }
+
+      if (el.tagName.toLowerCase() === 'br') {
+        return jsx('element', { type, data: {} });
       }
 
-      return {
-        object,
-        type,
-        data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },
-        nodes: next(el.childNodes),
-      };
+      return jsx(
+        'element',
+        {
+          type,
+          data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },
+        },
+        next(el.childNodes),
+      );
     },
   },
 ];

package/src/test-serializer.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import ReactServer from 'react-dom/server';
+import escapeHtml from 'escape-html';
+import { Text } from 'slate';
+import { jsx } from 'slate-hyperscript';
+
+function allWhitespace(node) {
+  // Use ECMA-262 Edition 3 String and RegExp features
+  return !/[^\t\n\r ]/.test(node.textContent);
+}
+
+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.',
+    );
+  }
+
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+
+  const { body } = parsed;
+  const textNodes = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, null);
+  let n = textNodes.nextNode();
+
+  while (n) {
+    if (allWhitespace(n) || n.nodeValue === '\u200B') {
+      n.parentNode.removeChild(n);
+    }
+    n = textNodes.nextNode();
+  }
+
+  return body;
+}
+
+class Html {
+  constructor(props) {
+    this.defaultBlock = props.defaultBlock;
+    this.parseHtml = defaultParseHtml;
+    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(`<span>${html}</span>`);
+    }
+
+    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/with-mask.jsx

@@ -7,7 +7,7 @@ import { deserialize } from './serialization';
 export const buildLayoutFromMarkup = (markup, type) => {
   const { markup: processed } = componentize(markup, type);
   const value = deserialize(processed);
-  return value.document;
+  return value;
 };
 
 export const withMask = (type, renderChildren) => {

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.