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

package/src/plugins/list/index.jsx

@@ -1,37 +1,53 @@
 import React from 'react';
-import { Data } from 'slate';
-import Immutable from 'immutable';
 import PropTypes from 'prop-types';
-import EditList from 'slate-edit-list';
 import debug from 'debug';
+import { Editor, Element as SlateElement, Transforms } from 'slate';
+import { jsx } from "slate-hyperscript";
 
 const log = debug('@pie-lib:editable-html:plugins:list');
 
 const b = (type, next, childNodes) => ({
   object: 'block',
   type,
-  nodes: next(childNodes),
+  nodes: next(childNodes)
 });
 
 export const serialization = {
   deserialize(el, next) {
     const name = el.tagName.toLowerCase();
+    const children = el.children.length ? Array.from(el.children) : el.childNodes;
 
     if (name === 'li') {
-      return b('list_item', next, el.childNodes);
+      return jsx(
+        'element',
+        {
+          type: 'li'
+        },
+        next(children)
+      );
     }
 
     if (name === 'ul') {
-      return b('ul_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+      return jsx(
+        'element',
+        {
+          type: 'ul'
+        },
+        next(children)
+      );
     }
 
     if (name === 'ol') {
-      return b('ol_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+      return jsx(
+        'element',
+        {
+          type: 'ol'
+        },
+        next(children)
+      );
     }
   },
   serialize(object, children) {
-    if (object.object !== 'block') return;
-
     if (object.type === 'list_item') {
       return <li>{children}</li>;
     }
@@ -43,92 +59,65 @@ export const serialization = {
     if (object.type === 'ol_list') {
       return <ol>{children}</ol>;
     }
-  },
+  }
 };
 
-const createEditList = () => {
-  const core = EditList({
-    typeDefault: 'span',
-  });
-
-  // fix outdated schema
-  if (core.schema && core.schema.blocks) {
-    Object.keys(core.schema.blocks).forEach((key) => {
-      const block = core.schema.blocks[key];
+const isBlockActive = (editor, format) => {
+  const { selection } = editor;
+  if (!selection) return false;
 
-      if (block.parent) {
-        return;
-      }
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: node => !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === format
+    })
+  );
 
-      block.nodes[0] = { type: block.nodes[0].types[0] };
-    });
-  }
-
-  /**
-   * This override of the core.changes.wrapInList is needed because the version
-   * of immutable that we have does not support getting the element at a specific
-   * index with a square bracket (list[0]). We have to use the list.get function instead
-   */
-
-  /**
-   * Returns the highest list of blocks that cover the current selection
-   */
-  const getHighestSelectedBlocks = (value) => {
-    const range = value.selection;
-    const document = value.document;
+  return !!match;
+};
 
-    const startBlock = document.getClosestBlock(range.startKey);
-    const endBlock = document.getClosestBlock(range.endKey);
+const createEditList = () => {
+  const core = {
+    changes: {}
+  };
 
-    if (startBlock === endBlock) {
-      return Immutable.List([startBlock]);
-    }
+  core.changes.wrapInList = (editor, format) => {
+    const isActive = isBlockActive(editor, format);
+    const isList = LIST_TYPES.includes(format);
 
-    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
-    const startPath = ancestor.getPath(startBlock.key);
-    const endPath = ancestor.getPath(endBlock.key);
+    Transforms.unwrapNodes(editor, {
+      match: n =>
+        !Editor.isEditor(n) &&
+        SlateElement.isElement(n) &&
+        LIST_TYPES.includes(n.type),
+      split: true
+    });
 
-    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
-  };
+    const newProperties = {
+      type: isActive ? 'paragraph' : isList ? 'list_item' : format
+    };
 
-  /**
-   * Wrap the blocks in the current selection in a new list. Selected
-   * lists are merged together.
-   */
-  core.changes.wrapInList = function(change, type, data) {
-    const selectedBlocks = getHighestSelectedBlocks(change.value);
-
-    // Wrap in container
-    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
-
-    // Wrap in list items
-    selectedBlocks.forEach(function(node) {
-      if (core.utils.isList(node)) {
-        // Merge its items with the created list
-        node.nodes.forEach(function(_ref) {
-          const key = _ref.key;
-          return change.unwrapNodeByKey(key, { normalize: false });
-        });
-      } else if (node.type !== 'list_item') {
-        change.wrapBlockByKey(node.key, 'list_item', {
-          normalize: false,
-        });
-      }
-    });
+    Transforms.setNodes(editor, newProperties);
 
-    return change.normalize();
+    if (!isActive && isList) {
+      const block = { type: format, children: [] };
+      Transforms.wrapNodes(editor, block);
+    }
   };
 
   return core;
 };
 
