@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/src/plugins/math/index.jsx

@@ -1,15 +1,14 @@
-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, mmlToLatex, renderMath } 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 '../../new-serialization';
+import { BLOCK_TAGS } from '../../serialization';
+import isEqual from 'lodash/isEqual';
 const log = debug('@pie-lib:editable-html:plugins:math');
 
 const TEXT_NODE = 3;
@@ -26,35 +25,43 @@ function generateAdditionalKeys(keyData = []) {
 // eslint-disable-next-line react/display-name
 export const CustomToolbarComp = React.memo(
   (props) => {
-    const { node, nodePath, onFocus, onBlur, onClick, editor } = props;
+    const { node, value, onFocus, onBlur, onClick } = props;
     const { pluginProps } = props || {};
     const { math } = pluginProps || {};
     const { keypadMode, customKeys, controlledKeypadMode = true } = math || {};
 
     const onDone = (latex) => {
       const update = {
-        ...node.data,
+        ...node.data.toObject(),
         latex,
       };
-      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 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 latex = node.data.latex;
+    const onChange = (latex) => {
+      const update = {
+        ...node.data.toObject(),
+        latex,
+      };
+      const change = value.change().setNodeByKey(node.key, { data: update });
+      log('call onToolbarChange:', change);
+      props.onDataChange(node.key, update);
+    };
+
+    const latex = node.data.get('latex');
 
     return (
       <MathToolbar
         autoFocus
         additionalKeys={generateAdditionalKeys(customKeys)}
         latex={latex}
+        onChange={onChange}
         onDone={onDone}
         onBlur={onBlur}
         onFocus={onFocus}
@@ -73,33 +80,21 @@ export const CustomToolbarComp = React.memo(
     const keypadModeChanged = keypadMode !== keypadModeNext;
     const controlledKeypadModeChanged = controlledKeypadMode !== controlledKeypadModeNext;
 
-    const equal = isEqual(node, nodeNext);
+    const equal = node.equals(nodeNext);
     return equal && !keypadModeChanged && !controlledKeypadModeChanged;
   },
 );
 
 CustomToolbarComp.propTypes = {
-  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,
+  node: SlatePropTypes.node.isRequired,
+  value: SlatePropTypes.value,
   onToolbarDone: PropTypes.func,
+  onDataChange: PropTypes.func,
   onFocus: PropTypes.func,
   onClick: PropTypes.func,
   onBlur: PropTypes.func,
 };
 
-const mathTypes = ['math', 'mathml'];
-
 export default function MathPlugin(opts) {
   MathPlugin.mathMlOptions = {
     mmlOutput: opts.mmlOutput,
@@ -110,12 +105,13 @@ export default function MathPlugin(opts) {
     name: 'math',
     toolbar: {
       icon: <Functions />,
-      onClick: (editor) => {
+      onClick: (value, onChange) => {
         log('[insertMath]');
         const math = inlineMath();
-
-        editor.insertNode(math);
+        const change = value.change().insertInline(math);
+        onChange(change);
       },
+      supports: (node) => node && node.object === 'inline' && node.type === 'math',
       /**
        * Return a react component function
        * @param node {Slate.Node}
@@ -125,20 +121,6 @@ export default function MathPlugin(opts) {
        */
       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' }] },
     },
@@ -162,16 +144,9 @@ export default function MathPlugin(opts) {
        * Here for rendering mathml content
        */
       if (props.node.type === 'mathml') {
-        const {
-          data: { html },
-        } = props.node;
-
-        return (
-          <span>
-            <span {...props.attributes} contentEditable={false} dangerouslySetInnerHTML={{ __html: html }} />
-            {props.children}
-          </span>
-        );
+        const html = props.node.data.get('html');
+
+        return <span {...props.attributes} dangerouslySetInnerHTML={{ __html: html }} />;
       }
     },
   };
@@ -185,16 +160,18 @@ MathPlugin.mathMlOptions = {};
 
 MathPlugin.propTypes = {
   attributes: PropTypes.object,
-  node: PropTypes.node,
+  node: SlatePropTypes.node,
 };
 
-export const inlineMath = () => ({
-  type: 'math',
-  data: {
-    latex: '',
-  },
-  children: [{ text: '' }],
-});
+export const inlineMath = () =>
+  Inline.create({
+    object: 'inline',
+    type: 'math',
+    isVoid: true,
+    data: {
+      latex: '',
+    },
+  });
 
 const htmlDecode = (input) => {
   const doc = new DOMParser().parseFromString(input, 'text/html');
@@ -237,7 +214,7 @@ const lessThanHandling = (input) => {
 };
 
 export const serialization = {
-  deserialize(el, children) {
+  deserialize(el) {
     const tagName = getTagName(el);
     /**
      * This is used for when there's a wrapper over the mathml element.
@@ -260,21 +237,26 @@ export const serialization = {
         const latex = htmlDecode(htmlToUse);
         const { unwrapped, wrapType } = unWrapMath(latex);
 
-        return jsx('element', {
+        return {
+          object: 'inline',
           type: 'math',
+          isVoid: true,
+          nodes: [],
           data: {
             latex: unwrapped,
             wrapper: wrapType,
           },
-        });
+        };
       }
 
-      return jsx('element', {
+      return {
+        object: 'inline',
+        isVoid: true,
         type: 'mathml',
         data: {
           html: newHtml,
         },
-      });
+      };
     }
 
     if (el.nodeType === TEXT_NODE) {
@@ -291,28 +273,31 @@ export const serialization = {
       const latex = htmlDecode(el.innerHTML);
       const { unwrapped, wrapType } = unWrapMath(latex);
       log('[deserialize]: noBrackets: ', unwrapped, wrapType);
-
-      return jsx('element', {
+      return {
+        object: 'inline',
         type: 'math',
+        isVoid: true,
+        nodes: [],
         data: {
           latex: unwrapped,
           wrapper: wrapType,
         },
-      });
+      };
     }
   },
   serialize(object) {
     if (object.type === 'math') {
-      const { latex, wrapper } = object.data || {};
-      log('[serialize] latex: ', latex);
-      const decoded = htmlDecode(lessThanHandling(latex));
+      const l = object.data.get('latex');
+      const wrapper = object.data.get('wrapper');
+      log('[serialize] latex: ', l);
+      const decoded = htmlDecode(lessThanHandling(l));
 
       if (MathPlugin.mathMlOptions.mmlOutput) {
         const res = renderMath(`<span data-latex="" data-raw="${decoded}">${wrapMath(decoded, wrapper)}</span>`);
         const newLatex = mmlToLatex(res);
 
         // we need to remove all the spaces from the latex to be able to compare it
-        const strippedL = latex.replace(/\s/g, '');
+        const strippedL = l.replace(/\s/g, '');
         const strippedNewL = newLatex.replace(/\s/g, '');
 
         // we check if the latex keeps his form after being converted to mathml and back to latex
@@ -321,16 +306,8 @@ export const serialization = {
           return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: res }} />;
         } else {
           // if it doesn't we keep the latex version
-          console.log(
-            'This latex can not be safely converted to mathml:',
-            latex,
-            'so we will keep the latex version!!!',
-          );
-          console.warn(
-            'This latex can not be safely converted to mathml:',
-            latex,
-            'so we will keep the latex version!!!',
-          );
+          console.log('This latex can not be safely converted to mathml:', l, 'so we will keep the latex version!!!');
+          console.warn('This latex can not be safely converted to mathml:', l, 'so we will keep the latex version!!!');
         }
       }
 
@@ -345,7 +322,7 @@ export const serialization = {
      * Here for rendering mathml content
      */
     if (object.type === 'mathml') {
-      const { html } = object.data || {};
+      const html = object.data.get('html');
 
       return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: html }} />;
     }

package/src/plugins/media/index.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Node as SlateNode, Transforms } from 'slate';
-import { jsx } from 'slate-hyperscript';
-import { ReactEditor } from 'slate-react';
+import { Inline } from 'slate';
 import TheatersIcon from '@material-ui/icons/Theaters';
 import VolumeUpIcon from '@material-ui/icons/VolumeUp';
-import omit from 'lodash/omit';
-
 import debug from 'debug';
+
 import MediaDialog from './media-dialog';
 import MediaToolbar from './media-toolbar';
 import MediaWrapper from './media-wrapper';
@@ -52,41 +49,17 @@ export const insertDialog = (props) => {
   document.body.appendChild(newEl);
 };
 
-const getNodeBy = (editor, callback) => {
-  const descendants = SlateNode.descendants(editor, {
-    reverse: true,
-  });
-
-  for (const [descendant, descendantPath] of descendants) {
-    if (callback(descendant, descendantPath)) {
-      return [descendant, descendantPath];
-    }
-  }
-};
-
-const moveFocusAfterMedia = (editor, node) => {
-  if (!editor || !node) {
-    return;
-  }
-
-  setTimeout(() => {
-    ReactEditor.focus(editor);
-    Transforms.move(editor, { distance: 1, unit: 'offset' });
-  }, 0);
-};
-
 const types = ['audio', 'video'];
 
 export default function MediaPlugin(type, opts) {
   const toolbar = {
     icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,
-    onClick: (editor) => {
+    onClick: (value, onChange) => {
       log('[toolbar] onClick');
-      const inline = {
+      const inline = Inline.create({
         type: type,
         isVoid: true,
         data: {
-          newMedia: true,
           editing: false,
           ends: undefined,
           height: undefined,
@@ -96,164 +69,154 @@ export default function MediaPlugin(type, opts) {
           url: undefined,
           width: undefined,
         },
-        children: [{ text: '' }],
-      };
-
-      editor.insertNode(inline);
+      });
 
+      const change = value.change().insertInline(inline);
+      onChange(change);
       insertDialog({
         type,
         opts,
         callback: (val, data) => {
-          const nodePath = ReactEditor.findPath(editor, inline);
+          const nodeIsThere = change.value.document.findDescendant((d) => d.key === inline.key);
 
-          if (inline) {
+          if (nodeIsThere) {
             if (!val) {
-              editor.apply({
-                type: 'remove_node',
-                path: nodePath,
-              });
+              const c = change.removeNodeByKey(inline.key);
+              onChange(c, () => opts.focus());
             } else {
-              editor.apply({
-                type: 'set_node',
-                path: nodePath,
-                properties: {
-                  data: inline.data,
-                },
-                newProperties: {
-                  data: {
-                    ...data,
-                    newMedia: false,
-                  },
-                },
-              });
+              const c = change.setNodeByKey(inline.key, { data });
+              onChange(c, () => opts.focus('beginning', nodeIsThere));
             }
+          } else {
+            opts.focus();
           }
-
-          moveFocusAfterMedia(editor, inline);
         },
       });
     },
+    supports: (node) => node.object === 'inline' && node.type === type,
   };
 
   return {
     name: type,
     toolbar,
-    rules: (editor) => {
-      const { isVoid, isInline } = editor;
-
-      editor.isVoid = (element) => {
-        return ['audio', 'video'].includes(element.type) ? true : isVoid(element);
-      };
+    deleteNode: (e, node, value, onChange) => {
+      e.preventDefault();
+      const change = value.change().removeNodeByKey(node.key);
 
-      editor.isInline = (element) => {
-        return ['audio', 'video'].includes(element.type) ? true : isInline(element);
-      };
-
-      return editor;
+      onChange(change);
     },
-    supports: (node) => node.type === type,
     renderNode(props) {
       if (props.node.type === type) {
-        const { node, editor } = props;
+        const { node, key } = props;
         const { data } = node;
-        const { src, height, width, editing, tag, ...rest } = omit(data, ['newMedia', 'urlToUse']);
-        const attributes = { ...rest, ...props.attributes };
-        const handleEdit = (event) => {
-          const nodeToEdit = ReactEditor.toSlateNode(editor, event.target);
-          const nodePath = ReactEditor.findPath(editor, nodeToEdit);
-
-          editor.apply({
-            type: 'set_node',
-            path: nodePath,
-            properties: {
-              data: node.data,
-            },
-            newProperties: {
-              data: {
-                ...data,
-                editing: true,
-              },
+        const jsonData = data.toJSON();
+        const { src, height, width, editing, tag, ...rest } = jsonData;
+        const handleEdit = () => {
+          const change = opts.createChange();
+          const c = change.setNodeByKey(key, {
+            data: {
+              ...jsonData,
+              editing: true,
             },
           });
 
-          insertDialog({
-            ...data,
-            edit: true,
-            type,
-            opts,
-            callback: (val, data) => {
-              const nodePath = ReactEditor.findPath(editor, nodeToEdit);
-
-              if (nodePath && val) {
-                editor.apply({
-                  type: 'set_node',
-                  path: nodePath,
-                  properties: {
-                    data: node.data,
-                  },
-                  newProperties: {
-                    data: {
-                      ...data,
-                      editing: true,
-                    },
-                  },
-                });
-              }
-            },
+          opts.onChange(c, () => {
+            insertDialog({
+              ...jsonData,
+              edit: true,
+              type,
+              opts,
+              callback: (val, data) => {
+                const { key } = node;
+
+                const nodeIsThere = change.value.document.findDescendant(
+                  (d) => d.type === type && d.data.get('editing'),
+                );
+
+                if (nodeIsThere && val) {
+                  const c = change.setNodeByKey(key, { data, editing: false });
+                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));
+                } else {
+                  opts.focus();
+                }
+              },
+            });
           });
         };
-        const handleDelete = (event) => {
-          const nodeToEdit = ReactEditor.toSlateNode(editor, event.target);
-          const nodePath = ReactEditor.findPath(editor, nodeToEdit);
+        const handleDelete = () => {
+          const change = opts.createChange();
+          const c = change.removeNodeByKey(node.key);
 
-          editor.apply({
-            type: 'remove_node',
-            path: nodePath,
-          });
+          opts.onChange(c);
         };
-        const computedProps = {};
+        const style = {};
 
         if (width) {
-          computedProps.width = `${width}px`;
+          style.width = `${width}px`;
         }
 
         if (height) {
-          computedProps.height = `${height}px`;
+          style.height = `${height}px`;
         }
 
-        computedProps.editing = editing ? 1 : 0;
-
         if (tag === 'audio') {
           return (
-            <MediaWrapper data-type={type} width={computedProps.width} attributes={attributes}>
+            <MediaWrapper editor data-type={type} width={style.width} {...rest}>
               <audio controls="controls">
                 <source type="audio/mp3" src={src} />
               </audio>
               <MediaToolbar hideEdit onRemove={handleDelete} />
-              {props.children}
             </MediaWrapper>
           );
         }
 
         return (
-          <MediaWrapper data-type={type} width={computedProps.width} attributes={attributes}>
-            <div contentEditable={false}>
-              <iframe
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                src={src}
-                {...rest}
-                {...computedProps}
-              />
-              <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />
-            </div>
-            {props.children}
+          <MediaWrapper editor data-type={type} width={style.width} {...rest}>
+            <iframe
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              src={src}
+              editing={editing ? 1 : 0}
+              {...rest}
+              {...style}
+            />
+            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />
           </MediaWrapper>
         );
       }
     },
+    normalizeNode: (node) => {
+      const textNodeMap = {};
+      const updateNodesArray = [];
+      let index = 0;
+
+      if (node.object !== 'document') return;
+
+      node.findDescendant((d) => {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        const isMedia = types.indexOf(d.type) >= 0;
+
+        if (isMedia) {
+          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
+            updateNodesArray.push(textNodeMap[index - 1]);
+          }
+        }
+
+        index++;
+      });
+
+      if (!updateNodesArray.length) return;
+
+      return (change) => {
+        change.withoutNormalization(() => {
+          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
+        });
+      };
+    },
   };
 }
 
@@ -280,8 +243,10 @@ export const serialization = {
     const width = parseInt(el.getAttribute('width'), 10) || null;
     const height = parseInt(el.getAttribute('height'), 10) || null;
 
-    const out = jsx('element', {
-      type,
+    const out = {
+      object: 'inline',
+      type: type,
+      isVoid: true,
       data: {
         tag,
         src: src || el.getAttribute('src'),
@@ -293,21 +258,27 @@ export const serialization = {
         width,
         url,
       },
-    });
-
+    };
     log('return object: ', out);
     return out;
   },
-  serialize(object) {
+  serialize(object /*, children*/) {
     const typeIndex = types.indexOf(object.type);
 
-    if (typeIndex < 0) {
-      return;
-    }
+    if (typeIndex < 0) return;
 
     const type = types[typeIndex];
 
-    const { editing, tag, ends, src, starts, title, width, height, url } = object.data || {};
+    const { data } = object;
+    const editing = data.get('editing');
+    const tag = data.get('tag');
+    const ends = data.get('ends');
+    const src = data.get('src');
+    const starts = data.get('starts');
+    const title = data.get('title');
+    const width = data.get('width');
+    const height = data.get('height');
+    const url = data.get('url');
     const style = {};
 
     if (width) {