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

package/src/plugins/image/index.jsx

@@ -1,59 +1,45 @@
-import React from 'react';
-import { jsx } from 'slate-hyperscript';
-import debug from 'debug';
-import get from 'lodash/get';
-import { Node as SlateNode, Editor } from 'slate';
+import { Data, Inline } 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';
+import React from 'react';
+import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins:image');
 
 export default function ImagePlugin(opts) {
   const toolbar = opts.insertImageRequested && {
     icon: <Image />,
-    onClick: (editor) => {
+    onClick: (value, onChange) => {
       log('[toolbar] onClick');
-      const inline = {
+      const inline = Inline.create({
         type: 'image',
+        isVoid: true,
         data: {
-          newImage: true,
           loaded: false,
           src: undefined,
         },
-        children: [{ text: '' }],
-      };
-
-      editor.insertNode(inline);
-
-      // get the element just inserted
-      const [node, nodePath] = Editor.node(editor, editor.selection);
+      });
 
-      opts.insertImageRequested(() => new InsertImageHandler(node, nodePath, editor));
+      const change = value.change().insertInline(inline);
+      onChange(change);
+      opts.insertImageRequested((getValue) => new InsertImageHandler(inline, getValue, onChange));
     },
-    customToolbar: (node, nodePath, editor, onToolbarDone) => {
-      const alignment = node.data.alignment;
-      const alt = node.data.alt;
-      const imageLoaded = node.data.loaded !== false;
-      const onChange = (newValues) => {
+    supports: (node) => node.object === 'inline' && node.type === 'image',
+    customToolbar: (node, value, onToolbarDone) => {
+      const alignment = node.data.get('alignment');
+      const alt = node.data.get('alt');
+      const imageLoaded = node.data.get('loaded') !== false;
+      const onChange = (newValues, done) => {
         const update = {
-          ...node.data,
+          ...node.data.toObject(),
           ...newValues,
         };
 
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data,
-          },
-          newProperties: { data: update },
-        });
-
-        onToolbarDone(null, false);
+        const change = value.change().setNodeByKey(node.key, { data: update });
+        onToolbarDone(change, done);
       };
 
       const Tb = () => (
@@ -73,72 +59,26 @@ export default function ImagePlugin(opts) {
   return {
     name: 'image',
     toolbar,
-    rules: (editor) => {
-      const { isVoid, isInline } = editor;
-
-      editor.isVoid = (element) => {
-        return element.type === 'image' ? true : isVoid(element);
-      };
-
-      editor.isInline = (element) => {
-        return element.type === 'image' ? true : isInline(element);
-      };
-
-      return editor;
-    },
-    supports: (node) => node.type === 'image',
-    deleteNode: (e, node, nodePath, editor, onChange) => {
+    deleteNode: (e, node, value, onChange) => {
       e.preventDefault();
-
       if (opts.onDelete) {
-        const update = {
-          ...node.data,
-          deleteStatus: 'pending',
-        };
+        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));
 
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data,
-          },
-          newProperties: { data: update },
-        });
+        let change = value.change().setNodeByKey(node.key, { data: update });
 
-        editor.selection = null;
-        onChange(editor);
-        opts.onDelete(node.data.src, (err) => {
+        onChange(change);
+        opts.onDelete(node.data.get('src'), (err, v) => {
           if (!err) {
-            editor.apply({
-              type: 'remove_node',
-              path: nodePath,
-            });
+            change = v.change().removeNodeByKey(node.key);
           } else {
             log('[error]: ', err);
-            editor.apply({
-              type: 'set_node',
-              path: nodePath,
-              properties: {
-                data: node.data,
-              },
-              newProperties: { data: { ...node.data, deleteStatus: 'failed' } },
-            });
+            change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
           }
-
-          editor.selection = null;
-          onChange(editor, () => {
-            setTimeout(() => ReactEditor.focus(editor), 50);
-          });
+          onChange(change);
         });
       } else {
-        editor.selection = null;
-        editor.apply({
-          type: 'remove_node',
-          path: nodePath,
-        });
-        onChange(editor, () => {
-          setTimeout(() => ReactEditor.focus(editor), 50);
-        });
+        let change = value.change().removeNodeByKey(node.key);
+        onChange(change);
       }
     },
     stopReset: (value) => {
@@ -146,7 +86,7 @@ export default function ImagePlugin(opts) {
         if (n.type !== 'image') {
           return;
         }
-        return n.data.loaded === false;
+        return n.data.get('loaded') === false;
       });
       /** don't reset if there is an image pending insertion */
       return imgPendingInsertion !== undefined && imgPendingInsertion !== null;
@@ -163,7 +103,7 @@ export default function ImagePlugin(opts) {
           },
           props,
         );
-        return <ImageComponent {...all}>{props.children}</ImageComponent>;
+        return <ImageComponent {...all} />;
       }
     },
     normalizeNode: (node) => {
@@ -208,8 +148,10 @@ export const serialization = {
     const width = parseInt(style.width.replace('px', ''), 10) || null;
     const height = parseInt(style.height.replace('px', ''), 10) || null;
 
-    const out = jsx('element', {
+    const out = {
+      object: 'inline',
       type: 'image',
+      isVoid: true,
       data: {
         src: el.getAttribute('src'),
         width,
@@ -219,7 +161,7 @@ export const serialization = {
         alignment: el.getAttribute('alignment'),
         alt: el.getAttribute('alt'),
       },
-    });
+    };
     log('return object: ', out);
     return out;
   },
@@ -227,9 +169,14 @@ export const serialization = {
     if (object.type !== 'image') return;
 
     const { data } = object;
-    const { alignment, alt, src, height, margin, justifyContent, width } = data;
+    const src = data.get('src');
+    const width = data.get('width');
+    const height = data.get('height');
+    const alignment = data.get('alignment') || 'left';
+    const margin = data.get('margin');
+    const justifyContent = data.get('margin');
+    const alt = data.get('alt');
     const style = {};
-
     if (width) {
       style.width = `${width}px`;
     }

package/src/plugins/image/insert-image-handler.js

@@ -1,33 +1,33 @@
-import omit from 'lodash/omit';
+import { Data } from 'slate';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:image:insert-image-handler');
 
 /**
  * Handles user selection, insertion (or cancellation) of an image into the editor.
- * @param {Block} placeHolderPath - a block that has been added to the editor as a place holder for the image
+ * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image
  * @param {Function} getValue - a function to return the value of the editor
  * @param {Function} onChange - callback to notify changes applied by the handler
  * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
  */
 class InsertImageHandler {
-  constructor(node, placeHolderPath, editor, isPasted = false) {
-    this.node = node;
-    this.placeHolderPath = placeHolderPath;
-    this.editor = editor;
+  constructor(placeholderBlock, getValue, onChange, isPasted = false) {
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onChange = onChange;
     this.isPasted = isPasted;
     this.chosenFile = null;
   }
 
   getPlaceholderInDocument(value) {
     const { document } = value;
-    const directChild = document.getChild(this.placeHolderPath);
+    const directChild = document.getChild(this.placeholderBlock.key);
 
     if (directChild) {
       return directChild;
     }
 
-    const child = document.getDescendant(this.placeHolderPath);
+    const child = document.getDescendant(this.placeholderBlock.key);
 
     if (child) {
       return child;
@@ -39,10 +39,10 @@ class InsertImageHandler {
 
   cancel() {
     log('insert cancelled');
-    this.editor.apply({
-      type: 'remove_node',
-      path: this.placeHolderPath,
-    });
+    const c = this.getValue()
+      .change()
+      .removeNodeByKey(this.placeholderBlock.key);
+    this.onChange(c);
   }
 
   done(err, src) {
@@ -51,30 +51,12 @@ class InsertImageHandler {
       //eslint-disable-next-line
       console.log(err);
     } else {
-      this.editor.apply({
-        type: 'set_node',
-        path: this.placeHolderPath,
-        properties: {
-          data: this.node.data,
-        },
-        newProperties: {
-          data: {
-            src,
-            loaded: true,
-            percent: 100,
-          },
-        },
-      });
-      const newData = {
-        ...this.node.data,
-        src,
-        loaded: true,
-        percent: 100,
-      };
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));
 
-      this.node = Object.assign({}, this.node, {
-        data: omit(newData, 'newImage'),
-      });
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
     }
   }
 
@@ -94,40 +76,23 @@ class InsertImageHandler {
     log('[fileChosen] file: ', file);
     const reader = new FileReader();
     reader.onload = () => {
+      const value = this.getValue();
       const dataURL = reader.result;
-
-      this.editor.apply({
-        type: 'set_node',
-        path: this.placeHolderPath,
-        properties: {
-          data: this.node.data,
-        },
-        newProperties: {
-          data: {
-            ...this.node.data,
-            src: dataURL,
-          },
-        },
-      });
-      this.node = Object.assign({}, this.node, { data: { src: dataURL } });
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.set('src', dataURL);
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
     };
     reader.readAsDataURL(file);
   }
 
   progress(percent, bytes, total) {
     log('progress: ', percent, bytes, total);
-
-    this.editor.apply({
-      type: 'set_node',
-      path: this.placeHolderPath,
-      properties: {
-        data: this.node.data,
-      },
-      newProperties: {
-        data: { ...this.node.data, percent },
-      },
-    });
-    this.node = Object.assign({}, this.node, { data: { percent } });
+    const value = this.getValue();
+    const child = this.getPlaceholderInDocument(value);
+    const data = child.data.set('percent', percent);
+    const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+    this.onChange(change);
   }
 
   // Add a getter method to retrieve the chosen file

package/src/plugins/index.jsx

@@ -1,9 +1,5 @@
-import { Editor } from 'slate';
-import { withHistory } from 'slate-history';
-import { withReact } from 'slate-react';
-
 import Bold from '@material-ui/icons/FormatBold';
-// import Code from '@material-ui/icons/Code';
+//import Code from '@material-ui/icons/Code';
 import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
 import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
 import ImagePlugin from './image';
@@ -21,13 +17,49 @@ import debug from 'debug';
 import List from './list';
 import TablePlugin from './table';
 import RespAreaPlugin from './respArea';
-import MarkHotkey from './hotKeys';
+import HtmlPlugin from './html';
 
 const log = debug('@pie-lib:editable-html:plugins');
 
+function MarkHotkey(options) {
+  const { type, key, icon, tag } = options;
+
+  // Return our "plugin" object, containing the `onKeyDown` handler.
+  return {
+    toolbar: {
+      isMark: true,
+      type,
+      icon,
+      onToggle: (change) => {
+        log('[onToggleMark] type: ', type);
+        return change.toggleMark(type);
+      },
+    },
+    renderMark(props) {
+      if (props.mark.type === type) {
+        const K = tag || type;
+
+        return <K>{props.children}</K>;
+      }
+    },
+    onKeyDown(event, change) {
+      // Check that the key pressed matches our `key` option.
+      if (!event.metaKey || event.key != key) return;
+
+      // Prevent the default characters from being inserted.
+      event.preventDefault();
+
+      // Toggle the mark `type`.
+      change.toggleMark(type);
+      return true;
+    },
+  };
+}
+
 export const ALL_PLUGINS = [
   'bold',
   // 'code',
+  'html',
   'italic',
   'underline',
   'strikethrough',
@@ -80,20 +112,6 @@ export const buildPlugins = (activePlugins, opts) => {
     ToolbarPlugin(opts.toolbar),
     SoftBreakPlugin({ shift: true }),
     addIf('responseArea', respAreaPlugin),
+    addIf('html', HtmlPlugin(opts.html)),
   ]);
 };
-
-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);
-    }
-  });
-
-  return withHistory(withReact(editor));
-};

package/src/plugins/list/index.jsx

@@ -1,8 +1,9 @@
 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');
 
@@ -15,39 +16,22 @@ const b = (type, 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 jsx(
-        'element',
-        {
-          type: 'li',
-        },
-        next(children),
-      );
+      return b('list_item', next, el.childNodes);
     }
 
     if (name === 'ul') {
-      return jsx(
-        'element',
-        {
-          type: 'ul',
-        },
-        next(children),
-      );
+      return b('ul_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
     }
 
     if (name === 'ol') {
-      return jsx(
-        'element',
-        {
-          type: 'ol',
-        },
-        next(children),
-      );
+      return b('ol_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
     }
   },
   serialize(object, children) {
+    if (object.object !== 'block') return;
+
     if (object.type === 'list_item') {
       return <li>{children}</li>;
     }
@@ -62,58 +46,88 @@ export const serialization = {
   },
 };
 
-const isBlockActive = (editor, format) => {
-  const { selection } = editor;
-  if (!selection) return false;
-
-  const [match] = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: (node) => !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === format,
-    }),
-  );
-
-  return !!match;
-};
-
 const createEditList = () => {
-  const core = {
-    changes: {},
-  };
+  const core = EditList({
+    typeDefault: 'span',
+  });
 
-  core.changes.wrapInList = (editor, format) => {
-    const isActive = isBlockActive(editor, format);
-    const isList = LIST_TYPES.includes(format);
+  // fix outdated schema
+  if (core.schema && core.schema.blocks) {
+    Object.keys(core.schema.blocks).forEach((key) => {
+      const block = core.schema.blocks[key];
 
-    Transforms.unwrapNodes(editor, {
-      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && LIST_TYPES.includes(n.type),
-      split: true,
+      if (block.parent) {
+        return;
+      }
+
+      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;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      return Immutable.List([startBlock]);
+    }
 
-    const newProperties = {
-      type: isActive ? 'paragraph' : isList ? 'list_item' : format,
-    };
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+    const startPath = ancestor.getPath(startBlock.key);
+    const endPath = ancestor.getPath(endBlock.key);
 
-    Transforms.setNodes(editor, newProperties);
+    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+  };
 
-    if (!isActive && isList) {
-      const block = { type: format, children: [] };
-      Transforms.wrapNodes(editor, block);
-    }
+  /**
+   * 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,
+        });
+      }
+    });
+
+    return change.normalize();
   };
 
   return core;
 };
 
-const LIST_TYPES = ['ol_list', 'ul_list', 'list_item'];
-
 export default (options) => {
   const { type, icon } = options;
 
   const core = createEditList();
 
-  core.supports = (node) => LIST_TYPES.includes(node.type);
-
+  // eslint-disable-next-line react/display-name
   core.renderNode = (props) => {
     const { node, attributes, children } = props;
 
@@ -131,9 +145,23 @@ export default (options) => {
     isMark: false,
     type,
     icon,
-    isActive: isBlockActive,
-    onClick: (editor) => {
-      core.changes.wrapInList(editor, type);
+    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);
+      }
     },
   };