@pie-lib/editable-html-tip-tap 1.2.0-next.31 → 1.2.0-next.33

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

@@ -74,15 +74,14 @@ function ImageComponent(props) {
     editor,
     attributes,
     onFocus,
+    getPos,
     selected,
     options,
     maxImageWidth = 700,
     maxImageHeight = 900,
-    latex,
-    handleChange,
-    handleDone,
   } = props;
   const { alt } = node.attrs;
+  const pos = getPos();
 
   const [showToolbar, setShowToolbar] = useState(false);
 
@@ -111,8 +110,8 @@ function ImageComponent(props) {
 
   // keep ref in sync with latest node
   useEffect(() => {
-    latestNodeRef.current = node;
-  }, [node]);
+    latestNodeRef.current = { ...node, pos };
+  }, [node, pos]);
 
   useEffect(() => {
     const { selection } = editor.state;
@@ -120,21 +119,26 @@ function ImageComponent(props) {
 
     if (selected) {
       if (onlyThisNodeSelected) {
+        // Only open the upload UI for a fresh placeholder. Remounting after tab switch
+        // would otherwise call insertImageRequested again and reopen the file modal.
+        const hasImageSrc = String(node.attrs?.src ?? '').trim();
+
+        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
+          options.imageHandling.insertImageRequested(
+            editor,
+            [node, pos],
+            (finish) => new InsertImageHandler(editor, [node, pos], finish),
+          );
+        }
+
         setShowToolbar(selected);
       }
     } else {
       setShowToolbar(selected);
     }
-  }, [editor, node, selected]);
+  }, [editor, node, pos, selected]);
 
   useEffect(() => {
-    // Only open the upload UI for a fresh placeholder. Remounting after tab switch
-    // would otherwise call insertImageRequested again and reopen the file modal.
-    const hasImageSrc = String(node.attrs?.src ?? '').trim();
-    if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
-      options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));
-    }
-
     applySizeData();
 
     const resizeHandle = resizeRef.current;
@@ -302,7 +306,7 @@ function ImageComponent(props) {
               }}
               onDone={() => {
                 setShowToolbar(false);
-                options.imageHandling?.onDone?.();
+                options.imageHandling?.onDone?.(editor);
                 editor.commands.focus('end');
               }}
             >

package/src/extensions/media.js

@@ -179,7 +179,7 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
           <source type="audio/mp3" src={src} />
         </audio>
       ) : (
-        <iframe src={src} allowFullScreen frameBorder="0" />
+        <iframe src={src} allowFullScreen frameBorder="0" width={width} height={height} />
       )}
 
       <MediaToolbar onEdit={handleEdit} onRemove={deleteNode} />