@pie-lib/editable-html-tip-tap 1.1.1-next.0 → 1.1.1-next.1

package/lib/extensions/image-component.js

@@ -0,0 +1,314 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.parse-int.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _debug = _interopRequireDefault(require("debug"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+var _styles = require("@mui/material/styles");
+var _react2 = require("@tiptap/react");
+var _InsertImageHandler = _interopRequireDefault(require("../components/image/InsertImageHandler"));
+var _ImageToolbar = _interopRequireDefault(require("../components/image/ImageToolbar"));
+var _customToolbarWrapper = _interopRequireDefault(require("./custom-toolbar-wrapper"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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:component');
+var StyledProgress = (0, _styles.styled)(_LinearProgress["default"], {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'hideProgress';
+  }
+})(function (_ref) {
+  var hideProgress = _ref.hideProgress;
+  return _objectSpread({
+    position: 'absolute',
+    left: '0',
+    width: 'fit-content',
+    top: '0%',
+    transition: 'opacity 200ms linear'
+  }, hideProgress && {
+    opacity: 0
+  });
+});
+var StyledRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['active', 'loading', 'pendingDelete'].includes(prop);
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    active = _ref2.active,
+    loading = _ref2.loading,
+    pendingDelete = _ref2.pendingDelete;
+  return _objectSpread(_objectSpread({
+    position: 'relative',
+    border: active ? "solid 1px ".concat(theme.palette.primary.main) : "solid 1px ".concat(theme.palette.common.white),
+    display: 'flex',
+    transition: 'opacity 200ms linear'
+  }, loading && {
+    opacity: 0.3
+  }), pendingDelete && {
+    opacity: 0.3
+  });
+});
+var StyledImageContainer = (0, _styles.styled)('div')(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+    '&&:hover > .resize': {
+      display: 'block'
+    }
+  };
+});
+var StyledResize = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none'
+  };
+});
+var sizePx = function sizePx(s) {
+  return s ? "".concat(s, "px") : 'calc(20px)';
+};
+function ImageComponent(props) {
+  var node = props.node,
+    editor = props.editor,
+    attributes = props.attributes,
+    onFocus = props.onFocus,
+    selected = props.selected,
+    options = props.options,
+    _props$maxImageWidth = props.maxImageWidth,
+    maxImageWidth = _props$maxImageWidth === void 0 ? 700 : _props$maxImageWidth,
+    _props$maxImageHeight = props.maxImageHeight,
+    maxImageHeight = _props$maxImageHeight === void 0 ? 900 : _props$maxImageHeight,
+    latex = props.latex,
+    handleChange = props.handleChange,
+    handleDone = props.handleDone;
+  var alt = node.attrs.alt;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showToolbar = _useState2[0],
+    setShowToolbar = _useState2[1];
+  var latestNodeRef = (0, _react.useRef)(node);
+  var imgRef = (0, _react.useRef)(null);
+  var resizeRef = (0, _react.useRef)(null);
+  var toolbarRef = (0, _react.useRef)(null);
+  var getPercentFromWidth = (0, _react.useCallback)(function (width) {
+    var floored = width / imgRef.current.naturalWidth * 4;
+    return parseInt(floored.toFixed(0) * 25, 10);
+  }, []);
+  var applySizeData = (0, _react.useCallback)(function () {
+    if (!node.attrs.width || !imgRef.current) return;
+    var update = _objectSpread(_objectSpread({}, node.attrs), {}, {
+      resizePercent: getPercentFromWidth(node.attrs.width)
+    });
+    if (!(0, _isEqual["default"])(update, node.attrs)) {
+      editor.commands.updateAttributes('imageUploadNode', update);
+    }
+  }, [editor, node.attrs, getPercentFromWidth]);
+
+  // keep ref in sync with latest node
+  (0, _react.useEffect)(function () {
+    latestNodeRef.current = node;
+  }, [node]);
+  (0, _react.useEffect)(function () {
+    var selection = editor.state.selection;
+    var onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
+  (0, _react.useEffect)(function () {
+    options.imageHandling.insertImageRequested(node, function (finish) {
+      return new _InsertImageHandler["default"](editor, node, finish);
+    });
+    applySizeData();
+    var resizeHandle = resizeRef.current;
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', initResize, false);
+    }
+    return function () {
+      if (resizeHandle) {
+        resizeHandle.removeEventListener('mousedown', initResize, false);
+      }
+      options.imageHandling.onDelete(latestNodeRef.current);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    applySizeData();
+  });
+  var loadImage = (0, _react.useCallback)(function () {
+    var box = imgRef.current;
+    if (!box) return;
+    if (!box.style.width || box.style.width === 'calc(20px)') {
+      var w = Math.min(box.naturalWidth, maxImageWidth);
+      var h = Math.min(box.naturalHeight, maxImageHeight);
+      box.style.width = "".concat(w, "px");
+      box.style.height = "".concat(h, "px");
+      var update = {
+        width: w,
+        height: h
+      };
+      if (!(0, _isEqual["default"])(update, node.attrs)) {
+        editor.commands.updateAttributes('imageUploadNode', update);
+      }
+    }
+  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);
+  var updateAspect = function updateAspect(initial, next) {
+    var keepAspect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var resizeType = arguments.length > 3 ? arguments[3] : undefined;
+    if (keepAspect) {
+      var ratio = initial.width / initial.height;
+      if (resizeType === 'height') return {
+        width: next.height * ratio,
+        height: next.height
+      };
+      return {
+        width: next.width,
+        height: next.width / ratio
+      };
+    }
+    return next;
+  };
+  var startResize = (0, _react.useCallback)(function (e) {
+    var box = imgRef.current;
+    if (!box) return;
+    var bounds = e.target.getBoundingClientRect();
+    var initial = {
+      width: box.naturalWidth,
+      height: box.naturalHeight
+    };
+    var next = updateAspect(initial, {
+      width: e.clientX - bounds.left,
+      height: e.clientY - bounds.top
+    });
+    if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {
+      box.style.width = "".concat(next.width, "px");
+      box.style.height = "".concat(next.height, "px");
+      var update = {
+        width: next.width,
+        height: next.height
+      };
+      if (!(0, _isEqual["default"])(update, node.attrs)) {
+        editor.commands.updateAttributes('imageUploadNode', update);
+      }
+    }
+  }, [editor, node.attrs]);
+  var onChange = (0, _react.useCallback)(function (newValues) {
+    editor.commands.updateAttributes('imageUploadNode', newValues);
+  }, [editor]);
+  var stopResize = (0, _react.useCallback)(function () {
+    window.removeEventListener('mousemove', startResize);
+    window.removeEventListener('mouseup', stopResize);
+  }, [startResize]);
+  var initResize = (0, _react.useCallback)(function () {
+    window.addEventListener('mousemove', startResize);
+    window.addEventListener('mouseup', stopResize);
+  }, [startResize, stopResize]);
+  var style = {
+    width: sizePx(node.attrs.width),
+    height: sizePx(node.attrs.height),
+    objectFit: 'contain'
+  };
+  var flexAlign = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+  }[node.attrs.alignment] || 'flex-start';
+  return /*#__PURE__*/_react["default"].createElement(_react2.NodeViewWrapper, null, /*#__PURE__*/_react["default"].createElement(StyledRoot, {
+    onFocus: onFocus,
+    active: selected,
+    loading: !node.attrs.loaded,
+    pendingDelete: node.attrs.deleteStatus === 'pending',
+    style: {
+      justifyContent: flexAlign
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledProgress, {
+    mode: "determinate",
+    value: node.attrs.percent || 0,
+    hideProgress: node.attrs.loaded
+  }), /*#__PURE__*/_react["default"].createElement(StyledImageContainer, null, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, attributes, {
+    ref: imgRef,
+    src: node.attrs.src,
+    style: style,
+    onLoad: loadImage,
+    alt: node.attrs.alt
+  })), /*#__PURE__*/_react["default"].createElement(StyledResize, {
+    ref: resizeRef,
+    className: "resize"
+  }))), showToolbar && /*#__PURE__*/_react["default"].createElement("div", {
+    ref: toolbarRef,
+    style: {
+      position: 'absolute',
+      top: '100%',
+      left: 0,
+      zIndex: 20,
+      background: 'var(--editable-html-toolbar-bg, #efefef)',
+      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], (0, _extends2["default"])({
+    showDone: true
+  }, options, {
+    onDone: function onDone() {
+      var _props$imageHandling;
+      setShowToolbar(false);
+      (_props$imageHandling = props.imageHandling) === null || _props$imageHandling === void 0 || _props$imageHandling.onDone();
+      props.editor.commands.focus('end');
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_ImageToolbar["default"], {
+    disableImageAlignmentButtons: options.disableImageAlignmentButtons,
+    alt: node.attrs.alt,
+    imageLoaded: node.attrs.loaded,
+    alignment: node.attrs.alignment || 'left',
+    onChange: onChange
+  }))));
+}
+ImageComponent.propTypes = {
+  node: _propTypes["default"].object.isRequired,
+  editor: _propTypes["default"].object.isRequired,
+  attributes: _propTypes["default"].object,
+  onFocus: _propTypes["default"].func,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
+};
+var _default = exports["default"] = ImageComponent;
+//# sourceMappingURL=image-component.js.map

package/lib/extensions/image-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-component.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isEqual","_debug","_LinearProgress","_styles","_react2","_InsertImageHandler","_ImageToolbar","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledProgress","styled","LinearProgress","shouldForwardProp","prop","_ref","hideProgress","position","left","width","top","transition","opacity","StyledRoot","includes","_ref2","theme","active","loading","pendingDelete","border","concat","palette","primary","main","common","white","display","StyledImageContainer","_ref3","alignItems","StyledResize","_ref4","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","sizePx","s","ImageComponent","props","node","editor","attributes","onFocus","selected","options","_props$maxImageWidth","maxImageWidth","_props$maxImageHeight","maxImageHeight","latex","handleChange","handleDone","alt","attrs","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","latestNodeRef","useRef","imgRef","resizeRef","toolbarRef","getPercentFromWidth","useCallback","floored","current","naturalWidth","parseInt","toFixed","applySizeData","update","resizePercent","isEqual","commands","updateAttributes","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","imageHandling","insertImageRequested","finish","InsertImageHandler","resizeHandle","addEventListener","initResize","removeEventListener","onDelete","loadImage","box","style","w","Math","min","h","naturalHeight","updateAspect","initial","next","keepAspect","undefined","resizeType","ratio","startResize","bounds","target","getBoundingClientRect","clientX","clientY","onChange","newValues","stopResize","window","objectFit","flexAlign","center","right","alignment","createElement","NodeViewWrapper","loaded","deleteStatus","justifyContent","mode","value","percent","_extends2","ref","src","onLoad","className","zIndex","background","boxShadow","showDone","onDone","_props$imageHandling","focus","disableImageAlignmentButtons","imageLoaded","propTypes","PropTypes","object","isRequired","func","number","_default","exports"],"sources":["../../src/extensions/image-component.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport debug from 'debug';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport { styled } from '@mui/material/styles';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport InsertImageHandler from '../components/image/InsertImageHandler';\nimport ImageToolbar from '../components/image/ImageToolbar';\nimport CustomToolbarWrapper from './custom-toolbar-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst StyledProgress = styled(LinearProgress, {\n  shouldForwardProp: (prop) => prop !== 'hideProgress',\n})(({ hideProgress }) => ({\n  position: 'absolute',\n  left: '0',\n  width: 'fit-content',\n  top: '0%',\n  transition: 'opacity 200ms linear',\n  ...(hideProgress && {\n    opacity: 0,\n  }),\n}));\n\nconst StyledRoot = styled('div', {\n  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),\n})(({ theme, active, loading, pendingDelete }) => ({\n  position: 'relative',\n  border: active ? `solid 1px ${theme.palette.primary.main}` : `solid 1px ${theme.palette.common.white}`,\n  display: 'flex',\n  transition: 'opacity 200ms linear',\n  ...(loading && {\n    opacity: 0.3,\n  }),\n  ...(pendingDelete && {\n    opacity: 0.3,\n  }),\n}));\n\nconst StyledImageContainer = styled('div')(({ theme }) => ({\n  position: 'relative',\n  width: 'fit-content',\n  display: 'flex',\n  alignItems: 'center',\n  '&&:hover > .resize': {\n    display: 'block',\n  },\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.primary.main,\n  cursor: 'col-resize',\n  height: '35px',\n  width: '5px',\n  borderRadius: 8,\n  marginLeft: '5px',\n  marginRight: '10px',\n  display: 'none',\n}));\n\nconst sizePx = (s) => (s ? `${s}px` : 'calc(20px)');\n\nfunction ImageComponent(props) {\n  const {\n    node,\n    editor,\n    attributes,\n    onFocus,\n    selected,\n    options,\n    maxImageWidth = 700,\n    maxImageHeight = 900,\n    latex,\n    handleChange,\n    handleDone,\n  } = props;\n  const { alt } = node.attrs;\n\n  const [showToolbar, setShowToolbar] = useState(false);\n\n  const latestNodeRef = useRef(node);\n  const imgRef = useRef(null);\n  const resizeRef = useRef(null);\n  const toolbarRef = useRef(null);\n\n  const getPercentFromWidth = useCallback((width) => {\n    const floored = (width / imgRef.current.naturalWidth) * 4;\n    return parseInt(floored.toFixed(0) * 25, 10);\n  }, []);\n\n  const applySizeData = useCallback(() => {\n    if (!node.attrs.width || !imgRef.current) return;\n\n    const update = {\n      ...node.attrs,\n      resizePercent: getPercentFromWidth(node.attrs.width),\n    };\n\n    if (!isEqual(update, node.attrs)) {\n      editor.commands.updateAttributes('imageUploadNode', update);\n    }\n  }, [editor, node.attrs, getPercentFromWidth]);\n\n  // keep ref in sync with latest node\n  useEffect(() => {\n    latestNodeRef.current = node;\n  }, [node]);\n\n  useEffect(() => {\n    const { selection } = editor.state;\n    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n    if (selected) {\n      if (onlyThisNodeSelected) {\n        setShowToolbar(selected);\n      }\n    } else {\n      setShowToolbar(selected);\n    }\n  }, [editor, node, selected]);\n\n  useEffect(() => {\n    options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));\n    applySizeData();\n\n    const resizeHandle = resizeRef.current;\n    if (resizeHandle) {\n      resizeHandle.addEventListener('mousedown', initResize, false);\n    }\n    return () => {\n      if (resizeHandle) {\n        resizeHandle.removeEventListener('mousedown', initResize, false);\n      }\n\n      options.imageHandling.onDelete(latestNodeRef.current);\n    };\n  }, []);\n\n  useEffect(() => {\n    applySizeData();\n  });\n\n  const loadImage = useCallback(() => {\n    const box = imgRef.current;\n    if (!box) return;\n\n    if (!box.style.width || box.style.width === 'calc(20px)') {\n      const w = Math.min(box.naturalWidth, maxImageWidth);\n      const h = Math.min(box.naturalHeight, maxImageHeight);\n\n      box.style.width = `${w}px`;\n      box.style.height = `${h}px`;\n\n      const update = { width: w, height: h };\n      if (!isEqual(update, node.attrs)) {\n        editor.commands.updateAttributes('imageUploadNode', update);\n      }\n    }\n  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);\n\n  const updateAspect = (initial, next, keepAspect = true, resizeType) => {\n    if (keepAspect) {\n      const ratio = initial.width / initial.height;\n      if (resizeType === 'height') return { width: next.height * ratio, height: next.height };\n      return { width: next.width, height: next.width / ratio };\n    }\n    return next;\n  };\n\n  const startResize = useCallback(\n    (e) => {\n      const box = imgRef.current;\n      if (!box) return;\n\n      const bounds = e.target.getBoundingClientRect();\n      const initial = { width: box.naturalWidth, height: box.naturalHeight };\n\n      const next = updateAspect(initial, {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      });\n\n      if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {\n        box.style.width = `${next.width}px`;\n        box.style.height = `${next.height}px`;\n\n        const update = { width: next.width, height: next.height };\n        if (!isEqual(update, node.attrs)) {\n          editor.commands.updateAttributes('imageUploadNode', update);\n        }\n      }\n    },\n    [editor, node.attrs],\n  );\n\n  const onChange = useCallback(\n    (newValues) => {\n      editor.commands.updateAttributes('imageUploadNode', newValues);\n    },\n    [editor],\n  );\n\n  const stopResize = useCallback(() => {\n    window.removeEventListener('mousemove', startResize);\n    window.removeEventListener('mouseup', stopResize);\n  }, [startResize]);\n\n  const initResize = useCallback(() => {\n    window.addEventListener('mousemove', startResize);\n    window.addEventListener('mouseup', stopResize);\n  }, [startResize, stopResize]);\n\n  const style = {\n    width: sizePx(node.attrs.width),\n    height: sizePx(node.attrs.height),\n    objectFit: 'contain',\n  };\n\n  const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';\n\n  return (\n    <NodeViewWrapper>\n      <StyledRoot\n        onFocus={onFocus}\n        active={selected}\n        loading={!node.attrs.loaded}\n        pendingDelete={node.attrs.deleteStatus === 'pending'}\n        style={{ justifyContent: flexAlign }}\n      >\n        <StyledProgress mode=\"determinate\" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />\n\n        <StyledImageContainer>\n          <img\n            {...attributes}\n            ref={imgRef}\n            src={node.attrs.src}\n            style={style}\n            onLoad={loadImage}\n            alt={node.attrs.alt}\n          />\n          <StyledResize ref={resizeRef} className=\"resize\" />\n        </StyledImageContainer>\n      </StyledRoot>\n\n      {showToolbar && (\n        <div\n          ref={toolbarRef}\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            zIndex: 20,\n            background: 'var(--editable-html-toolbar-bg, #efefef)',\n            boxShadow:\n              '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n            width: '100%',\n          }}\n        >\n          <CustomToolbarWrapper\n            showDone\n            {...options}\n            onDone={() => {\n              setShowToolbar(false);\n              props.imageHandling?.onDone();\n              props.editor.commands.focus('end');\n            }}\n          >\n            <ImageToolbar\n              disableImageAlignmentButtons={options.disableImageAlignmentButtons}\n              alt={node.attrs.alt}\n              imageLoaded={node.attrs.loaded}\n              alignment={node.attrs.alignment || 'left'}\n              onChange={onChange}\n            />\n          </CustomToolbarWrapper>\n        </div>\n      )}\n    </NodeViewWrapper>\n  );\n}\n\nImageComponent.propTypes = {\n  node: PropTypes.object.isRequired,\n  editor: PropTypes.object.isRequired,\n  attributes: PropTypes.object,\n  onFocus: PropTypes.func,\n  maxImageWidth: PropTypes.number,\n  maxImageHeight: PropTypes.number,\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,eAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,mBAAA,GAAAN,sBAAA,CAAAF,OAAA;AACA,IAAAS,aAAA,GAAAP,sBAAA,CAAAF,OAAA;AACA,IAAAU,qBAAA,GAAAR,sBAAA,CAAAF,OAAA;AAA4D,SAAAD,wBAAAY,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,wBAAAY,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAmB,QAAApB,CAAA,EAAAG,CAAA,QAAAF,CAAA,GAAAgB,MAAA,CAAAI,IAAA,CAAArB,CAAA,OAAAiB,MAAA,CAAAK,qBAAA,QAAAhB,CAAA,GAAAW,MAAA,CAAAK,qBAAA,CAAAtB,CAAA,GAAAG,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAiB,MAAA,WAAApB,CAAA,WAAAc,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAG,CAAA,EAAAqB,UAAA,OAAAvB,CAAA,CAAAwB,IAAA,CAAAC,KAAA,CAAAzB,CAAA,EAAAK,CAAA,YAAAL,CAAA;AAAA,SAAA0B,cAAA3B,CAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAyB,SAAA,CAAAC,MAAA,EAAA1B,CAAA,UAAAF,CAAA,WAAA2B,SAAA,CAAAzB,CAAA,IAAAyB,SAAA,CAAAzB,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,OAAA6B,OAAA,WAAA3B,CAAA,QAAA4B,gBAAA,aAAA/B,CAAA,EAAAG,CAAA,EAAAF,CAAA,CAAAE,CAAA,SAAAc,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAjC,CAAA,EAAAiB,MAAA,CAAAe,yBAAA,CAAA/B,CAAA,KAAAmB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,GAAA6B,OAAA,WAAA3B,CAAA,IAAAc,MAAA,CAAAC,cAAA,CAAAlB,CAAA,EAAAG,CAAA,EAAAc,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAE,CAAA,iBAAAH,CAAA;AAE5D,IAAMkC,GAAG,GAAG,IAAAC,iBAAK,EAAC,gDAAgD,CAAC;AAEnE,IAAMC,cAAc,GAAG,IAAAC,cAAM,EAACC,0BAAc,EAAE;EAC5CC,iBAAiB,EAAE,SAAnBA,iBAAiBA,CAAGC,IAAI;IAAA,OAAKA,IAAI,KAAK,cAAc;EAAA;AACtD,CAAC,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,YAAY,GAAAD,IAAA,CAAZC,YAAY;EAAA,OAAAf,aAAA;IAChBgB,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,GAAG;IACTC,KAAK,EAAE,aAAa;IACpBC,GAAG,EAAE,IAAI;IACTC,UAAU,EAAE;EAAsB,GAC9BL,YAAY,IAAI;IAClBM,OAAO,EAAE;EACX,CAAC;AAAA,CACD,CAAC;AAEH,IAAMC,UAAU,GAAG,IAAAZ,cAAM,EAAC,KAAK,EAAE;EAC/BE,iBAAiB,EAAE,SAAnBA,iBAAiBA,CAAGC,IAAI;IAAA,OAAK,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,eAAe,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC;EAAA;AACrF,CAAC,CAAC,CAAC,UAAAW,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,KAAA,CAANE,MAAM;IAAEC,OAAO,GAAAH,KAAA,CAAPG,OAAO;IAAEC,aAAa,GAAAJ,KAAA,CAAbI,aAAa;EAAA,OAAA5B,aAAA,CAAAA,aAAA;IACzCgB,QAAQ,EAAE,UAAU;IACpBa,MAAM,EAAEH,MAAM,gBAAAI,MAAA,CAAgBL,KAAK,CAACM,OAAO,CAACC,OAAO,CAACC,IAAI,iBAAAH,MAAA,CAAkBL,KAAK,CAACM,OAAO,CAACG,MAAM,CAACC,KAAK,CAAE;IACtGC,OAAO,EAAE,MAAM;IACfhB,UAAU,EAAE;EAAsB,GAC9BO,OAAO,IAAI;IACbN,OAAO,EAAE;EACX,CAAC,GACGO,aAAa,IAAI;IACnBP,OAAO,EAAE;EACX,CAAC;AAAA,CACD,CAAC;AAEH,IAAMgB,oBAAoB,GAAG,IAAA3B,cAAM,EAAC,KAAK,CAAC,CAAC,UAAA4B,KAAA;EAAA,IAAGb,KAAK,GAAAa,KAAA,CAALb,KAAK;EAAA,OAAQ;IACzDT,QAAQ,EAAE,UAAU;IACpBE,KAAK,EAAE,aAAa;IACpBkB,OAAO,EAAE,MAAM;IACfG,UAAU,EAAE,QAAQ;IACpB,oBAAoB,EAAE;MACpBH,OAAO,EAAE;IACX;EACF,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMI,YAAY,GAAG,IAAA9B,cAAM,EAAC,KAAK,CAAC,CAAC,UAAA+B,KAAA;EAAA,IAAGhB,KAAK,GAAAgB,KAAA,CAALhB,KAAK;EAAA,OAAQ;IACjDiB,eAAe,EAAEjB,KAAK,CAACM,OAAO,CAACC,OAAO,CAACC,IAAI;IAC3CU,MAAM,EAAE,YAAY;IACpBC,MAAM,EAAE,MAAM;IACd1B,KAAK,EAAE,KAAK;IACZ2B,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,KAAK;IACjBC,WAAW,EAAE,MAAM;IACnBX,OAAO,EAAE;EACX,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMY,MAAM,GAAG,SAATA,MAAMA,CAAIC,CAAC;EAAA,OAAMA,CAAC,MAAAnB,MAAA,CAAMmB,CAAC,UAAO,YAAY;AAAA,CAAC;AAEnD,SAASC,cAAcA,CAACC,KAAK,EAAE;EAC7B,IACEC,IAAI,GAWFD,KAAK,CAXPC,IAAI;IACJC,MAAM,GAUJF,KAAK,CAVPE,MAAM;IACNC,UAAU,GASRH,KAAK,CATPG,UAAU;IACVC,OAAO,GAQLJ,KAAK,CARPI,OAAO;IACPC,QAAQ,GAONL,KAAK,CAPPK,QAAQ;IACRC,OAAO,GAMLN,KAAK,CANPM,OAAO;IAAAC,oBAAA,GAMLP,KAAK,CALPQ,aAAa;IAAbA,aAAa,GAAAD,oBAAA,cAAG,GAAG,GAAAA,oBAAA;IAAAE,qBAAA,GAKjBT,KAAK,CAJPU,cAAc;IAAdA,cAAc,GAAAD,qBAAA,cAAG,GAAG,GAAAA,qBAAA;IACpBE,KAAK,GAGHX,KAAK,CAHPW,KAAK;IACLC,YAAY,GAEVZ,KAAK,CAFPY,YAAY;IACZC,UAAU,GACRb,KAAK,CADPa,UAAU;EAEZ,IAAQC,GAAG,GAAKb,IAAI,CAACc,KAAK,CAAlBD,GAAG;EAEX,IAAAE,SAAA,GAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAA9CI,WAAW,GAAAF,UAAA;IAAEG,cAAc,GAAAH,UAAA;EAElC,IAAMI,aAAa,GAAG,IAAAC,aAAM,EAACtB,IAAI,CAAC;EAClC,IAAMuB,MAAM,GAAG,IAAAD,aAAM,EAAC,IAAI,CAAC;EAC3B,IAAME,SAAS,GAAG,IAAAF,aAAM,EAAC,IAAI,CAAC;EAC9B,IAAMG,UAAU,GAAG,IAAAH,aAAM,EAAC,IAAI,CAAC;EAE/B,IAAMI,mBAAmB,GAAG,IAAAC,kBAAW,EAAC,UAAC7D,KAAK,EAAK;IACjD,IAAM8D,OAAO,GAAI9D,KAAK,GAAGyD,MAAM,CAACM,OAAO,CAACC,YAAY,GAAI,CAAC;IACzD,OAAOC,QAAQ,CAACH,OAAO,CAACI,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,aAAa,GAAG,IAAAN,kBAAW,EAAC,YAAM;IACtC,IAAI,CAAC3B,IAAI,CAACc,KAAK,CAAChD,KAAK,IAAI,CAACyD,MAAM,CAACM,OAAO,EAAE;IAE1C,IAAMK,MAAM,GAAAtF,aAAA,CAAAA,aAAA,KACPoD,IAAI,CAACc,KAAK;MACbqB,aAAa,EAAET,mBAAmB,CAAC1B,IAAI,CAACc,KAAK,CAAChD,KAAK;IAAC,EACrD;IAED,IAAI,CAAC,IAAAsE,mBAAO,EAACF,MAAM,EAAElC,IAAI,CAACc,KAAK,CAAC,EAAE;MAChCb,MAAM,CAACoC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEJ,MAAM,CAAC;IAC7D;EACF,CAAC,EAAE,CAACjC,MAAM,EAAED,IAAI,CAACc,KAAK,EAAEY,mBAAmB,CAAC,CAAC;;EAE7C;EACA,IAAAa,gBAAS,EAAC,YAAM;IACdlB,aAAa,CAACQ,OAAO,GAAG7B,IAAI;EAC9B,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAAuC,gBAAS,EAAC,YAAM;IACd,IAAQC,SAAS,GAAKvC,MAAM,CAACwC,KAAK,CAA1BD,SAAS;IACjB,IAAME,oBAAoB,GAAGF,SAAS,CAACG,IAAI,GAAG3C,IAAI,CAAC4C,QAAQ,KAAKJ,SAAS,CAACK,EAAE;IAE5E,IAAIzC,QAAQ,EAAE;MACZ,IAAIsC,oBAAoB,EAAE;QACxBtB,cAAc,CAAChB,QAAQ,CAAC;MAC1B;IACF,CAAC,MAAM;MACLgB,cAAc,CAAChB,QAAQ,CAAC;IAC1B;EACF,CAAC,EAAE,CAACH,MAAM,EAAED,IAAI,EAAEI,QAAQ,CAAC,CAAC;EAE5B,IAAAmC,gBAAS,EAAC,YAAM;IACdlC,OAAO,CAACyC,aAAa,CAACC,oBAAoB,CAAC/C,IAAI,EAAE,UAACgD,MAAM;MAAA,OAAK,IAAIC,8BAAkB,CAAChD,MAAM,EAAED,IAAI,EAAEgD,MAAM,CAAC;IAAA,EAAC;IAC1Gf,aAAa,CAAC,CAAC;IAEf,IAAMiB,YAAY,GAAG1B,SAAS,CAACK,OAAO;IACtC,IAAIqB,YAAY,EAAE;MAChBA,YAAY,CAACC,gBAAgB,CAAC,WAAW,EAAEC,UAAU,EAAE,KAAK,CAAC;IAC/D;IACA,OAAO,YAAM;MACX,IAAIF,YAAY,EAAE;QAChBA,YAAY,CAACG,mBAAmB,CAAC,WAAW,EAAED,UAAU,EAAE,KAAK,CAAC;MAClE;MAEA/C,OAAO,CAACyC,aAAa,CAACQ,QAAQ,CAACjC,aAAa,CAACQ,OAAO,CAAC;IACvD,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAU,gBAAS,EAAC,YAAM;IACdN,aAAa,CAAC,CAAC;EACjB,CAAC,CAAC;EAEF,IAAMsB,SAAS,GAAG,IAAA5B,kBAAW,EAAC,YAAM;IAClC,IAAM6B,GAAG,GAAGjC,MAAM,CAACM,OAAO;IAC1B,IAAI,CAAC2B,GAAG,EAAE;IAEV,IAAI,CAACA,GAAG,CAACC,KAAK,CAAC3F,KAAK,IAAI0F,GAAG,CAACC,KAAK,CAAC3F,KAAK,KAAK,YAAY,EAAE;MACxD,IAAM4F,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,GAAG,CAAC1B,YAAY,EAAEvB,aAAa,CAAC;MACnD,IAAMsD,CAAC,GAAGF,IAAI,CAACC,GAAG,CAACJ,GAAG,CAACM,aAAa,EAAErD,cAAc,CAAC;MAErD+C,GAAG,CAACC,KAAK,CAAC3F,KAAK,MAAAY,MAAA,CAAMgF,CAAC,OAAI;MAC1BF,GAAG,CAACC,KAAK,CAACjE,MAAM,MAAAd,MAAA,CAAMmF,CAAC,OAAI;MAE3B,IAAM3B,MAAM,GAAG;QAAEpE,KAAK,EAAE4F,CAAC;QAAElE,MAAM,EAAEqE;MAAE,CAAC;MACtC,IAAI,CAAC,IAAAzB,mBAAO,EAACF,MAAM,EAAElC,IAAI,CAACc,KAAK,CAAC,EAAE;QAChCb,MAAM,CAACoC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEJ,MAAM,CAAC;MAC7D;IACF;EACF,CAAC,EAAE,CAACjC,MAAM,EAAED,IAAI,CAACc,KAAK,EAAEP,aAAa,EAAEE,cAAc,CAAC,CAAC;EAEvD,IAAMsD,YAAY,GAAG,SAAfA,YAAYA,CAAIC,OAAO,EAAEC,IAAI,EAAoC;IAAA,IAAlCC,UAAU,GAAArH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAsH,SAAA,GAAAtH,SAAA,MAAG,IAAI;IAAA,IAAEuH,UAAU,GAAAvH,SAAA,CAAAC,MAAA,OAAAD,SAAA,MAAAsH,SAAA;IAChE,IAAID,UAAU,EAAE;MACd,IAAMG,KAAK,GAAGL,OAAO,CAAClG,KAAK,GAAGkG,OAAO,CAACxE,MAAM;MAC5C,IAAI4E,UAAU,KAAK,QAAQ,EAAE,OAAO;QAAEtG,KAAK,EAAEmG,IAAI,CAACzE,MAAM,GAAG6E,KAAK;QAAE7E,MAAM,EAAEyE,IAAI,CAACzE;MAAO,CAAC;MACvF,OAAO;QAAE1B,KAAK,EAAEmG,IAAI,CAACnG,KAAK;QAAE0B,MAAM,EAAEyE,IAAI,CAACnG,KAAK,GAAGuG;MAAM,CAAC;IAC1D;IACA,OAAOJ,IAAI;EACb,CAAC;EAED,IAAMK,WAAW,GAAG,IAAA3C,kBAAW,EAC7B,UAAC1G,CAAC,EAAK;IACL,IAAMuI,GAAG,GAAGjC,MAAM,CAACM,OAAO;IAC1B,IAAI,CAAC2B,GAAG,EAAE;IAEV,IAAMe,MAAM,GAAGtJ,CAAC,CAACuJ,MAAM,CAACC,qBAAqB,CAAC,CAAC;IAC/C,IAAMT,OAAO,GAAG;MAAElG,KAAK,EAAE0F,GAAG,CAAC1B,YAAY;MAAEtC,MAAM,EAAEgE,GAAG,CAACM;IAAc,CAAC;IAEtE,IAAMG,IAAI,GAAGF,YAAY,CAACC,OAAO,EAAE;MACjClG,KAAK,EAAE7C,CAAC,CAACyJ,OAAO,GAAGH,MAAM,CAAC1G,IAAI;MAC9B2B,MAAM,EAAEvE,CAAC,CAAC0J,OAAO,GAAGJ,MAAM,CAACxG;IAC7B,CAAC,CAAC;IAEF,IAAIkG,IAAI,CAACnG,KAAK,GAAG,EAAE,IAAImG,IAAI,CAACzE,MAAM,GAAG,EAAE,IAAIyE,IAAI,CAACnG,KAAK,IAAI,GAAG,IAAImG,IAAI,CAACzE,MAAM,IAAI,GAAG,EAAE;MAClFgE,GAAG,CAACC,KAAK,CAAC3F,KAAK,MAAAY,MAAA,CAAMuF,IAAI,CAACnG,KAAK,OAAI;MACnC0F,GAAG,CAACC,KAAK,CAACjE,MAAM,MAAAd,MAAA,CAAMuF,IAAI,CAACzE,MAAM,OAAI;MAErC,IAAM0C,MAAM,GAAG;QAAEpE,KAAK,EAAEmG,IAAI,CAACnG,KAAK;QAAE0B,MAAM,EAAEyE,IAAI,CAACzE;MAAO,CAAC;MACzD,IAAI,CAAC,IAAA4C,mBAAO,EAACF,MAAM,EAAElC,IAAI,CAACc,KAAK,CAAC,EAAE;QAChCb,MAAM,CAACoC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEJ,MAAM,CAAC;MAC7D;IACF;EACF,CAAC,EACD,CAACjC,MAAM,EAAED,IAAI,CAACc,KAAK,CACrB,CAAC;EAED,IAAM8D,QAAQ,GAAG,IAAAjD,kBAAW,EAC1B,UAACkD,SAAS,EAAK;IACb5E,MAAM,CAACoC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEuC,SAAS,CAAC;EAChE,CAAC,EACD,CAAC5E,MAAM,CACT,CAAC;EAED,IAAM6E,UAAU,GAAG,IAAAnD,kBAAW,EAAC,YAAM;IACnCoD,MAAM,CAAC1B,mBAAmB,CAAC,WAAW,EAAEiB,WAAW,CAAC;IACpDS,MAAM,CAAC1B,mBAAmB,CAAC,SAAS,EAAEyB,UAAU,CAAC;EACnD,CAAC,EAAE,CAACR,WAAW,CAAC,CAAC;EAEjB,IAAMlB,UAAU,GAAG,IAAAzB,kBAAW,EAAC,YAAM;IACnCoD,MAAM,CAAC5B,gBAAgB,CAAC,WAAW,EAAEmB,WAAW,CAAC;IACjDS,MAAM,CAAC5B,gBAAgB,CAAC,SAAS,EAAE2B,UAAU,CAAC;EAChD,CAAC,EAAE,CAACR,WAAW,EAAEQ,UAAU,CAAC,CAAC;EAE7B,IAAMrB,KAAK,GAAG;IACZ3F,KAAK,EAAE8B,MAAM,CAACI,IAAI,CAACc,KAAK,CAAChD,KAAK,CAAC;IAC/B0B,MAAM,EAAEI,MAAM,CAACI,IAAI,CAACc,KAAK,CAACtB,MAAM,CAAC;IACjCwF,SAAS,EAAE;EACb,CAAC;EAED,IAAMC,SAAS,GAAG;IAAEpH,IAAI,EAAE,YAAY;IAAEqH,MAAM,EAAE,QAAQ;IAAEC,KAAK,EAAE;EAAW,CAAC,CAACnF,IAAI,CAACc,KAAK,CAACsE,SAAS,CAAC,IAAI,YAAY;EAEnH,oBACEhL,MAAA,YAAAiL,aAAA,CAACxK,OAAA,CAAAyK,eAAe,qBACdlL,MAAA,YAAAiL,aAAA,CAACnH,UAAU;IACTiC,OAAO,EAAEA,OAAQ;IACjB7B,MAAM,EAAE8B,QAAS;IACjB7B,OAAO,EAAE,CAACyB,IAAI,CAACc,KAAK,CAACyE,MAAO;IAC5B/G,aAAa,EAAEwB,IAAI,CAACc,KAAK,CAAC0E,YAAY,KAAK,SAAU;IACrD/B,KAAK,EAAE;MAAEgC,cAAc,EAAER;IAAU;EAAE,gBAErC7K,MAAA,YAAAiL,aAAA,CAAChI,cAAc;IAACqI,IAAI,EAAC,aAAa;IAACC,KAAK,EAAE3F,IAAI,CAACc,KAAK,CAAC8E,OAAO,IAAI,CAAE;IAACjI,YAAY,EAAEqC,IAAI,CAACc,KAAK,CAACyE;EAAO,CAAE,CAAC,eAEtGnL,MAAA,YAAAiL,aAAA,CAACpG,oBAAoB,qBACnB7E,MAAA,YAAAiL,aAAA,YAAAQ,SAAA,iBACM3F,UAAU;IACd4F,GAAG,EAAEvE,MAAO;IACZwE,GAAG,EAAE/F,IAAI,CAACc,KAAK,CAACiF,GAAI;IACpBtC,KAAK,EAAEA,KAAM;IACbuC,MAAM,EAAEzC,SAAU;IAClB1C,GAAG,EAAEb,IAAI,CAACc,KAAK,CAACD;EAAI,EACrB,CAAC,eACFzG,MAAA,YAAAiL,aAAA,CAACjG,YAAY;IAAC0G,GAAG,EAAEtE,SAAU;IAACyE,SAAS,EAAC;EAAQ,CAAE,CAC9B,CACZ,CAAC,EAEZ9E,WAAW,iBACV/G,MAAA,YAAAiL,aAAA;IACES,GAAG,EAAErE,UAAW;IAChBgC,KAAK,EAAE;MACL7F,QAAQ,EAAE,UAAU;MACpBG,GAAG,EAAE,MAAM;MACXF,IAAI,EAAE,CAAC;MACPqI,MAAM,EAAE,EAAE;MACVC,UAAU,EAAE,0CAA0C;MACtDC,SAAS,EACP,+GAA+G;MACjHtI,KAAK,EAAE;IACT;EAAE,gBAEF1D,MAAA,YAAAiL,aAAA,CAACrK,qBAAA,WAAoB,MAAA6K,SAAA;IACnBQ,QAAQ;EAAA,GACJhG,OAAO;IACXiG,MAAM,EAAE,SAARA,MAAMA,CAAA,EAAQ;MAAA,IAAAC,oBAAA;MACZnF,cAAc,CAAC,KAAK,CAAC;MACrB,CAAAmF,oBAAA,GAAAxG,KAAK,CAAC+C,aAAa,cAAAyD,oBAAA,eAAnBA,oBAAA,CAAqBD,MAAM,CAAC,CAAC;MAC7BvG,KAAK,CAACE,MAAM,CAACoC,QAAQ,CAACmE,KAAK,CAAC,KAAK,CAAC;IACpC;EAAE,iBAEFpM,MAAA,YAAAiL,aAAA,CAACtK,aAAA,WAAY;IACX0L,4BAA4B,EAAEpG,OAAO,CAACoG,4BAA6B;IACnE5F,GAAG,EAAEb,IAAI,CAACc,KAAK,CAACD,GAAI;IACpB6F,WAAW,EAAE1G,IAAI,CAACc,KAAK,CAACyE,MAAO;IAC/BH,SAAS,EAAEpF,IAAI,CAACc,KAAK,CAACsE,SAAS,IAAI,MAAO;IAC1CR,QAAQ,EAAEA;EAAS,CACpB,CACmB,CACnB,CAEQ,CAAC;AAEtB;AAEA9E,cAAc,CAAC6G,SAAS,GAAG;EACzB3G,IAAI,EAAE4G,qBAAS,CAACC,MAAM,CAACC,UAAU;EACjC7G,MAAM,EAAE2G,qBAAS,CAACC,MAAM,CAACC,UAAU;EACnC5G,UAAU,EAAE0G,qBAAS,CAACC,MAAM;EAC5B1G,OAAO,EAAEyG,qBAAS,CAACG,IAAI;EACvBxG,aAAa,EAAEqG,qBAAS,CAACI,MAAM;EAC/BvG,cAAc,EAAEmG,qBAAS,CAACI;AAC5B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEapH,cAAc","ignoreList":[]}

package/lib/extensions/image.js

@@ -20,7 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _core = require("@tiptap/core");
 var _react = require("@tiptap/react");
 var _react2 = _interopRequireDefault(require("react"));
-var _component = _interopRequireDefault(require("./component"));
+var _imageComponent = _interopRequireDefault(require("./image-component"));
 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 ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
@@ -74,7 +74,7 @@ var ImageUploadNode = exports.ImageUploadNode = _core.Node.create({
   addNodeView: function addNodeView() {
     var _this = this;
     return (0, _react.ReactNodeViewRenderer)(function (props) {
-      return /*#__PURE__*/_react2["default"].createElement(_component["default"], _objectSpread(_objectSpread({}, props), {}, {
+      return /*#__PURE__*/_react2["default"].createElement(_imageComponent["default"], _objectSpread(_objectSpread({}, props), {}, {
         options: _this.options
       }));
     });

package/lib/extensions/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":["_core","require","_react","_react2","_interopRequireDefault","_component","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport React from 'react';\nimport ImageComponent from './component';\n\nexport const ImageUploadNode = Node.create({\n  name: 'imageUploadNode',\n\n  group: 'block',\n  atom: true, // ✅ prevents content holes\n  selectable: true, // optional\n  draggable: true, // optional\n\n  addAttributes() {\n    return {\n      loaded: { default: false },\n      deleteStatus: { default: null },\n      alignment: { default: null },\n      percent: { default: null },\n      width: { default: null },\n      height: { default: null },\n      src: { default: null },\n      alt: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-type=\"image-upload-node\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n  },\n\n  addCommands() {\n    return {\n      setImageUploadNode: () => ({ commands }) => {\n        return commands.insertContent({\n          type: this.name,\n        });\n      },\n    };\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image.js","names":["_core","require","_react","_react2","_interopRequireDefault","_imageComponent","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ImageUploadNode","exports","Node","create","name","group","atom","selectable","draggable","addAttributes","loaded","deleteStatus","alignment","percent","width","height","src","alt","parseHTML","tag","renderHTML","_ref","HTMLAttributes","mergeAttributes","addNodeView","_this","ReactNodeViewRenderer","props","createElement","options","addCommands","_this2","setImageUploadNode","_ref2","commands","insertContent","type"],"sources":["../../src/extensions/image.js"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core';\nimport { ReactNodeViewRenderer } from '@tiptap/react';\nimport React from 'react';\nimport ImageComponent from './image-component';\n\nexport const ImageUploadNode = Node.create({\n  name: 'imageUploadNode',\n\n  group: 'block',\n  atom: true, // ✅ prevents content holes\n  selectable: true, // optional\n  draggable: true, // optional\n\n  addAttributes() {\n    return {\n      loaded: { default: false },\n      deleteStatus: { default: null },\n      alignment: { default: null },\n      percent: { default: null },\n      width: { default: null },\n      height: { default: null },\n      src: { default: null },\n      alt: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-type=\"image-upload-node\"]',\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);\n  },\n\n  addCommands() {\n    return {\n      setImageUploadNode: () => ({ commands }) => {\n        return commands.insertContent({\n          type: this.name,\n        });\n      },\n    };\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/extensions/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildExtensions = exports.DEFAULT_PLUGINS = exports.ALL_PLUGINS = void 0;
+exports.buildExtensions = exports.PLUGINS_MAP = exports.DEFAULT_PLUGINS = exports.ALL_PLUGINS = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
@@ -21,6 +21,9 @@ var log = (0, _debug["default"])('@pie-lib:editable-html:plugins');
 var ALL_PLUGINS = exports.ALL_PLUGINS = ['bold',
 // 'code',
 'html', 'extraCSSRules', 'italic', 'underline', 'strikethrough', 'bulleted-list', 'numbered-list', 'image', 'math', 'languageCharacters', 'text-align', 'blockquote', 'h3', 'table', 'video', 'audio', 'responseArea', 'redo', 'undo', 'superscript', 'subscript'];
+var PLUGINS_MAP = exports.PLUGINS_MAP = {
+  'text-align': 'textAlign'
+};
 var DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = ALL_PLUGINS.filter(function (plug) {
   return !['responseArea', 'h3', 'blockquote'].includes(plug);
 });
@@ -31,7 +34,7 @@ var buildExtensions = exports.buildExtensions = function buildExtensions(activeE
     var shouldAdd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     return activeExtensions.includes(key) && shouldAdd && key;
   };
-  var imagePlugin = opts.image && opts.image.onDelete;
+  var imagePlugin = opts.image && opts.image["delete"];
   var mathPlugin = opts.math;
   var respAreaPlugin = opts.responseArea && opts.responseArea.type;
   var cssPlugin = !(0, _isEmpty["default"])(opts.extraCSSRules);

package/lib/extensions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_compact","_isEmpty","_debug","log","debug","ALL_PLUGINS","exports","DEFAULT_PLUGINS","filter","plug","includes","buildExtensions","activeExtensions","customExtensions","opts","addIf","key","shouldAdd","arguments","length","undefined","imagePlugin","image","onDelete","mathPlugin","math","respAreaPlugin","responseArea","type","cssPlugin","isEmpty","extraCSSRules","languageCharactersPlugins","languageCharacters","compact","concat","_toConsumableArray2","map","plugin","html"],"sources":["../../src/extensions/index.js"],"sourcesContent":["import React from 'react';\nimport compact from 'lodash/compact';\nimport isEmpty from 'lodash/isEmpty';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins');\nexport const ALL_PLUGINS = [\n  'bold',\n  // 'code',\n  'html',\n  'extraCSSRules',\n  'italic',\n  'underline',\n  'strikethrough',\n  'bulleted-list',\n  'numbered-list',\n  'image',\n  'math',\n  'languageCharacters',\n  'text-align',\n  'blockquote',\n  'h3',\n  'table',\n  'video',\n  'audio',\n  'responseArea',\n  'redo',\n  'undo',\n  'superscript',\n  'subscript',\n];\n\nexport const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));\n\nexport const buildExtensions = (activeExtensions, customExtensions, opts) => {\n  log('[buildPlugins] opts: ', opts);\n\n  activeExtensions = activeExtensions || DEFAULT_PLUGINS;\n\n  const addIf = (key, shouldAdd = true) => activeExtensions.includes(key) && shouldAdd && key;\n\n  const imagePlugin = opts.image && opts.image.onDelete;\n  const mathPlugin = opts.math;\n  const respAreaPlugin = opts.responseArea && opts.responseArea.type;\n  const cssPlugin = !isEmpty(opts.extraCSSRules);\n\n  const languageCharactersPlugins = opts?.languageCharacters || [];\n\n  return compact([\n    addIf('table'),\n    addIf('bold'),\n    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),\n    addIf('italic'),\n    addIf('strikethrough'),\n    addIf('underline'),\n    // icon should be modifies accordingly\n    addIf('superscript'),\n    // icon should be modifies accordingly\n    addIf('subscript'),\n    addIf('image', !!imagePlugin),\n    addIf('video'),\n    addIf('audio'),\n    addIf('math', !!mathPlugin),\n    ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),\n    addIf('text-align'),\n    addIf('blockquote'),\n    addIf('h3'),\n    addIf('bulleted-list'),\n    addIf('numbered-list'),\n    addIf('undo'),\n    addIf('redo'),\n    addIf('responseArea', !!respAreaPlugin),\n    addIf('css', !!cssPlugin),\n    addIf('html', !!opts.html),\n  ]);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_compact","_isEmpty","_debug","log","debug","ALL_PLUGINS","exports","PLUGINS_MAP","DEFAULT_PLUGINS","filter","plug","includes","buildExtensions","activeExtensions","customExtensions","opts","addIf","key","shouldAdd","arguments","length","undefined","imagePlugin","image","mathPlugin","math","respAreaPlugin","responseArea","type","cssPlugin","isEmpty","extraCSSRules","languageCharactersPlugins","languageCharacters","compact","concat","_toConsumableArray2","map","plugin","html"],"sources":["../../src/extensions/index.js"],"sourcesContent":["import React from 'react';\nimport compact from 'lodash/compact';\nimport isEmpty from 'lodash/isEmpty';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins');\nexport const ALL_PLUGINS = [\n  'bold',\n  // 'code',\n  'html',\n  'extraCSSRules',\n  'italic',\n  'underline',\n  'strikethrough',\n  'bulleted-list',\n  'numbered-list',\n  'image',\n  'math',\n  'languageCharacters',\n  'text-align',\n  'blockquote',\n  'h3',\n  'table',\n  'video',\n  'audio',\n  'responseArea',\n  'redo',\n  'undo',\n  'superscript',\n  'subscript',\n];\n\nexport const PLUGINS_MAP = {\n  'text-align': 'textAlign',\n};\n\nexport const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));\n\nexport const buildExtensions = (activeExtensions, customExtensions, opts) => {\n  log('[buildPlugins] opts: ', opts);\n\n  activeExtensions = activeExtensions || DEFAULT_PLUGINS;\n\n  const addIf = (key, shouldAdd = true) => activeExtensions.includes(key) && shouldAdd && key;\n\n  const imagePlugin = opts.image && opts.image.delete;\n  const mathPlugin = opts.math;\n  const respAreaPlugin = opts.responseArea && opts.responseArea.type;\n  const cssPlugin = !isEmpty(opts.extraCSSRules);\n\n  const languageCharactersPlugins = opts?.languageCharacters || [];\n\n  return compact([\n    addIf('table'),\n    addIf('bold'),\n    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),\n    addIf('italic'),\n    addIf('strikethrough'),\n    addIf('underline'),\n    // icon should be modifies accordingly\n    addIf('superscript'),\n    // icon should be modifies accordingly\n    addIf('subscript'),\n    addIf('image', !!imagePlugin),\n    addIf('video'),\n    addIf('audio'),\n    addIf('math', !!mathPlugin),\n    ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),\n    addIf('text-align'),\n    addIf('blockquote'),\n    addIf('h3'),\n    addIf('bulleted-list'),\n    addIf('numbered-list'),\n    addIf('undo'),\n    addIf('redo'),\n    addIf('responseArea', !!respAreaPlugin),\n    addIf('css', !!cssPlugin),\n    addIf('html', !!opts.html),\n  ]);\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html-tip-tap",
-  "version": "1.1.1-next.0",
+  "version": "1.1.1-next.1",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",

package/src/__tests__/EditableHtml.test.jsx

@@ -126,6 +126,7 @@ jest.mock('../components/TiptapContainer', () => ({
 }));
 
 jest.mock('../extensions', () => ({
+  ...jest.requireActual('../extensions'),
   buildExtensions: jest.fn(() => []),
 }));
 

package/src/__tests__/extensions.test.js

@@ -63,9 +63,9 @@ describe('Extensions', () => {
       expect(result).not.toContain('image');
     });
 
-    it('includes image plugin when opts.image.onDelete is provided', () => {
+    it('includes image plugin when opts.image.delete is provided', () => {
       const activeExtensions = ['image'];
-      const opts = { image: { onDelete: jest.fn() } };
+      const opts = { image: { delete: jest.fn() } };
       const result = buildExtensions(activeExtensions, [], opts);
       expect(result).toContain('image');
     });

package/src/components/EditableHtml.jsx

@@ -26,7 +26,7 @@ import { CSSMark } from '../extensions/css';
 
 import EditorContainer from './TiptapContainer';
 import { valueToSize } from '../utils/size';
-import { buildExtensions } from '../extensions';
+import { buildExtensions, PLUGINS_MAP } from '../extensions';
 
 const defaultToolbarOpts = {
   position: 'bottom',
@@ -105,17 +105,20 @@ export const EditableHtml = (props) => {
     customPlugins = customPlugins || [];
 
     const filteredActivePlugins = (props.activePlugins || DEFAULT_ACTIVE_PLUGINS)?.filter((pluginName) => {
-      const pluginInfo = otherPluginProps[pluginName] || {};
+      const nameToUse = PLUGINS_MAP[pluginName] || pluginName;
+      const pluginInfo = otherPluginProps[nameToUse] || {};
 
       return !pluginInfo || !pluginInfo.disabled;
     });
 
     return buildExtensions(filteredActivePlugins, customPlugins, {
       math: {},
-      textAlign: {},
+      textAlign: props.textAlign,
       html: {},
       extraCSSRules: props.extraCSSRules || {},
-      image: {},
+      image: {
+        ...props.imageSupport,
+      },
       toolbar: {},
       table: {},
       responseArea: {
@@ -160,7 +163,7 @@ export const EditableHtml = (props) => {
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
-          ((node, done) => {
+          (node => {
             const { src } = node.attrs;
 
             props.imageSupport.delete(src, (e) => {
@@ -172,7 +175,6 @@ export const EditableHtml = (props) => {
 
               setPendingImages(newState.pendingImages);
               setScheduled(newState.scheduled);
-              done();
             });
           }),
         insertImageRequested:

package/src/extensions/__tests__/{component.test.jsx → image-component.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import ImageComponent from '../component';
+import ImageComponent from '../image-component';
 
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
@@ -66,6 +66,7 @@ describe('ImageComponent', () => {
     imageHandling: {
       insertImageRequested: jest.fn(),
       onDone: jest.fn(),
+      onDelete: jest.fn(),
     },
     disableImageAlignmentButtons: false,
   };

package/src/extensions/__tests__/image.test.js

@@ -9,7 +9,7 @@ jest.mock('@tiptap/react', () => ({
   ReactNodeViewRenderer: jest.fn((component) => component),
 }));
 
-jest.mock('../component', () => ({
+jest.mock('../image-component', () => ({
   __esModule: true,
   default: jest.fn(() => <div data-testid="image-component" />),
 }));

package/src/extensions/{component.jsx → image-component.jsx}

@@ -80,6 +80,7 @@ function ImageComponent(props) {
 
   const [showToolbar, setShowToolbar] = useState(false);
 
+  const latestNodeRef = useRef(node);
   const imgRef = useRef(null);
   const resizeRef = useRef(null);
   const toolbarRef = useRef(null);
@@ -102,6 +103,11 @@ function ImageComponent(props) {
     }
   }, [editor, node.attrs, getPercentFromWidth]);
 
+  // keep ref in sync with latest node
+  useEffect(() => {
+    latestNodeRef.current = node;
+  }, [node]);
+
   useEffect(() => {
     const { selection } = editor.state;
     const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
@@ -124,7 +130,11 @@ function ImageComponent(props) {
       resizeHandle.addEventListener('mousedown', initResize, false);
     }
     return () => {
-      if (resizeHandle) resizeHandle.removeEventListener('mousedown', initResize, false);
+      if (resizeHandle) {
+        resizeHandle.removeEventListener('mousedown', initResize, false);
+      }
+
+      options.imageHandling.onDelete(latestNodeRef.current);
     };
   }, []);
 

package/src/extensions/image.js

@@ -1,7 +1,7 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import React from 'react';
-import ImageComponent from './component';
+import ImageComponent from './image-component';
 
 export const ImageUploadNode = Node.create({
   name: 'imageUploadNode',