@pie-lib/editable-html 12.1.0-next.2 → 12.1.0-next.5

package/lib/plugins/image/image-toolbar.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ImageToolbar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+var _client = require("react-dom/client");
+var _styles = require("@mui/material/styles");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _toolbarButtons = require("../toolbar/toolbar-buttons");
+var _altDialog = _interopRequireDefault(require("./alt-dialog"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
+var AlignmentButton = function AlignmentButton(_ref) {
+  var alignment = _ref.alignment,
+    active = _ref.active,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
+    active: active,
+    onToggle: function onToggle() {
+      return onClick(alignment);
+    },
+    label: alignment
+  }, alignment);
+};
+AlignmentButton.propTypes = {
+  alignment: _propTypes["default"].string.isRequired,
+  active: _propTypes["default"].bool.isRequired,
+  onClick: _propTypes["default"].func.isRequired
+};
+var StyledHolder = (0, _styles.styled)('div')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingLeft: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center'
+  };
+});
+var StyledAltText = (0, _styles.styled)('span')(function () {
+  return {
+    '&.disabled': {
+      opacity: 0.5
+    },
+    '&.altButton': {
+      borderLeft: '1px solid grey',
+      paddingLeft: 8,
+      marginLeft: 4
+    }
+  };
+});
+var ImageToolbar = exports.ImageToolbar = /*#__PURE__*/function (_React$Component) {
+  function ImageToolbar() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ImageToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ImageToolbar, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "dialogRoot", null);
+    (0, _defineProperty2["default"])(_this, "onAltTextDone", function (newAlt) {
+      log('[onAltTextDone]: alt:', newAlt);
+      _this.props.onChange({
+        alt: newAlt
+      }, true);
+    });
+    (0, _defineProperty2["default"])(_this, "onAlignmentClick", function (alignment) {
+      log('[onAlignmentClick]: alignment:', alignment);
+      _this.props.onChange({
+        alignment: alignment
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "renderDialog", function () {
+      var alt = _this.props.alt;
+      var popoverEl = document.createElement('div');
+      var el = /*#__PURE__*/_react["default"].createElement(_altDialog["default"], {
+        alt: alt,
+        onDone: _this.onAltTextDone
+      });
+      _this.dialogRoot = (0, _client.createRoot)(popoverEl);
+      _this.dialogRoot.render(el);
+      document.body.appendChild(popoverEl);
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(ImageToolbar, _React$Component);
+  return (0, _createClass2["default"])(ImageToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        alignment = _this$props.alignment,
+        imageLoaded = _this$props.imageLoaded,
+        disableImageAlignmentButtons = _this$props.disableImageAlignmentButtons;
+      return /*#__PURE__*/_react["default"].createElement(StyledHolder, null, !disableImageAlignmentButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'left',
+        active: alignment === 'left',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'center',
+        active: alignment === 'center',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'right',
+        active: alignment === 'right',
+        onClick: this.onAlignmentClick
+      })), /*#__PURE__*/_react["default"].createElement(StyledAltText, {
+        className: (0, _classnames["default"])({
+          disabled: !imageLoaded,
+          altButton: !disableImageAlignmentButtons
+        }),
+        onMouseDown: function onMouseDown(event) {
+          return imageLoaded && _this2.renderDialog(event);
+        }
+      }, "Alt text"));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(ImageToolbar, "propTypes", {
+  onChange: _propTypes["default"].func.isRequired,
+  alignment: _propTypes["default"].string,
+  alt: _propTypes["default"].string,
+  imageLoaded: _propTypes["default"].bool,
+  disableImageAlignmentButtons: _propTypes["default"].bool
+});
+var _default = exports["default"] = ImageToolbar;
+//# sourceMappingURL=image-toolbar.js.map

package/lib/plugins/image/image-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-toolbar.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_client","_styles","_classnames","_toolbarButtons","_altDialog","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","log","debug","AlignmentButton","_ref","alignment","active","onClick","createElement","MarkButton","onToggle","label","propTypes","PropTypes","string","isRequired","bool","func","StyledHolder","styled","_ref2","theme","paddingLeft","spacing","display","alignItems","StyledAltText","opacity","borderLeft","marginLeft","ImageToolbar","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","newAlt","props","onChange","alt","popoverEl","document","el","onDone","onAltTextDone","dialogRoot","createRoot","render","body","appendChild","_inherits2","_createClass2","key","value","_this2","_this$props","imageLoaded","disableImageAlignmentButtons","Fragment","onAlignmentClick","className","classNames","disabled","altButton","onMouseDown","event","renderDialog","React","Component","_default"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { createRoot } from 'react-dom/client';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nconst StyledHolder = styled('div')(({ theme }) => ({\n  paddingLeft: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n}));\n\nconst StyledAltText = styled('span')(() => ({\n  '&.disabled': {\n    opacity: 0.5,\n  },\n  '&.altButton': {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  },\n}));\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  dialogRoot = null;\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    this.dialogRoot = createRoot(popoverEl);\n    this.dialogRoot.render(el);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <StyledHolder>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <StyledAltText\n          className={classNames({\n            disabled: !imageLoaded,\n            altButton: !disableImageAlignmentButtons,\n          })}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </StyledAltText>\n      </StyledHolder>\n    );\n  }\n}\n\nexport default ImageToolbar;\n"],"mappings":"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","ignoreList":[]}

package/lib/plugins/image/index.js

@@ -0,0 +1,223 @@
+"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 _slate = require("slate");
+var _Image = _interopRequireDefault(require("@mui/icons-material/Image"));
+var _component = _interopRequireDefault(require("./component"));
+var _imageToolbar = _interopRequireDefault(require("./image-toolbar"));
+var _insertImageHandler = _interopRequireDefault(require("./insert-image-handler"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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),
+    ariaLabel: 'Insert Image',
+    onClick: function onClick(value, onChange) {
+      log('[toolbar] onClick');
+      var inline = _slate.Inline.create({
+        type: 'image',
+        isVoid: true,
+        data: {
+          loaded: false,
+          src: undefined
+        }
+      });
+      var change = value.change().insertInline(inline);
+      onChange(change);
+      opts.insertImageRequested(inline, function (onFinish, getValue) {
+        return new _insertImageHandler["default"](inline, onFinish, getValue, onChange);
+      });
+    },
+    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(change, done);
+      };
+      var Tb = function Tb() {
+        return /*#__PURE__*/_react["default"].createElement(_imageToolbar["default"], {
+          disableImageAlignmentButtons: opts.disableImageAlignmentButtons,
+          alt: alt,
+          imageLoaded: imageLoaded,
+          alignment: alignment || 'left',
+          onChange: onChange
+        });
+      };
+      return Tb;
+    },
+    showDone: true
+  };
+  return {
+    name: 'image',
+    toolbar: toolbar,
+    deleteNode: function deleteNode(e, node, value, onChange) {
+      e.preventDefault();
+      if (opts.onDelete) {
+        var update = node.data.merge(_slate.Data.create({
+          deleteStatus: 'pending'
+        }));
+        var change = value.change().setNodeByKey(node.key, {
+          data: update
+        });
+        onChange(change);
+        opts.onDelete(node, function (err, v) {
+          if (!err) {
+            change = v.change().removeNodeByKey(node.key);
+          } else {
+            log('[error]: ', err);
+            change = v.change().setNodeByKey(node.key, node.data.merge(_slate.Data.create({
+              deleteStatus: 'failed'
+            })));
+          }
+          onChange(change);
+        });
+      } else {
+        var _change = value.change().removeNodeByKey(node.key);
+        onChange(_change);
+      }
+    },
+    stopReset: function stopReset(value) {
+      var imgPendingInsertion = value.document.findDescendant(function (n) {
+        if (n.type !== 'image') {
+          return;
+        }
+        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) {
+      if (props.node.type === 'image') {
+        var all = Object.assign({
+          onDelete: opts.onDelete,
+          onFocus: opts.onFocus,
+          onBlur: opts.onBlur,
+          maxImageWidth: opts.maxImageWidth,
+          maxImageHeight: opts.maxImageHeight
+        }, props);
+        return /*#__PURE__*/_react["default"].createElement(_component["default"], all);
+      }
+    },
+    normalizeNode: function normalizeNode(node) {
+      var textNodeMap = {};
+      var updateNodesArray = [];
+      var index = 0;
+      if (node.object !== 'document') return;
+      node.findDescendant(function (d) {
+        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;
+      return function (change) {
+        change.withoutNormalization(function () {
+          updateNodesArray.forEach(function (n) {
+            return change.insertTextByKey(n.key, 0, ' ');
+          });
+        });
+      };
+    }
+  };
+}
+var serialization = exports.serialization = {
+  deserialize: function deserialize(el /*, next*/) {
+    var name = el.tagName.toLowerCase();
+    if (name !== 'img') return;
+    log('deserialize: ', name);
+    var style = el.style || {
+      width: '',
+      height: '',
+      margin: '',
+      justifyContent: ''
+    };
+    var width = parseInt(style.width.replace('px', ''), 10) || null;
+    var height = parseInt(style.height.replace('px', ''), 10) || null;
+    var out = {
+      object: 'inline',
+      type: 'image',
+      isVoid: true,
+      data: {
+        src: el.getAttribute('src'),
+        width: width,
+        height: height,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment'),
+        alt: el.getAttribute('alt')
+      }
+    };
+    log('return object: ', out);
+    return out;
+  },
+  serialize: function serialize(object /*, children*/) {
+    if (object.type !== 'image') return;
+    var data = object.data;
+    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,
+      style: style,
+      alignment: alignment,
+      alt: alt
+    };
+    return /*#__PURE__*/_react["default"].createElement("img", props);
+  }
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_slate","require","_Image","_interopRequireDefault","_component","_imageToolbar","_insertImageHandler","_react","_debug","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","ImagePlugin","opts","toolbar","insertImageRequested","icon","createElement","ariaLabel","onClick","value","onChange","inline","Inline","create","type","isVoid","data","loaded","src","undefined","change","insertInline","onFinish","getValue","InsertImageHandler","supports","node","object","customToolbar","onToolbarDone","alignment","get","alt","imageLoaded","newValues","done","update","toObject","setNodeByKey","key","Tb","disableImageAlignmentButtons","showDone","name","deleteNode","preventDefault","onDelete","merge","Data","deleteStatus","err","v","removeNodeByKey","stopReset","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","assign","onFocus","onBlur","maxImageWidth","maxImageHeight","normalizeNode","textNodeMap","updateNodesArray","index","d","text","withoutNormalization","insertTextByKey","serialization","exports","deserialize","el","tagName","toLowerCase","style","width","height","margin","justifyContent","parseInt","replace","out","getAttribute","serialize","concat","objectFit"],"sources":["../../../src/plugins/image/index.jsx"],"sourcesContent":["import { Data, Inline } from 'slate';\n\nimport Image from '@mui/icons-material/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    ariaLabel: 'Insert 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\n      onChange(change);\n      opts.insertImageRequested(\n        inline,\n        (onFinish, getValue) => new InsertImageHandler(inline, onFinish, getValue, onChange),\n      );\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, (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"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slate = require("slate");
+var _debug = _interopRequireDefault(require("debug"));
+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} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Function} onFinish - a function to call if uploading fails or succeeds
+ * @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(placeholderBlock, onFinish, getValue, onChange) {
+    var isPasted = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    (0, _classCallCheck2["default"])(this, InsertImageHandler);
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onFinish = onFinish;
+    this.onChange = onChange;
+    this.isPasted = isPasted;
+    this.chosenFile = null;
+  }
+  return (0, _createClass2["default"])(InsertImageHandler, [{
+    key: "getPlaceholderInDocument",
+    value: function getPlaceholderInDocument(value) {
+      var document = value.document;
+      var directChild = document.getChild(this.placeholderBlock.key);
+      if (directChild) {
+        return directChild;
+      }
+      var child = document.getDescendant(this.placeholderBlock.key);
+      if (child) {
+        return child;
+      } else {
+        // eslint-disable-next-line
+        throw new Error("insert-image: Can't find placeholder!");
+      }
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      log('insert cancelled');
+      try {
+        var value = this.getValue();
+        var child = this.getPlaceholderInDocument(value);
+        if (child) {
+          var c = value.change().removeNodeByKey(child.key);
+          this.onChange(c);
+          this.onFinish(false);
+        }
+      } catch (err) {
+        //
+      }
+    }
+  }, {
+    key: "done",
+    value: function done(err, src) {
+      log('done: err:', err);
+      if (err) {
+        //eslint-disable-next-line
+        console.log(err);
+        this.onFinish(false);
+      } else {
+        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.onChange(change);
+        this.onFinish(true);
+      }
+    }
+
+    /**
+     * 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
+      this.chosenFile = file;
+      log('[fileChosen] file: ', file);
+      var reader = new FileReader();
+      reader.onload = function () {
+        var value = _this.getValue();
+        var dataURL = reader.result;
+        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);
+      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
+  }, {
+    key: "getChosenFile",
+    value: function getChosenFile() {
+      return this.chosenFile;
+    }
+  }]);
+}();
+var _default = exports["default"] = InsertImageHandler;
+//# sourceMappingURL=insert-image-handler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"insert-image-handler.js","names":["_slate","require","_debug","_interopRequireDefault","log","debug","InsertImageHandler","placeholderBlock","onFinish","getValue","onChange","isPasted","arguments","length","undefined","_classCallCheck2","chosenFile","_createClass2","key","value","getPlaceholderInDocument","document","directChild","getChild","child","getDescendant","Error","cancel","c","change","removeNodeByKey","err","done","src","console","data","merge","Data","create","loaded","percent","setNodeByKey","fileChosen","file","_this","reader","FileReader","onload","dataURL","result","set","readAsDataURL","progress","bytes","total","getChosenFile","_default","exports"],"sources":["../../../src/plugins/image/insert-image-handler.js"],"sourcesContent":["import { Data } from 'slate';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:image:insert-image-handler');\n\n/**\n * Handles user selection, insertion (or cancellation) of an image into the editor.\n * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image\n * @param {Function} onFinish - a function to call if uploading fails or succeeds\n * @param {Function} getValue - a function to return the value of the editor\n * @param {Function} onChange - callback to notify changes applied by the handler\n * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted\n */\nclass InsertImageHandler {\n  constructor(placeholderBlock, onFinish, getValue, onChange, isPasted = false) {\n    this.placeholderBlock = placeholderBlock;\n    this.getValue = getValue;\n    this.onFinish = onFinish;\n    this.onChange = onChange;\n    this.isPasted = isPasted;\n    this.chosenFile = null;\n  }\n\n  getPlaceholderInDocument(value) {\n    const { document } = value;\n    const directChild = document.getChild(this.placeholderBlock.key);\n\n    if (directChild) {\n      return directChild;\n    }\n\n    const child = document.getDescendant(this.placeholderBlock.key);\n\n    if (child) {\n      return child;\n    } else {\n      // eslint-disable-next-line\n      throw new Error(\"insert-image: Can't find placeholder!\");\n    }\n  }\n\n  cancel() {\n    log('insert cancelled');\n\n    try {\n      const value = this.getValue();\n      const child = this.getPlaceholderInDocument(value);\n\n      if (child) {\n        const c = value.change().removeNodeByKey(child.key);\n        this.onChange(c);\n        this.onFinish(false);\n      }\n    } catch (err) {\n      //\n    }\n  }\n\n  done(err, src) {\n    log('done: err:', err);\n    if (err) {\n      //eslint-disable-next-line\n      console.log(err);\n      this.onFinish(false);\n    } else {\n      const value = this.getValue();\n      const child = this.getPlaceholderInDocument(value);\n      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));\n\n      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });\n      this.onChange(change);\n      this.onFinish(true);\n    }\n  }\n\n  /**\n   * Notify handler that the user chose a file - will create a change with a preview in the editor.\n   *\n   * @param {File} file - the file that the user chose using a file input.\n   */\n  fileChosen(file) {\n    if (!file) {\n      return;\n    }\n\n    // Save the chosen file to this.chosenFile\n    this.chosenFile = file;\n\n    log('[fileChosen] file: ', file);\n    const reader = new FileReader();\n    reader.onload = () => {\n      const value = this.getValue();\n      const dataURL = reader.result;\n      const child = this.getPlaceholderInDocument(value);\n      const data = child.data.set('src', dataURL);\n      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });\n      this.onChange(change);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  progress(percent, bytes, total) {\n    log('progress: ', percent, bytes, total);\n    const value = this.getValue();\n    const child = this.getPlaceholderInDocument(value);\n    const data = child.data.set('percent', percent);\n    const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });\n    this.onChange(change);\n  }\n\n  // Add a getter method to retrieve the chosen file\n  getChosenFile() {\n    return this.chosenFile;\n  }\n}\n\nexport default InsertImageHandler;\n"],"mappings":"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","ignoreList":[]}