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

package/src/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useSlate } from 'slate-react';
 import PropTypes from 'prop-types';
 import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
-import { htmlToValue, valueToHtml } from './serialization';
+import { htmlToValue, valueToHtml } from './new-serialization';
 import { parseDegrees } from './parse-html';
 import debug from 'debug';
-import { Range } from 'slate';
 
 const log = debug('@pie-lib:editable-html');
 /**
@@ -12,78 +12,51 @@ const log = debug('@pie-lib:editable-html');
  */
 export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
 
-/**
- * Wrapper around the editor that exposes a `markup` and `onChange(markup:string)` api.
- * Because of the mismatch between the markup and the `Value` we need to convert the incoming markup to a value and
- * compare it. TODO: This is an interim fix, we'll need to strip back `Editor` and look how best to maintain the
- * `markup` api whilst avoiding the serialization mismatch. We should be making better use of schemas w/ normalize.
- */
+const useConstructor = (callback = () => {}) => {
+  const [hasBeenCalled, setHasBeenCalled] = useState(false);
 
-const reduceMultipleBrs = (markup) => {
-  try {
-    return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
-  } catch (e) {
-    console.log("Couldn't remove <br/> tags: ", e);
+  if (hasBeenCalled) {
+    return;
   }
 
-  return markup;
+  callback();
+  setHasBeenCalled(true);
 };
 
-export default class EditableHtml extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    onDone: PropTypes.func,
-    markup: PropTypes.string.isRequired,
-    allowValidation: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    onDone: () => {},
-    allowValidation: false,
-  };
+const EditableHtml = props => {
+  const editorRef = useRef(null);
+  const rootRef = useRef(null);
+  const [value, setValue] = useState();
 
-  constructor(props) {
-    super(props);
+  useConstructor(() => {
     const v = htmlToValue(props.markup);
-    this.state = {
-      value: v,
-    };
-  }
-
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(props) {
-    if (!props.allowValidation && props.markup === this.props.markup) {
-      return;
-    }
-
-    const v = htmlToValue(reduceMultipleBrs(props.markup));
-    const current = htmlToValue(reduceMultipleBrs(this.props.markup));
-
-    if (v.equals && !v.equals(current)) {
-      this.setState({ value: v });
-    }
-  }
+    setValue(v);
+  });
 
-  onChange = (value, done) => {
+  const onChange = (value, done) => {
     const html = valueToHtml(value);
     const htmlParsed = parseDegrees(html);
 
     log('value as html: ', html);
 
-    if (html !== this.props.markup) {
-      this.props.onChange(htmlParsed);
+    if (html !== props.markup) {
+      props.onChange(htmlParsed);
     }
 
     if (done) {
-      this.props.onDone(htmlParsed);
+      props.onDone(htmlParsed);
     }
   };
 
-  focus = (position, node, select = false) => {
+  const focus = (position, node) => {
     if (this.editorRef) {
-      this.editorRef.change((c) => {
-        const lastText = node ? c.value.document.getNextText(node.key) : c.value.document.getLastText();
-        const editorDOM = document.querySelector(`[data-key="${this.editorRef.value.document.key}"]`);
+      this.editorRef.change(c => {
+        const lastText = node
+          ? c.value.document.getNextText(node.key)
+          : c.value.document.getLastText();
+        const editorDOM = document.querySelector(
+          `[data-key="${this.editorRef.value.document.key}"]`
+        );
 
         if (editorDOM !== document.activeElement) {
           document.activeElement.blur();
@@ -92,18 +65,10 @@ export default class EditableHtml extends React.Component {
         c.focus();
 
         if (position === 'end' && lastText) {
-          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(lastText.key, lastText.text?.length);
-          if (select) {
-            const range = Range.fromJSON({
-              anchorKey: lastText.key,
-              anchorOffset: 0,
-              focusKey: lastText.key,
-              focusOffset: lastText.text?.length,
-              isFocused: true,
-              isBackward: false,
-            });
-            c.select(range);
-          }
+          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(
+            lastText.key,
+            lastText.text?.length
+          );
         }
 
         if (position === 'beginning' && lastText) {
@@ -113,38 +78,49 @@ export default class EditableHtml extends React.Component {
     }
   };
 
-  finishEditing = () => {
+  const finishEditing = () => {
     if (this.editorRef) {
       this.editorRef.props.onEditingDone();
     }
   };
 
-  render() {
-    const { value } = this.state;
-    const { toolbarOpts, error } = this.props;
+  const { toolbarOpts, error } = props;
 
-    if (toolbarOpts) {
-      toolbarOpts.error = error;
-    }
-
-    const props = {
-      ...this.props,
-      markup: null,
-      value,
-      onChange: this.onChange,
-      focus: this.focus,
-    };
-
-    return (
-      <Editor
-        onRef={(ref) => {
-          if (ref) {
-            this.rootRef = ref;
-          }
-        }}
-        editorRef={(ref) => ref && (this.editorRef = ref)}
-        {...props}
-      />
-    );
+  if (toolbarOpts) {
+    toolbarOpts.error = error;
   }
-}
+
+  const newProps = {
+    ...props,
+    markup: null,
+    value,
+    onChange
+  };
+
+  return (
+    <Editor
+      {...newProps}
+      onRef={ref => {
+        if (ref) {
+          rootRef.current = ref;
+        }
+      }}
+      editorRef={ref => ref && (editorRef.current = ref)}
+    />
+  );
+};
+
+EditableHtml.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onDone: PropTypes.func,
+  onEditor: PropTypes.func,
+  markup: PropTypes.string.isRequired,
+  allowValidation: PropTypes.bool
+};
+
+EditableHtml.defaultProps = {
+  onDone: () => {},
+  allowValidation: false
+};
+
+export default EditableHtml;

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

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

package/src/plugins/characters/custom-popper.js

@@ -8,17 +8,17 @@ const styles = () => ({
     background: '#fff',
     padding: '10px',
     pointerEvents: 'none',
-    zIndex: 99999,
+    zIndex: 99999
   },
   paper: {
     padding: 20,
     height: 'auto',
-    width: 'auto',
+    width: 'auto'
   },
   typography: {
     fontSize: 50,
-    textAlign: 'center',
-  },
+    textAlign: 'center'
+  }
 });
 
 const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
@@ -27,15 +27,15 @@ const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
     open
     className={classes.popover}
     classes={{
-      paper: classes.paper,
+      paper: classes.paper
     }}
     anchorOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'left'
     }}
     transformOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'left'
     }}
     disableRestoreFocus
     disableAutoFocus