@pie-lib/editable-html-tip-tap 1.2.0-next.35 → 1.2.0-next.36

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0-next.36](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@1.2.0-next.35...@pie-lib/editable-html-tip-tap@1.2.0-next.36) (2026-04-23)
+
+### Bug Fixes
+
+- made sure colspan elements match the number of columns on removing [PIE-168] ([0ee3056](https://github.com/pie-framework/pie-lib/commit/0ee3056f2c00d71eb83ee2f56ad0efb75dc3b21b))
+- made sure custom toolbar is shown for inline dropdown response areas [PIE-130] ([d3cb03d](https://github.com/pie-framework/pie-lib/commit/d3cb03d45eb716d700f1202aa1cc223c169cfde5))
+
 # [1.2.0-next.35](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html-tip-tap@1.2.0-next.34...@pie-lib/editable-html-tip-tap@1.2.0-next.35) (2026-04-17)
 
 ### Bug Fixes

package/lib/components/respArea/ExplicitConstructedResponse.js

@@ -96,13 +96,13 @@ var ExplicitConstructedResponse = function ExplicitConstructedResponse(props) {
     dangerouslySetInnerHTML: {
       __html: value || '<div>&nbsp;</div>'
     }
-  })), showToolbar && /*#__PURE__*/_react["default"].createElement("div", {
+  })), showToolbar && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     ref: toolbarRef,
     className: "absolute z-50 bg-white shadow-lg rounded p-2",
     style: {
       zIndex: 1
     }
-  }, /*#__PURE__*/_react["default"].createElement(EcrToolbar, null)), showToolbar && editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(EcrToolbar, null)), editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
     deletable: true,
     toolbarOpts: {
       minWidth: 'auto'
@@ -124,7 +124,7 @@ var ExplicitConstructedResponse = function ExplicitConstructedResponse(props) {
       editor.commands.focus();
     },
     showDone: false
-  }), editor._tiptapContainerEl));
+  }), editor._tiptapContainerEl)));
 };
 ExplicitConstructedResponse.propTypes = {
   attributes: _propTypes["default"].object,

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

@@ -1 +1 @@
-{"version":3,"file":"ExplicitConstructedResponse.js","names":["_react","_interopRequireWildcard","require","_react2","_reactDom","_interopRequireDefault","_propTypes","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExplicitConstructedResponse","props","editor","node","getPos","options","selected","attributes","attrs","value","respAreaToolbar","errorFn","error","pos","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","EcrToolbar","toolbarRef","useRef","_errorValue$respIndex","errorValue","respIndex","parseInt","index","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","handleClickOutside","event","insideCharacterPicker","target","closest","current","contains","document","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","minHeight","position","cursor","_extends2","width","height","backgroundColor","border","concat","boxSizing","borderRadius","overflow","padding","margin","minWidth","visibility","onClick","dangerouslySetInnerHTML","__html","ref","zIndex","_tiptapContainerEl","ReactDOM","createPortal","deletable","toolbarOpts","autoWidth","top","left","right","onDelete","tr","_toolbarOpened","view","dispatch","commands","focus","showDone","propTypes","PropTypes","object","any","string","isFocused","bool","_default","exports"],"sources":["../../../src/components/respArea/ExplicitConstructedResponse.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\n\nconst ExplicitConstructedResponse = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value } = attributes;\n  const { respAreaToolbar, error: errorFn } = options;\n  const pos = getPos();\n  const [showToolbar, setShowToolbar] = useState(false);\n  const EcrToolbar = respAreaToolbar([node, pos], editor, () => { });\n  const toolbarRef = useRef(null);\n\n  let error;\n\n  if (errorFn) {\n    const errorValue = errorFn();\n    const respIndex = parseInt(attributes.index, 10);\n\n    error = !!errorValue?.[respIndex]?.[0];\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(selected);\n      }\n    } else {\n      setShowToolbar(selected);\n    }\n  }, [editor, node, selected]);\n\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      const insideCharacterPicker = event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');\n\n      if (\n        !insideCharacterPicker &&\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=\"drag-in-the-blank\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        minHeight: '55px',\n        position: 'relative',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        {...attributes}\n        style={{\n          display: 'inline-flex',\n          width: '100%',\n          minHeight: '46px',\n          height: '46px',\n          backgroundColor: '#FFF',\n          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,\n          boxSizing: 'border-box',\n          borderRadius: '4px',\n          overflow: 'hidden',\n          padding: '12px 21px',\n          margin: '0 4px',\n          minWidth: '178px',\n          visibility: showToolbar ? 'hidden' : 'visible',\n        }}\n        onClick={() => setShowToolbar(true)}\n        dangerouslySetInnerHTML={{\n          __html: value || '<div>&nbsp;</div>',\n        }}\n      />\n      {showToolbar && (\n        <div ref={toolbarRef} className=\"absolute z-50 bg-white shadow-lg rounded p-2\" style={{ zIndex: 1 }}>\n          <EcrToolbar />\n        </div>\n      )}\n      {showToolbar && editor._tiptapContainerEl && 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    </NodeViewWrapper>\n  );\n};\n\nExplicitConstructedResponse.propTypes = {\n  attributes: PropTypes.object,\n  error: PropTypes.any,\n  value: PropTypes.string,\n  isFocused: PropTypes.bool,\n};\n\nexport default ExplicitConstructedResponse;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ExplicitConstructedResponse.js","names":["_react","_interopRequireWildcard","require","_react2","_reactDom","_interopRequireDefault","_propTypes","_customToolbarWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExplicitConstructedResponse","props","editor","node","getPos","options","selected","attributes","attrs","value","respAreaToolbar","errorFn","error","pos","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","EcrToolbar","toolbarRef","useRef","_errorValue$respIndex","errorValue","respIndex","parseInt","index","useEffect","selection","state","onlyThisNodeSelected","from","nodeSize","to","handleClickOutside","event","insideCharacterPicker","target","closest","current","contains","document","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","minHeight","position","cursor","_extends2","width","height","backgroundColor","border","concat","boxSizing","borderRadius","overflow","padding","margin","minWidth","visibility","onClick","dangerouslySetInnerHTML","__html","Fragment","ref","zIndex","_tiptapContainerEl","ReactDOM","createPortal","deletable","toolbarOpts","autoWidth","top","left","right","onDelete","tr","_toolbarOpened","view","dispatch","commands","focus","showDone","propTypes","PropTypes","object","any","string","isFocused","bool","_default","exports"],"sources":["../../../src/components/respArea/ExplicitConstructedResponse.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\n\nconst ExplicitConstructedResponse = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value } = attributes;\n  const { respAreaToolbar, error: errorFn } = options;\n  const pos = getPos();\n  const [showToolbar, setShowToolbar] = useState(false);\n  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});\n  const toolbarRef = useRef(null);\n\n  let error;\n\n  if (errorFn) {\n    const errorValue = errorFn();\n    const respIndex = parseInt(attributes.index, 10);\n\n    error = !!errorValue?.[respIndex]?.[0];\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(selected);\n      }\n    } else {\n      setShowToolbar(selected);\n    }\n  }, [editor, node, selected]);\n\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      const insideCharacterPicker =\n        event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');\n\n      if (\n        !insideCharacterPicker &&\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=\"drag-in-the-blank\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        minHeight: '55px',\n        position: 'relative',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        {...attributes}\n        style={{\n          display: 'inline-flex',\n          width: '100%',\n          minHeight: '46px',\n          height: '46px',\n          backgroundColor: '#FFF',\n          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,\n          boxSizing: 'border-box',\n          borderRadius: '4px',\n          overflow: 'hidden',\n          padding: '12px 21px',\n          margin: '0 4px',\n          minWidth: '178px',\n          visibility: showToolbar ? 'hidden' : 'visible',\n        }}\n        onClick={() => setShowToolbar(true)}\n        dangerouslySetInnerHTML={{\n          __html: value || '<div>&nbsp;</div>',\n        }}\n      />\n      {showToolbar && (\n        <React.Fragment>\n          <div ref={toolbarRef} className=\"absolute z-50 bg-white shadow-lg rounded p-2\" style={{ zIndex: 1 }}>\n            <EcrToolbar />\n          </div>\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\nExplicitConstructedResponse.propTypes = {\n  attributes: PropTypes.object,\n  error: PropTypes.any,\n  value: PropTypes.string,\n  isFocused: PropTypes.bool,\n};\n\nexport default ExplicitConstructedResponse;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/respArea/InlineDropdown.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@tiptap/react");
 var _RespArea = require("../icons/RespArea");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _customToolbarWrapper = _interopRequireDefault(require("../../extensions/custom-toolbar-wrapper"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var InlineDropdown = function InlineDropdown(props) {
   var editor = props.editor,
@@ -123,7 +124,7 @@ var InlineDropdown = function InlineDropdown(props) {
       top: '5px',
       right: '5px'
     }
-  })), showToolbar && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
+  })), showToolbar && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
     ref: toolbarRef,
     style: {
       zIndex: 1
@@ -132,7 +133,29 @@ var InlineDropdown = function InlineDropdown(props) {
     editorCallback: function editorCallback(instance) {
       toolbarEditor.current = instance;
     }
-  })), document.body));
+  })), document.body), editor._tiptapContainerEl && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(_customToolbarWrapper["default"], {
+    deletable: true,
+    toolbarOpts: {
+      minWidth: 'auto'
+    },
+    autoWidth: true,
+    style: {
+      top: -40,
+      left: 0,
+      right: 0
+    },
+    onDelete: function onDelete() {
+      var tr = editor.state.tr;
+      tr["delete"](pos, pos + node.nodeSize);
+      // Prevent the debounced onBlur/onDone from firing into the
+      // now-deleted node's stale position
+      editor._toolbarOpened = false;
+      editor.view.dispatch(tr);
+      setShowToolbar(false);
+      editor.commands.focus();
+    },
+    showDone: false
+  }), editor._tiptapContainerEl)));
 };
 InlineDropdown.propTypes = {
   attributes: _propTypes["default"].object,

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

@@ -1 +1 @@
-{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_react2","_RespArea","_reactDom","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","ReactDOM","createPortal","ref","zIndex","editorCallback","instance","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';\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        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    </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","_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":[]}

package/lib/extensions/extended-table.js

@@ -1,11 +1,60 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.applyPresentationToTableElement = exports.ExtendedTableView = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _extensionTable = require("@tiptap/extension-table");
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = (0, _get2["default"])((0, _getPrototypeOf2["default"])(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+var applyPresentationToTableElement = exports.applyPresentationToTableElement = function applyPresentationToTableElement(table, attrs) {
+  var border = (attrs === null || attrs === void 0 ? void 0 : attrs.border) != null && attrs.border !== '' ? attrs.border : '1';
+  table.setAttribute('border', border);
+  table.style.setProperty('color', 'var(--pie-text, black)');
+  table.style.setProperty('background-color', 'var(--pie-background, rgba(255, 255, 255))');
+};
+var ExtendedTableView = exports.ExtendedTableView = /*#__PURE__*/function (_TableView) {
+  function ExtendedTableView(node, cellMinWidth, view) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ExtendedTableView);
+    _this = _callSuper(this, ExtendedTableView, [node, cellMinWidth, view]);
+    applyPresentationToTableElement(_this.table, node.attrs);
+    return _this;
+  }
+  (0, _inherits2["default"])(ExtendedTableView, _TableView);
+  return (0, _createClass2["default"])(ExtendedTableView, [{
+    key: "update",
+    value: function update(node) {
+      var ok = _superPropGet(ExtendedTableView, "update", this, 3)([node]);
+      if (ok) {
+        applyPresentationToTableElement(this.table, node.attrs);
+      }
+      return ok;
+    }
+  }]);
+}(_extensionTable.TableView);
 var ExtendedTable = _extensionTable.Table.extend({
+  addOptions: function addOptions() {
+    var _this$parent;
+    return _objectSpread(_objectSpread({}, (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.call(this)), {}, {
+      // ProseMirror's default table DOM does not prune extra <col> nodes when a column
+      // is removed; TableView (via column resizing) does.
+      resizable: true,
+      handleWidth: 0,
+      View: ExtendedTableView
+    });
+  },
   addAttributes: function addAttributes() {
     return {
       border: {

package/lib/extensions/extended-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"extended-table.js","names":["_extensionTable","require","ExtendedTable","Table","extend","addAttributes","border","renderHTML","props","originalTable","parent","HTMLAttributes","previousStyle","concat","style","match","_default","exports"],"sources":["../../src/extensions/extended-table.js"],"sourcesContent":["import { Table } from '@tiptap/extension-table';\n\nconst ExtendedTable = Table.extend({\n  addAttributes() {\n    return {\n      border: { default: '1' },\n    };\n  },\n  renderHTML(props) {\n    const originalTable = this.parent(props);\n    const { border } = props.HTMLAttributes;\n\n    const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;\n\n    originalTable[1].style = `${previousStyle}\n    color: var(--pie-text, black);\n    background-color: var(--pie-background, rgba(255, 255, 255))`;\n    originalTable[1].border = border ? border : '1';\n\n    return originalTable;\n  },\n});\n\nexport default ExtendedTable;\n"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAEA,IAAMC,aAAa,GAAGC,qBAAK,CAACC,MAAM,CAAC;EACjCC,aAAa,WAAbA,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,MAAM,EAAE;QAAE,WAAS;MAAI;IACzB,CAAC;EACH,CAAC;EACDC,UAAU,WAAVA,UAAUA,CAACC,KAAK,EAAE;IAChB,IAAMC,aAAa,GAAG,IAAI,CAACC,MAAM,CAACF,KAAK,CAAC;IACxC,IAAQF,MAAM,GAAKE,KAAK,CAACG,cAAc,CAA/BL,MAAM;IAEd,IAAMM,aAAa,MAAAC,MAAA,CAAMJ,aAAa,CAAC,CAAC,CAAC,CAACK,KAAK,EAAAD,MAAA,CAAGJ,aAAa,CAAC,CAAC,CAAC,CAACK,KAAK,CAACC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,CAAE;IAEpGN,aAAa,CAAC,CAAC,CAAC,CAACK,KAAK,MAAAD,MAAA,CAAMD,aAAa,2GAEoB;IAC7DH,aAAa,CAAC,CAAC,CAAC,CAACH,MAAM,GAAGA,MAAM,GAAGA,MAAM,GAAG,GAAG;IAE/C,OAAOG,aAAa;EACtB;AACF,CAAC,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,cAEYf,aAAa","ignoreList":[]}
+{"version":3,"file":"extended-table.js","names":["_extensionTable","require","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","_superPropGet","p","_get2","applyPresentationToTableElement","exports","table","attrs","border","setAttribute","style","setProperty","ExtendedTableView","_TableView","node","cellMinWidth","view","_this","_classCallCheck2","_inherits2","_createClass2","key","value","update","ok","TableView","ExtendedTable","Table","extend","addOptions","_this$parent","parent","resizable","handleWidth","View","addAttributes","renderHTML","props","originalTable","HTMLAttributes","previousStyle","concat","match","_default"],"sources":["../../src/extensions/extended-table.js"],"sourcesContent":["import { Table, TableView } from '@tiptap/extension-table';\n\nconst applyPresentationToTableElement = (table, attrs) => {\n  const border = attrs?.border != null && attrs.border !== '' ? attrs.border : '1';\n\n  table.setAttribute('border', border);\n  table.style.setProperty('color', 'var(--pie-text, black)');\n  table.style.setProperty('background-color', 'var(--pie-background, rgba(255, 255, 255))');\n};\n\nclass ExtendedTableView extends TableView {\n  constructor(node, cellMinWidth, view) {\n    super(node, cellMinWidth, view);\n    applyPresentationToTableElement(this.table, node.attrs);\n  }\n\n  update(node) {\n    const ok = super.update(node);\n\n    if (ok) {\n      applyPresentationToTableElement(this.table, node.attrs);\n    }\n\n    return ok;\n  }\n}\n\nconst ExtendedTable = Table.extend({\n  addOptions() {\n    return {\n      ...this.parent?.(),\n      // ProseMirror's default table DOM does not prune extra <col> nodes when a column\n      // is removed; TableView (via column resizing) does.\n      resizable: true,\n      handleWidth: 0,\n      View: ExtendedTableView,\n    };\n  },\n  addAttributes() {\n    return {\n      border: { default: '1' },\n    };\n  },\n  renderHTML(props) {\n    const originalTable = this.parent(props);\n    const { border } = props.HTMLAttributes;\n\n    const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;\n\n    originalTable[1].style = `${previousStyle}\n    color: var(--pie-text, black);\n    background-color: var(--pie-background, rgba(255, 255, 255))`;\n    originalTable[1].border = border ? border : '1';\n\n    return originalTable;\n  },\n});\n\nexport { applyPresentationToTableElement, ExtendedTableView };\nexport default ExtendedTable;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.0-next.35",
+  "version": "1.2.0-next.36",
   "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": "^3.2.0-next.9",
+    "@pie-lib/drag": "^3.2.0-next.10",
     "@pie-lib/math-input": "^7.2.0-next.12",
-    "@pie-lib/math-rendering": "^4.2.0-next.3",
-    "@pie-lib/math-toolbar": "^2.2.0-next.15",
-    "@pie-lib/render-ui": "^5.2.0-next.8",
+    "@pie-lib/math-rendering": "^4.2.0-next.4",
+    "@pie-lib/math-toolbar": "^2.2.0-next.16",
+    "@pie-lib/render-ui": "^5.2.0-next.9",
     "@tiptap/core": "3.0.9",
     "@tiptap/extension-character-count": "3.0.9",
     "@tiptap/extension-color": "3.0.9",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "6ddaea6108b6c515e163fb530c7f833b0f233f5e",
+  "gitHead": "6ed326bed124056a8f5a7ff52386f8b12fbf650b",
   "scripts": {}
 }

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

@@ -10,19 +10,37 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: (node) => node,
+}));
+
 describe('ExplicitConstructedResponse', () => {
-  const mockEditor = {
-    state: {
-      selection: {
-        from: 0,
-        to: 1,
+  const buildMockEditor = (overrides = {}) => {
+    const mockTr = {
+      delete: jest.fn(),
+    };
+    return {
+      state: {
+        selection: {
+          from: 0,
+          to: 1,
+        },
+        tr: mockTr,
       },
-    },
-    commands: {
-      focus: jest.fn(),
-    },
+      view: {
+        dispatch: jest.fn(),
+      },
+      commands: {
+        focus: jest.fn(),
+      },
+      _tiptapContainerEl: document.createElement('div'),
+      ...overrides,
+    };
   };
 
+  let mockEditor;
+
   const mockNode = {
     attrs: {
       index: '0',
@@ -46,6 +64,8 @@ describe('ExplicitConstructedResponse', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockEditor = buildMockEditor();
+    defaultProps.editor = mockEditor;
   });
 
   it('renders without crashing', () => {
@@ -97,8 +117,7 @@ describe('ExplicitConstructedResponse', () => {
     const clickableDiv = container.querySelector('div[style*="border"]');
     fireEvent.click(clickableDiv);
     await waitFor(() => {
-      // After click, toolbar should be shown
-      expect(container).toBeInTheDocument();
+      expect(queryByTestId('toolbar')).toBeInTheDocument();
     });
   });
 
@@ -158,4 +177,28 @@ describe('ExplicitConstructedResponse', () => {
     const contentDiv = container.querySelector('div[style*="padding"]');
     expect(contentDiv).toHaveStyle({ minWidth: '178px' });
   });
+
+  it('renders delete control on portaled custom toolbar when container el is set', async () => {
+    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
+    expect(await findByLabelText('Delete')).toBeInTheDocument();
+  });
+
+  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+    const { queryByLabelText, findByTestId } = render(
+      <ExplicitConstructedResponse {...defaultProps} editor={editor} selected />,
+    );
+    expect(await findByTestId('toolbar')).toBeInTheDocument();
+    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
+    mockEditor._toolbarOpened = true;
+    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
+    fireEvent.mouseDown(await findByLabelText('Delete'));
+    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
+    expect(mockEditor.view.dispatch).toHaveBeenCalledWith(mockEditor.state.tr);
+    expect(mockEditor._toolbarOpened).toBe(false);
+    expect(mockEditor.commands.focus).toHaveBeenCalled();
+  });
 });

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

@@ -16,18 +16,33 @@ jest.mock('react-dom', () => ({
 }));
 
 describe('InlineDropdown', () => {
-  const mockEditor = {
-    state: {
-      selection: {
-        from: 0,
-        to: 1,
+  const buildMockEditor = (overrides = {}) => {
+    const mockTr = {
+      delete: jest.fn(),
+    };
+    return {
+      state: {
+        selection: {
+          from: 0,
+          to: 1,
+        },
+        tr: mockTr,
       },
-    },
-    view: {
-      coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
-    },
+      view: {
+        coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
+        dispatch: jest.fn(),
+      },
+      commands: {
+        focus: jest.fn(),
+      },
+      _tiptapContainerEl: document.createElement('div'),
+      _toolbarOpened: false,
+      ...overrides,
+    };
   };
 
+  let mockEditor;
+
   const mockNode = {
     attrs: {
       index: '0',
@@ -51,6 +66,8 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockEditor = buildMockEditor();
+    defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
       value: jest.fn(() => ({ top: 0, left: 0 })),
       configurable: true,
@@ -322,10 +339,7 @@ describe('InlineDropdown', () => {
   });
 
   it('checks editor._toolbarOpened in click outside handler', async () => {
-    const editorWithToolbarOpened = {
-      ...mockEditor,
-      _toolbarOpened: true,
-    };
+    const editorWithToolbarOpened = buildMockEditor({ _toolbarOpened: true });
 
     const { queryByTestId } = render(
       <InlineDropdown {...defaultProps} editor={editorWithToolbarOpened} selected={true} />,
@@ -341,4 +355,26 @@ describe('InlineDropdown', () => {
     // Toolbar should still be visible
     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();
+  });
+
+  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+    const { queryByLabelText, findByTestId } = render(<InlineDropdown {...defaultProps} editor={editor} selected />);
+    expect(await findByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
+    mockEditor._toolbarOpened = true;
+    const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
+    fireEvent.mouseDown(await findByLabelText('Delete'));
+    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
+    expect(mockEditor.view.dispatch).toHaveBeenCalledWith(mockEditor.state.tr);
+    expect(mockEditor._toolbarOpened).toBe(false);
+    expect(mockEditor.commands.focus).toHaveBeenCalled();
+  });
 });

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -11,7 +11,7 @@ const ExplicitConstructedResponse = (props) => {
   const { respAreaToolbar, error: errorFn } = options;
   const pos = getPos();
   const [showToolbar, setShowToolbar] = useState(false);
-  const EcrToolbar = respAreaToolbar([node, pos], editor, () => { });
+  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});
   const toolbarRef = useRef(null);
 
   let error;
@@ -38,7 +38,8 @@ const ExplicitConstructedResponse = (props) => {
 
   useEffect(() => {
     const handleClickOutside = (event) => {
-      const insideCharacterPicker = event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');
+      const insideCharacterPicker =
+        event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');
 
       if (
         !insideCharacterPicker &&
@@ -93,29 +94,32 @@ const ExplicitConstructedResponse = (props) => {
         }}
       />
       {showToolbar && (
-        <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
-          <EcrToolbar />
-        </div>
-      )}
-      {showToolbar && editor._tiptapContainerEl && ReactDOM.createPortal(
-          <CustomToolbarWrapper
-            deletable
-            toolbarOpts={{ minWidth: 'auto' }}
-            autoWidth
-            style={{ top: -40, left: 0, right: 0 }}
-            onDelete={() => {
-              const { tr } = editor.state;
-              tr.delete(pos, pos + node.nodeSize);
-              // Prevent the debounced onBlur/onDone from firing into the
-              // now-deleted node's stale position
-              editor._toolbarOpened = false;
-              editor.view.dispatch(tr);
-              setShowToolbar(false);
-              editor.commands.focus();
-            }}
-            showDone={false}
-          />,
-        editor._tiptapContainerEl,
+        <React.Fragment>
+          <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
+            <EcrToolbar />
+          </div>
+          {editor._tiptapContainerEl &&
+            ReactDOM.createPortal(
+              <CustomToolbarWrapper
+                deletable
+                toolbarOpts={{ minWidth: 'auto' }}
+                autoWidth
+                style={{ top: -40, left: 0, right: 0 }}
+                onDelete={() => {
+                  const { tr } = editor.state;
+                  tr.delete(pos, pos + node.nodeSize);
+                  // Prevent the debounced onBlur/onDone from firing into the
+                  // now-deleted node's stale position
+                  editor._toolbarOpened = false;
+                  editor.view.dispatch(tr);
+                  setShowToolbar(false);
+                  editor.commands.focus();
+                }}
+                showDone={false}
+              />,
+              editor._tiptapContainerEl,
+            )}
+        </React.Fragment>
       )}
     </NodeViewWrapper>
   );

package/src/components/respArea/InlineDropdown.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
 import { Chevron } from '../icons/RespArea';
 import ReactDOM from 'react-dom';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
 
 const InlineDropdown = (props) => {
   const { editor, node, getPos, options, selected } = props;
@@ -118,17 +119,42 @@ const InlineDropdown = (props) => {
           }}
         />
       </div>
-      {showToolbar &&
-        ReactDOM.createPortal(
-          <div ref={toolbarRef} style={{ zIndex: 1 }}>
-            <InlineDropdownToolbar
-              editorCallback={(instance) => {
-                toolbarEditor.current = instance;
-              }}
-            />
-          </div>,
-          document.body,
-        )}
+      {showToolbar && (
+        <React.Fragment>
+          {ReactDOM.createPortal(
+            <div ref={toolbarRef} style={{ zIndex: 1 }}>
+              <InlineDropdownToolbar
+                editorCallback={(instance) => {
+                  toolbarEditor.current = instance;
+                }}
+              />
+            </div>,
+            document.body,
+          )}
+
+          {editor._tiptapContainerEl &&
+            ReactDOM.createPortal(
+              <CustomToolbarWrapper
+                deletable
+                toolbarOpts={{ minWidth: 'auto' }}
+                autoWidth
+                style={{ top: -40, left: 0, right: 0 }}
+                onDelete={() => {
+                  const { tr } = editor.state;
+                  tr.delete(pos, pos + node.nodeSize);
+                  // Prevent the debounced onBlur/onDone from firing into the
+                  // now-deleted node's stale position
+                  editor._toolbarOpened = false;
+                  editor.view.dispatch(tr);
+                  setShowToolbar(false);
+                  editor.commands.focus();
+                }}
+                showDone={false}
+              />,
+              editor._tiptapContainerEl,
+            )}
+        </React.Fragment>
+      )}
     </NodeViewWrapper>
   );
 };

package/src/extensions/__tests__/extended-table.test.js

@@ -1,12 +1,109 @@
-import ExtendedTable from '../extended-table';
+import ExtendedTable, { applyPresentationToTableElement, ExtendedTableView } from '../extended-table';
+
+const mockTableViewState = { updateReturns: true };
 
 jest.mock('@tiptap/extension-table', () => ({
   Table: {
     extend: jest.fn((config) => config),
   },
+  TableView: class TableView {
+    constructor() {
+      this.table = {
+        style: { setProperty: jest.fn() },
+        setAttribute: jest.fn(),
+      };
+    }
+
+    update() {
+      return mockTableViewState.updateReturns;
+    }
+  },
 }));
 
 describe('ExtendedTable', () => {
+  beforeEach(() => {
+    mockTableViewState.updateReturns = true;
+  });
+
+  describe('applyPresentationToTableElement', () => {
+    it('sets default border and theme styles', () => {
+      const table = document.createElement('table');
+      const setProperty = jest.spyOn(table.style, 'setProperty');
+
+      applyPresentationToTableElement(table, {});
+
+      expect(table.getAttribute('border')).toBe('1');
+      expect(setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
+      expect(setProperty).toHaveBeenCalledWith('background-color', 'var(--pie-background, rgba(255, 255, 255))');
+      setProperty.mockRestore();
+    });
+
+    it('uses explicit border from attrs', () => {
+      const table = document.createElement('table');
+      applyPresentationToTableElement(table, { border: '0' });
+
+      expect(table.getAttribute('border')).toBe('0');
+    });
+
+    it('treats empty border as default', () => {
+      const table = document.createElement('table');
+      applyPresentationToTableElement(table, { border: '' });
+
+      expect(table.getAttribute('border')).toBe('1');
+    });
+  });
+
+  describe('ExtendedTableView', () => {
+    it('applies presentation after construction', () => {
+      const node = { attrs: { border: '2' } };
+      const view = new ExtendedTableView(node, 25);
+
+      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '2');
+      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
+      expect(view.table.style.setProperty).toHaveBeenCalledWith(
+        'background-color',
+        'var(--pie-background, rgba(255, 255, 255))',
+      );
+    });
+
+    it('reapplies presentation when super.update returns true', () => {
+      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
+      view.table.setAttribute.mockClear();
+      view.table.style.setProperty.mockClear();
+
+      view.update({ attrs: { border: '0' } });
+
+      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '0');
+      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
+      expect(view.table.style.setProperty).toHaveBeenCalledWith(
+        'background-color',
+        'var(--pie-background, rgba(255, 255, 255))',
+      );
+    });
+
+    it('does not reapply presentation when super.update returns false', () => {
+      mockTableViewState.updateReturns = false;
+      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
+      view.table.setAttribute.mockClear();
+      view.table.style.setProperty.mockClear();
+
+      const ok = view.update({ attrs: { border: '0' } });
+
+      expect(ok).toBe(false);
+      expect(view.table.setAttribute).not.toHaveBeenCalled();
+      expect(view.table.style.setProperty).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('addOptions', () => {
+    it('enables resizable table view with zero handle width for colgroup sync', () => {
+      const options = ExtendedTable.addOptions();
+      expect(options.resizable).toBe(true);
+      expect(options.handleWidth).toBe(0);
+      expect(options.View).toBe(ExtendedTableView);
+    });
+  });
+
   describe('addAttributes', () => {
     it('returns border attribute with default value', () => {
       const attributes = ExtendedTable.addAttributes();

package/src/extensions/extended-table.js

@@ -1,6 +1,41 @@
-import { Table } from '@tiptap/extension-table';
+import { Table, TableView } from '@tiptap/extension-table';
+
+const applyPresentationToTableElement = (table, attrs) => {
+  const border = attrs?.border != null && attrs.border !== '' ? attrs.border : '1';
+
+  table.setAttribute('border', border);
+  table.style.setProperty('color', 'var(--pie-text, black)');
+  table.style.setProperty('background-color', 'var(--pie-background, rgba(255, 255, 255))');
+};
+
+class ExtendedTableView extends TableView {
+  constructor(node, cellMinWidth, view) {
+    super(node, cellMinWidth, view);
+    applyPresentationToTableElement(this.table, node.attrs);
+  }
+
+  update(node) {
+    const ok = super.update(node);
+
+    if (ok) {
+      applyPresentationToTableElement(this.table, node.attrs);
+    }
+
+    return ok;
+  }
+}
 
 const ExtendedTable = Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      // ProseMirror's default table DOM does not prune extra <col> nodes when a column
+      // is removed; TableView (via column resizing) does.
+      resizable: true,
+      handleWidth: 0,
+      View: ExtendedTableView,
+    };
+  },
   addAttributes() {
     return {
       border: { default: '1' },
@@ -21,4 +56,5 @@ const ExtendedTable = Table.extend({
   },
 });
 
+export { applyPresentationToTableElement, ExtendedTableView };
 export default ExtendedTable;