@pie-lib/editable-html 10.0.0-beta.2 → 10.0.0-beta.3

package/src/plugins/image/index.jsx

@@ -1,27 +1,17 @@
 import React from 'react';
+import { jsx } from 'slate-hyperscript';
 import debug from 'debug';
 import get from 'lodash/get';
-import { Data, Editor, Inline, Node as SlateNode } from 'slate';
+import { Node as SlateNode, Editor } from 'slate';
 
 import Image from '@material-ui/icons/Image';
 import ImageComponent from './component';
 import ImageToolbar from './image-toolbar';
 import InsertImageHandler from './insert-image-handler';
+import { ReactEditor } from 'slate-react';
 
 const log = debug('@pie-lib:editable-html:plugins:image');
 
-const getNodeBy = (editor, callback) => {
-  const descendants = SlateNode.descendants(editor, {
-    reverse: true
-  });
-
-  for (const [descendant, descendantPath] of descendants) {
-    if (callback(descendant, descendantPath)) {
-      return [descendant, descendantPath];
-    }
-  }
-};
-
 export default function ImagePlugin(opts) {
   const toolbar = opts.insertImageRequested && {
     icon: <Image />,
@@ -39,25 +29,31 @@ export default function ImagePlugin(opts) {
 
       editor.insertNode(inline);
 
-      const [node, nodePath] = getNodeBy(
-        editor,
-        descendant => descendant.type === 'image' && get(descendant, 'data.newImage')
-      );
+      // get the element just inserted
+      const [node, nodePath] = Editor.node(editor, editor.selection);
 
       opts.insertImageRequested(() => new InsertImageHandler(node, nodePath, editor));
     },
-    customToolbar: (node, value, editor, onToolbarDone) => {
+    customToolbar: (node, nodePath, editor, onToolbarDone) => {
       const alignment = node.data.alignment;
       const alt = node.data.alt;
       const imageLoaded = node.data.loaded !== false;
       const onChange = newValues => {
         const update = {
-          ...node.data.toObject(),
+          ...node.data,
           ...newValues
         };
 
-        const change = value.change().setNodeByKey(node.key, { data: update });
-        onToolbarDone(change, false);
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data
+          },
+          newProperties: { data: update }
+        });
+
+        onToolbarDone(null, false);
       };
 
       const Tb = () => (
@@ -85,28 +81,58 @@ export default function ImagePlugin(opts) {
       return editor;
     },
     supports: node => node.type === 'image',
-    deleteNode: (e, node, value, onChange) => {
+    deleteNode: (e, node, nodePath, editor, onChange) => {
       e.preventDefault();
+
       if (opts.onDelete) {
-        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));
+        const update = {
+          ...node.data,
+          deleteStatus: 'pending'
+        };
 
-        let change = value.change().setNodeByKey(node.key, { data: update });
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data
+          },
+          newProperties: { data: update }
+        });
 
-        onChange(change);
-        opts.onDelete(node.data.get('src'), (err, v) => {
+        editor.selection = null;
+        onChange(editor);
+        opts.onDelete(node.data.src, (err) => {
           if (!err) {
-            change = v.change().removeNodeByKey(node.key);
+            editor.apply({
+              type: 'remove_node',
+              path: nodePath
+            });
           } else {
             log('[error]: ', err);
-            change = v
-              .change()
-              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
+            editor.apply({
+              type: 'set_node',
+              path: nodePath,
+              properties: {
+                data: node.data
+              },
+              newProperties: { data: { ...node.data, deleteStatus: 'failed' } }
+            });
           }
-          onChange(change);
+
+          editor.selection = null;
+          onChange(editor, () => {
+            setTimeout(() => ReactEditor.focus(editor), 50);
+          });
         });
       } else {
-        let change = value.change().removeNodeByKey(node.key);
-        onChange(change);
+        editor.selection = null;
+        editor.apply({
+          type: 'remove_node',
+          path: nodePath
+        });
+        onChange(editor, () => {
+          setTimeout(() => ReactEditor.focus(editor), 50);
+        });
       }
     },
     stopReset: value => {
@@ -114,7 +140,7 @@ export default function ImagePlugin(opts) {
         if (n.type !== 'image') {
           return;
         }
-        return n.data.get('loaded') === false;
+        return n.data.loaded === false;
       });
       /** don't reset if there is an image pending insertion */
       return imgPendingInsertion !== undefined && imgPendingInsertion !== null;
