@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

package/lib/extensions/math.js

@@ -0,0 +1,342 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZeroWidthSpaceHandlingPlugin = exports.MathNodeView = exports.MathNode = exports.EnsureTextAfterMathPlugin = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _core = require("@tiptap/core");
+var _react2 = require("@tiptap/react");
+var _prosemirrorState = require("prosemirror-state");
+var _mathToolbar = require("@pie-lib/math-toolbar");
+var _mathRendering = require("@pie-lib/math-rendering");
+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 ensureTextAfterMathPluginKey = new _prosemirrorState.PluginKey('ensureTextAfterMath');
+var generateAdditionalKeys = function generateAdditionalKeys() {
+  var keyData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return keyData.map(function (key) {
+    return {
+      name: key,
+      latex: key,
+      write: key,
+      label: key
+    };
+  });
+};
+var EnsureTextAfterMathPlugin = exports.EnsureTextAfterMathPlugin = function EnsureTextAfterMathPlugin(mathNodeName) {
+  return new _prosemirrorState.Plugin({
+    key: ensureTextAfterMathPluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      // Only act when the doc actually changed
+      if (!transactions.some(function (tr) {
+        return tr.docChanged;
+      })) return null;
+      var tr = newState.tr;
+      var changed = false;
+      newState.doc.descendants(function (node, pos) {
+        if (node.type.name === mathNodeName) {
+          var nextPos = pos + node.nodeSize;
+          var nextNode = newState.doc.nodeAt(nextPos);
+
+          // If there's no node after, or the next node isn't text, insert a space
+          if (!nextNode || nextNode.type.name !== 'text') {
+            tr.insert(nextPos, newState.schema.text("\u200B"));
+            changed = true;
+          }
+        }
+      });
+      return changed ? tr : null;
+    }
+  });
+};
+var ZeroWidthSpaceHandlingPlugin = exports.ZeroWidthSpaceHandlingPlugin = new _prosemirrorState.Plugin({
+  key: new _prosemirrorState.PluginKey('zeroWidthSpaceHandling'),
+  props: {
+    handleKeyDown: function handleKeyDown(view, event) {
+      var state = view.state,
+        dispatch = view.dispatch;
+      var selection = state.selection,
+        doc = state.doc;
+      var from = selection.from,
+        empty = selection.empty;
+      if (empty && event.key === 'Backspace' && from > 0) {
+        var prevChar = doc.textBetween(from - 1, from, "\uFFFC", "\uFFFC");
+        if (prevChar === "\u200B") {
+          var tr = state.tr["delete"](from - 2, from);
+          dispatch(tr);
+          return true; // handled
+        }
+      }
+      if (empty && event.key === 'ArrowLeft' && from > 0) {
+        var _prevChar = doc.textBetween(from - 1, from, "\uFFFC", "\uFFFC");
+        // If the previous character is the zero-width space...
+        if (_prevChar === "\u200B") {
+          var posBefore = from - 1;
+          var resolved = state.doc.resolve(posBefore - 1); // look just before the zwsp
+          var maybeNode = resolved.nodeAfter || resolved.nodeBefore;
+
+          // Check if there's an inline selectable node (e.g., your math node)
+          if (maybeNode) {
+            var nodePos = posBefore - maybeNode.nodeSize;
+            var nodeResolved = state.doc.resolve(nodePos);
+            var _tr = state.tr.setSelection(_prosemirrorState.NodeSelection.create(state.doc, nodeResolved.pos));
+            dispatch(_tr);
+            return true;
+          } else {
+            // Just move the text cursor before the zwsp
+            var _tr2 = state.tr.setSelection(_prosemirrorState.TextSelection.create(state.doc, from - 2));
+            dispatch(_tr2);
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }
+});
+var MathNode = exports.MathNode = _core.Node.create({
+  name: 'math',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes: function addAttributes() {
+    return {
+      latex: {
+        "default": ''
+      },
+      wrapper: {
+        "default": null
+      },
+      html: {
+        "default": null
+      }
+    };
+  },
+  addProseMirrorPlugins: function addProseMirrorPlugins() {
+    return [EnsureTextAfterMathPlugin(this.name), ZeroWidthSpaceHandlingPlugin];
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: 'span[data-latex]',
+      getAttrs: function getAttrs(el) {
+        return {
+          latex: el.getAttribute('data-raw') || el.textContent
+        };
+      }
+    }, {
+      tag: 'span[data-type="mathml"]',
+      getAttrs: function getAttrs(el) {
+        return {
+          html: el.innerHTML
+        };
+      }
+    }];
+  },
+  addCommands: function addCommands() {
+    var _this = this;
+    return {
+      insertMath: function insertMath() {
+        var latex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+        return function (_ref) {
+          var _node$type;
+          var tr = _ref.tr,
+            editor = _ref.editor,
+            dispatch = _ref.dispatch;
+          var state = editor.view.state;
+          var node = state.schema.nodes.math.create({
+            latex: latex
+          });
+          var selection = state.selection;
+
+          // The inserted node is typically just before the cursor
+          var pos = selection.$from.pos;
+          tr.insert(pos, node);
+          if ((node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === _this.name) {
+            // Create a NodeSelection from the current doc
+            var sel = _prosemirrorState.NodeSelection.create(tr.doc, selection.$from.pos);
+
+            // Build a fresh transaction from the current state and set the selection
+            tr.setSelection(sel);
+          }
+          dispatch(tr);
+          return true;
+        };
+      }
+      // insertMath: (latex = '') => ({ commands }) => {
+      //   return commands.insertContent({
+      //     type: this.name,
+      //     attrs: { latex },
+      //   });
+      // },
+    };
+  },
+  renderHTML: function renderHTML(_ref2) {
+    var HTMLAttributes = _ref2.HTMLAttributes;
+    if (HTMLAttributes.html) {
+      return ['span', {
+        'data-type': 'mathml',
+        dangerouslySetInnerHTML: {
+          __html: HTMLAttributes.html
+        }
+      }];
+    }
+    return ['span', {
+      'data-latex': '',
+      'data-raw': HTMLAttributes.latex
+    }, (0, _mathRendering.wrapMath)(HTMLAttributes.latex, HTMLAttributes.wrapper)];
+  },
+  addNodeView: function addNodeView() {
+    var _this2 = this;
+    return (0, _react2.ReactNodeViewRenderer)(function (props) {
+      return /*#__PURE__*/_react["default"].createElement(MathNodeView, _objectSpread(_objectSpread({}, props), {}, {
+        options: _this2.options
+      }));
+    });
+  }
+});
+var MathNodeView = exports.MathNodeView = function MathNodeView(props) {
+  var node = props.node,
+    updateAttributes = props.updateAttributes,
+    editor = props.editor,
+    selected = props.selected,
+    options = props.options;
+  var _useState = (0, _react.useState)(selected),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showToolbar = _useState2[0],
+    setShowToolbar = _useState2[1];
+  var toolbarRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _ref3 = options || {},
+    _ref3$math = _ref3.math,
+    mathOptions = _ref3$math === void 0 ? {} : _ref3$math;
+  var keypadMode = mathOptions.keypadMode,
+    _mathOptions$controll = mathOptions.controlledKeypadMode,
+    controlledKeypadMode = _mathOptions$controll === void 0 ? true : _mathOptions$controll,
+    _mathOptions$customKe = mathOptions.customKeys,
+    customKeys = _mathOptions$customKe === void 0 ? [] : _mathOptions$customKe,
+    keyPadCharacterRef = mathOptions.keyPadCharacterRef,
+    setKeypadInteraction = mathOptions.setKeypadInteraction;
+  var latex = node.attrs.latex || '';
+  var handleChange = function handleChange(newLatex) {
+    updateAttributes({
+      latex: newLatex
+    });
+  };
+  var handleDone = function handleDone(newLatex) {
+    updateAttributes({
+      latex: newLatex
+    });
+    setShowToolbar(false);
+    editor._toolbarOpened = false;
+    var _editor$state = editor.state,
+      selection = _editor$state.selection,
+      tr = _editor$state.tr,
+      doc = _editor$state.doc;
+    var sel = _prosemirrorState.TextSelection.create(doc, selection.from + 1);
+
+    // Build a fresh transaction from the current state and set the selection
+    tr.setSelection(sel);
+    editor.view.dispatch(tr);
+    editor.commands.focus();
+  };
+  (0, _react.useEffect)(function () {
+    if (selected) {
+      setShowToolbar(true);
+    }
+  }, [selected]);
+  (0, _react.useEffect)(function () {
+    editor._toolbarOpened = !!showToolbar;
+  }, [showToolbar]);
+  (0, _react.useEffect)(function () {
+    // Calculate position relative to selection
+    var from = editor.state.selection.from;
+    var start = editor.view.coordsAtPos(from);
+    setPosition({
+      top: 40,
+      // shift above
+      left: start.left
+    });
+    var handleClickOutside = function handleClickOutside(event) {
+      var _document$querySelect, _document, _target$closest, _target$closest2, _target$closest3;
+      var target = event === null || event === void 0 ? void 0 : event.target;
+
+      // MUI's `Select` renders its dropdown options in a portal attached to `document.body`.
+      // Those clicks should not dismiss the math toolbar.
+      var equationEditorListboxes = ((_document$querySelect = (_document = document).querySelectorAll) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.call(_document, '[id^="equation-editor-select"][id*="listbox"], [aria-labelledby="equation-editor-label"][role="listbox"]')) || [];
+      var equationEditorPopoverOpen = equationEditorListboxes.length > 0;
+      var clickedEquationEditorSelect = !!(target !== null && target !== void 0 && target.id && target.id.includes('equation-editor-select')) || !!(target !== null && target !== void 0 && (_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '[id*="equation-editor-select"]'));
+
+      // If the click originated from the math node preview itself (the element
+      // that opens the toolbar), ignore it here — the node's own onClick handler
+      // will keep/re-open the toolbar. Without this guard, closing and then
+      // immediately clicking the math node would fire this listener in the same
+      // event cycle and close the toolbar before it could open.
+      var clickedMathNode = !!(target !== null && target !== void 0 && (_target$closest2 = target.closest) !== null && _target$closest2 !== void 0 && _target$closest2.call(target, '.math-node'));
+      if (toolbarRef.current && !toolbarRef.current.contains(target) && !(target !== null && target !== void 0 && (_target$closest3 = target.closest) !== null && _target$closest3 !== void 0 && _target$closest3.call(target, '[data-inline-node]')) && !equationEditorPopoverOpen && !clickedEquationEditorSelect && !clickedMathNode) {
+        setShowToolbar(false);
+        handleDone(node.attrs.latex);
+      }
+    };
+    if (showToolbar) {
+      // Use `click` (not `mousedown`) so interacting with browser UI like the scrollbar
+      // doesn't automatically dismiss the math toolbar.
+      document.addEventListener('click', handleClickOutside);
+    } else {
+      document.removeEventListener('click', handleClickOutside);
+    }
+    return function () {
+      return document.removeEventListener('click', handleClickOutside);
+    };
+  }, [editor, showToolbar]);
+  return /*#__PURE__*/_react["default"].createElement(_react2.NodeViewWrapper, {
+    className: "math-node",
+    style: {
+      display: 'inline-flex',
+      cursor: 'pointer',
+      margin: '0 4px'
+    },
+    "data-selected": selected
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: function onClick() {
+      return setShowToolbar(true);
+    },
+    contentEditable: false
+  }, /*#__PURE__*/_react["default"].createElement(_mathToolbar.MathPreview, {
+    latex: latex
+  })), showToolbar && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
+    ref: toolbarRef,
+    "data-toolbar-for": editor.instanceId,
+    style: {
+      position: 'absolute',
+      top: "".concat(position.top, "px"),
+      left: "".concat(position.left, "px"),
+      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)'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_mathToolbar.MathToolbar, {
+    latex: latex,
+    autoFocus: true,
+    onChange: handleChange,
+    onDone: handleDone,
+    keypadMode: keypadMode,
+    controlledKeypadMode: controlledKeypadMode,
+    additionalKeys: generateAdditionalKeys(customKeys),
+    keyPadCharacterRef: keyPadCharacterRef,
+    setKeypadInteraction: setKeypadInteraction
+  })), (editor === null || editor === void 0 ? void 0 : editor._tiptapContainerEl) || document.body));
+};
+//# sourceMappingURL=math.js.map

