@pie-lib/editable-html-tip-tap 2.1.1 → 2.1.2-next.102

package/lib/components/respArea/InlineDropdown.js

@@ -8,11 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mathRendering = require("@pie-lib/math-rendering");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@tiptap/react");
+var _prosemirrorState = require("prosemirror-state");
 var _RespArea = require("../icons/RespArea");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _customToolbarWrapper = _interopRequireDefault(require("../../extensions/custom-toolbar-wrapper"));
+var _toolbar = require("../../utils/toolbar");
 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); }
 var InlineDropdown = function InlineDropdown(props) {
   var editor = props.editor,
@@ -23,12 +26,15 @@ var InlineDropdown = function InlineDropdown(props) {
   var attributes = node.attrs;
   var value = attributes.value,
     error = attributes.error;
-  // TODO: Investigate
-  // Needed because items with values inside have different positioning for some reason
   var html = value || '<div>&nbsp</div>';
   var pos = getPos();
   var toolbarRef = (0, _react.useRef)(null);
   var toolbarEditor = (0, _react.useRef)(null);
+  var pendingCloseRequest = (0, _react.useRef)(false);
+  var elementRef = (0, _react.useRef)(null);
+  var isHeld = function isHeld() {
+    return editor._holdInlineDropdownToolbarIndex != null && String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);
+  };
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     showToolbar = _useState2[0],
@@ -40,18 +46,67 @@ var InlineDropdown = function InlineDropdown(props) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     position = _useState4[0],
     setPosition = _useState4[1];
-  var InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, function () {});
+  var closeToolbar = function closeToolbar() {
+    var _options$onInlineDrop;
+    if (isHeld()) {
+      return;
+    }
+    setShowToolbar(false);
+    (_options$onInlineDrop = options.onInlineDropdownToolbarClose) === null || _options$onInlineDrop === void 0 || _options$onInlineDrop.call(options, editor);
+  };
+  var InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);
+  var reselectNode = function reselectNode() {
+    var tr = editor.state.tr;
+    var nodeAtPos = tr.doc.nodeAt(pos);
+    if (!nodeAtPos) {
+      return;
+    }
+    var selection = tr.selection;
+    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
+      return;
+    }
+    tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, pos));
+    editor.view.dispatch(tr);
+  };
+  var requestClose = function requestClose() {
+    if (pendingCloseRequest.current) {
+      return;
+    }
+    if (options.onToolbarCloseRequest) {
+      pendingCloseRequest.current = true;
+      options.onToolbarCloseRequest([node, pos], editor, function () {
+        pendingCloseRequest.current = false;
+        delete editor._holdInlineDropdownToolbarIndex;
+        closeToolbar();
+      }, function () {
+        pendingCloseRequest.current = false;
+        delete editor._holdInlineDropdownToolbarIndex;
+        setShowToolbar(true);
+        setTimeout(reselectNode, 0);
+      });
+    } else {
+      closeToolbar();
+    }
+  };
   (0, _react.useEffect)(function () {
     var selection = editor.state.selection;
     var onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
     if (selected) {
       if (onlyThisNodeSelected) {
-        setShowToolbar(selected);
+        setShowToolbar(true);
       }
-    } else {
-      setShowToolbar(selected);
+    } else if (showToolbar) {
+      requestClose();
     }
   }, [editor, node, selected]);
