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

package/src/plugins/image/index.jsx

@@ -1,64 +1,90 @@
-import { Data, Inline } from 'slate';
+import React from 'react';
+import debug from 'debug';
+import get from 'lodash/get';
+import { Data, Editor, Inline, Node as SlateNode } 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 React from 'react';
-import debug from 'debug';
 
 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 />,
-    onClick: (value, onChange) => {
+    onClick: editor => {
       log('[toolbar] onClick');
-      const inline = Inline.create({
+      const inline = {
         type: 'image',
-        isVoid: true,
         data: {
+          newImage: true,
           loaded: false,
-          src: undefined,
+          src: undefined
         },
-      });
+        children: [{ text: '' }]
+      };
+
+      editor.insertNode(inline);
+
+      const [node, nodePath] = getNodeBy(
+        editor,
+        descendant => descendant.type === 'image' && get(descendant, 'data.newImage')
+      );
 
-      const change = value.change().insertInline(inline);
-      onChange(change);
-      opts.insertImageRequested((getValue) => new InsertImageHandler(inline, getValue, onChange));
+      opts.insertImageRequested(() => new InsertImageHandler(node, nodePath, editor));
     },
-    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) => {
+    customToolbar: (node, value, 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(),
-          ...newValues,
+          ...newValues
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
-        onToolbarDone(change, done);
+        onToolbarDone(change, false);
       };
 
       const Tb = () => (
-        <ImageToolbar
-          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}
-          alt={alt}
-          imageLoaded={imageLoaded}
-          alignment={alignment || 'left'}
-          onChange={onChange}
-        />
+        <ImageToolbar alt={alt} imageLoaded={imageLoaded} alignment={alignment || 'left'} onChange={onChange} />
       );
       return Tb;
     },
-    showDone: true,
+    showDone: true
   };
 
   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, value, onChange) => {
       e.preventDefault();
       if (opts.onDelete) {
@@ -72,7 +98,9 @@ export default function ImagePlugin(opts) {
             change = v.change().removeNodeByKey(node.key);
           } else {
             log('[error]: ', err);
-            change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
+            change = v
+              .change()
+              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
           }
           onChange(change);
         });
@@ -81,8 +109,8 @@ export default function ImagePlugin(opts) {
         onChange(change);
       }
     },
-    stopReset: (value) => {
-      const imgPendingInsertion = value.document.findDescendant((n) => {
+    stopReset: value => {
+      const imgPendingInsertion = value.document.findDescendant(n => {
         if (n.type !== 'image') {
           return;
         }
@@ -99,21 +127,25 @@ export default function ImagePlugin(opts) {
             onFocus: opts.onFocus,
             onBlur: opts.onBlur,
             maxImageWidth: opts.maxImageWidth,
-            maxImageHeight: opts.maxImageHeight,
+            maxImageHeight: opts.maxImageHeight
           },
-          props,
+          props
+        );
+        return (
+          <ImageComponent {...all}>
+            {props.children}
+          </ImageComponent>
         );
-        return <ImageComponent {...all} />;
       }
     },
-    normalizeNode: (node) => {
+    normalizeNode: node => {
       const textNodeMap = {};
       const updateNodesArray = [];
       let index = 0;
 
       if (node.object !== 'document') return;
 
-      node.findDescendant((d) => {
+      node.findDescendant(d => {
         if (d.object === 'text') {
           textNodeMap[index] = d;
         }
@@ -129,12 +161,12 @@ export default function ImagePlugin(opts) {
 
       if (!updateNodesArray.length) return;
 
-      return (change) => {
+      return change => {
         change.withoutNormalization(() => {
-          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
+          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));
         });
       };
-    },
+    }
   };
 }
 
@@ -159,8 +191,8 @@ export const serialization = {
         margin: el.style.margin,
         justifyContent: el.style.justifyContent,
         alignment: el.getAttribute('alignment'),
-        alt: el.getAttribute('alt'),
-      },
+        alt: el.getAttribute('alt')
+      }
     };
     log('return object: ', out);
     return out;
@@ -172,7 +204,7 @@ export const serialization = {
     const src = data.get('src');
     const width = data.get('width');
     const height = data.get('height');
-    const alignment = data.get('alignment') || 'left';
+    const alignment = data.get('alignment');
     const margin = data.get('margin');
     const justifyContent = data.get('margin');
     const alt = data.get('alt');
@@ -214,9 +246,9 @@ export const serialization = {
       src,
       style,
       alignment,
-      alt,
+      alt
     };
 
     return <img {...props} />;
-  },
+  }
 };

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

@@ -1,32 +1,32 @@
-import { Data } from 'slate';
+import omit from 'lodash/omit';
 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} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Block} placeHolderPath - 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(placeholderBlock, getValue, onChange, isPasted = false) {
-    this.placeholderBlock = placeholderBlock;
-    this.getValue = getValue;
-    this.onChange = onChange;
+  constructor(node, placeHolderPath, editor, isPasted = false) {
+    this.node = node;
+    this.placeHolderPath = placeHolderPath;
+    this.editor = editor;
     this.isPasted = isPasted;
   }
 
   getPlaceholderInDocument(value) {
     const { document } = value;
-    const directChild = document.getChild(this.placeholderBlock.key);
+    const directChild = document.getChild(this.placeHolderPath);
 
     if (directChild) {
       return directChild;
     }
 
-    const child = document.getDescendant(this.placeholderBlock.key);
+    const child = document.getDescendant(this.placeHolderPath);
 
     if (child) {
       return child;
@@ -38,10 +38,10 @@ class InsertImageHandler {
 
   cancel() {
     log('insert cancelled');
-    const c = this.getValue()
-      .change()
-      .removeNodeByKey(this.placeholderBlock.key);
-    this.onChange(c);
+    this.editor.apply({
+      type: 'remove_node',
+      path: this.placeHolderPath
+    });
   }
 
   done(err, src) {
@@ -50,12 +50,30 @@ class InsertImageHandler {
       //eslint-disable-next-line
       console.log(err);
     } else {
-      const value = this.getValue();
-      const child = this.getPlaceholderInDocument(value);
-      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));
+      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 change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
-      this.onChange(change);
+      this.node = Object.assign({}, this.node, {
+        data: omit(newData, 'newImage')
+      });
     }
   }
 
@@ -72,23 +90,40 @@ class InsertImageHandler {
     log('[fileChosen] file: ', file);
     const reader = new FileReader();
     reader.onload = () => {
-      const value = this.getValue();
       const dataURL = reader.result;
-      const child = this.getPlaceholderInDocument(value);
-      const data = child.data.set('src', dataURL);
-      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
-      this.onChange(change);
+
+      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 } });
     };
     reader.readAsDataURL(file);
   }
 
   progress(percent, bytes, total) {
     log('progress: ', percent, bytes, total);
-    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);
+
+    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 } });
   }
 }
 

