@pie-lib/editable-html-tip-tap 2.1.2-next.80 → 2.1.2-next.83

package/lib/components/respArea/InlineDropdown.js

@@ -95,6 +95,9 @@ var InlineDropdown = function InlineDropdown(props) {
       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 () {
     // Calculate position relative to selection
     var bodyRect = document.body.getBoundingClientRect();
@@ -107,6 +110,9 @@ var InlineDropdown = function InlineDropdown(props) {
     });
     var handleClickOutside = function handleClickOutside(event) {
       var _toolbarEditor$curren;
+      if (isScrollbarClicked(event)) {
+        return;
+      }
       var insideSomeEditor = event.target.closest('[data-toolbar-for]');
       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();

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, 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":"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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","isScrollbarClicked","event","clientX","document","documentElement","clientWidth","clientY","clientHeight","target","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","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\n \n  const isScrollbarClicked = (event) =>\n    event.clientX > document.documentElement.clientWidth ||\n    event.clientY > document.documentElement.clientHeight ||\n    event.target === document.documentElement;\n  \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\n      if( isScrollbarClicked(event) ) {\n        return;\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        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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2-next.80+54d36728e",
+  "version": "2.1.2-next.83+7eb49294a",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,11 +16,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.0.3-next.97+54d36728e",
+    "@pie-lib/drag": "^4.0.2",
     "@pie-lib/math-input": "^8.1.0",
-    "@pie-lib/math-rendering": "^5.0.3-next.97+54d36728e",
-    "@pie-lib/math-toolbar": "^3.0.3-next.97+54d36728e",
-    "@pie-lib/render-ui": "^6.1.1-next.97+54d36728e",
+    "@pie-lib/math-rendering": "^5.0.2",
+    "@pie-lib/math-toolbar": "^3.0.2",
+    "@pie-lib/render-ui": "^6.1.0",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-character-count": "3.20.0",
     "@tiptap/extension-color": "3.20.0",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "54d36728e8305c31cdff4517f7b4a3a3669bca63",
+  "gitHead": "7eb49294ab5b0a6bcfce286ad72e90f08beac36a",
   "scripts": {}
 }

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

@@ -464,6 +464,20 @@ describe('InlineDropdown', () => {
     expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
   });
 
+  it('does not close toolbar when clicking the page scrollbar (documentElement)', async () => {
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.documentElement);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+});
+
   it('renders delete control on portaled custom toolbar when container el is set', async () => {
     const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
     expect(await findByLabelText('Delete')).toBeInTheDocument();

package/src/components/respArea/InlineDropdown.jsx

@@ -93,6 +93,14 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
+
+ 
+  const isScrollbarClicked = (event) =>
+    event.clientX > document.documentElement.clientWidth ||
+    event.clientY > document.documentElement.clientHeight ||
+    event.target === document.documentElement;
+  
+
   useEffect(() => {
     // Calculate position relative to selection
     const bodyRect = document.body.getBoundingClientRect();
@@ -105,6 +113,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+
+      if( isScrollbarClicked(event) ) {
+        return;
+      }
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (