@pie-lib/editable-html-tip-tap 1.2.0-next.9 → 2.0.1

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -15,7 +15,7 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({ n, children, isDragging, isOver, dragItem, value }) {
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
@@ -56,15 +56,22 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
   const hasGrip = finalLabel !== '\u00A0';
   const isPreview = dragItem && isOver;
 
+  const borderStyle = selected
+    ? `2px solid ${color.primaryDark()}`
+    : isPreview
+      ? `1px solid ${color.defaults.BORDER_DARK}`
+      : `1px solid ${color.defaults.BORDER_LIGHT}`;
+
   return (
     <div
       ref={elementRef}
+      className={selected ? 'selected' : undefined}
       style={{
         display: 'inline-flex',
         minWidth: '178px',
         minHeight: '36px',
         background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
-        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
+        border: borderStyle,
         boxSizing: 'border-box',
         borderRadius: '3px',
         overflow: 'hidden',
@@ -72,6 +79,7 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
         padding: '8px 8px 8px 35px',
         width: hoveredElementSize ? hoveredElementSize.width : undefined,
         height: hoveredElementSize ? hoveredElementSize.height : undefined,
+        touchAction: 'none',
       }}
       data-key={n.index}
       contentEditable={false}
@@ -104,9 +112,21 @@ BlankContent.propTypes = {
   isOver: PropTypes.bool,
   dragItem: PropTypes.object,
   value: PropTypes.object,
+  selected: PropTypes.bool,
 };
 
-function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
+  n,
+  onChange,
+  removeResponse,
+  duplicates,
+  pos,
+  selected,
+}) {
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -196,7 +216,14 @@ function DragDropChoice({ value, disabled, instanceId, children, n, onChange, re
   };
 
   const dragContent = (
-    <BlankContent n={n} isDragging={isDragging} isOver={isOver} dragItem={dragItem?.data?.current} value={value}>
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      selected={selected}
+    >
       {children}
     </BlankContent>
   );
@@ -223,6 +250,7 @@ DragDropChoice.propTypes = {
   onChange: PropTypes.func.isRequired,
   removeResponse: PropTypes.func.isRequired,
   duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
 };
 
 export default DragDropChoice;

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper } from '@tiptap/react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
 
 const ExplicitConstructedResponse = (props) => {
   const { editor, node, getPos, options, selected } = props;
@@ -9,7 +11,7 @@ const ExplicitConstructedResponse = (props) => {
   const { respAreaToolbar, error: errorFn } = options;
   const pos = getPos();
   const [showToolbar, setShowToolbar] = useState(false);
-  const EcrToolbar = respAreaToolbar(node, editor, () => {});
+  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});
   const toolbarRef = useRef(null);
 
   let error;
@@ -21,12 +23,6 @@ const ExplicitConstructedResponse = (props) => {
     error = !!errorValue?.[respIndex]?.[0];
   }
 
-  const handleDone = (newLatex) => {
-    updateAttributes({ latex: newLatex });
-    setShowToolbar(false);
-    editor.commands.focus();
-  };
-
   useEffect(() => {
     const { selection } = editor.state;
     const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
@@ -42,7 +38,11 @@ const ExplicitConstructedResponse = (props) => {
 
   useEffect(() => {
     const handleClickOutside = (event) => {
+      const insideCharacterPicker =
+        event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');
+
       if (
+        !insideCharacterPicker &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
@@ -94,9 +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>
+        <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;
@@ -11,10 +12,12 @@ const InlineDropdown = (props) => {
   // TODO: Investigate
   // Needed because items with values inside have different positioning for some reason
   const html = value || '<div>&nbsp</div>';
+  const pos = getPos();
   const toolbarRef = useRef(null);
+  const toolbarEditor = useRef(null);
   const [showToolbar, setShowToolbar] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
-  const InlineDropdownToolbar = options.respAreaToolbar(node, editor, () => {});
+  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, () => {});
 
   useEffect(() => {
     const { selection } = editor.state;
@@ -41,7 +44,11 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+      const insideSomeEditor = event.target.closest('[data-toolbar-for]');
+
       if (
+        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) &&
+        !editor._toolbarOpened &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
@@ -66,7 +73,6 @@ const InlineDropdown = (props) => {
       style={{
         display: 'inline-flex',
         height: '50px',
-        margin: '0 5px',
         cursor: 'pointer',
       }}
     >
@@ -79,7 +85,7 @@ const InlineDropdown = (props) => {
           border: '1px solid #C0C3CF',
           boxSizing: 'border-box',
           borderRadius: '3px',
-          margin: '0 4px',
+          margin: '0 2px',
           position: 'relative',
           alignItems: 'center',
         }}
@@ -113,13 +119,42 @@ const InlineDropdown = (props) => {
           }}
         />
       </div>
-      {showToolbar &&
-        ReactDOM.createPortal(
-          <div ref={toolbarRef} style={{ zIndex: 1 }}>
-            <InlineDropdownToolbar />
-          </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__/divNode.test.js

@@ -0,0 +1,87 @@
+import { DivNode } from '../div-node';
+
+jest.mock('@tiptap/core', () => ({
+  Node: {
+    create: jest.fn((config) => config),
+  },
+}));
+
+describe('DivNode', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(DivNode.name).toBe('div');
+    });
+
+    it('is block level', () => {
+      expect(DivNode.group).toBe('block');
+      expect(DivNode.content).toBe('inline*');
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('parses <div> tags', () => {
+      const rules = DivNode.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag', 'div');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders a <div> tag', () => {
+      const result = DivNode.renderHTML({ HTMLAttributes: { class: 'foo' } });
+
+      expect(result[0]).toBe('div');
+      expect(result[1]).toEqual({ class: 'foo' });
+    });
+  });
+
+  describe('addKeyboardShortcuts', () => {
+    it('does nothing when current block is not div', () => {
+      const mockEditor = {
+        state: {
+          selection: {
+            $from: {
+              parent: { type: { name: 'paragraph' } },
+            },
+          },
+        },
+      };
+
+      const shortcuts = DivNode.addKeyboardShortcuts.call({ editor: mockEditor });
+      const handled = shortcuts.Enter();
+
+      expect(handled).toBe(false);
+    });
+
+    it('turns div into paragraph and splits when Enter is pressed in a div', () => {
+      const chain = {
+        focus: jest.fn(() => chain),
+        setNode: jest.fn(() => chain),
+        splitBlock: jest.fn(() => chain),
+        run: jest.fn(() => true),
+      };
+
+      const mockEditor = {
+        state: {
+          selection: {
+            $from: {
+              parent: { type: { name: 'div' } },
+            },
+          },
+        },
+        chain: () => chain,
+      };
+
+      const shortcuts = DivNode.addKeyboardShortcuts.call({ editor: mockEditor });
+      const handled = shortcuts.Enter();
+
+      expect(chain.focus).toHaveBeenCalled();
+      expect(chain.setNode).toHaveBeenCalledWith('paragraph');
+      expect(chain.splitBlock).toHaveBeenCalled();
+      expect(chain.run).toHaveBeenCalled();
+      expect(handled).toBe(true);
+    });
+  });
+});

package/src/extensions/__tests__/ensure-empty-root-div.test.js

@@ -0,0 +1,57 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { DivNode } from '../div-node';
+import { EnsureEmptyRootIsDiv } from '../ensure-empty-root-div';
+
+/** Match EditableHtml so TrailingNode does not add a second empty block next to an empty paragraph. */
+const starterKitConfigured = StarterKit.configure({
+  trailingNode: {
+    node: 'paragraph',
+    notAfter: ['paragraph', 'div'],
+  },
+});
+
+describe('EnsureEmptyRootIsDiv', () => {
+  const extensions = [starterKitConfigured, DivNode, EnsureEmptyRootIsDiv];
+
+  let editor;
+
+  afterEach(() => {
+    if (editor) {
+      editor.destroy();
+      editor = null;
+    }
+  });
+
+  it('replaces a lone root paragraph with an empty div after select-all and delete (full delete flow)', () => {
+    editor = new Editor({
+      extensions,
+      content: '<p>hello</p>',
+    });
+
+    editor.chain().focus().selectAll().deleteSelection().run();
+
+    expect(editor.state.doc.childCount).toBe(1);
+    expect(editor.state.doc.firstChild.type.name).toBe('div');
+    expect(editor.state.doc.firstChild.textContent).toBe('');
+  });
+
+  it('does not replace a root paragraph that still has text', () => {
+    editor = new Editor({
+      extensions,
+      content: '<p>x</p>',
+    });
+
+    expect(editor.state.doc.firstChild.type.name).toBe('paragraph');
+  });
+
+  it('does not run when there is more than one top-level block', () => {
+    editor = new Editor({
+      extensions,
+      content: '<p>a</p><p>b</p>',
+    });
+
+    expect(editor.state.doc.childCount).toBe(2);
+    expect(editor.state.doc.firstChild.type.name).toBe('paragraph');
+  });
+});

package/src/extensions/__tests__/ensure-list-item-content-is-div.test.js

@@ -0,0 +1,44 @@
+import { EnsureListItemContentIsDiv } from '../ensure-list-item-content-is-div';
+
+describe('EnsureListItemContentIsDiv', () => {
+  it('registers a ProseMirror plugin that rewrites listItem paragraph children to div', () => {
+    const plugins = EnsureListItemContentIsDiv.config.addProseMirrorPlugins();
+    expect(Array.isArray(plugins)).toBe(true);
+    expect(plugins).toHaveLength(1);
+
+    const plugin = plugins[0];
+    const divType = { name: 'div' };
+    const tr = { setNodeMarkup: jest.fn() };
+
+    const paragraphChild = {
+      type: { name: 'paragraph' },
+      attrs: { class: 'x' },
+      nodeSize: 6,
+    };
+
+    const listItemNode = {
+      type: { name: 'listItem' },
+      forEach: (cb) => cb(paragraphChild),
+    };
+
+    const newState = {
+      schema: { nodes: { div: divType } },
+      tr,
+      doc: {
+        descendants: (cb) => cb(listItemNode, 10),
+      },
+    };
+
+    const result = plugin.spec.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.setNodeMarkup).toHaveBeenCalledWith(11, divType, paragraphChild.attrs);
+    expect(result).toBe(tr);
+  });
+
+  it('returns null when there is no document change', () => {
+    const plugin = EnsureListItemContentIsDiv.config.addProseMirrorPlugins()[0];
+
+    const result = plugin.spec.appendTransaction([{ docChanged: false }], {}, {});
+    expect(result).toBeNull();
+  });
+});

package/src/extensions/__tests__/extended-list-item.test.js

@@ -0,0 +1,13 @@
+import { ExtendedListItem } from '../extended-list-item';
+
+describe('ExtendedListItem', () => {
+  it('extends listItem and prefers div over paragraph in content spec', () => {
+    expect(ExtendedListItem.name).toBe('listItem');
+
+    const content =
+      ExtendedListItem.options?.content ?? ExtendedListItem.config?.content ?? ExtendedListItem.extendOptions?.content;
+
+    expect(String(content)).toMatch(/^\(div \| paragraph/);
+    expect(String(content)).toContain('imageUploadNode');
+  });
+});

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

@@ -0,0 +1,22 @@
+import { ExtendedTableCell, ExtendedTableHeader } from '../extended-table-cell';
+
+describe('ExtendedTableCell / ExtendedTableHeader', () => {
+  it('exports cell and header extensions with div preferred over paragraph in content spec', () => {
+    expect(ExtendedTableCell.name).toBe('tableCell');
+    expect(ExtendedTableHeader.name).toBe('tableHeader');
+
+    const cellContent =
+      ExtendedTableCell.options?.content ??
+      ExtendedTableCell.config?.content ??
+      ExtendedTableCell.extendOptions?.content;
+
+    expect(String(cellContent)).toMatch(/^\(div \| paragraph/);
+
+    const headerContent =
+      ExtendedTableHeader.options?.content ??
+      ExtendedTableHeader.config?.content ??
+      ExtendedTableHeader.extendOptions?.content;
+
+    expect(headerContent).toBe(cellContent);
+  });
+});

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();