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

package/lib/plugins/image/index.js

@@ -1,71 +1,73 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = ImagePlugin;
 exports.serialization = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
-var _slateHyperscript = require("slate-hyperscript");
-var _debug = _interopRequireDefault(require("debug"));
-var _get = _interopRequireDefault(require("lodash/get"));
+
 var _slate = require("slate");
+
 var _Image = _interopRequireDefault(require("@material-ui/icons/Image"));
+
 var _component = _interopRequireDefault(require("./component"));
+
 var _imageToolbar = _interopRequireDefault(require("./image-toolbar"));
+
 var _insertImageHandler = _interopRequireDefault(require("./insert-image-handler"));
-var _slateReact = require("slate-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image');
+
 function ImagePlugin(opts) {
   var toolbar = opts.insertImageRequested && {
     icon: /*#__PURE__*/_react["default"].createElement(_Image["default"], null),
-    onClick: function onClick(editor) {
+    onClick: function onClick(value, onChange) {
       log('[toolbar] onClick');
-      var inline = {
+
+      var inline = _slate.Inline.create({
         type: 'image',
+        isVoid: true,
         data: {
-          newImage: true,
           loaded: false,
           src: undefined
-        },
-        children: [{
-          text: ''
-        }]
-      };
-      editor.insertNode(inline);
-
-      // get the element just inserted
-      var _Editor$node = _slate.Editor.node(editor, editor.selection),
-        _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 2),
-        node = _Editor$node2[0],
-        nodePath = _Editor$node2[1];
-      opts.insertImageRequested(function () {
-        return new _insertImageHandler["default"](node, nodePath, editor);
+        }
+      });
+
+      var change = value.change().insertInline(inline);
+      onChange(change);
+      opts.insertImageRequested(function (getValue) {
+        return new _insertImageHandler["default"](inline, getValue, onChange);
       });
     },
-    customToolbar: function customToolbar(node, nodePath, editor, onToolbarDone) {
-      var alignment = node.data.alignment;
-      var alt = node.data.alt;
-      var imageLoaded = node.data.loaded !== false;
-      var onChange = function onChange(newValues) {
-        var update = _objectSpread(_objectSpread({}, node.data), newValues);
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data
-          },
-          newProperties: {
-            data: update
-          }
+    supports: function supports(node) {
+      return node.object === 'inline' && node.type === 'image';
+    },
+    customToolbar: function customToolbar(node, value, onToolbarDone) {
+      var alignment = node.data.get('alignment');
+      var alt = node.data.get('alt');
+      var imageLoaded = node.data.get('loaded') !== false;
+
+      var onChange = function onChange(newValues, done) {
+        var update = _objectSpread(_objectSpread({}, node.data.toObject()), newValues);
+
+        var change = value.change().setNodeByKey(node.key, {
+          data: update
         });
-        onToolbarDone(null, false);
+        onToolbarDone(change, done);
       };
+
       var Tb = function Tb() {
         return /*#__PURE__*/_react["default"].createElement(_imageToolbar["default"], {
           disableImageAlignmentButtons: opts.disableImageAlignmentButtons,
@@ -75,6 +77,7 @@ function ImagePlugin(opts) {
           onChange: onChange
         });
       };
+
       return Tb;
     },
     showDone: true
@@ -82,77 +85,33 @@ function ImagePlugin(opts) {
   return {
     name: 'image',
     toolbar: toolbar,
-    rules: function rules(editor) {
-      var isVoid = editor.isVoid,
-        isInline = editor.isInline;
-      editor.isVoid = function (element) {
-        return element.type === 'image' ? true : isVoid(element);
-      };
-      editor.isInline = function (element) {
-        return element.type === 'image' ? true : isInline(element);
-      };
-      return editor;
-    },
-    supports: function supports(node) {
-      return node.type === 'image';
-    },
-    deleteNode: function deleteNode(e, node, nodePath, editor, onChange) {
+    deleteNode: function deleteNode(e, node, value, onChange) {
       e.preventDefault();
+
       if (opts.onDelete) {
-        var update = _objectSpread(_objectSpread({}, node.data), {}, {
+        var update = node.data.merge(_slate.Data.create({
           deleteStatus: 'pending'
+        }));
+        var change = value.change().setNodeByKey(node.key, {
+          data: update
         });
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data
-          },
-          newProperties: {
-            data: update
-          }
-        });
-        editor.selection = null;
-        onChange(editor);
-        opts.onDelete(node.data.src, function (err) {
+        onChange(change);
+        opts.onDelete(node.data.get('src'), function (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: _objectSpread(_objectSpread({}, node.data), {}, {
-                  deleteStatus: 'failed'
-                })
-              }
-            });
+            change = v.change().setNodeByKey(node.key, node.data.merge(_slate.Data.create({
+              deleteStatus: 'failed'
+            })));
           }
-          editor.selection = null;
-          onChange(editor, function () {
-            setTimeout(function () {
-              return _slateReact.ReactEditor.focus(editor);
-            }, 50);
-          });
+
+          onChange(change);
         });
       } else {
-        editor.selection = null;
-        editor.apply({
-          type: 'remove_node',
-          path: nodePath
-        });
-        onChange(editor, function () {
-          setTimeout(function () {
-            return _slateReact.ReactEditor.focus(editor);
-          }, 50);
-        });
+        var _change = value.change().removeNodeByKey(node.key);
+
+        onChange(_change);
       }
     },
     stopReset: function stopReset(value) {
@@ -160,9 +119,11 @@ 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;
     },
     renderNode: function renderNode(props) {
@@ -174,7 +135,7 @@ function ImagePlugin(opts) {
           maxImageWidth: opts.maxImageWidth,
           maxImageHeight: opts.maxImageHeight
         }, props);
-        return /*#__PURE__*/_react["default"].createElement(_component["default"], all, props.children);
+        return /*#__PURE__*/_react["default"].createElement(_component["default"], all);
       }
     },
     normalizeNode: function normalizeNode(node) {
@@ -186,11 +147,13 @@ function ImagePlugin(opts) {
         if (d.object === 'text') {
           textNodeMap[index] = d;
         }
+
         if (d.type === 'image') {
           if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
             updateNodesArray.push(textNodeMap[index - 1]);
           }
         }
+
         index++;
       });
       if (!updateNodesArray.length) return;
@@ -204,8 +167,11 @@ function ImagePlugin(opts) {
     }
   };
 }
+
 var serialization = {
-  deserialize: function deserialize(el /*, next*/) {
+  deserialize: function deserialize(el
+  /*, next*/
+  ) {
     var name = el.tagName.toLowerCase();
     if (name !== 'img') return;
     log('deserialize: ', name);
@@ -217,8 +183,10 @@ var serialization = {
     };
     var width = parseInt(style.width.replace('px', ''), 10) || null;
     var height = parseInt(style.height.replace('px', ''), 10) || null;
-    var out = (0, _slateHyperscript.jsx)('element', {
+    var out = {
+      object: 'inline',
       type: 'image',
+      isVoid: true,
       data: {
         src: el.getAttribute('src'),
         width: width,
@@ -228,48 +196,58 @@ var serialization = {
         alignment: el.getAttribute('alignment'),
         alt: el.getAttribute('alt')
       }
-    });
+    };
     log('return object: ', out);
     return out;
   },
-  serialize: function serialize(object /*, children*/) {
+  serialize: function serialize(object
+  /*, children*/
+  ) {
     if (object.type !== 'image') return;
     var data = object.data;
-    var alignment = data.alignment,
-      alt = data.alt,
-      src = data.src,
-      height = data.height,
-      margin = data.margin,
-      justifyContent = data.justifyContent,
-      width = data.width;
+    var src = data.get('src');
+    var width = data.get('width');
+    var height = data.get('height');
+    var alignment = data.get('alignment') || 'left';
+    var margin = data.get('margin');
+    var justifyContent = data.get('margin');
+    var alt = data.get('alt');
     var style = {};
+
     if (width) {
       style.width = "".concat(width, "px");
     }
+
     if (height) {
       style.height = "".concat(height, "px");
     }
+
     style.margin = margin;
     style.justifyContent = justifyContent;
+
     if (alignment) {
       switch (alignment) {
         case 'left':
           style.justifyContent = 'flex-start';
           style.margin = '0';
           break;
+
         case 'center':
           style.justifyContent = 'center';
           style.margin = '0 auto';
           break;
+
         case 'right':
           style.justifyContent = 'flex-end';
           style.margin = 'auto 0 0 auto';
           break;
+
         default:
           style.justifyContent = 'flex-start';
           break;
       }
     }
+
     style.objectFit = 'contain';
     var props = {
       src: src,

package/lib/plugins/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_slateHyperscript","_debug","_get","_slate","_Image","_component","_imageToolbar","_insertImageHandler","_slateReact","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","ImagePlugin","opts","toolbar","insertImageRequested","icon","createElement","onClick","editor","inline","type","data","newImage","loaded","src","undefined","children","text","insertNode","_Editor$node","Editor","node","selection","_Editor$node2","_slicedToArray2","nodePath","InsertImageHandler","customToolbar","onToolbarDone","alignment","alt","imageLoaded","onChange","newValues","update","path","properties","newProperties","Tb","disableImageAlignmentButtons","showDone","name","rules","isVoid","isInline","element","supports","deleteNode","e","preventDefault","onDelete","deleteStatus","err","setTimeout","ReactEditor","focus","stopReset","value","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","assign","onFocus","onBlur","maxImageWidth","maxImageHeight","normalizeNode","textNodeMap","updateNodesArray","index","d","change","withoutNormalization","insertTextByKey","serialization","deserialize","el","tagName","toLowerCase","style","width","height","margin","justifyContent","parseInt","replace","out","jsx","getAttribute","serialize","concat","objectFit","exports"],"sources":["../../../src/plugins/image/index.jsx"],"sourcesContent":["import React from 'react';\nimport { jsx } from 'slate-hyperscript';\nimport debug from 'debug';\nimport get from 'lodash/get';\nimport { Node as SlateNode, Editor } from 'slate';\n\nimport Image from '@material-ui/icons/Image';\nimport ImageComponent from './component';\nimport ImageToolbar from './image-toolbar';\nimport InsertImageHandler from './insert-image-handler';\nimport { ReactEditor } from 'slate-react';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nexport default function ImagePlugin(opts) {\n  const toolbar = opts.insertImageRequested && {\n    icon: <Image />,\n    onClick: editor => {\n      log('[toolbar] onClick');\n      const inline = {\n        type: 'image',\n        data: {\n          newImage: true,\n          loaded: false,\n          src: undefined,\n        },\n        children: [{ text: '' }],\n      };\n\n      editor.insertNode(inline);\n\n      // get the element just inserted\n      const [node, nodePath] = Editor.node(editor, editor.selection);\n\n      opts.insertImageRequested(() => new InsertImageHandler(node, nodePath, editor));\n    },\n    customToolbar: (node, nodePath, editor, onToolbarDone) => {\n      const alignment = node.data.alignment;\n      const alt = node.data.alt;\n      const imageLoaded = node.data.loaded !== false;\n      const onChange = newValues => {\n        const update = {\n          ...node.data,\n          ...newValues\n        };\n\n        editor.apply({\n          type: 'set_node',\n          path: nodePath,\n          properties: {\n            data: node.data\n          },\n          newProperties: { data: update }\n        });\n\n        onToolbarDone(null, false);\n      };\n\n      const Tb = () => (\n        <ImageToolbar\n          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}\n          alt={alt}\n          imageLoaded={imageLoaded}\n          alignment={alignment || 'left'}\n          onChange={onChange}\n        />\n      );\n      return Tb;\n    },\n    showDone: true,\n  };\n\n  return {\n    name: 'image',\n    toolbar,\n    rules: editor => {\n      const { isVoid, isInline } = editor;\n\n      editor.isVoid = element => {\n        return element.type === 'image' ? true : isVoid(element);\n      };\n\n      editor.isInline = element => {\n        return element.type === 'image' ? true : isInline(element);\n      };\n\n      return editor;\n    },\n    supports: node => node.type === 'image',\n    deleteNode: (e, node, nodePath, editor, onChange) => {\n      e.preventDefault();\n\n      if (opts.onDelete) {\n        const update = {\n          ...node.data,\n          deleteStatus: 'pending'\n        };\n\n        editor.apply({\n          type: 'set_node',\n          path: nodePath,\n          properties: {\n            data: node.data\n          },\n          newProperties: { data: update }\n        });\n\n        editor.selection = null;\n        onChange(editor);\n        opts.onDelete(node.data.src, (err) => {\n          if (!err) {\n            editor.apply({\n              type: 'remove_node',\n              path: nodePath\n            });\n          } else {\n            log('[error]: ', err);\n            editor.apply({\n              type: 'set_node',\n              path: nodePath,\n              properties: {\n                data: node.data\n              },\n              newProperties: { data: { ...node.data, deleteStatus: 'failed' } },\n            });\n          }\n\n          editor.selection = null;\n          onChange(editor, () => {\n            setTimeout(() => ReactEditor.focus(editor), 50);\n          });\n        });\n      } else {\n        editor.selection = null;\n        editor.apply({\n          type: 'remove_node',\n          path: nodePath\n        });\n        onChange(editor, () => {\n          setTimeout(() => ReactEditor.focus(editor), 50);\n        });\n      }\n    },\n    stopReset: (value) => {\n      const imgPendingInsertion = value.document.findDescendant((n) => {\n        if (n.type !== 'image') {\n          return;\n        }\n        return n.data.loaded === false;\n      });\n      /** don't reset if there is an image pending insertion */\n      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;\n    },\n    renderNode(props) {\n      if (props.node.type === 'image') {\n        const all = Object.assign(\n          {\n            onDelete: opts.onDelete,\n            onFocus: opts.onFocus,\n            onBlur: opts.onBlur,\n            maxImageWidth: opts.maxImageWidth,\n            maxImageHeight: opts.maxImageHeight,\n          },\n          props,\n        );\n        return (\n          <ImageComponent {...all}>\n            {props.children}\n          </ImageComponent>\n        );\n      }\n    },\n    normalizeNode: (node) => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant((d) => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        if (d.type === 'image') {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return (change) => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    },\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    const name = el.tagName.toLowerCase();\n    if (name !== 'img') return;\n\n    log('deserialize: ', name);\n    const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };\n    const width = parseInt(style.width.replace('px', ''), 10) || null;\n    const height = parseInt(style.height.replace('px', ''), 10) || null;\n\n    const out = jsx('element', {\n      type: 'image',\n      data: {\n        src: el.getAttribute('src'),\n        width,\n        height,\n        margin: el.style.margin,\n        justifyContent: el.style.justifyContent,\n        alignment: el.getAttribute('alignment'),\n        alt: el.getAttribute('alt'),\n      },\n    });\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    if (object.type !== 'image') return;\n\n    const { data } = object;\n    const {\n      alignment,\n      alt,\n      src,\n      height,\n      margin,\n      justifyContent,\n      width\n    } = data;\n    const style = {};\n\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    style.margin = margin;\n    style.justifyContent = justifyContent;\n\n    if (alignment) {\n      switch (alignment) {\n        case 'left':\n          style.justifyContent = 'flex-start';\n          style.margin = '0';\n          break;\n        case 'center':\n          style.justifyContent = 'center';\n          style.margin = '0 auto';\n          break;\n        case 'right':\n          style.justifyContent = 'flex-end';\n          style.margin = 'auto 0 0 auto';\n          break;\n        default:\n          style.justifyContent = 'flex-start';\n          break;\n      }\n    }\n\n    style.objectFit = 'contain';\n\n    const props = {\n      src,\n      style,\n      alignment,\n      alt,\n    };\n\n    return <img {...props} />;\n  },\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/image/index.jsx"],"names":["log","ImagePlugin","opts","toolbar","insertImageRequested","icon","onClick","value","onChange","inline","Inline","create","type","isVoid","data","loaded","src","undefined","change","insertInline","getValue","InsertImageHandler","supports","node","object","customToolbar","onToolbarDone","alignment","get","alt","imageLoaded","newValues","done","update","toObject","setNodeByKey","key","Tb","disableImageAlignmentButtons","showDone","name","deleteNode","e","preventDefault","onDelete","merge","Data","deleteStatus","err","v","removeNodeByKey","stopReset","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","Object","assign","onFocus","onBlur","maxImageWidth","maxImageHeight","normalizeNode","textNodeMap","updateNodesArray","index","d","text","push","length","withoutNormalization","forEach","insertTextByKey","serialization","deserialize","el","tagName","toLowerCase","style","width","height","margin","justifyContent","parseInt","replace","out","getAttribute","serialize","objectFit"],"mappings":"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","sourcesContent":["import { Data, Inline } from 'slate';\n\nimport Image from '@material-ui/icons/Image';\nimport ImageComponent from './component';\nimport ImageToolbar from './image-toolbar';\nimport InsertImageHandler from './insert-image-handler';\nimport React from 'react';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nexport default function ImagePlugin(opts) {\n  const toolbar = opts.insertImageRequested && {\n    icon: <Image />,\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: 'image',\n        isVoid: true,\n        data: {\n          loaded: false,\n          src: undefined,\n        },\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      opts.insertImageRequested((getValue) => new InsertImageHandler(inline, getValue, onChange));\n    },\n    supports: (node) => node.object === 'inline' && node.type === 'image',\n    customToolbar: (node, value, onToolbarDone) => {\n      const alignment = node.data.get('alignment');\n      const alt = node.data.get('alt');\n      const imageLoaded = node.data.get('loaded') !== false;\n      const onChange = (newValues, done) => {\n        const update = {\n          ...node.data.toObject(),\n          ...newValues,\n        };\n\n        const change = value.change().setNodeByKey(node.key, { data: update });\n        onToolbarDone(change, done);\n      };\n\n      const Tb = () => (\n        <ImageToolbar\n          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}\n          alt={alt}\n          imageLoaded={imageLoaded}\n          alignment={alignment || 'left'}\n          onChange={onChange}\n        />\n      );\n      return Tb;\n    },\n    showDone: true,\n  };\n\n  return {\n    name: 'image',\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      if (opts.onDelete) {\n        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));\n\n        let change = value.change().setNodeByKey(node.key, { data: update });\n\n        onChange(change);\n        opts.onDelete(node.data.get('src'), (err, v) => {\n          if (!err) {\n            change = v.change().removeNodeByKey(node.key);\n          } else {\n            log('[error]: ', err);\n            change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));\n          }\n          onChange(change);\n        });\n      } else {\n        let change = value.change().removeNodeByKey(node.key);\n        onChange(change);\n      }\n    },\n    stopReset: (value) => {\n      const imgPendingInsertion = value.document.findDescendant((n) => {\n        if (n.type !== 'image') {\n          return;\n        }\n        return n.data.get('loaded') === false;\n      });\n      /** don't reset if there is an image pending insertion */\n      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;\n    },\n    renderNode(props) {\n      if (props.node.type === 'image') {\n        const all = Object.assign(\n          {\n            onDelete: opts.onDelete,\n            onFocus: opts.onFocus,\n            onBlur: opts.onBlur,\n            maxImageWidth: opts.maxImageWidth,\n            maxImageHeight: opts.maxImageHeight,\n          },\n          props,\n        );\n        return <ImageComponent {...all} />;\n      }\n    },\n    normalizeNode: (node) => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant((d) => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        if (d.type === 'image') {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return (change) => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    },\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    const name = el.tagName.toLowerCase();\n    if (name !== 'img') return;\n\n    log('deserialize: ', name);\n    const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };\n    const width = parseInt(style.width.replace('px', ''), 10) || null;\n    const height = parseInt(style.height.replace('px', ''), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: 'image',\n      isVoid: true,\n      data: {\n        src: el.getAttribute('src'),\n        width,\n        height,\n        margin: el.style.margin,\n        justifyContent: el.style.justifyContent,\n        alignment: el.getAttribute('alignment'),\n        alt: el.getAttribute('alt'),\n      },\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    if (object.type !== 'image') return;\n\n    const { data } = object;\n    const src = data.get('src');\n    const width = data.get('width');\n    const height = data.get('height');\n    const alignment = data.get('alignment') || 'left';\n    const margin = data.get('margin');\n    const justifyContent = data.get('margin');\n    const alt = data.get('alt');\n    const style = {};\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    style.margin = margin;\n    style.justifyContent = justifyContent;\n\n    if (alignment) {\n      switch (alignment) {\n        case 'left':\n          style.justifyContent = 'flex-start';\n          style.margin = '0';\n          break;\n        case 'center':\n          style.justifyContent = 'center';\n          style.margin = '0 auto';\n          break;\n        case 'right':\n          style.justifyContent = 'flex-end';\n          style.margin = 'auto 0 0 auto';\n          break;\n        default:\n          style.justifyContent = 'flex-start';\n          break;\n      }\n    }\n\n    style.objectFit = 'contain';\n\n    const props = {\n      src,\n      style,\n      alignment,\n      alt,\n    };\n\n    return <img {...props} />;\n  },\n};\n"],"file":"index.js"}

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

@@ -1,45 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _slate = require("slate");
+
 var _debug = _interopRequireDefault(require("debug"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var log = (0, _debug["default"])('@pie-lib:editable-html:image:insert-image-handler');
 
+var log = (0, _debug["default"])('@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
  */
+
 var InsertImageHandler = /*#__PURE__*/function () {
-  function InsertImageHandler(node, placeHolderPath, editor) {
+  function InsertImageHandler(placeholderBlock, getValue, onChange) {
     var isPasted = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     (0, _classCallCheck2["default"])(this, InsertImageHandler);
-    this.node = node;
-    this.placeHolderPath = placeHolderPath;
-    this.editor = editor;
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onChange = onChange;
     this.isPasted = isPasted;
     this.chosenFile = null;
   }
+
   (0, _createClass2["default"])(InsertImageHandler, [{
     key: "getPlaceholderInDocument",
     value: function getPlaceholderInDocument(value) {
       var document = value.document;
-      var directChild = document.getChild(this.placeHolderPath);
+      var directChild = document.getChild(this.placeholderBlock.key);
+
       if (directChild) {
         return directChild;
       }
-      var child = document.getDescendant(this.placeHolderPath);
+
+      var child = document.getDescendant(this.placeholderBlock.key);
+
       if (child) {
         return child;
       } else {
@@ -51,107 +58,81 @@ var InsertImageHandler = /*#__PURE__*/function () {
     key: "cancel",
     value: function cancel() {
       log('insert cancelled');
-      this.editor.apply({
-        type: 'remove_node',
-        path: this.placeHolderPath
-      });
+      var c = this.getValue().change().removeNodeByKey(this.placeholderBlock.key);
+      this.onChange(c);
     }
   }, {
     key: "done",
     value: function done(err, src) {
       log('done: err:', err);
+
       if (err) {
         //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: src,
-              loaded: true,
-              percent: 100
-            }
-          }
-        });
-        var newData = _objectSpread(_objectSpread({}, this.node.data), {}, {
-          src: src,
+        var value = this.getValue();
+        var child = this.getPlaceholderInDocument(value);
+        var data = child.data.merge(_slate.Data.create({
           loaded: true,
+          src: src,
           percent: 100
+        }));
+        var change = value.change().setNodeByKey(this.placeholderBlock.key, {
+          data: data
         });
-        this.node = Object.assign({}, this.node, {
-          data: (0, _omit["default"])(newData, 'newImage')
-        });
+        this.onChange(change);
       }
     }
-
     /**
      * Notify handler that the user chose a file - will create a change with a preview in the editor.
      *
      * @param {File} file - the file that the user chose using a file input.
      */
+
   }, {
     key: "fileChosen",
     value: function fileChosen(file) {
       var _this = this;
+
       if (!file) {
         return;
-      }
+      } // Save the chosen file to this.chosenFile
+
 
-      // Save the chosen file to this.chosenFile
       this.chosenFile = file;
       log('[fileChosen] file: ', file);
       var reader = new FileReader();
+
       reader.onload = function () {
+        var value = _this.getValue();
+
         var dataURL = reader.result;
-        _this.editor.apply({
-          type: 'set_node',
-          path: _this.placeHolderPath,
-          properties: {
-            data: _this.node.data
-          },
-          newProperties: {
-            data: _objectSpread(_objectSpread({}, _this.node.data), {}, {
-              src: dataURL
-            })
-          }
-        });
-        _this.node = Object.assign({}, _this.node, {
-          data: {
-            src: dataURL
-          }
+
+        var child = _this.getPlaceholderInDocument(value);
+
+        var data = child.data.set('src', dataURL);
+        var change = value.change().setNodeByKey(_this.placeholderBlock.key, {
+          data: data
         });
+
+        _this.onChange(change);
       };
+
       reader.readAsDataURL(file);
     }
   }, {
     key: "progress",
     value: function 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: _objectSpread(_objectSpread({}, this.node.data), {}, {
-            percent: percent
-          })
-        }
-      });
-      this.node = Object.assign({}, this.node, {
-        data: {
-          percent: percent
-        }
+      var value = this.getValue();
+      var child = this.getPlaceholderInDocument(value);
+      var data = child.data.set('percent', percent);
+      var change = value.change().setNodeByKey(this.placeholderBlock.key, {
+        data: data
       });
-    }
+      this.onChange(change);
+    } // Add a getter method to retrieve the chosen file
 
-    // Add a getter method to retrieve the chosen file
   }, {
     key: "getChosenFile",
     value: function getChosenFile() {
@@ -160,6 +141,7 @@ var InsertImageHandler = /*#__PURE__*/function () {
   }]);
   return InsertImageHandler;
 }();
+
 var _default = InsertImageHandler;
 exports["default"] = _default;
 //# sourceMappingURL=insert-image-handler.js.map