@@ -180,10 +206,8 @@ export const serialization = {
     const width = parseInt(style.width.replace('px', ''), 10) || null;
     const height = parseInt(style.height.replace('px', ''), 10) || null;
 
-    const out = {
-      object: 'inline',
+    const out = jsx('element', {
       type: 'image',
-      isVoid: true,
       data: {
         src: el.getAttribute('src'),
         width,
@@ -193,7 +217,7 @@ export const serialization = {
         alignment: el.getAttribute('alignment'),
         alt: el.getAttribute('alt')
       }
-    };
+    });
     log('return object: ', out);
     return out;
   },
@@ -201,14 +225,17 @@ export const serialization = {
     if (object.type !== 'image') return;
 
     const { data } = object;
-    const src = data.get('src');
-    const width = data.get('width');
-    const height = data.get('height');
-    const alignment = data.get('alignment');
-    const margin = data.get('margin');
-    const justifyContent = data.get('margin');
-    const alt = data.get('alt');
+    const {
+      alignment,
+      alt,
+      src,
+      height,
+      margin,
+      justifyContent,
+      width
+    } = data;
     const style = {};
+
     if (width) {
       style.width = `${width}px`;
     }

package/src/plugins/index.jsx

@@ -1,3 +1,4 @@
+import { Editor } from 'slate';
 import { withHistory } from 'slate-history';
 import { withReact } from 'slate-react';
 
@@ -85,6 +86,11 @@ export const buildPlugins = (activePlugins, opts) => {
 };
 
 export const withPlugins = (editor, activePlugins) => {
+  editor.continueNormalization = () => {
+    Editor.setNormalizing(editor, true);
+    Editor.normalize(editor, { force: true });
+  };
+
   activePlugins.forEach(plugin => {
     if (typeof plugin.rules === 'function') {
       plugin.rules(editor);

package/src/plugins/math/index.jsx

@@ -25,7 +25,7 @@ function generateAdditionalKeys(keyData = []) {
 
 export const CustomToolbarComp = React.memo(
   props => {
-    const { node, onFocus, onBlur, onClick, editor, nodePath } = props;
+    const { node, nodePath, onFocus, onBlur, onClick, editor } = props;
     const { pluginProps } = props || {};
     const { math } = pluginProps || {};
     const { keypadMode, customKeys, controlledKeypadMode = true } = math || {};

package/src/plugins/media/index.jsx

@@ -106,12 +106,9 @@ export default function MediaPlugin(type, opts) {
         type,
         opts,
         callback: (val, data) => {
-          const [node, nodePath] = getNodeBy(
-            editor,
-            descendant => descendant.type === type && get(descendant, 'data.newMedia')
-          );
+          const nodePath = ReactEditor.findPath(editor, inline);
 
-          if (node) {
+          if (inline) {
             if (!val) {
               editor.apply({
                 type: 'remove_node',
@@ -122,7 +119,7 @@ export default function MediaPlugin(type, opts) {
                 type: 'set_node',
                 path: nodePath,
                 properties: {
-                  data: node.data
+                  data: inline.data
                 },
                 newProperties: {
                   data: {
@@ -134,7 +131,7 @@ export default function MediaPlugin(type, opts) {
             }
           }
 
-          moveFocusAfterMedia(editor, node);
+          moveFocusAfterMedia(editor, inline);
         }
       });
     }
@@ -187,12 +184,9 @@ export default function MediaPlugin(type, opts) {
             type,
             opts,
             callback: (val, data) => {
-              const [nodeIsThere, nodePath] = getNodeBy(
-                editor,
-                descendant => descendant.type === type && get(descendant, 'data.editing')
-              );
+              const nodePath = ReactEditor.findPath(editor, nodeToEdit);
 
-              if (nodeIsThere && val) {
+              if (nodePath && val) {
                 editor.apply({
                   type: 'set_node',
                   path: nodePath,

package/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -9,7 +9,7 @@ export const onValueChange = (nodeProps, n, value) => {
   change.setNodeByKey(n.key, {
     data: {
       ...value,
-      index: n.data.get('index')
+      index: n.data.index
     }
   });
 
@@ -22,12 +22,12 @@ export const onRemoveResponse = (nodeProps, value) => {
   const val = nodeProps.editor.value;
   const change = val.change();
   const dragInTheBlank = val.document.findDescendant(
-    n => n.data && n.data.get('index') === value.index
+    n => n.data && n.data.index === value.index
   );
 
   change.setNodeByKey(dragInTheBlank.key, {
     data: {
-      index: dragInTheBlank.data.get('index')
+      index: dragInTheBlank.data.index
     }
   });
 

package/src/plugins/respArea/index.jsx

@@ -3,6 +3,8 @@ import { Node as SlateNode } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import debug from 'debug';
 
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
 import isUndefined from 'lodash/isUndefined';
 import InlineDropdown from './inline-dropdown';
 import DragInTheBlank from './drag-in-the-blank';
@@ -31,15 +33,15 @@ export default function ResponseAreaPlugin(opts) {
     onClick: editor => {
       log('[toolbar] onClick');
       const currentRespAreaList = [];
-      const descendants = SlateNode.descendants(editor, {
-        reverse: true
-      });
+      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(
+        ([d]) => d
+      );
 
-      for (const [descendant, descendantPath] of descendants) {
-        if (isOfCurrentType(descendant, descendantPath)) {
-          currentRespAreaList.push(descendant);
+      descendants.forEach(d => {
+        if (isOfCurrentType(d)) {
+          currentRespAreaList.push(d);
         }
-      }
+      });
 
       if (currentRespAreaList.length >= opts.maxResponseAreas) {
         return;
@@ -91,7 +93,7 @@ export default function ResponseAreaPlugin(opts) {
     name: 'response_area',
     toolbar,
     rules: editor => {
-      const { isVoid, isInline } = editor;
+      const { isVoid, isInline, onChange } = editor;
 
       editor.isVoid = element => {
         return elTypesArray.includes(element.type) ? true : isVoid(element);
@@ -101,6 +103,62 @@ export default function ResponseAreaPlugin(opts) {
         return elTypesArray.includes(element.type) ? true : isInline(element);
       };
 
+      let oldEditor = cloneDeep(editor);
+
+      editor.onChange = options => {
+        const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(
+          ([d]) => d
+        );
+        const type = opts.type.replace(/-/g, '_');
+
+        if (isUndefined(lastIndexMap[type])) {
+          lastIndexMap[type] = 0;
+
+          descendants.forEach(d => {
+            if (d.type === type) {
+              const newIndex = parseInt(d.data.index, 10);
+
+              if (newIndex > lastIndexMap[type]) {
+                lastIndexMap[type] = newIndex;
+              }
+            }
+          });
+        }
+
+        if (isEqual(editor, oldEditor)) {
+          return;
+        }
+
+        const oldDescendants = Array.from(SlateNode.descendants(oldEditor, { reverse: true })).map(
+          ([d]) => d
+        );
+        const currentRespAreaList = descendants.filter(isOfCurrentType);
+        const oldRespAreaList = oldDescendants.filter(isOfCurrentType);
+
+        toolbar.disabled = currentRespAreaList.length >= opts.maxResponseAreas;
+
+        const arrayToFilter =
+          oldRespAreaList.length > currentRespAreaList.length
+            ? oldRespAreaList
+            : currentRespAreaList;
+        const arrayToUseForFilter =
+          arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+
+        const elementsWithChangedStatus = arrayToFilter.filter(
+          d => !arrayToUseForFilter.find(e => e.data.index === d.data.index)
+        );
+
+        if (
+          elementsWithChangedStatus.length &&
+          oldRespAreaList.length > currentRespAreaList.length
+        ) {
+          opts.onHandleAreaChange(elementsWithChangedStatus);
+        }
+
+        oldEditor = cloneDeep(editor);
+        onChange(options);
+      };
+
       return editor;
     },
     filterPlugins: (node, plugins) => {
@@ -110,12 +168,15 @@ export default function ResponseAreaPlugin(opts) {
 
       return plugins.filter(p => p.name !== 'response_area');
     },
-    deleteNode: (e, node, value, onChange) => {
+    deleteNode: (e, node, nodePath, editor, onChange) => {
       e.preventDefault();
 
-      const change = value.change().removeNodeByKey(node.key);
+      editor.apply({
+        type: 'remove_node',
+        path: nodePath
+      });
 
-      onChange(change);
+      onChange(editor);
     },
     supports: node => elTypesArray.indexOf(node.type) >= 0,
     renderNode(props) {
@@ -166,49 +227,6 @@ export default function ResponseAreaPlugin(opts) {
         );
       }
     },
-    onChange(change, editor) {
-      const type = opts.type.replace(/-/g, '_');
-
-      if (isUndefined(lastIndexMap[type])) {
-        lastIndexMap[type] = 0;
-
-        change.value.document.forEachDescendant(d => {
-          if (d.type === type) {
-            const newIndex = parseInt(d.data.get('index'), 10);
-
-            if (newIndex > lastIndexMap[type]) {
-              lastIndexMap[type] = newIndex;
-            }
-          }
-        });
-      }
-
-      if (!editor.value) {
-        return;
-      }
-
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
-      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
-
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
-        toolbar.disabled = true;
-      } else {
-        toolbar.disabled = false;
-      }
-
-      const arrayToFilter =
-        oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
-      const arrayToUseForFilter =
-        arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
-
-      const elementsWithChangedStatus = arrayToFilter.filter(
-        d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index'))
-      );
-
-      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
-        opts.onHandleAreaChange(elementsWithChangedStatus);
-      }
-    },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');
       const inline = editor.value.document.findDescendant(d => d.key === closestEl.dataset.key);
@@ -254,18 +272,14 @@ export const serialization = {
     }
   },
   serialize(object) {
-    if (object.object !== 'inline') {
-      return;
-    }
-
     switch (object.type) {
       case 'inline_dropdown': {
-        const data = object.data.toJSON();
+        const data = object.data;
 
         return <span data-type="inline_dropdown" data-index={data.index} data-value={data.value} />;
       }
       case 'explicit_constructed_response': {
-        const data = object.data.toJSON();
+        const data = object.data;
 
         return (
           <span
@@ -276,7 +290,7 @@ export const serialization = {
         );
       }
       case 'drag_in_the_blank': {
-        const data = object.data.toJSON();
+        const data = object.data;
 
         return (
           <span

package/src/plugins/table/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node as SlateNode, Editor, Transforms } from 'slate';
+import { Node as SlateNode, Element as SlateElement, Editor, Transforms } from 'slate';
 import debug from 'debug';
 import GridOn from '@material-ui/icons/GridOn';
 import TableToolbar from './table-toolbar';
@@ -128,7 +128,70 @@ const TABLE_TYPES = ['tbody', 'tr', 'td', 'table'];
 
 export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
   const core = {
-    utils: {}
+    utils: {},
+    rules: editor => {
+      const { normalizeNode } = editor;
+
+      editor.normalizeNode = entry => {
+        const [tableNode, tablePath] = entry;
+        const tableParent = SlateNode.get(editor, tablePath.slice(0, -1));
+
+        // If the element is a paragraph, ensure its children are valid.
+        if (SlateElement.isElement(tableNode) && tableNode.type === 'table') {
+          const emptyBlock = {
+            type: 'paragraph',
+            children: [{ text: '' }]
+          };
+          const tableIndex = tablePath.slice(-1)[0];
+
+          // if table is the first element, we need to add a space before
+          // so users can focus before the table
+          if (tableIndex === 0) {
+            const beforeTablePath = [...tablePath.slice(0, -1), 0];
+
+            editor.apply({
+              type: 'insert_node',
+              path: beforeTablePath,
+              node: emptyBlock
+            });
+            editor.continueNormalization();
+            return;
+          }
+
+          // if table is the last element, we add element after it
+          if (tableParent.children.length - 1 === tableIndex) {
+            const afterTablePath = [...tablePath.slice(0, -1), tableIndex + 1];
+
+            editor.apply({
+              type: 'insert_node',
+              path: afterTablePath,
+              node: emptyBlock
+            });
+            editor.continueNormalization();
+            return;
+          }
+
+          // if table does not have a tbody, we add it
+          if (tableNode.children[0].type !== 'tbody') {
+            const tBodyNode = { type: 'tbody', children: [] };
+
+            Transforms.wrapNodes(editor, tBodyNode, {
+              at: {
+                anchor: { path: [...tablePath, 0], offset: 0 },
+                focus: { path: [...tablePath, tableNode.children.length], offset: 0 }
+              }
+            });
+            editor.continueNormalization();
+            return;
+          }
+        }
+
+        // Fall back to the original `normalizeNode` to enforce other constraints.
+        normalizeNode(entry);
+      };
+
+      return editor;
+    }
   };
 
   core.utils.createTable = (row = 2, columns = 2) => {
@@ -192,7 +255,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     /**
      * Note - the node may not be a table node - it may be a node inside a table.
      */
-    customToolbar: (node, value, editor, onToolbarDone) => {
+    customToolbar: (node, nodePath, editor, onToolbarDone) => {
       log('[customToolbar] node.data: ', node.data);
 
       const [tableBlock] = core.utils.getTableBlock(editor);
@@ -317,7 +380,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
 
       const onDone = () => {
         log('[onDone] call onToolbarDone...');
-        onToolbarDone(null, true);
+        onToolbarDone(true);
       };
 
       const Tb = () => (
@@ -339,7 +402,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     }
   };
 
-  core.supports = (node, editor) => TABLE_TYPES.includes(node.type);
+  core.supports = node => TABLE_TYPES.includes(node.type);
 
   const Node = props => {
     switch (props.node.type) {

package/src/plugins/toolbar/toolbar.jsx

@@ -16,7 +16,7 @@ import { removeDialogs as removeCharacterDialogs } from '../characters';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
-const getCustomToolbar = (plugin, node, value, editor, handleDone) => {
+const getCustomToolbar = (plugin, node, nodePath, editor, handleDone) => {
   if (!plugin) {
     return;
   }
@@ -33,7 +33,7 @@ const getCustomToolbar = (plugin, node, value, editor, handleDone) => {
     return plugin.toolbar.CustomToolbarComp;
   } else if (typeof plugin.toolbar.customToolbar === 'function') {
     log('deprecated - use CustomToolbarComp');
-    return plugin.toolbar.customToolbar(node, value, editor, handleDone);
+    return plugin.toolbar.customToolbar(node, nodePath, editor, handleDone);
   }
 };
 
@@ -120,12 +120,12 @@ export const Toolbar = props => {
     };
   };
 
-  const onToolbarDone = (change, finishEditing) => {
-    log('[onToolbarDone] change: ', change, 'finishEditing: ', finishEditing);
+  const onToolbarDone = (editor, finishEditing) => {
+    log('[onToolbarDone] change: ', editor, 'finishEditing: ', finishEditing);
     const { onChange, onDone } = props;
 
-    if (change) {
-      onChange(change, () => {
+    if (editor) {
+      onChange(editor, () => {
         if (finishEditing) {
           onDone();
         }
@@ -139,13 +139,13 @@ export const Toolbar = props => {
   };
 
   const onDeleteClick = debounce(
-    (e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange),
+    (e, plugin, node, nodePath, editor, onChange) => plugin.deleteNode(e, node, nodePath, editor, onChange),
     500
   );
 
-  const onDeleteMouseDown = (e, plugin, node, value, onChange) => {
+  const onDeleteMouseDown = e => {
     e.persist();
-    onDeleteClick(e, plugin, node, value, onChange);
+    onDeleteClick(e, plugin, node, nodePath, editor, onChange);
   };
 
   const {
@@ -210,21 +210,28 @@ export const Toolbar = props => {
 
   log('[render] plugin: ', plugin);
 
-  const handleDone = editor => {
+  const handleDone = done => {
+    const isDone = done ? editor : null;
     let handler = onDone;
 
     if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
       handler = onToolbarDone;
     }
 
-    handler(editor);
+    if (isDone) {
+      editor.selection = null;
+    }
+
+    handler(isDone);
 
     if (parentPlugin && parentPlugin.handleDone) {
-      parentPlugin.handleDone(editor, node, plugin);
+      parentPlugin.handleDone(isDone, node, plugin);
     }
   };
 
-  const CustomToolbar = getCustomToolbar(plugin, node, value, editor, handleDone);
+  const CustomToolbar =
+    getCustomToolbar(plugin, node, nodePath, editor, handleDone) ||
+    getCustomToolbar(parentPlugin, node, nodePath, editor, handleDone);
 
   const filteredPlugins =
     plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
@@ -290,7 +297,7 @@ export const Toolbar = props => {
           <IconButton
             aria-label="Delete"
             className={classes.iconRoot}
-            onMouseDown={e => onDeleteMouseDown(e, plugin, node, value, onChange)}
+            onMouseDown={e => onDeleteMouseDown(e)}
             classes={{
               root: classes.iconRoot
             }}