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

package/src/extensions/__tests__/media-node-view.test.jsx

@@ -100,7 +100,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       // Verify the component rendered successfully
@@ -130,7 +130,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       // Verify the component rendered successfully
@@ -159,7 +159,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       // Empty string is falsy, so dialog WOULD open with current implementation
@@ -185,7 +185,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       expect(getByTestId('edit-button')).toBeTruthy();
@@ -210,7 +210,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       const audio = container.querySelector('audio');
@@ -237,12 +237,14 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       const iframe = container.querySelector('iframe');
       expect(iframe).toBeTruthy();
       expect(iframe.getAttribute('src')).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ');
+      expect(iframe.getAttribute('width')).toBe('640');
+      expect(iframe.getAttribute('height')).toBe('480');
     });
 
     it('should render MediaToolbar', () => {
@@ -261,7 +263,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       expect(getByTestId('media-toolbar')).toBeTruthy();
@@ -285,7 +287,7 @@ describe('MediaNodeView Component', () => {
           updateAttributes={mockUpdateAttributes}
           deleteNode={mockDeleteNode}
           options={{}}
-        />
+        />,
       );
 
       fireEvent.click(getByTestId('remove-button'));

package/src/extensions/__tests__/responseArea.test.js

@@ -101,6 +101,297 @@ describe('ResponseAreaExtension', () => {
       expect(commands).toHaveProperty('insertResponseArea');
       expect(typeof commands.insertResponseArea).toBe('function');
     });
+
+    it('returns refreshResponseArea command', () => {
+      const commands = ResponseAreaExtension.addCommands();
+
+      expect(commands).toHaveProperty('refreshResponseArea');
+      expect(typeof commands.refreshResponseArea).toBe('function');
+    });
+
+    it('refreshResponseArea handles node with attrs safely', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state
+      const mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test',
+        },
+      };
+
+      const mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch,
+      });
+
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
+
+    it('refreshResponseArea handles node without attrs safely (optional chaining)', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state with node that has no attrs
+      const mockNode = null;
+
+      const mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      // This should not throw an error due to optional chaining on node?.attrs
+      expect(() => {
+        refreshCommand({
+          tr: mockTr,
+          state: mockState,
+          commands: mockCommands,
+          dispatch: mockDispatch,
+        });
+      }).not.toThrow();
+    });
+
+    it('refreshResponseArea updates timestamp in node attributes', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      const mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test',
+          updated: '1234567890',
+        },
+      };
+
+      const mockTr = {
+        setNodeMarkup: jest.fn((pos, type, attrs) => {
+          // Verify that updated timestamp is being set
+          expect(attrs.updated).toBeDefined();
+          expect(attrs.updated).not.toBe('1234567890');
+        }),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch,
+      });
+
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
+
+    describe('insertResponseArea', () => {
+      beforeEach(() => {
+        jest.resetModules();
+      });
+
+      const buildInsertCommand = () => {
+        const { ResponseAreaExtension } = require('../responseArea');
+        const context = {
+          options: {
+            type: 'inline-dropdown',
+            maxResponseAreas: 5,
+          },
+        };
+        const commands = ResponseAreaExtension.addCommands.call(context);
+        return commands.insertResponseArea('inline-dropdown');
+      };
+
+      const createDoc = (existingCount, typeName = 'inline_dropdown') => ({
+        descendants: jest.fn((callback) => {
+          for (let i = 0; i < existingCount; i += 1) {
+            callback({ type: { name: typeName } }, i);
+          }
+        }),
+        content: { size: 50 },
+      });
+
+      it('assigns index 1 and id 1 on the first insert', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(0);
+        const mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn(),
+        };
+        const state = {
+          schema: {
+            nodes: {
+              inline_dropdown: { create },
+            },
+          },
+          doc: mockDoc,
+          selection: { from: 5 },
+        };
+        const mockDispatch = jest.fn();
+        const mockCommands = { focus: jest.fn() };
+
+        const result = insert({
+          tr: mockTr,
+          state,
+          dispatch: mockDispatch,
+          commands: mockCommands,
+        });
+
+        expect(result).toBe(true);
+        expect(create).toHaveBeenCalledWith({
+          index: '1',
+          id: '1',
+          value: '',
+        });
+        expect(mockTr.insert).toHaveBeenCalledWith(5, mockInlineNode);
+        expect(mockDispatch).toHaveBeenCalled();
+      });
+
+      it('assigns consecutive indices on repeated inserts', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(0);
+
+        const runOnce = () => {
+          const mockTr = {
+            insert: jest.fn(),
+            doc: mockDoc,
+            setSelection: jest.fn(),
+          };
+          const state = {
+            schema: {
+              nodes: {
+                inline_dropdown: { create },
+              },
+            },
+            doc: mockDoc,
+            selection: { from: 1 },
+          };
+          insert({
+            tr: mockTr,
+            state,
+            dispatch: jest.fn(),
+            commands: { focus: jest.fn() },
+          });
+        };
+
+        runOnce();
+        runOnce();
+
+        expect(create.mock.calls[0][0]).toEqual({ index: '1', id: '1', value: '' });
+        expect(create.mock.calls[1][0]).toEqual({ index: '2', id: '2', value: '' });
+      });
+
+      it('returns false when maxResponseAreas is reached', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(5);
+        const mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn(),
+        };
+        const state = {
+          schema: {
+            nodes: {
+              inline_dropdown: { create },
+            },
+          },
+          doc: mockDoc,
+          selection: { from: 5 },
+        };
+
+        const result = insert({
+          tr: mockTr,
+          state,
+          dispatch: jest.fn(),
+          commands: { focus: jest.fn() },
+        });
+
+        expect(result).toBe(false);
+        expect(create).not.toHaveBeenCalled();
+        expect(mockTr.insert).not.toHaveBeenCalled();
+      });
+    });
   });
 });
 

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -48,7 +48,7 @@ const SharedContainer = styled('div')({
 });
 
 function CustomToolbarWrapper(props) {
-  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone } = props;
+  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone, style } = props;
   const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
 
   return (
@@ -59,7 +59,7 @@ function CustomToolbarWrapper(props) {
       isFocused={toolbarOpts.alwaysVisible || isFocused}
       autoWidth={autoWidth}
       isHidden={toolbarOpts.isHidden === true}
-      style={{ ...customStyles }}
+      style={{ ...customStyles, ...style }}
     >
       {children}
 

package/src/extensions/div-node.js

@@ -0,0 +1,86 @@
+// DivNode.ts
+import { Node } from '@tiptap/core';
+
+export const DivNode = Node.create({
+  name: 'div',
+  group: 'block',
+  content: 'inline*',
+
+  parseHTML() {
+    return [{ tag: 'div' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', HTMLAttributes, 0];
+  },
+
+  addKeyboardShortcuts() {
+    const isInsideListItem = ($from) => {
+      for (let depth = $from.depth; depth >= 0; depth -= 1) {
+        if ($from.node(depth).type.name === 'listItem') {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return {
+      Enter: () => {
+        const { state } = this.editor;
+        const { $from } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+        if (isInsideListItem($from)) {
+          return false;
+        }
+
+        return this.editor
+          .chain()
+          .focus()
+          .setNode('paragraph') // current div becomes <p>
+          .splitBlock() // create another <p>
+          .run();
+      },
+
+      // When the cursor is in a div and the user presses Backspace,
+      // ProseMirror's default handler may try to join/delete the block node
+      // once it becomes empty. That triggers the Enter shortcut above
+      // (div → p conversion + split), making it look like a new line is
+      // inserted instead of deleting.
+      // We handle two cases explicitly:
+      //  1. The div already IS empty → swallow the event (nothing to delete).
+      //  2. The div has exactly ONE character left → delete just that character
+      //     using a precise transaction, then stop. This prevents ProseMirror
+      //     from following up with a block-join that triggers the Enter handler.
+      Backspace: () => {
+        const { state } = this.editor;
+        const { $from, empty: selectionEmpty } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+
+        if (!selectionEmpty) {
+          return false;
+        }
+
+        const parentText = $from.parent.textContent;
+
+        if (parentText.length === 0) {
+          return state.doc.childCount === 1 ? true : false;
+        }
+
+        if (parentText.length === 1 && $from.parentOffset === 1) {
+          const { tr } = state;
+          tr.delete($from.pos - 1, $from.pos);
+          this.editor.view.dispatch(tr);
+          return true;
+        }
+
+        return false;
+      },
+    };
+  },
+});

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

@@ -0,0 +1,47 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+/**
+ * After ProseMirror repairs an empty document, it often inserts a `paragraph`.
+ * We want a lone empty top-level block to be `div` (DivNode) so typing stays `<div>A</div>`.
+ */
+export const EnsureEmptyRootIsDiv = Extension.create({
+  name: 'ensureEmptyRootIsDiv',
+
+  addProseMirrorPlugins() {
+    const key = new PluginKey(this.name);
+
+    return [
+      new Plugin({
+        key,
+        appendTransaction(transactions, _oldState, newState) {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const { doc } = newState;
+          if (doc.childCount !== 1) {
+            return null;
+          }
+
+          const first = doc.firstChild;
+          if (first.type.name !== 'paragraph' || first.content.size > 0) {
+            return null;
+          }
+
+          const divType = newState.schema.nodes.div;
+          if (!divType) {
+            return null;
+          }
+
+          // Top-level content positions are 0 .. doc.content.size. The first block spans
+          // [0, first.nodeSize). Using start=1 replaces the wrong slice and can leave the
+          // document inconsistent after a full delete (Cmd+A, Backspace).
+          const start = 0;
+          const end = first.nodeSize;
+          return newState.tr.replaceWith(start, end, divType.create());
+        },
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,62 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+/**
+ * Some list operations preserve/create `paragraph` children in `listItem`.
+ * Normalize direct `listItem > paragraph` children into `div` so list content
+ * stays consistent with DivNode-based editing.
+ */
+export const EnsureListItemContentIsDiv = Extension.create({
+  name: 'ensureListItemContentIsDiv',
+
+  addProseMirrorPlugins() {
+    const key = new PluginKey(this.name);
+
+    return [
+      new Plugin({
+        key,
+        appendTransaction(transactions, _oldState, newState) {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const { doc, schema } = newState;
+          const divType = schema.nodes.div;
+          if (!divType) {
+            return null;
+          }
+
+          const positionsToConvert = [];
+
+          doc.descendants((node, pos) => {
+            if (node.type.name !== 'listItem') {
+              return;
+            }
+
+            let childOffset = 1;
+            node.forEach((child) => {
+              if (child.type.name === 'paragraph') {
+                positionsToConvert.push({
+                  pos: pos + childOffset,
+                  attrs: child.attrs,
+                });
+              }
+              childOffset += child.nodeSize;
+            });
+          });
+
+          if (positionsToConvert.length === 0) {
+            return null;
+          }
+
+          const tr = newState.tr;
+          positionsToConvert
+            .sort((a, b) => b.pos - a.pos)
+            .forEach(({ pos, attrs }) => tr.setNodeMarkup(pos, divType, attrs));
+
+          return tr;
+        },
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,10 @@
+import { ListItem } from '@tiptap/extension-list-item';
+
+/**
+ * Default list items use `paragraph block*`, so empty/new items become `<p>`.
+ * Prefer `div` first to keep consistency with DivNode at root and table cells.
+ */
+export const ExtendedListItem = ListItem.extend({
+  content:
+    '(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+',
+});

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

@@ -0,0 +1,19 @@
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+
+/**
+ * Default table cells use ProseMirror `createAndFill()`, which prefers the first
+ * block type allowed by the content expression. Stock cells use `block+`, so
+ * `paragraph` wins. Listing `div` first matches the editor default for plain text
+ * (see DivNode) while still allowing other blocks (lists, headings, images, …).
+ */
+const TABLE_CELL_BLOCK_CONTENT =
+  '(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+';
+
+export const ExtendedTableCell = TableCell.extend({
+  content: TABLE_CELL_BLOCK_CONTENT,
+});
+
+export const ExtendedTableHeader = TableHeader.extend({
+  content: TABLE_CELL_BLOCK_CONTENT,
+});

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;