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

package/src/mask.jsx

@@ -1,16 +1,15 @@
 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';
 
-const Paragraph = withStyles(theme => ({
+const Paragraph = withStyles((theme) => ({
   para: {
     paddingTop: 2 * theme.spacing.unit,
-    paddingBottom: 2 * theme.spacing.unit
-  }
-}))(props => <div className={props.classes.para}>{props.children}</div>);
+    paddingBottom: 2 * theme.spacing.unit,
+  },
+}))((props) => <div className={props.classes.para}>{props.children}</div>);
 
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
@@ -25,7 +24,7 @@ const addText = (parentNode, text) => {
   }
 };
 
-const getMark = n => {
+const getMark = (n) => {
   const markTags = Object.values(MARK_TAGS);
 
   return markTags.includes(n.type);
@@ -43,7 +42,7 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
 
     if (n.isMath) {
       children.push(
-        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />
+        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />,
       );
       return children;
     }
@@ -67,7 +66,7 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
           if (MARK_TAGS[markKey] === mark.type) {
             const Tag = markKey;
 
-            children.push(<Tag>{content}</Tag>);
+            children.push(<Tag key={key}>{content}</Tag>);
             break;
           }
         }
@@ -80,11 +79,11 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
         const Tag = n.type;
-        if (n.children && n.children.length > 0) {
+        if (Tag !== 'source' && n.children && n.children.length > 0) {
           children.push(
             <Tag key={key} {...n.data.attributes}>
               {subNodes}
-            </Tag>
+            </Tag>,
           );
         } else {
           children.push(<Tag key={key} {...n.data.attributes} />);
@@ -97,9 +96,9 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
 
 const MaskContainer = withStyles(() => ({
   main: {
-    display: 'initial'
-  }
-}))(props => <div className={props.classes.main}>{props.children}</div>);
+    display: 'initial',
+  },
+}))((props) => <div className={props.classes.main}>{props.children}</div>);
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
@@ -109,7 +108,7 @@ export default class Mask extends React.Component {
     renderChildren: PropTypes.func,
     layout: PropTypes.object,
     value: PropTypes.object,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
   };
 
   handleChange = (id, value) => {

package/src/new-serialization.jsx

@@ -31,7 +31,7 @@ export const BLOCK_TAGS = {
   h3: 'heading-three',
   h4: 'heading-four',
   h5: 'heading-five',
-  h6: 'heading-six'
+  h6: 'heading-six',
 };
 
 /**
@@ -46,10 +46,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 = {};
@@ -59,18 +59,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') {
@@ -114,9 +114,9 @@ const blocks = {
         /**
          * Here for rendering styles for all block elements
          */
-        data: { attributes: attributes.reduce(attributesToMap(el), {}) }
+        data: { attributes: attributes.reduce(attributesToMap(el), {}) },
       },
-      next(el.childNodes)
+      next(el.childNodes),
     );
   },
   serialize: (object, children) => {
@@ -134,7 +134,7 @@ const blocks = {
         return <Tag {...jsonData.attributes}>{children}</Tag>;
       }
     }
-  }
+  },
 };
 
 const marks = {
@@ -156,10 +156,10 @@ const marks = {
         }
       }
     }*/
-  }
+  },
 };
 
-const findPreviousText = el => {
+const findPreviousText = (el) => {
   if (el.nodeName === '#text') {
     return el;
   }
@@ -198,7 +198,7 @@ export const TEXT_RULE = {
         return array;
       }, []);
     }
-  }
+  },
 };
 
 const RULES = [
@@ -210,7 +210,7 @@ const RULES = [
   responseAreaSerialization,
   TEXT_RULE,
   blocks,
-  marks
+  marks,
 ];
 
 function allWhitespace(node) {
@@ -221,7 +221,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.',
     );
   }
 
@@ -245,14 +245,14 @@ function defaultParseHtml(html) {
 const parseHtml =
   typeof window === 'undefined'
     ? () => ({
-        childNodes: []
+        childNodes: [],
       })
     : defaultParseHtml;
 
 const serializer = new TestSerializer({
   defaultBlock: 'div',
   rules: RULES,
-  parseHtml
+  parseHtml,
 });
 
 const _extends =
@@ -271,7 +271,7 @@ const _extends =
     return target;
   };
 