+  var isScrollbarClicked = function isScrollbarClicked(event) {
+    return event.clientX > document.documentElement.clientWidth || event.clientY > document.documentElement.clientHeight || event.target === document.documentElement;
+  };
+  (0, _react.useEffect)(function () {
+    if (elementRef.current && typeof _mathRendering.renderMath === 'function') {
+      (0, _mathRendering.renderMath)(elementRef.current);
+    }
+  }, [value]);
   (0, _react.useEffect)(function () {
     // Calculate position relative to selection
     var bodyRect = document.body.getBoundingClientRect();
@@ -63,9 +118,13 @@ var InlineDropdown = function InlineDropdown(props) {
       left: start.left
     });
     var handleClickOutside = function handleClickOutside(event) {
+      var _toolbarEditor$curren;
+      if (isScrollbarClicked(event)) {
+        return;
+      }
       var insideSomeEditor = event.target.closest('[data-toolbar-for]');
-      if ((!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) && !editor._toolbarOpened && toolbarRef.current && !toolbarRef.current.contains(event.target) && !event.target.closest('[data-inline-node]')) {
-        setShowToolbar(false);
+      if (!event.target.closest('[data-inline-dropdown-toolbar]') && (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== ((_toolbarEditor$curren = toolbarEditor.current) === null || _toolbarEditor$curren === void 0 ? void 0 : _toolbarEditor$curren.instanceId)) && !editor._toolbarOpened && toolbarRef.current && !toolbarRef.current.contains(event.target) && !event.target.closest('[data-inline-node]')) {
+        requestClose();
       }
     };
     if (showToolbar) {
@@ -76,7 +135,7 @@ var InlineDropdown = function InlineDropdown(props) {
     return function () {
       return document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [showToolbar]);
+  }, [showToolbar, node]);
   return /*#__PURE__*/_react["default"].createElement(_react2.NodeViewWrapper, {
     className: "inline-dropdown",
     "data-selected": selected,
@@ -86,6 +145,7 @@ var InlineDropdown = function InlineDropdown(props) {
       cursor: 'pointer'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: elementRef,
     style: {
       display: 'inline-flex',
       minWidth: '178px',
@@ -125,15 +185,12 @@ var InlineDropdown = function InlineDropdown(props) {
       right: '5px'
     }
   })), showToolbar && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
-    ref: toolbarRef,
-    style: {
-      zIndex: 1
-    }
+    ref: toolbarRef
   }, /*#__PURE__*/_react["default"].createElement(InlineDropdownToolbar, {
     editorCallback: function editorCallback(instance) {
       toolbarEditor.current = instance;
     }
-  })), document.body), editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
+  })), (editor === null || editor === void 0 ? void 0 : editor._tiptapContainerEl) || document.body), editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
     deletable: true,
     toolbarOpts: {
       minWidth: 'auto'
@@ -149,7 +206,8 @@ var InlineDropdown = function InlineDropdown(props) {
       tr["delete"](pos, pos + node.nodeSize);
       // Prevent the debounced onBlur/onDone from firing into the
       // now-deleted node's stale position
-      editor._toolbarOpened = false;
+      (0, _toolbar.setToolbarOpened)(editor, false);
+      delete editor._holdInlineDropdownToolbarIndex;
       editor.view.dispatch(tr);
       setShowToolbar(false);
       editor.commands.focus();

package/lib/components/respArea/InlineDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_react2","_RespArea","_reactDom","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InlineDropdown","props","editor","node","getPos","options","selected","attributes","attrs","value","error","html","pos","toolbarRef","useRef","toolbarEditor","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","InlineDropdownToolbar","respAreaToolbar","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","bodyRect","document","body","getBoundingClientRect","start","view","coordsAtPos","Math","abs","handleClickOutside","event","insideSomeEditor","target","closest","dataset","toolbarFor","current","instanceId","_toolbarOpened","contains","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","height","cursor","minWidth","background","border","boxSizing","borderRadius","margin","alignItems","onClick","flex","overflow","padding","whiteSpace","textOverflow","verticalAlign","dangerouslySetInnerHTML","__html","Chevron","direction","right","Fragment","ReactDOM","createPortal","ref","zIndex","editorCallback","instance","_tiptapContainerEl","deletable","toolbarOpts","autoWidth","onDelete","tr","dispatch","commands","focus","showDone","propTypes","PropTypes","object","selectedItem","oneOfType","string","_default","exports"],"sources":["../../../src/components/respArea/InlineDropdown.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { Chevron } from '../icons/RespArea';\nimport ReactDOM from 'react-dom';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\n\nconst InlineDropdown = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, error } = attributes;\n  // TODO: Investigate\n  // Needed because items with values inside have different positioning for some reason\n  const html = value || '<div>&nbsp</div>';\n  const pos = getPos();\n  const toolbarRef = useRef(null);\n  const toolbarEditor = useRef(null);\n  const [showToolbar, setShowToolbar] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, () => {});\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    // Calculate position relative to selection\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    setPosition({\n      top: start.top + Math.abs(bodyRect.top) + 40, // shift above\n      left: start.left,\n    });\n\n    const handleClickOutside = (event) => {\n      const insideSomeEditor = event.target.closest('[data-toolbar-for]');\n\n      if (\n        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) &&\n        !editor._toolbarOpened &&\n        toolbarRef.current &&\n        !toolbarRef.current.contains(event.target) &&\n        !event.target.closest('[data-inline-node]')\n      ) {\n        setShowToolbar(false);\n      }\n    };\n\n    if (showToolbar) {\n      document.addEventListener('mousedown', handleClickOutside);\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showToolbar]);\n\n  return (\n    <NodeViewWrapper\n      className=\"inline-dropdown\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        height: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        style={{\n          display: 'inline-flex',\n          minWidth: '178px',\n          height: '36px',\n          background: '#FFF',\n          border: '1px solid #C0C3CF',\n          boxSizing: 'border-box',\n          borderRadius: '3px',\n          margin: '0 2px',\n          position: 'relative',\n          alignItems: 'center',\n        }}\n        onClick={() => setShowToolbar(true)}\n      >\n        <div\n          style={{\n            flex: 1,\n            overflow: 'hidden',\n            padding: '0 25px 0 8px',\n            whiteSpace: 'nowrap',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              verticalAlign: 'middle',\n            }}\n            dangerouslySetInnerHTML={{\n              __html: html,\n            }}\n          />\n        </div>\n        <Chevron\n          direction=\"down\"\n          style={{\n            position: 'absolute',\n            top: '5px',\n            right: '5px',\n          }}\n        />\n      </div>\n      {showToolbar && (\n        <React.Fragment>\n          {ReactDOM.createPortal(\n            <div ref={toolbarRef} style={{ zIndex: 1 }}>\n              <InlineDropdownToolbar\n                editorCallback={(instance) => {\n                  toolbarEditor.current = instance;\n                }}\n              />\n            </div>,\n            document.body,\n          )}\n\n          {editor._tiptapContainerEl &&\n            ReactDOM.createPortal(\n              <CustomToolbarWrapper\n                deletable\n                toolbarOpts={{ minWidth: 'auto' }}\n                autoWidth\n                style={{ top: -40, left: 0, right: 0 }}\n                onDelete={() => {\n                  const { tr } = editor.state;\n                  tr.delete(pos, pos + node.nodeSize);\n                  // Prevent the debounced onBlur/onDone from firing into the\n                  // now-deleted node's stale position\n                  editor._toolbarOpened = false;\n                  editor.view.dispatch(tr);\n                  setShowToolbar(false);\n                  editor.commands.focus();\n                }}\n                showDone={false}\n              />,\n              editor._tiptapContainerEl,\n            )}\n        </React.Fragment>\n      )}\n    </NodeViewWrapper>\n  );\n};\n\nInlineDropdown.propTypes = {\n  attributes: PropTypes.object,\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default InlineDropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_mathRendering","_propTypes","_react2","_prosemirrorState","_RespArea","_customToolbarWrapper","_toolbar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InlineDropdown","props","editor","node","getPos","options","selected","attributes","attrs","value","error","html","pos","toolbarRef","useRef","toolbarEditor","pendingCloseRequest","elementRef","isHeld","_holdInlineDropdownToolbarIndex","String","index","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","closeToolbar","_options$onInlineDrop","onInlineDropdownToolbarClose","InlineDropdownToolbar","respAreaToolbar","reselectNode","tr","state","nodeAtPos","doc","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","requestClose","current","onToolbarCloseRequest","setTimeout","useEffect","onlyThisNodeSelected","isScrollbarClicked","event","clientX","document","documentElement","clientWidth","clientY","clientHeight","target","renderMath","bodyRect","body","getBoundingClientRect","start","coordsAtPos","Math","abs","handleClickOutside","_toolbarEditor$curren","insideSomeEditor","closest","dataset","toolbarFor","instanceId","_toolbarOpened","contains","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","height","cursor","ref","minWidth","background","border","boxSizing","borderRadius","margin","alignItems","onClick","flex","overflow","padding","whiteSpace","textOverflow","verticalAlign","dangerouslySetInnerHTML","__html","Chevron","direction","right","Fragment","ReactDOM","createPortal","editorCallback","instance","_tiptapContainerEl","deletable","toolbarOpts","autoWidth","onDelete","setToolbarOpened","commands","focus","showDone","propTypes","PropTypes","object","selectedItem","oneOfType","string","_default","exports"],"sources":["../../../src/components/respArea/InlineDropdown.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { NodeSelection } from 'prosemirror-state';\nimport { Chevron } from '../icons/RespArea';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\nimport { setToolbarOpened } from '../../utils/toolbar';\n\nconst InlineDropdown = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, error } = attributes;\n  const html = value || '<div>&nbsp</div>';\n  const pos = getPos();\n  const toolbarRef = useRef(null);\n  const toolbarEditor = useRef(null);\n  const pendingCloseRequest = useRef(false);\n  const elementRef = useRef(null);\n\n  const isHeld = () =>\n    editor._holdInlineDropdownToolbarIndex != null &&\n    String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);\n\n  const [showToolbar, setShowToolbar] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  const closeToolbar = () => {\n    if (isHeld()) {\n      return;\n    }\n\n    setShowToolbar(false);\n    options.onInlineDropdownToolbarClose?.(editor);\n  };\n\n  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);\n\n  const reselectNode = () => {\n    const { tr } = editor.state;\n    const nodeAtPos = tr.doc.nodeAt(pos);\n\n    if (!nodeAtPos) {\n      return;\n    }\n\n    const { selection } = tr;\n\n    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {\n      return;\n    }\n\n    tr.setSelection(NodeSelection.create(tr.doc, pos));\n    editor.view.dispatch(tr);\n  };\n\n  const requestClose = () => {\n    if (pendingCloseRequest.current) {\n      return;\n    }\n\n    if (options.onToolbarCloseRequest) {\n      pendingCloseRequest.current = true;\n\n      options.onToolbarCloseRequest(\n        [node, pos],\n        editor,\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          closeToolbar();\n        },\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          setShowToolbar(true);\n          setTimeout(reselectNode, 0);\n        },\n      );\n    } else {\n      closeToolbar();\n    }\n  };\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(true);\n      }\n    } else if (showToolbar) {\n      requestClose();\n    }\n  }, [editor, node, selected]);\n\n  const isScrollbarClicked = (event) =>\n    event.clientX > document.documentElement.clientWidth ||\n    event.clientY > document.documentElement.clientHeight ||\n    event.target === document.documentElement;\n\n  useEffect(() => {\n    if (elementRef.current && typeof renderMath === 'function') {\n      renderMath(elementRef.current);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    // Calculate position relative to selection\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    setPosition({\n      top: start.top + Math.abs(bodyRect.top) + 40, // shift above\n      left: start.left,\n    });\n\n    const handleClickOutside = (event) => {\n      if (isScrollbarClicked(event)) {\n        return;\n      }\n\n      const insideSomeEditor = event.target.closest('[data-toolbar-for]');\n\n      if (\n        !event.target.closest('[data-inline-dropdown-toolbar]') &&\n        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current?.instanceId) &&\n        !editor._toolbarOpened &&\n        toolbarRef.current &&\n        !toolbarRef.current.contains(event.target) &&\n        !event.target.closest('[data-inline-node]')\n      ) {\n        requestClose();\n      }\n    };\n\n    if (showToolbar) {\n      document.addEventListener('mousedown', handleClickOutside);\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showToolbar, node]);\n\n  return (\n    <NodeViewWrapper\n      className=\"inline-dropdown\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        height: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        ref={elementRef}\n        style={{\n          display: 'inline-flex',\n          minWidth: '178px',\n          height: '36px',\n          background: '#FFF',\n          border: '1px solid #C0C3CF',\n          boxSizing: 'border-box',\n          borderRadius: '3px',\n          margin: '0 2px',\n          position: 'relative',\n          alignItems: 'center',\n        }}\n        onClick={() => setShowToolbar(true)}\n      >\n        <div\n          style={{\n            flex: 1,\n            overflow: 'hidden',\n            padding: '0 25px 0 8px',\n            whiteSpace: 'nowrap',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              verticalAlign: 'middle',\n            }}\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        </div>\n        <Chevron direction=\"down\" style={{ position: 'absolute', top: '5px', right: '5px' }} />\n      </div>\n      {showToolbar && (\n        <React.Fragment>\n          {ReactDOM.createPortal(\n            <div ref={toolbarRef}>\n              <InlineDropdownToolbar\n                editorCallback={(instance) => {\n                  toolbarEditor.current = instance;\n                }}\n              />\n            </div>,\n            editor?._tiptapContainerEl || document.body,\n          )}\n\n          {editor._tiptapContainerEl &&\n            ReactDOM.createPortal(\n              <CustomToolbarWrapper\n                deletable\n                toolbarOpts={{ minWidth: 'auto' }}\n                autoWidth\n                style={{ top: -40, left: 0, right: 0 }}\n                onDelete={() => {\n                  const { tr } = editor.state;\n                  tr.delete(pos, pos + node.nodeSize);\n                  // Prevent the debounced onBlur/onDone from firing into the\n                  // now-deleted node's stale position\n                  setToolbarOpened(editor, false);\n                  delete editor._holdInlineDropdownToolbarIndex;\n                  editor.view.dispatch(tr);\n                  setShowToolbar(false);\n                  editor.commands.focus();\n                }}\n                showDone={false}\n              />,\n              editor._tiptapContainerEl,\n            )}\n        </React.Fragment>\n      )}\n    </NodeViewWrapper>\n  );\n};\n\nInlineDropdown.propTypes = {\n  attributes: PropTypes.object,\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default InlineDropdown;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/respArea/inlineDropdownUtils.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectInlineDropdownNode = exports.releaseInlineDropdownToolbarHold = exports.isInlineDropdownToolbarHeld = exports.holdInlineDropdownToolbar = exports.findInlineDropdownPos = exports.deleteInlineDropdownByIndex = exports.HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = void 0;
+var _prosemirrorState = require("prosemirror-state");
+var HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = exports.HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = '_holdInlineDropdownToolbarIndex';
+var findInlineDropdownPos = exports.findInlineDropdownPos = function findInlineDropdownPos(editor, index) {
+  var foundPos = null;
+  editor.state.doc.descendants(function (n, p) {
+    var _n$type, _n$attrs;
+    if (((_n$type = n.type) === null || _n$type === void 0 ? void 0 : _n$type.name) === 'inline_dropdown' && String((_n$attrs = n.attrs) === null || _n$attrs === void 0 ? void 0 : _n$attrs.index) === String(index)) {
+      foundPos = p;
+      return false;
+    }
+    return true;
+  });
+  return foundPos;
+};
+var holdInlineDropdownToolbar = exports.holdInlineDropdownToolbar = function holdInlineDropdownToolbar(editor, index) {
+  editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] = index;
+};
+var releaseInlineDropdownToolbarHold = exports.releaseInlineDropdownToolbarHold = function releaseInlineDropdownToolbarHold(editor) {
+  delete editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX];
+};
+var isInlineDropdownToolbarHeld = exports.isInlineDropdownToolbarHeld = function isInlineDropdownToolbarHeld(editor, index) {
+  return editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] != null && String(editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX]) === String(index);
+};
+var selectInlineDropdownNode = exports.selectInlineDropdownNode = function selectInlineDropdownNode(editor, index, fallbackPos) {
+  var _findInlineDropdownPo;
+  var pos = (_findInlineDropdownPo = findInlineDropdownPos(editor, index)) !== null && _findInlineDropdownPo !== void 0 ? _findInlineDropdownPo : fallbackPos;
+  if (pos == null) {
+    return null;
+  }
+  var tr = editor.state.tr;
+  var nodeAtPos = tr.doc.nodeAt(pos);
+  if (!nodeAtPos) {
+    return null;
+  }
+  var selection = tr.selection;
+  if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
+    return pos;
+  }
+  tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, pos));
+  editor.view.dispatch(tr);
+  return pos;
+};
+var deleteInlineDropdownByIndex = exports.deleteInlineDropdownByIndex = function deleteInlineDropdownByIndex(editor, index, fallbackPos) {
+  var _findInlineDropdownPo2;
+  var pos = (_findInlineDropdownPo2 = findInlineDropdownPos(editor, index)) !== null && _findInlineDropdownPo2 !== void 0 ? _findInlineDropdownPo2 : fallbackPos;
+  if (pos == null) {
+    releaseInlineDropdownToolbarHold(editor);
+    return false;
+  }
+  var tr = editor.state.tr;
+  var nodeAtPos = tr.doc.nodeAt(pos);
+  if (!nodeAtPos) {
+    releaseInlineDropdownToolbarHold(editor);
+    return false;
+  }
+  tr["delete"](pos, pos + nodeAtPos.nodeSize);
+  editor.view.dispatch(tr);
+  releaseInlineDropdownToolbarHold(editor);
+  return true;
+};
+//# sourceMappingURL=inlineDropdownUtils.js.map