-export default (options) => {
+const LIST_TYPES = ['ol_list', 'ul_list', 'list_item'];
+
+export default options => {
   const { type, icon } = options;
 
   const core = createEditList();
 
-  // eslint-disable-next-line react/display-name
-  core.renderNode = (props) => {
+  core.supports = node => LIST_TYPES.includes(node.type);
+
+  core.renderNode = props => {
     const { node, attributes, children } = props;
 
     switch (node.type) {
@@ -145,30 +134,16 @@ export default (options) => {
     isMark: false,
     type,
     icon,
-    isActive: (value, type) => {
-      if (!core.utils.isSelectionInList(value)) {
-        return false;
-      }
-      const current = core.utils.getCurrentList(value);
-      return current ? current.type === type : false;
-    },
-    onClick: (value, onChange) => {
-      log('[onClick]', value);
-      const inList = core.utils.isSelectionInList(value);
-      if (inList) {
-        const change = value.change().call(core.changes.unwrapList);
-        onChange(change);
-      } else {
-        const change = value.change().call(core.changes.wrapInList, type);
-        onChange(change);
-      }
-    },
+    isActive: isBlockActive,
+    onClick: editor => {
+      core.changes.wrapInList(editor, type);
+    }
   };
 
   core.renderNode.propTypes = {
     node: PropTypes.object,
     attributes: PropTypes.object,
-    children: PropTypes.func,
+    children: PropTypes.func
   };
 
   return core;

package/src/plugins/math/index.jsx

@@ -1,65 +1,59 @@
+import React from 'react';
+import { Editor, Inline, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { jsx } from 'slate-hyperscript';
 import Functions from '@material-ui/icons/Functions';
-import { Inline } from 'slate';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
 import { wrapMath, unWrapMath } from '@pie-lib/math-rendering';
-import React from 'react';
 import debug from 'debug';
-import SlatePropTypes from 'slate-prop-types';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 
-import { BLOCK_TAGS } from '../../serialization';
+import { BLOCK_TAGS } from '../../new-serialization';
 const log = debug('@pie-lib:editable-html:plugins:math');
 
 const TEXT_NODE = 3;
 
 function generateAdditionalKeys(keyData = []) {
-  return keyData.map((key) => ({
+  return keyData.map(key => ({
     name: key,
     latex: key,
     write: key,
-    label: key,
+    label: key
   }));
 }
 
 export const CustomToolbarComp = React.memo(
-  (props) => {
-    const { node, value, onFocus, onBlur, onClick } = props;
+  props => {
+    const { node, onFocus, onBlur, onClick, editor, nodePath } = props;
     const { pluginProps } = props || {};
     const { math } = pluginProps || {};
     const { keypadMode, customKeys, controlledKeypadMode = true } = math || {};
 
-    const onDone = (latex) => {
-      const update = {
-        ...node.data.toObject(),
-        latex,
-      };
-      const change = value.change().setNodeByKey(node.key, { data: update });
-
-      const nextText = value.document.getNextText(node.key);
-
-      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-
-      props.onToolbarDone(change, false);
-    };
-
-    const onChange = (latex) => {
+    const onDone = latex => {
       const update = {
-        ...node.data.toObject(),
-        latex,
+        ...node.data,
+        latex
       };
-      const change = value.change().setNodeByKey(node.key, { data: update });
-      log('call onToolbarChange:', change);
-      props.onDataChange(node.key, update);
+      editor.apply({
+        type: 'set_node',
+        path: nodePath,
+        properties: {
+          data: node.data
+        },
+        newProperties: { data: update }
+      });
+      ReactEditor.focus(editor);
+      Transforms.move(editor, { distance: 1, unit: 'offset' });
     };
 
-    const latex = node.data.get('latex');
+    const latex = node.data.latex;
 
     return (
       <MathToolbar
         autoFocus
         additionalKeys={generateAdditionalKeys(customKeys)}
         latex={latex}
-        onChange={onChange}
         onDone={onDone}
         onBlur={onBlur}
         onFocus={onFocus}
@@ -73,38 +67,51 @@ export const CustomToolbarComp = React.memo(
     const { node, pluginProps: { math: { keypadMode, controlledKeypadMode } = {} } = {} } = prev;
     const {
       node: nodeNext,
-      pluginProps: { math: { keypadMode: keypadModeNext, controlledKeypadMode: controlledKeypadModeNext } = {} } = {},
+      pluginProps: {
+        math: { keypadMode: keypadModeNext, controlledKeypadMode: controlledKeypadModeNext } = {}
+      } = {}
     } = next;
     const keypadModeChanged = keypadMode !== keypadModeNext;
     const controlledKeypadModeChanged = controlledKeypadMode !== controlledKeypadModeNext;
 
-    const equal = node.equals(nodeNext);
+    const equal = isEqual(node, nodeNext);
     return equal && !keypadModeChanged && !controlledKeypadModeChanged;
-  },
+  }
 );
 
 CustomToolbarComp.propTypes = {
-  node: SlatePropTypes.node.isRequired,
-  value: SlatePropTypes.value,
+  editor: PropTypes.object,
+  node: PropTypes.shape({
+    type: PropTypes.string,
+    children: PropTypes.array,
+    data: PropTypes.object
+  }).isRequired,
+  value: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      children: PropTypes.array,
+      data: PropTypes.object
+    })
+  ).isRequired,
   onToolbarDone: PropTypes.func,
-  onDataChange: PropTypes.func,
   onFocus: PropTypes.func,
   onClick: PropTypes.func,
-  onBlur: PropTypes.func,
+  onBlur: PropTypes.func
 };
 
+const mathTypes = ['math', 'mathml'];
+
 export default function MathPlugin() {
   return {
     name: 'math',
     toolbar: {
       icon: <Functions />,
-      onClick: (value, onChange) => {
+      onClick: editor => {
         log('[insertMath]');
         const math = inlineMath();
-        const change = value.change().insertInline(math);
-        onChange(change);
+
+        editor.insertNode(math);
       },
-      supports: (node) => node && node.object === 'inline' && node.type === 'math',
       /**
        * Return a react component function
        * @param node {Slate.Node}
@@ -112,22 +119,36 @@ export default function MathPlugin() {
        * @param onDone {(change?: Slate.Change, finishEditing :boolea) => void} - a function to call once the toolbar
        *   has made any changes, call with the node.key and a data object.
        */
-      CustomToolbarComp,
+      CustomToolbarComp
+    },
+    rules: editor => {
+      const { isVoid, isInline } = editor;
+
+      editor.isVoid = element => {
+        return mathTypes.includes(element.type) ? true : isVoid(element);
+      };
+
+      editor.isInline = element => {
+        return mathTypes.includes(element.type) ? true : isInline(element);
+      };
+
+      return editor;
     },
+    supports: node => mathTypes.includes(node.type),
     schema: {
-      document: { match: [{ type: 'math' }] },
+      document: { match: [{ type: 'math' }] }
     },
 
     pluginStyles: (node, parentNode, p) => {
       if (p) {
         return {
           position: 'absolute',
-          top: 'initial',
+          top: 'initial'
         };
       }
     },
 
-    renderNode: (props) => {
+    renderNode: props => {
       if (props.node.type === 'math') {
         log('[renderNode]: data:', props.node.data);
         return <MathPreview {...props} />;
@@ -137,11 +158,16 @@ export default function MathPlugin() {
        * Here for rendering mathml content
        */
       if (props.node.type === 'mathml') {
-        const html = props.node.data.get('html');
-
-        return <span {...props.attributes} dangerouslySetInnerHTML={{ __html: html }} />;
+        const { data: { html } } = props.node;
+
+        return (
+          <span>
+            <span {...props.attributes} contentEditable={false} dangerouslySetInnerHTML={{ __html: html }} />
+            {props.children}
+          </span>
+        );
       }
-    },
+    }
   };
 }
 
@@ -150,23 +176,21 @@ MathPlugin.SQUARE_BRACKETS = 'square_brackets';
 MathPlugin.DOLLAR = 'dollar';
 MathPlugin.DOUBLE_DOLLAR = 'double_dollar';
 
-export const inlineMath = () =>
-  Inline.create({
-    object: 'inline',
-    type: 'math',
-    isVoid: true,
-    data: {
-      latex: '',
-    },
-  });
+export const inlineMath = () => ({
+  type: 'math',
+  data: {
+    latex: ''
+  },
+  children: [{ text: '' }]
+});
 
-const htmlDecode = (input) => {
+const htmlDecode = input => {
   const doc = new DOMParser().parseFromString(input, 'text/html');
 
   return doc.documentElement.textContent;
 };
 
-const getTagName = (el) => {
+const getTagName = el => {
   return ((el && el.tagName) || '').toLowerCase();
 };
 
@@ -177,7 +201,7 @@ const getTagName = (el) => {
  * @param input
  * @returns {*}
  */
-const lessThanHandling = (input) => {
+const lessThanHandling = input => {
   const arrowSplit = input.split('<');
 
   // if we don't have at least 2 characters there's no point in checking
@@ -201,7 +225,7 @@ const lessThanHandling = (input) => {
 };
 
 export const serialization = {
-  deserialize(el) {
+  deserialize(el, children) {
     const tagName = getTagName(el);
     /**
      * This is used for when there's a wrapper over the mathml element.
@@ -210,7 +234,8 @@ export const serialization = {
      * an inline child and the block is of type block
      * This is for legacy content only since our math rendering is valid for the core slate rules
      */
-    const hasMathChild = BLOCK_TAGS[tagName] && el.childNodes.length === 1 && getTagName(el.firstChild) === 'math';
+    const hasMathChild =
+      BLOCK_TAGS[tagName] && el.childNodes.length === 1 && getTagName(el.firstChild) === 'math';
     log('[deserialize] name: ', tagName);
 
     /**
@@ -219,14 +244,12 @@ export const serialization = {
     if (tagName === 'math' || (el.dataset && el.dataset.type === 'mathml') || hasMathChild) {
       const newHtml = hasMathChild ? el.innerHTML : el.outerHTML;
 
-      return {
-        object: 'inline',
-        isVoid: true,
+      return jsx('element', {
         type: 'mathml',
         data: {
-          html: newHtml,
-        },
-      };
+          html: newHtml
+        }
+      });
     }
 
     if (el.nodeType === TEXT_NODE) {
@@ -243,24 +266,21 @@ export const serialization = {
       const latex = htmlDecode(el.innerHTML);
       const { unwrapped, wrapType } = unWrapMath(latex);
       log('[deserialize]: noBrackets: ', unwrapped, wrapType);
-      return {
-        object: 'inline',
+
+      return jsx('element', {
         type: 'math',
-        isVoid: true,
-        nodes: [],
         data: {
           latex: unwrapped,
-          wrapper: wrapType,
-        },
-      };
+          wrapper: wrapType
+        }
+      });
     }
   },
   serialize(object) {
     if (object.type === 'math') {
-      const l = object.data.get('latex');
-      const wrapper = object.data.get('wrapper');
-      log('[serialize] latex: ', l);
-      const decoded = htmlDecode(lessThanHandling(l));
+      const { latex, wrapper } = object.data || {};
+      log('[serialize] latex: ', latex);
+      const decoded = htmlDecode(lessThanHandling(latex));
       return (
         <span data-latex="" data-raw={decoded}>
           {wrapMath(decoded, wrapper)}
@@ -272,9 +292,9 @@ export const serialization = {
      * Here for rendering mathml content
      */
     if (object.type === 'mathml') {
-      const html = object.data.get('html');
+      const { html } = object.data || {};
 
       return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: html }} />;
     }
-  },
+  }
 };