package/src/plugins/index.jsx

@@ -1,3 +1,6 @@
+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 BulletedListIcon from '@material-ui/icons/FormatListBulleted';
@@ -17,43 +20,10 @@ import debug from 'debug';
 import List from './list';
 import TablePlugin from './table';
 import RespAreaPlugin from './respArea';
+import MarkHotkey from './hotKeys';
 
 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',
@@ -68,10 +38,10 @@ export const ALL_PLUGINS = [
   'table',
   'video',
   'audio',
-  'responseArea',
+  'responseArea'
 ];
 
-export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => plug !== 'responseArea');
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter(plug => plug !== 'responseArea');
 
 export const buildPlugins = (activePlugins, opts) => {
   log('[buildPlugins] opts: ', opts);
@@ -82,7 +52,9 @@ export const buildPlugins = (activePlugins, opts) => {
   const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);
   const mathPlugin = MathPlugin(opts.math);
   const respAreaPlugin =
-    opts.responseArea && opts.responseArea.type && RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
+    opts.responseArea &&
+    opts.responseArea.type &&
+    RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
 
   return compact([
     addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),
@@ -95,19 +67,29 @@ export const buildPlugins = (activePlugins, opts) => {
         key: '~',
         type: 'strikethrough',
         icon: <Strikethrough />,
-        tag: 'del',
-      }),
+        tag: 'del'
+      })
     ),
     addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),
     addIf('image', imagePlugin),
     addIf('video', MediaPlugin('video', opts.media)),
     addIf('audio', MediaPlugin('audio', opts.media)),
     addIf('math', mathPlugin),
-    ...opts.languageCharacters.map((config) => addIf('languageCharacters', CharactersPlugin(config))),
+    ...opts.languageCharacters.map(config => addIf('languageCharacters', CharactersPlugin(config))),
     addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
     addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
     ToolbarPlugin(opts.toolbar),
     SoftBreakPlugin({ shift: true }),
-    addIf('responseArea', respAreaPlugin),
+    addIf('responseArea', respAreaPlugin)
   ]);
 };
+
+export const withPlugins = (editor, activePlugins) => {
+  activePlugins.forEach(plugin => {
+    if (typeof plugin.rules === 'function') {
+      plugin.rules(editor);
+    }
+  });
+
+  return withHistory(withReact(editor));
+};