@pie-lib/mask-markup 1.13.12 → 2.0.0-beta.1

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,8 +1,10 @@
 import React from 'react';
-import Html from 'slate-html-serializer';
+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'];
@@ -10,7 +12,7 @@ const MARK = ['em', 'strong', 'u'];
 const TEXT_NODE = 3;
 const COMMENT_NODE = 8;
 
-const attr = (el) => {
+const attr = el => {
   if (!el.attributes || el.attributes.length <= 0) {
     return undefined;
   }
@@ -27,7 +29,7 @@ const attr = (el) => {
   return out;
 };
 
-const getObject = (type) => {
+const getObject = type => {
   if (INLINE.includes(type)) {
     return 'inline';
   } else if (MARK.includes(type)) {
@@ -36,7 +38,7 @@ const getObject = (type) => {
   return 'block';
 };
 
-export const parseStyleString = (s) => {
+export const parseStyleString = s => {
   const regex = /([\w-]*)\s*:\s*([^;]*)/g;
   let match;
   const result = {};
@@ -46,7 +48,7 @@ export const parseStyleString = (s) => {
   return result;
 };
 
-export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const handleStyles = (el, attribute) => {
   const styleString = el.getAttribute(attribute);
@@ -62,7 +64,7 @@ const handleClass = (el, acc, attribute) => {
   return classNames;
 };
 
-const attributesToMap = (el) => (acc, attribute) => {
+const attributesToMap = el => (acc, attribute) => {
   if (!el.getAttribute) {
     return acc;
   }
@@ -100,20 +102,20 @@ export const MARK_TAGS = {
   u: 'underline',
   s: 'strikethrough',
   code: 'code',
-  strong: 'strong',
+  strong: 'strong'
 };
 
 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));
+  }
 };
 
 const rules = [
@@ -128,38 +130,42 @@ const rules = [
       }
 
       if (el.nodeType === TEXT_NODE) {
-        return {
-          object: 'text',
-          leaves: [{ text: el.textContent }],
-        };
+        return jsx('text', el.textContent);
       }
 
       const type = el.tagName.toLowerCase();
 
       const normalAttrs = attr(el) || {};
-
-      if (type == 'audio' && normalAttrs.controls == '') {
-        normalAttrs.controls = true;
-      }
-
       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)
+      );
+    }
+  }
 ];
 
 /**
@@ -168,4 +174,4 @@ const rules = [
  */
 const html = new Html({ rules, defaultBlock: 'span' });
 
-export const deserialize = (s) => html.deserialize(s, { toJSON: true });
+export const deserialize = s => html.deserialize(s, { toJSON: true });

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(`<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/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) => {
@@ -22,14 +22,21 @@ export const withMask = (type, renderChildren) => {
        */
       layout: PropTypes.object,
       value: PropTypes.object,
-      onChange: PropTypes.func,
+      onChange: PropTypes.func
     };
 
     render() {
       const { markup, layout, value, onChange } = this.props;
 
       const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-      return <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;
+      return (
+        <Mask
+          layout={maskLayout}
+          value={value}
+          onChange={onChange}
+          renderChildren={renderChildren(this.props)}
+        />
+      );
     }
   };
 };

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.