package/lib/components/respArea/inlineDropdownUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineDropdownUtils.js","names":["_prosemirrorState","require","HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX","exports","findInlineDropdownPos","editor","index","foundPos","state","doc","descendants","n","p","_n$type","_n$attrs","type","name","String","attrs","holdInlineDropdownToolbar","releaseInlineDropdownToolbarHold","isInlineDropdownToolbarHeld","selectInlineDropdownNode","fallbackPos","_findInlineDropdownPo","pos","tr","nodeAtPos","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","deleteInlineDropdownByIndex","_findInlineDropdownPo2"],"sources":["../../../src/components/respArea/inlineDropdownUtils.js"],"sourcesContent":["import { NodeSelection } from 'prosemirror-state';\n\nexport const HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = '_holdInlineDropdownToolbarIndex';\n\nexport const findInlineDropdownPos = (editor, index) => {\n    let foundPos = null;\n\n    editor.state.doc.descendants((n, p) => {\n        if (n.type?.name === 'inline_dropdown' && String(n.attrs?.index) === String(index)) {\n            foundPos = p;\n            return false;\n        }\n\n        return true;\n    });\n\n    return foundPos;\n};\n\nexport const holdInlineDropdownToolbar = (editor, index) => {\n    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] = index;\n};\n\nexport const releaseInlineDropdownToolbarHold = (editor) => {\n    delete editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX];\n};\n\nexport const isInlineDropdownToolbarHeld = (editor, index) =>\n    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] != null &&\n    String(editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX]) === String(index);\n\nexport const selectInlineDropdownNode = (editor, index, fallbackPos) => {\n    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;\n\n    if (pos == null) {\n        return null;\n    }\n\n    const { tr } = editor.state;\n    const nodeAtPos = tr.doc.nodeAt(pos);\n\n    if (!nodeAtPos) {\n        return null;\n    }\n\n    const { selection } = tr;\n\n    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {\n        return pos;\n    }\n\n    tr.setSelection(NodeSelection.create(tr.doc, pos));\n    editor.view.dispatch(tr);\n\n    return pos;\n};\n\nexport const deleteInlineDropdownByIndex = (editor, index, fallbackPos) => {\n    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;\n\n    if (pos == null) {\n        releaseInlineDropdownToolbarHold(editor);\n        return false;\n    }\n\n    const { tr } = editor.state;\n    const nodeAtPos = tr.doc.nodeAt(pos);\n\n    if (!nodeAtPos) {\n        releaseInlineDropdownToolbarHold(editor);\n        return false;\n    }\n\n    tr.delete(pos, pos + nodeAtPos.nodeSize);\n    editor.view.dispatch(tr);\n    releaseInlineDropdownToolbarHold(editor);\n\n    return true;\n};"],"mappings":"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","ignoreList":[]}

