@pie-lib/editable-html-tip-tap 2.1.2-next.53 → 2.1.2-next.57

package/lib/components/respArea/InlineDropdown.js

@@ -120,7 +120,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,

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

@@ -1 +1 @@
-{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_react2","_prosemirrorState","_RespArea","_reactDom","_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","isHeld","_holdInlineDropdownToolbarIndex","String","index","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","closeToolbar","InlineDropdownToolbar","respAreaToolbar","reselectNode","tr","state","nodeAtPos","doc","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","requestClose","current","onToolbarCloseRequest","setTimeout","useEffect","onlyThisNodeSelected","bodyRect","document","body","getBoundingClientRect","start","coordsAtPos","Math","abs","handleClickOutside","event","_toolbarEditor$curren","insideSomeEditor","target","closest","dataset","toolbarFor","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","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 PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { NodeSelection } from 'prosemirror-state';\nimport { Chevron } from '../icons/RespArea';\nimport ReactDOM from 'react-dom';\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\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  };\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  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        !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]);\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={{ __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":[]}
+{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_react2","_prosemirrorState","_RespArea","_reactDom","_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","isHeld","_holdInlineDropdownToolbarIndex","String","index","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","closeToolbar","InlineDropdownToolbar","respAreaToolbar","reselectNode","tr","state","nodeAtPos","doc","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","requestClose","current","onToolbarCloseRequest","setTimeout","useEffect","onlyThisNodeSelected","bodyRect","document","body","getBoundingClientRect","start","coordsAtPos","Math","abs","handleClickOutside","event","_toolbarEditor$curren","insideSomeEditor","target","closest","dataset","toolbarFor","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","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 PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { NodeSelection } from 'prosemirror-state';\nimport { Chevron } from '../icons/RespArea';\nimport ReactDOM from 'react-dom';\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\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  };\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  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        !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        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":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,qBAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,QAAA,GAAAR,OAAA;AAAuD,SAAAD,wBAAAU,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,wBAAAU,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;AAEvD,IAAMmB,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAK,EAAK;EAChC,IAAQC,MAAM,GAAsCD,KAAK,CAAjDC,MAAM;IAAEC,IAAI,GAAgCF,KAAK,CAAzCE,IAAI;IAAEC,MAAM,GAAwBH,KAAK,CAAnCG,MAAM;IAAEC,OAAO,GAAeJ,KAAK,CAA3BI,OAAO;IAAEC,QAAQ,GAAKL,KAAK,CAAlBK,QAAQ;EAC/C,IAAeC,UAAU,GAAKJ,IAAI,CAA1BK,KAAK;EACb,IAAQC,KAAK,GAAYF,UAAU,CAA3BE,KAAK;IAAEC,KAAK,GAAKH,UAAU,CAApBG,KAAK;EACpB,IAAMC,IAAI,GAAGF,KAAK,IAAI,kBAAkB;EACxC,IAAMG,GAAG,GAAGR,MAAM,CAAC,CAAC;EACpB,IAAMS,UAAU,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAC/B,IAAMC,aAAa,GAAG,IAAAD,aAAM,EAAC,IAAI,CAAC;EAClC,IAAME,mBAAmB,GAAG,IAAAF,aAAM,EAAC,KAAK,CAAC;EAEzC,IAAMG,MAAM,GAAG,SAATA,MAAMA,CAAA;IAAA,OACVf,MAAM,CAACgB,+BAA+B,IAAI,IAAI,IAC9CC,MAAM,CAACjB,MAAM,CAACgB,+BAA+B,CAAC,KAAKC,MAAM,CAAChB,IAAI,CAACK,KAAK,CAACY,KAAK,CAAC;EAAA;EAE7E,IAAAC,SAAA,GAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAA9CI,WAAW,GAAAF,UAAA;IAAEG,cAAc,GAAAH,UAAA;EAClC,IAAAI,UAAA,GAAgC,IAAAL,eAAQ,EAAC;MAAEM,GAAG,EAAE,CAAC;MAAEC,IAAI,EAAE;IAAE,CAAC,CAAC;IAAAC,UAAA,OAAAN,eAAA,aAAAG,UAAA;IAAtDI,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAE5B,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;IACzB,IAAIhB,MAAM,CAAC,CAAC,EAAE;MACZ;IACF;IAEAS,cAAc,CAAC,KAAK,CAAC;EACvB,CAAC;EAED,IAAMQ,qBAAqB,GAAG7B,OAAO,CAAC8B,eAAe,CAAC,CAAChC,IAAI,EAAES,GAAG,CAAC,EAAEV,MAAM,EAAE+B,YAAY,CAAC;EAExF,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;IACzB,IAAQC,EAAE,GAAKnC,MAAM,CAACoC,KAAK,CAAnBD,EAAE;IACV,IAAME,SAAS,GAAGF,EAAE,CAACG,GAAG,CAACC,MAAM,CAAC7B,GAAG,CAAC;IAEpC,IAAI,CAAC2B,SAAS,EAAE;MACd;IACF;IAEA,IAAQG,SAAS,GAAKL,EAAE,CAAhBK,SAAS;IAEjB,IAAIA,SAAS,CAACC,IAAI,KAAK/B,GAAG,IAAI8B,SAAS,CAACE,EAAE,KAAKhC,GAAG,GAAG2B,SAAS,CAACM,QAAQ,EAAE;MACvE;IACF;IAEAR,EAAE,CAACS,YAAY,CAACC,+BAAa,CAACC,MAAM,CAACX,EAAE,CAACG,GAAG,EAAE5B,GAAG,CAAC,CAAC;IAClDV,MAAM,CAAC+C,IAAI,CAACC,QAAQ,CAACb,EAAE,CAAC;EAC1B,CAAC;EAED,IAAMc,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;IACzB,IAAInC,mBAAmB,CAACoC,OAAO,EAAE;MAC/B;IACF;IAEA,IAAI/C,OAAO,CAACgD,qBAAqB,EAAE;MACjCrC,mBAAmB,CAACoC,OAAO,GAAG,IAAI;MAElC/C,OAAO,CAACgD,qBAAqB,CAC3B,CAAClD,IAAI,EAAES,GAAG,CAAC,EACXV,MAAM,EACN,YAAM;QACJc,mBAAmB,CAACoC,OAAO,GAAG,KAAK;QACnC,OAAOlD,MAAM,CAACgB,+BAA+B;QAC7Ce,YAAY,CAAC,CAAC;MAChB,CAAC,EACD,YAAM;QACJjB,mBAAmB,CAACoC,OAAO,GAAG,KAAK;QACnC,OAAOlD,MAAM,CAACgB,+BAA+B;QAC7CQ,cAAc,CAAC,IAAI,CAAC;QACpB4B,UAAU,CAAClB,YAAY,EAAE,CAAC,CAAC;MAC7B,CACF,CAAC;IACH,CAAC,MAAM;MACLH,YAAY,CAAC,CAAC;IAChB;EACF,CAAC;EAED,IAAAsB,gBAAS,EAAC,YAAM;IACd,IAAQb,SAAS,GAAKxC,MAAM,CAACoC,KAAK,CAA1BI,SAAS;IACjB,IAAMc,oBAAoB,GAAGd,SAAS,CAACC,IAAI,GAAGxC,IAAI,CAAC0C,QAAQ,KAAKH,SAAS,CAACE,EAAE;IAE5E,IAAItC,QAAQ,EAAE;MACZ,IAAIkD,oBAAoB,EAAE;QACxB9B,cAAc,CAAC,IAAI,CAAC;MACtB;IACF,CAAC,MAAM,IAAID,WAAW,EAAE;MACtB0B,YAAY,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAACjD,MAAM,EAAEC,IAAI,EAAEG,QAAQ,CAAC,CAAC;EAE5B,IAAAiD,gBAAS,EAAC,YAAM;IACd;IACA,IAAME,QAAQ,GAAGC,QAAQ,CAACC,IAAI,CAACC,qBAAqB,CAAC,CAAC;IACtD,IAAQjB,IAAI,GAAKzC,MAAM,CAACoC,KAAK,CAACI,SAAS,CAA/BC,IAAI;IACZ,IAAMkB,KAAK,GAAG3D,MAAM,CAAC+C,IAAI,CAACa,WAAW,CAACnB,IAAI,CAAC;IAE3CX,WAAW,CAAC;MACVJ,GAAG,EAAEiC,KAAK,CAACjC,GAAG,GAAGmC,IAAI,CAACC,GAAG,CAACP,QAAQ,CAAC7B,GAAG,CAAC,GAAG,EAAE;MAAE;MAC9CC,IAAI,EAAEgC,KAAK,CAAChC;IACd,CAAC,CAAC;IAEF,IAAMoC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAK,EAAK;MAAA,IAAAC,qBAAA;MACpC,IAAMC,gBAAgB,GAAGF,KAAK,CAACG,MAAM,CAACC,OAAO,CAAC,oBAAoB,CAAC;MAEnE,IACE,CAACJ,KAAK,CAACG,MAAM,CAACC,OAAO,CAAC,gCAAgC,CAAC,KACtD,CAACF,gBAAgB,IAAIA,gBAAgB,CAACG,OAAO,CAACC,UAAU,OAAAL,qBAAA,GAAKpD,aAAa,CAACqC,OAAO,cAAAe,qBAAA,uBAArBA,qBAAA,CAAuBM,UAAU,EAAC,IAChG,CAACvE,MAAM,CAACwE,cAAc,IACtB7D,UAAU,CAACuC,OAAO,IAClB,CAACvC,UAAU,CAACuC,OAAO,CAACuB,QAAQ,CAACT,KAAK,CAACG,MAAM,CAAC,IAC1C,CAACH,KAAK,CAACG,MAAM,CAACC,OAAO,CAAC,oBAAoB,CAAC,EAC3C;QACAnB,YAAY,CAAC,CAAC;MAChB;IACF,CAAC;IAED,IAAI1B,WAAW,EAAE;MACfiC,QAAQ,CAACkB,gBAAgB,CAAC,WAAW,EAAEX,kBAAkB,CAAC;IAC5D,CAAC,MAAM;MACLP,QAAQ,CAACmB,mBAAmB,CAAC,WAAW,EAAEZ,kBAAkB,CAAC;IAC/D;IAEA,OAAO;MAAA,OAAMP,QAAQ,CAACmB,mBAAmB,CAAC,WAAW,EAAEZ,kBAAkB,CAAC;IAAA;EAC5E,CAAC,EAAE,CAACxC,WAAW,EAAEtB,IAAI,CAAC,CAAC;EAEvB,oBACElC,MAAA,YAAA6G,aAAA,CAACxG,OAAA,CAAAyG,eAAe;IACdC,SAAS,EAAC,iBAAiB;IAC3B,iBAAe1E,QAAS;IACxB2E,KAAK,EAAE;MACLC,OAAO,EAAE,aAAa;MACtBC,MAAM,EAAE,MAAM;MACdC,MAAM,EAAE;IACV;EAAE,gBAEFnH,MAAA,YAAA6G,aAAA;IACEG,KAAK,EAAE;MACLC,OAAO,EAAE,aAAa;MACtBG,QAAQ,EAAE,OAAO;MACjBF,MAAM,EAAE,MAAM;MACdG,UAAU,EAAE,MAAM;MAClBC,MAAM,EAAE,mBAAmB;MAC3BC,SAAS,EAAE,YAAY;MACvBC,YAAY,EAAE,KAAK;MACnBC,MAAM,EAAE,OAAO;MACf3D,QAAQ,EAAE,UAAU;MACpB4D,UAAU,EAAE;IACd,CAAE;IACFC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQlE,cAAc,CAAC,IAAI,CAAC;IAAA;EAAC,gBAEpCzD,MAAA,YAAA6G,aAAA;IACEG,KAAK,EAAE;MACLY,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,QAAQ;MAClBC,OAAO,EAAE,cAAc;MACvBC,UAAU,EAAE,QAAQ;MACpBC,YAAY,EAAE;IAChB;EAAE,gBAEFhI,MAAA,YAAA6G,aAAA;IACEG,KAAK,EAAE;MACLC,OAAO,EAAE,cAAc;MACvBgB,aAAa,EAAE;IACjB,CAAE;IACFC,uBAAuB,EAAE;MAAEC,MAAM,EAAEzF;IAAK;EAAE,CAC3C,CACE,CAAC,eACN1C,MAAA,YAAA6G,aAAA,CAACtG,SAAA,CAAA6H,OAAO;IAACC,SAAS,EAAC,MAAM;IAACrB,KAAK,EAAE;MAAElD,QAAQ,EAAE,UAAU;MAAEH,GAAG,EAAE,KAAK;MAAE2E,KAAK,EAAE;IAAM;EAAE,CAAE,CACnF,CAAC,EACL9E,WAAW,iBACVxD,MAAA,YAAA6G,aAAA,CAAC7G,MAAA,WAAK,CAACuI,QAAQ,qBACZC,oBAAQ,CAACC,YAAY,cACpBzI,MAAA,YAAA6G,aAAA;IAAK6B,GAAG,EAAE9F;EAAW,gBACnB5C,MAAA,YAAA6G,aAAA,CAAC5C,qBAAqB;IACpB0E,cAAc,EAAE,SAAhBA,cAAcA,CAAGC,QAAQ,EAAK;MAC5B9F,aAAa,CAACqC,OAAO,GAAGyD,QAAQ;IAClC;EAAE,CACH,CACE,CAAC,EACN,CAAA3G,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE4G,kBAAkB,KAAIpD,QAAQ,CAACC,IACzC,CAAC,EAEAzD,MAAM,CAAC4G,kBAAkB,iBACxBL,oBAAQ,CAACC,YAAY,cACnBzI,MAAA,YAAA6G,aAAA,CAACpG,qBAAA,WAAoB;IACnBqI,SAAS;IACTC,WAAW,EAAE;MAAE3B,QAAQ,EAAE;IAAO,CAAE;IAClC4B,SAAS;IACThC,KAAK,EAAE;MAAErD,GAAG,EAAE,CAAC,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAE0E,KAAK,EAAE;IAAE,CAAE;IACvCW,QAAQ,EAAE,SAAVA,QAAQA,CAAA,EAAQ;MACd,IAAQ7E,EAAE,GAAKnC,MAAM,CAACoC,KAAK,CAAnBD,EAAE;MACVA,EAAE,UAAO,CAACzB,GAAG,EAAEA,GAAG,GAAGT,IAAI,CAAC0C,QAAQ,CAAC;MACnC;MACA;MACA,IAAAsE,yBAAgB,EAACjH,MAAM,EAAE,KAAK,CAAC;MAC/B,OAAOA,MAAM,CAACgB,+BAA+B;MAC7ChB,MAAM,CAAC+C,IAAI,CAACC,QAAQ,CAACb,EAAE,CAAC;MACxBX,cAAc,CAAC,KAAK,CAAC;MACrBxB,MAAM,CAACkH,QAAQ,CAACC,KAAK,CAAC,CAAC;IACzB,CAAE;IACFC,QAAQ,EAAE;EAAM,CACjB,CAAC,EACFpH,MAAM,CAAC4G,kBACT,CACY,CAEH,CAAC;AAEtB,CAAC;AAED9G,cAAc,CAACuH,SAAS,GAAG;EACzBhH,UAAU,EAAEiH,qBAAS,CAACC,MAAM;EAC5BC,YAAY,EAAEF,qBAAS,CAACG,SAAS,CAAC,CAACH,qBAAS,CAACI,MAAM,EAAEJ,qBAAS,CAACC,MAAM,CAAC;AACxE,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,cAEa9H,cAAc","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2-next.53+8d80ab6f6",
+  "version": "2.1.2-next.57+e5cdf8c25",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "8d80ab6f6eb4dcebacc903aa4e35424264e291c5",
+  "gitHead": "e5cdf8c250e5ef0243dab19530e561d767f7d9a1",
   "scripts": {}
 }

package/src/components/__tests__/InlineDropdown.test.jsx

@@ -185,6 +185,85 @@ describe('InlineDropdown', () => {
     });
   });
 