package/lib/extensions/math.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"math.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_core","_react2","_prosemirrorState","_mathToolbar","_mathRendering","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","ensureTextAfterMathPluginKey","PluginKey","generateAdditionalKeys","keyData","undefined","map","key","name","latex","write","label","EnsureTextAfterMathPlugin","exports","mathNodeName","Plugin","appendTransaction","transactions","oldState","newState","some","tr","docChanged","changed","doc","descendants","node","pos","type","nextPos","nodeSize","nextNode","nodeAt","insert","schema","text","ZeroWidthSpaceHandlingPlugin","props","handleKeyDown","view","event","state","dispatch","selection","from","empty","prevChar","textBetween","posBefore","resolved","resolve","maybeNode","nodeAfter","nodeBefore","nodePos","nodeResolved","setSelection","NodeSelection","create","TextSelection","MathNode","Node","group","inline","atom","addAttributes","wrapper","html","addProseMirrorPlugins","parseHTML","tag","getAttrs","el","getAttribute","textContent","innerHTML","addCommands","_this","insertMath","_ref","_node$type","editor","nodes","math","$from","sel","renderHTML","_ref2","HTMLAttributes","dangerouslySetInnerHTML","__html","wrapMath","addNodeView","_this2","ReactNodeViewRenderer","createElement","MathNodeView","options","updateAttributes","selected","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","toolbarRef","useRef","_useState3","top","left","_useState4","position","setPosition","_ref3","_ref3$math","mathOptions","keypadMode","_mathOptions$controll","controlledKeypadMode","_mathOptions$customKe","customKeys","keyPadCharacterRef","setKeypadInteraction","attrs","handleChange","newLatex","handleDone","_toolbarOpened","_editor$state","commands","focus","useEffect","start","coordsAtPos","handleClickOutside","_document$querySelect","_document","_target$closest","_target$closest2","_target$closest3","target","equationEditorListboxes","document","querySelectorAll","equationEditorPopoverOpen","clickedEquationEditorSelect","id","includes","closest","clickedMathNode","current","contains","addEventListener","removeEventListener","NodeViewWrapper","className","style","display","cursor","margin","onClick","contentEditable","MathPreview","ReactDOM","createPortal","ref","instanceId","concat","zIndex","background","boxShadow","MathToolbar","autoFocus","onChange","onDone","additionalKeys","_tiptapContainerEl","body"],"sources":["../../src/extensions/math.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Node } from '@tiptap/core';\nimport { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';\nimport { NodeSelection, Plugin, PluginKey, TextSelection } from 'prosemirror-state';\nimport { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';\nimport { wrapMath } from '@pie-lib/math-rendering';\n\nconst ensureTextAfterMathPluginKey = new PluginKey('ensureTextAfterMath');\n\nconst generateAdditionalKeys = (keyData = []) => {\n  return keyData.map((key) => ({\n    name: key,\n    latex: key,\n    write: key,\n    label: key,\n  }));\n};\n\nexport const EnsureTextAfterMathPlugin = (mathNodeName) =>\n  new Plugin({\n    key: ensureTextAfterMathPluginKey,\n    appendTransaction: (transactions, oldState, newState) => {\n      // Only act when the doc actually changed\n      if (!transactions.some((tr) => tr.docChanged)) return null;\n\n      const tr = newState.tr;\n      let changed = false;\n\n      newState.doc.descendants((node, pos) => {\n        if (node.type.name === mathNodeName) {\n          const nextPos = pos + node.nodeSize;\n          const nextNode = newState.doc.nodeAt(nextPos);\n\n          // If there's no node after, or the next node isn't text, insert a space\n          if (!nextNode || nextNode.type.name !== 'text') {\n            tr.insert(nextPos, newState.schema.text('\\u200b'));\n            changed = true;\n          }\n        }\n      });\n\n      return changed ? tr : null;\n    },\n  });\n\nexport const ZeroWidthSpaceHandlingPlugin = new Plugin({\n  key: new PluginKey('zeroWidthSpaceHandling'),\n  props: {\n    handleKeyDown(view, event) {\n      const { state, dispatch } = view;\n      const { selection, doc } = state;\n      const { from, empty } = selection;\n\n      if (empty && event.key === 'Backspace' && from > 0) {\n        const prevChar = doc.textBetween(from - 1, from, '\\uFFFC', '\\uFFFC');\n        if (prevChar === '\\u200b') {\n          const tr = state.tr.delete(from - 2, from);\n          dispatch(tr);\n          return true; // handled\n        }\n      }\n\n      if (empty && event.key === 'ArrowLeft' && from > 0) {\n        const prevChar = doc.textBetween(from - 1, from, '\\uFFFC', '\\uFFFC');\n        // If the previous character is the zero-width space...\n        if (prevChar === '\\u200b') {\n          const posBefore = from - 1;\n          const resolved = state.doc.resolve(posBefore - 1); // look just before the zwsp\n          const maybeNode = resolved.nodeAfter || resolved.nodeBefore;\n\n          // Check if there's an inline selectable node (e.g., your math node)\n          if (maybeNode) {\n            const nodePos = posBefore - maybeNode.nodeSize;\n            const nodeResolved = state.doc.resolve(nodePos);\n            const tr = state.tr.setSelection(NodeSelection.create(state.doc, nodeResolved.pos));\n            dispatch(tr);\n            return true;\n          } else {\n            // Just move the text cursor before the zwsp\n            const tr = state.tr.setSelection(TextSelection.create(state.doc, from - 2));\n            dispatch(tr);\n            return true;\n          }\n        }\n      }\n\n      return false;\n    },\n  },\n});\n\nexport const MathNode = Node.create({\n  name: 'math',\n  group: 'inline',\n  inline: true,\n  atom: true,\n\n  addAttributes() {\n    return {\n      latex: { default: '' },\n      wrapper: { default: null },\n      html: { default: null },\n    };\n  },\n\n  addProseMirrorPlugins() {\n    return [EnsureTextAfterMathPlugin(this.name), ZeroWidthSpaceHandlingPlugin];\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'span[data-latex]',\n        getAttrs: (el) => ({\n          latex: el.getAttribute('data-raw') || el.textContent,\n        }),\n      },\n      {\n        tag: 'span[data-type=\"mathml\"]',\n        getAttrs: (el) => ({\n          html: el.innerHTML,\n        }),\n      },\n    ];\n  },\n\n  addCommands() {\n    return {\n      insertMath:\n        (latex = '') =>\n        ({ tr, editor, dispatch }) => {\n          const { state } = editor.view;\n          const node = state.schema.nodes.math.create({\n            latex,\n          });\n          const { selection } = state;\n\n          // The inserted node is typically just before the cursor\n          const pos = selection.$from.pos;\n\n          tr.insert(pos, node);\n\n          if (node?.type?.name === this.name) {\n            // Create a NodeSelection from the current doc\n            const sel = NodeSelection.create(tr.doc, selection.$from.pos);\n\n            // Build a fresh transaction from the current state and set the selection\n            tr.setSelection(sel);\n          }\n\n          dispatch(tr);\n\n          return true;\n        },\n      // insertMath: (latex = '') => ({ commands }) => {\n      //   return commands.insertContent({\n      //     type: this.name,\n      //     attrs: { latex },\n      //   });\n      // },\n    };\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    if (HTMLAttributes.html) {\n      return ['span', { 'data-type': 'mathml', dangerouslySetInnerHTML: { __html: HTMLAttributes.html } }];\n    }\n\n    return [\n      'span',\n      { 'data-latex': '', 'data-raw': HTMLAttributes.latex },\n      wrapMath(HTMLAttributes.latex, HTMLAttributes.wrapper),\n    ];\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <MathNodeView {...{ ...props, options: this.options }} />);\n  },\n});\n\nexport const MathNodeView = (props) => {\n  const { node, updateAttributes, editor, selected, options } = props;\n  const [showToolbar, setShowToolbar] = useState(selected);\n  const toolbarRef = useRef(null);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const { math: mathOptions = {} } = options || {};\n  const {\n    keypadMode,\n    controlledKeypadMode = true,\n    customKeys = [],\n    keyPadCharacterRef,\n    setKeypadInteraction,\n  } = mathOptions;\n\n  const latex = node.attrs.latex || '';\n\n  const handleChange = (newLatex) => {\n    updateAttributes({ latex: newLatex });\n  };\n\n  const handleDone = (newLatex) => {\n    updateAttributes({ latex: newLatex });\n    setShowToolbar(false);\n\n    editor._toolbarOpened = false;\n\n    const { selection, tr, doc } = editor.state;\n    const sel = TextSelection.create(doc, selection.from + 1);\n\n    // Build a fresh transaction from the current state and set the selection\n    tr.setSelection(sel);\n    editor.view.dispatch(tr);\n    editor.commands.focus();\n  };\n\n  useEffect(() => {\n    if (selected) {\n      setShowToolbar(true);\n    }\n  }, [selected]);\n\n  useEffect(() => {\n    editor._toolbarOpened = !!showToolbar;\n  }, [showToolbar]);\n\n  useEffect(() => {\n    // Calculate position relative to selection\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n    setPosition({\n      top: 40, // shift above\n      left: start.left,\n    });\n\n    const handleClickOutside = (event) => {\n      const target = event?.target;\n\n      // MUI's `Select` renders its dropdown options in a portal attached to `document.body`.\n      // Those clicks should not dismiss the math toolbar.\n      const equationEditorListboxes =\n        document.querySelectorAll?.(\n          '[id^=\"equation-editor-select\"][id*=\"listbox\"], [aria-labelledby=\"equation-editor-label\"][role=\"listbox\"]',\n        ) || [];\n\n      const equationEditorPopoverOpen = equationEditorListboxes.length > 0;\n      const clickedEquationEditorSelect =\n        !!(target?.id && target.id.includes('equation-editor-select')) ||\n        !!target?.closest?.('[id*=\"equation-editor-select\"]');\n\n      // If the click originated from the math node preview itself (the element\n      // that opens the toolbar), ignore it here — the node's own onClick handler\n      // will keep/re-open the toolbar. Without this guard, closing and then\n      // immediately clicking the math node would fire this listener in the same\n      // event cycle and close the toolbar before it could open.\n      const clickedMathNode = !!target?.closest?.('.math-node');\n\n      if (\n        toolbarRef.current &&\n        !toolbarRef.current.contains(target) &&\n        !target?.closest?.('[data-inline-node]') &&\n        !equationEditorPopoverOpen &&\n        !clickedEquationEditorSelect &&\n        !clickedMathNode\n      ) {\n        setShowToolbar(false);\n        handleDone(node.attrs.latex);\n      }\n    };\n\n    if (showToolbar) {\n      // Use `click` (not `mousedown`) so interacting with browser UI like the scrollbar\n      // doesn't automatically dismiss the math toolbar.\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [editor, showToolbar]);\n\n  return (\n    <NodeViewWrapper\n      className=\"math-node\"\n      style={{\n        display: 'inline-flex',\n        cursor: 'pointer',\n        margin: '0 4px',\n      }}\n      data-selected={selected}\n    >\n      <div onClick={() => setShowToolbar(true)} contentEditable={false}>\n        <MathPreview latex={latex} />\n      </div>\n      {showToolbar &&\n        ReactDOM.createPortal(\n          <div\n            ref={toolbarRef}\n            data-toolbar-for={editor.instanceId}\n            style={{\n              position: 'absolute',\n              top: `${position.top}px`,\n              left: `${position.left}px`,\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            }}\n          >\n            <MathToolbar\n              latex={latex}\n              autoFocus\n              onChange={handleChange}\n              onDone={handleDone}\n              keypadMode={keypadMode}\n              controlledKeypadMode={controlledKeypadMode}\n              additionalKeys={generateAdditionalKeys(customKeys)}\n              keyPadCharacterRef={keyPadCharacterRef}\n              setKeypadInteraction={setKeypadInteraction}\n            />\n          </div>,\n          editor?._tiptapContainerEl || document.body,\n        )}\n    </NodeViewWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/extensions/media.js

@@ -0,0 +1,243 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Media = void 0;
+exports["default"] = MediaNodeView;
+exports.insertDialog = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _core = require("@tiptap/core");
+var _react2 = require("@tiptap/react");
+var _MediaDialog = _interopRequireDefault(require("../components/media/MediaDialog"));
+var _MediaToolbar = _interopRequireDefault(require("../components/media/MediaToolbar"));
+var _excluded = ["type", "callback", "options"];
+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 Media = exports.Media = _core.Node.create({
+  name: 'media',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes: function addAttributes() {
+    return {
+      type: {
+        "default": 'video'
+      },
+      src: {
+        "default": null
+      },
+      width: {
+        "default": null
+      },
+      height: {
+        "default": null
+      },
+      title: {
+        "default": null
+      },
+      starts: {
+        "default": null
+      },
+      ends: {
+        "default": null
+      },
+      editing: {
+        "default": false
+      },
+      tag: {
+        "default": 'iframe'
+      },
+      // 'iframe' or 'audio'
+      url: {
+        "default": null
+      }
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: 'iframe[data-type="video"]',
+      getAttrs: function getAttrs(el) {
+        return {
+          type: 'video',
+          tag: 'iframe',
+          src: el.getAttribute('src'),
+          width: el.getAttribute('width'),
+          height: el.getAttribute('height'),
+          title: el.dataset.title,
+          starts: el.dataset.starts,
+          ends: el.dataset.ends,
+          url: el.dataset.url
+        };
+      }
+    }, {
+      tag: 'audio',
+      getAttrs: function getAttrs(el) {
+        var _el$querySelector;
+        return {
+          type: 'audio',
+          tag: 'audio',
+          src: (_el$querySelector = el.querySelector('source')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.getAttribute('src')
+        };
+      }
+    }];
+  },
+  renderHTML: function renderHTML(_ref) {
+    var HTMLAttributes = _ref.HTMLAttributes;
+    var tag = HTMLAttributes.tag,
+      src = HTMLAttributes.src,
+      width = HTMLAttributes.width,
+      height = HTMLAttributes.height;
+    if (tag === 'audio') {
+      return ['audio', {
+        controls: 'controls',
+        controlsList: 'nodownload'
+      }, ['source', {
+        src: src,
+        type: 'audio/mp3'
+      }]];
+    }
+    return ['iframe', (0, _core.mergeAttributes)({
+      'data-type': 'video',
+      frameborder: '0',
+      allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+      allowfullscreen: '',
+      src: src
+    }, width ? {
+      width: width
+    } : {}, height ? {
+      height: height
+    } : {})];
+  },
+  addCommands: function addCommands() {
+    var _this = this;
+    return {
+      insertMedia: function insertMedia(attrs) {
+        return function (_ref2) {
+          var commands = _ref2.commands;
+          return commands.insertContent({
+            type: _this.name,
+            attrs: attrs
+          });
+        };
+      },
+      updateMedia: function updateMedia(attrs) {
+        return function (_ref3) {
+          var commands = _ref3.commands;
+          return commands.updateAttributes(_this.name, attrs);
+        };
+      }
+    };
+  },
+  addNodeView: function addNodeView() {
+    var _this2 = this;
+    return (0, _react2.ReactNodeViewRenderer)(function (props) {
+      return /*#__PURE__*/_react["default"].createElement(MediaNodeView, _objectSpread(_objectSpread({}, props), {}, {
+        options: _this2.options
+      }));
+    });
+  }
+});
+var removeDialogs = function removeDialogs() {
+  var prevDialogs = document.querySelectorAll('.insert-media-dialog');
+  prevDialogs.forEach(function (s) {
+    return s.remove();
+  });
+};
+var insertDialog = exports.insertDialog = function insertDialog(props) {
+  var newEl = document.createElement('div');
+  var type = props.type,
+    callback = props.callback,
+    options = props.options,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var initialBodyOverflow = document.body.style.overflow;
+  removeDialogs();
+  newEl.className = 'insert-media-dialog';
+  document.body.style.overflow = 'hidden';
+  var handleClose = function handleClose(val, data) {
+    callback(val, data);
+    newEl.remove();
+    document.body.style.overflow = initialBodyOverflow;
+  };
+  var el = /*#__PURE__*/_react["default"].createElement(_MediaDialog["default"], (0, _extends2["default"])({}, rest, {
+    uploadSoundSupport: options.uploadSoundSupport,
+    type: type,
+    disablePortal: true,
+    open: true,
+    handleClose: handleClose
+  }));
+  _reactDom["default"].render(el, newEl);
+  document.body.appendChild(newEl);
+};
+function MediaNodeView(_ref4) {
+  var editor = _ref4.editor,
+    node = _ref4.node,
+    updateAttributes = _ref4.updateAttributes,
+    deleteNode = _ref4.deleteNode,
+    options = _ref4.options;
+  var _node$attrs = node.attrs,
+    type = _node$attrs.type,
+    src = _node$attrs.src,
+    width = _node$attrs.width,
+    height = _node$attrs.height,
+    tag = _node$attrs.tag;
+  var handleEdit = function handleEdit() {
+    insertDialog(_objectSpread(_objectSpread({}, node.attrs), {}, {
+      options: options,
+      edit: true,
+      callback: function callback(val, data) {
+        if (val) {
+          updateAttributes(data);
+        }
+        editor.chain().focus().run();
+      }
+    }));
+  };
+  (0, _react.useEffect)(function () {
+    // Only open dialog for newly inserted media without a src
+    if (!src) {
+      insertDialog(_objectSpread(_objectSpread({}, node.attrs), {}, {
+        options: options,
+        edit: true,
+        callback: function callback(val, data) {
+          if (val) {
+            updateAttributes(data);
+          } else {
+            deleteNode();
+          }
+          editor.chain().focus().run();
+        }
+      }));
+    }
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_react2.NodeViewWrapper, {
+    "data-type": type,
+    style: {
+      width: width,
+      height: height
+    }
+  }, tag === 'audio' ? /*#__PURE__*/_react["default"].createElement("audio", {
+    controls: true,
+    controlsList: "nodownload"
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    type: "audio/mp3",
+    src: src
+  })) : /*#__PURE__*/_react["default"].createElement("iframe", {
+    src: src,
+    allowFullScreen: true,
+    frameBorder: "0",
+    width: width,
+    height: height
+  }), /*#__PURE__*/_react["default"].createElement(_MediaToolbar["default"], {
+    onEdit: handleEdit,
+    onRemove: deleteNode
+  }));
+}
+//# sourceMappingURL=media.js.map