package/lib/extensions/css.js

@@ -160,17 +160,27 @@ var CSSMark = exports.CSSMark = _core.Mark.create({
   },
   parseHTML: function parseHTML() {
     var _this = this;
-    // Any span with a class that matches one of allowed classes
+    // Any span with a class that matches one of allowed classes any span that carries a class attribute
+    // so that pre-existing spans are preserved when loading content
     return [{
       tag: 'span[class]',
       getAttrs: function getAttrs(el) {
         var cls = el.getAttribute('class') || '';
-        var match = _this.options.classes.find(function (name) {
-          return cls.includes(name);
-        });
-        return match ? {
-          "class": match
-        } : false;
+        if (!cls) {
+          return false;
+        }
+        var allowedClasses = _this.options && _this.options.classes || [];
+        if (allowedClasses.length > 0) {
+          var match = _this.options.classes.find(function (name) {
+            return cls.includes(name);
+          });
+          return match ? {
+            "class": match
+          } : false;
+        }
+        return {
+          "class": cls
+        };
       }
     }];
   },

package/lib/extensions/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":["_react","_interopRequireDefault","require","_reactDom","_core","_List","_ListItem","removeDialogs","exports","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","_ref","editor","callback","opts","selectedText","parentNode","editorDOM","options","element","newEl","createElement","selection","state","className","popoverEl","closePopOver","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","body","removeEventListener","handleChange","name","parentNodeClass","attrs","createHTML","html","concat","tag","object","text","slice","$anchor","textOffset","$head","el","style","background","height","padding","overflow","display","flexFlow","component","names","map","i","key","button","onClick","marginRight","dangerouslySetInnerHTML","__html","ReactDOM","render","cursorItem","view","nodeDOM","from","cursorNode","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CSSMark","Mark","create","addOptions","classes","addAttributes","parseHTML","getAttribute","renderHTML","attributes","_this","getAttrs","cls","match","find","includes","_ref2","HTMLAttributes","mergeAttributes","addCommands","_this2","setCSSClass","_ref3","commands","setMark","unsetCSSClass","_ref4","unsetMark","openCSSClassDialog","_ref5","doc","textBetween","to","$from","nodeAfter","extraCSSRules","chain","focus","run"],"sources":["../../src/extensions/css.js"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Mark, mergeAttributes } from '@tiptap/core';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-css-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nconst insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {\n  const editorDOM = editor.options.element;\n  const newEl = document.createElement('div');\n  const { selection } = editor.state;\n\n  removeDialogs();\n\n  newEl.className = 'insert-css-dialog';\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (name) => {\n    callback(name, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const parentNodeClass = parentNode?.attrs.class;\n  const createHTML = (name) => {\n    let html = `<span class=\"${name}\">${selectedText}</span>`;\n\n    if (parentNode) {\n      let tag = 'span';\n\n      if (parentNode?.object === 'inline') {\n        tag = 'span';\n      }\n\n      if (parentNode?.object === 'block') {\n        tag = 'div';\n      }\n\n      html = `<${tag} class=\"${parentNodeClass}\">${parentNode.text.slice(\n        0,\n        selection.$anchor.textOffset,\n      )}${html}${parentNode.text.slice(selection.$head.textOffset)}</${tag}>`;\n    }\n\n    return html;\n  };\n\n  const el = (\n    <div\n      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}\n    >\n      <h2>Please choose a css class</h2>\n      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}\n      <List component=\"nav\" style={{ overflow: 'scroll' }}>\n        {opts.names.map((name, i) => (\n          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>\n            <div style={{ marginRight: 20 }}>{name}</div>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: createHTML(name),\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </div>\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = editor.view.nodeDOM(editor.state.selection.from);\n    const cursorNode = cursorItem?.parentNode;\n\n    if (cursorNode) {\n      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();\n      const boundRect = cursorNode.getBoundingClientRect();\n\n      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = 0;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorNode.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\n\nexport const CSSMark = Mark.create({\n  name: 'cssmark',\n\n  addOptions() {\n    return {\n      classes: [],\n    };\n  },\n\n  addAttributes() {\n    return {\n      class: {\n        default: null,\n        parseHTML: (el) => el.getAttribute('class'),\n        renderHTML: (attributes) => {\n          if (!attributes.class) return {};\n          return { class: attributes.class };\n        },\n      },\n    };\n  },\n\n  parseHTML() {\n    // Any span with a class that matches one of allowed classes\n    return [\n      {\n        tag: 'span[class]',\n        getAttrs: (el) => {\n          const cls = el.getAttribute('class') || '';\n          const match = this.options.classes.find((name) => cls.includes(name));\n          return match ? { class: match } : false;\n        },\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['span', mergeAttributes(HTMLAttributes), 0];\n  },\n\n  addCommands() {\n    return {\n      setCSSClass:\n        (className) =>\n        ({ commands }) => {\n          return commands.setMark(this.name, { class: className });\n        },\n\n      unsetCSSClass:\n        () =>\n        ({ commands }) => {\n          return commands.unsetMark(this.name);\n        },\n\n      openCSSClassDialog:\n        () =>\n        ({ editor }) => {\n          insertDialog({\n            editor,\n            selectedText: editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to),\n            parentNode: editor.state.selection.$from.nodeAfter,\n            opts: this.options.extraCSSRules,\n            callback: (className) => {\n              if (className) {\n                editor.chain().focus().setCSSClass(className).run();\n              }\n            },\n          });\n        },\n    };\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"css.js","names":["_react","_interopRequireDefault","require","_reactDom","_core","_List","_ListItem","removeDialogs","exports","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","_ref","editor","callback","opts","selectedText","parentNode","editorDOM","options","element","newEl","createElement","selection","state","className","popoverEl","closePopOver","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","body","removeEventListener","handleChange","name","parentNodeClass","attrs","createHTML","html","concat","tag","object","text","slice","$anchor","textOffset","$head","el","style","background","height","padding","overflow","display","flexFlow","component","names","map","i","key","button","onClick","marginRight","dangerouslySetInnerHTML","__html","ReactDOM","render","cursorItem","view","nodeDOM","from","cursorNode","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CSSMark","Mark","create","addOptions","classes","addAttributes","parseHTML","getAttribute","renderHTML","attributes","_this","getAttrs","cls","allowedClasses","length","match","find","includes","_ref2","HTMLAttributes","mergeAttributes","addCommands","_this2","setCSSClass","_ref3","commands","setMark","unsetCSSClass","_ref4","unsetMark","openCSSClassDialog","_ref5","doc","textBetween","to","$from","nodeAfter","extraCSSRules","chain","focus","run"],"sources":["../../src/extensions/css.js"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Mark, mergeAttributes } from '@tiptap/core';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-css-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nconst insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {\n  const editorDOM = editor.options.element;\n  const newEl = document.createElement('div');\n  const { selection } = editor.state;\n\n  removeDialogs();\n\n  newEl.className = 'insert-css-dialog';\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (name) => {\n    callback(name, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const parentNodeClass = parentNode?.attrs.class;\n  const createHTML = (name) => {\n    let html = `<span class=\"${name}\">${selectedText}</span>`;\n\n    if (parentNode) {\n      let tag = 'span';\n\n      if (parentNode?.object === 'inline') {\n        tag = 'span';\n      }\n\n      if (parentNode?.object === 'block') {\n        tag = 'div';\n      }\n\n      html = `<${tag} class=\"${parentNodeClass}\">${parentNode.text.slice(\n        0,\n        selection.$anchor.textOffset,\n      )}${html}${parentNode.text.slice(selection.$head.textOffset)}</${tag}>`;\n    }\n\n    return html;\n  };\n\n  const el = (\n    <div\n      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}\n    >\n      <h2>Please choose a css class</h2>\n      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}\n      <List component=\"nav\" style={{ overflow: 'scroll' }}>\n        {opts.names.map((name, i) => (\n          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>\n            <div style={{ marginRight: 20 }}>{name}</div>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: createHTML(name),\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </div>\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = editor.view.nodeDOM(editor.state.selection.from);\n    const cursorNode = cursorItem?.parentNode;\n\n    if (cursorNode) {\n      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();\n      const boundRect = cursorNode.getBoundingClientRect();\n\n      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = 0;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorNode.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\n\nexport const CSSMark = Mark.create({\n  name: 'cssmark',\n\n  addOptions() {\n    return {\n      classes: [],\n    };\n  },\n\n  addAttributes() {\n    return {\n      class: {\n        default: null,\n        parseHTML: (el) => el.getAttribute('class'),\n        renderHTML: (attributes) => {\n          if (!attributes.class) return {};\n          return { class: attributes.class };\n        },\n      },\n    };\n  },\n\n  parseHTML() {\n    // Any span with a class that matches one of allowed classes any span that carries a class attribute\n    // so that pre-existing spans are preserved when loading content\n    return [\n      {\n        tag: 'span[class]',\n        getAttrs: (el) => {\n          const cls = el.getAttribute('class') || '';\n\n          if (!cls) {\n            return false;\n          }\n\n          const allowedClasses = (this.options && this.options.classes) || [];\n\n          if (allowedClasses.length > 0) {\n            const match = this.options.classes.find((name) => cls.includes(name));\n\n            return match ? { class: match } : false;\n          }\n\n          return { class: cls };\n        },\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['span', mergeAttributes(HTMLAttributes), 0];\n  },\n\n  addCommands() {\n    return {\n      setCSSClass:\n        (className) =>\n        ({ commands }) => {\n          return commands.setMark(this.name, { class: className });\n        },\n\n      unsetCSSClass:\n        () =>\n        ({ commands }) => {\n          return commands.unsetMark(this.name);\n        },\n\n      openCSSClassDialog:\n        () =>\n        ({ editor }) => {\n          insertDialog({\n            editor,\n            selectedText: editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to),\n            parentNode: editor.state.selection.$from.nodeAfter,\n            opts: this.options.extraCSSRules,\n            callback: (className) => {\n              if (className) {\n                editor.chain().focus().setCSSClass(className).run();\n              }\n            },\n          });\n        },\n    };\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/extensions/image-component.js

@@ -150,7 +150,7 @@ function ImageComponent(props) {
     editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, _objectSpread(_objectSpread({}, currentNode.attrs), newAttrs)));
   }, [editor, findNodePos]);
   var applySizeData = (0, _react.useCallback)(function () {
-    if (!node.attrs.width || !imgRef.current) return;
+    if (!node.attrs.width || !imgRef.current || !imgRef.current.naturalWidth) return;
     var resizePercent = getPercentFromWidth(node.attrs.width);
     if (node.attrs.resizePercent === resizePercent) return;
     updateThisNode({
@@ -166,7 +166,7 @@ function ImageComponent(props) {
   }, [node, pos]);
   (0, _react.useEffect)(function () {
     if (selected) {
-      if (onlyThisNodeSelected) {
+      if (onlyThisNodeSelected && editor.isEditable) {
         var _node$attrs$src, _node$attrs, _options$imageHandlin;
         // Only open the upload UI for a fresh placeholder. Remounting after tab switch
         // would otherwise call insertImageRequested again and reopen the file modal.
@@ -181,11 +181,11 @@ function ImageComponent(props) {
     } else {
       setShowToolbar(selected);
     }
-  }, [onlyThisNodeSelected, selected]);
+  }, [onlyThisNodeSelected, selected, editor.isEditable]);
   (0, _react.useEffect)(function () {
     applySizeData();
-    var resizeHandle = resizeRef.current;
-    if (resizeHandle) {
+    var resizeHandle = resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.current;
+    if (resizeHandle && editor.isEditable) {
       resizeHandle.addEventListener('mousedown', initResize, false);
     }
     return function () {
@@ -300,7 +300,10 @@ function ImageComponent(props) {
     alt: node.attrs.alt
   })), /*#__PURE__*/_react["default"].createElement(StyledResize, {
     ref: resizeRef,
-    className: "resize"
+    className: "resize",
+    style: {
+      display: editor.isEditable ? undefined : 'none'
+    }
   }))), showToolbar && editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
     ref: toolbarRef,
     style: {