-export const htmlToValue = html => {
+export const htmlToValue = (html) => {
   try {
     return serializer.deserialize(html);
   } catch (e) {
@@ -280,7 +280,7 @@ export const htmlToValue = html => {
   }
 };
 
-export const valueToHtml = value => serializer.serialize(value);
+export const valueToHtml = (value) => serializer.serialize(value);
 
 /**
  *

package/src/parse-html.js

@@ -1,4 +1,4 @@
-export const parseDegrees = html =>
+export const parseDegrees = (html) =>
   html
     // removes \(   use case: 50°
     .replace(/\\[(]/g, '')

package/src/serialization.js

@@ -12,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;
   }
@@ -29,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)) {
@@ -38,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 = {};
@@ -48,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);
@@ -64,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;
   }
@@ -102,7 +102,7 @@ export const MARK_TAGS = {
   u: 'underline',
   s: 'strikethrough',
   code: 'code',
-  strong: 'strong'
+  strong: 'strong',
 };
 
 const marks = {
@@ -115,7 +115,7 @@ const marks = {
 
     log('[deserialize] mark: ', mark);
     return jsx('text', { type: mark }, next(el.childNodes));
-  }
+  },
 };
 
 const rules = [
@@ -136,14 +136,19 @@ const rules = [
       const type = el.tagName.toLowerCase();
 
       const normalAttrs = attr(el) || {};
+
+      if (type == 'audio' && normalAttrs.controls == '') {
+        normalAttrs.controls = true;
+      }
+
       const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });
 
       if (el.tagName.toLowerCase() === 'math') {
         return jsx('element', {
           type: 'mathml',
           data: {
-            html: el.innerHTML
-          }
+            html: el.innerHTML,
+          },
         });
 
         // return {
@@ -160,12 +165,12 @@ const rules = [
         'element',
         {
           type,
-          data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } }
+          data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },
         },
-        next(el.childNodes)
+        next(el.childNodes),
       );
-    }
-  }
+    },
+  },
 ];
 
 /**
@@ -174,4 +179,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

@@ -12,7 +12,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.',
     );
   }
 
@@ -39,7 +39,7 @@ class Html {
     this.rules = props.rules;
   }
 
-  serializeEls = node => {
+  serializeEls = (node) => {
     if (Text.isText(node)) {
       let string = escapeHtml(node.text);
       if (node.bold) {
@@ -48,7 +48,7 @@ class Html {
       return string;
     }
 
-    let children = (node.children || []).map(n => this.serializeEls(n));
+    let children = (node.children || []).map((n) => this.serializeEls(n));
 
     const correctRule = this.rules.reduce((res, rule) => {
       return res || rule.serialize(node, children);
@@ -74,18 +74,18 @@ class Html {
     }
   };
 
-  serialize = node => {
+  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 => {
+  deserialize = (html) => {
     let body = this.parseHtml(html);
 
     if (body.firstChild && body.firstChild.nodeType === Node.TEXT_NODE) {
-      body = this.parseHtml(`<p>${html}</p>`);
+      body = this.parseHtml(`<span>${html}</span>`);
     }
 
     return this.deserializeEls(body);
@@ -105,10 +105,10 @@ class Html {
       nodeAttributes.bold = true;
     }
 
-    const nextFn = nodes => {
+    const nextFn = (nodes) => {
       const childNodes = Array.from(nodes);
       const children = Array.from(childNodes)
-        .map(node => this.deserializeEls(node, nodeAttributes))
+        .map((node) => this.deserializeEls(node, nodeAttributes))
         .flat();
 
       if (children.length === 0) {
@@ -128,7 +128,7 @@ class Html {
 
     const childNodes = Array.from(element.childNodes);
     const children = Array.from(childNodes)
-      .map(node => this.deserializeEls(node, nodeAttributes))
+      .map((node) => this.deserializeEls(node, nodeAttributes))
       .flat();
 
     if (children.length === 0) {

package/src/with-mask.jsx

@@ -22,21 +22,14 @@ 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)} />;
     }
   };
 };