+  it('uses the current node when closing on outside click after the node prop changes', async () => {
+    const onToolbarCloseRequest = jest.fn((_tuple, _editor, onConfirm) => onConfirm());
+    const options = {
+      ...mockOptions,
+      onToolbarCloseRequest,
+    };
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} options={options} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(onToolbarCloseRequest).toHaveBeenCalledWith(
+        [updatedNode, 5],
+        expect.anything(),
+        expect.any(Function),
+        expect.any(Function),
+      );
+    });
+  });
+
+  it('respects hold state for the current node after the node prop changes', async () => {
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    mockEditor._holdInlineDropdownToolbarIndex = '1';
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  it('rebinds the outside-click listener when the node prop changes while the toolbar is open', async () => {
+    const addSpy = jest.spyOn(document, 'addEventListener');
+    const removeSpy = jest.spyOn(document, 'removeEventListener');
+    const updatedNode = { ...mockNode, attrs: { ...mockNode.attrs, value: 'Updated Option' } };
+
+    const { rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    const removeCallsBeforeRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    await waitFor(() => {
+      const removeCallsAfterRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+      expect(removeCallsAfterRerender).toBeGreaterThan(removeCallsBeforeRerender);
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+
   it('has correct border styling', () => {
     const { container } = render(<InlineDropdown {...defaultProps} />);
     const dropdownDiv = container.querySelector('div[style*="border"]');

package/src/components/respArea/InlineDropdown.jsx

@@ -126,7 +126,7 @@ const InlineDropdown = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [showToolbar, node]);
 
   return (
     <NodeViewWrapper