@pie-lib/editable-html-tip-tap 1.2.0-next.32 → 1.2.0-next.34

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

@@ -144,9 +144,12 @@ describe('ImageUploadNode', () => {
         insertContent: jest.fn(() => true),
       };
       const result = commands.setImageUploadNode()({ commands: mockCommands });
-      expect(mockCommands.insertContent).toHaveBeenCalledWith({
-        type: 'imageUploadNode',
-      });
+      expect(mockCommands.insertContent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'imageUploadNode',
+          attrs: expect.objectContaining({ nodeKey: expect.any(String) }),
+        }),
+      );
       expect(result).toBe(true);
     });
   });
@@ -220,13 +223,15 @@ describe('ImageUploadNode', () => {
 
       await new Promise((resolve) => queueMicrotask(resolve));
 
-      expect(insertContent).toHaveBeenCalledWith({
-        type: 'imageUploadNode',
-        attrs: {
-          src: 'data:image/png;base64,Zm9v',
-          loaded: true,
-        },
-      });
+      expect(insertContent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'imageUploadNode',
+          attrs: expect.objectContaining({
+            src: 'data:image/png;base64,Zm9v',
+            loaded: true,
+          }),
+        }),
+      );
     });
   });
 });

package/src/extensions/div-node.js

@@ -15,6 +15,15 @@ export const DivNode = Node.create({
   },
 
   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;
@@ -23,6 +32,9 @@ export const DivNode = Node.create({
         if ($from.parent.type.name !== 'div') {
           return false;
         }
+        if (isInsideListItem($from)) {
+          return false;
+        }
 
         return this.editor
           .chain()
@@ -60,8 +72,6 @@ export const DivNode = Node.create({
           return state.doc.childCount === 1 ? true : false;
         }
 
-        // one character left and cursor is after it — delete
-        // only that character and stop, preventing the block-join that fires Enter.
         if (parentText.length === 1 && $from.parentOffset === 1) {
           const { tr } = state;
           tr.delete($from.pos - 1, $from.pos);

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/image-component.jsx

@@ -95,18 +95,36 @@ function ImageComponent(props) {
     return parseInt(floored.toFixed(0) * 25, 10);
   }, []);
 
-  const applySizeData = useCallback(() => {
-    if (!node.attrs.width || !imgRef.current) return;
+  const findNodePos = useCallback(() => {
+    const key = latestNodeRef.current.attrs.nodeKey;
+    let found = null;
+    editor.state.doc.descendants((n, pos) => {
+      if (found !== null) return false;
+      if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {
+        found = pos;
+        return false;
+      }
+    });
+    return found;
+  }, [editor]);
 
-    const update = {
-      ...node.attrs,
-      resizePercent: getPercentFromWidth(node.attrs.width),
-    };
+  // dispatch an attribute update targeted precisely at this node by nodeKey.
+  const updateThisNode = useCallback((newAttrs) => {
+    const nodePos = findNodePos();
+    if (nodePos === null) return;
+    const currentNode = editor.state.doc.nodeAt(nodePos);
+    if (!currentNode) return;
+    editor.view.dispatch(
+      editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }),
+    );
+  }, [editor, findNodePos]);
 
-    if (!isEqual(update, node.attrs)) {
-      editor.commands.updateAttributes('imageUploadNode', update);
-    }
-  }, [editor, node.attrs, getPercentFromWidth]);
+  const applySizeData = useCallback(() => {
+    if (!node.attrs.width || !imgRef.current) return;
+    const resizePercent = getPercentFromWidth(node.attrs.width);
+    if (node.attrs.resizePercent === resizePercent) return;
+    updateThisNode({ resizePercent });
+  }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);
 
   // keep ref in sync with latest node
   useEffect(() => {
@@ -126,8 +144,8 @@ function ImageComponent(props) {
         if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
           options.imageHandling.insertImageRequested(
             editor,
-            latestNodeRef.current,
-            (finish) => new InsertImageHandler(editor, latestNodeRef.current, finish),
+            [node, pos],
+            (finish) => new InsertImageHandler(editor, [node, pos], finish),
           );
         }
 
@@ -136,7 +154,7 @@ function ImageComponent(props) {
     } else {
       setShowToolbar(selected);
     }
-  }, [editor, node, selected]);
+  }, [editor, node, pos, selected]);
 
   useEffect(() => {
     applySizeData();
@@ -168,11 +186,11 @@ function ImageComponent(props) {
       box.style.height = `${h}px`;
 
       const update = { width: w, height: h };
-      if (!isEqual(update, node.attrs)) {
-        editor.commands.updateAttributes('imageUploadNode', update);
+      if (!isEqual(update, { width: node.attrs.width, height: node.attrs.height })) {
+        updateThisNode(update);
       }
     }
-  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);
+  }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);
 
   const updateAspect = (initial, next, keepAspect = true, resizeType) => {
     if (keepAspect) {
@@ -200,36 +218,17 @@ function ImageComponent(props) {
         box.style.width = `${next.width}px`;
         box.style.height = `${next.height}px`;
 
-        const update = { width: next.width, height: next.height };
-        if (!isEqual(update, node.attrs)) {
-          editor.commands.updateAttributes('imageUploadNode', update);
-        }
+        updateThisNode({ width: next.width, height: next.height });
       }
     },
-    [editor, node.attrs],
+    [editor, updateThisNode],
   );
 
-  // Helper to find this node's current position in the doc.
-  // We cannot use object identity (n === node) because ProseMirror replaces
-  // node objects after every transaction — match by src instead.
-  const findNodePos = useCallback(() => {
-    let found = null;
-    const src = latestNodeRef.current.attrs.src;
-    editor.state.doc.descendants((n, pos) => {
-      if (found !== null) return false;
-      if (n.type.name === 'imageUploadNode' && n.attrs.src === src) {
-        found = pos;
-        return false;
-      }
-    });
-    return found;
-  }, [editor]);
-
   const onChange = useCallback(
     (newValues) => {
-      editor.commands.updateAttributes('imageUploadNode', newValues);
+      updateThisNode(newValues);
     },
-    [editor],
+    [editor, updateThisNode],
   );
 
   const stopResize = useCallback(() => {

package/src/extensions/image.js

@@ -3,6 +3,7 @@ import { ReactNodeViewRenderer } from '@tiptap/react';
 import { Plugin } from '@tiptap/pm/state';
 import React from 'react';
 import ImageComponent from './image-component';
+import { node } from 'prop-types';
 
 export const ImageUploadNode = Node.create({
   name: 'imageUploadNode',
@@ -14,6 +15,7 @@ export const ImageUploadNode = Node.create({
 
   addAttributes() {
     return {
+      nodeKey: { default: null },
       loaded: { default: false },
       deleteStatus: { default: null },
       alignment: { default: null },
@@ -48,6 +50,8 @@ export const ImageUploadNode = Node.create({
         ({ commands }) => {
           return commands.insertContent({
             type: this.name,
+              // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
+              attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },
           });
         },
     };
@@ -89,6 +93,7 @@ export const ImageUploadNode = Node.create({
                 attrs: {
                   src,
                   loaded: true,
+                  nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
                 },
               });
             };