tiptap-extension-izzy-resizable-image 0.1.4 → 0.1.6

package/README.md

@@ -123,6 +123,8 @@ These can be set per-node, overriding options.
 - `title: string | null`
 - `width: number | null` — width in px.
 - `height: number | null` — height in px.
+- `id: string | null` — applied to the `<img>` element.
+- `class: string | null` — applied to the `<img>` element.
 - `align: 'left' | 'center' | 'right' | null` — alignment.
 - `showAlignMenu: boolean | null` — show/hide menu per node.
 - `alignMenuPosition: 'above' | 'below' | null`
@@ -136,7 +138,7 @@ Reference: `resizable-image.js:358-372`
 
 ## Commands
 
-- `insertResizableImage({ src, alt, title, width, height })`
+- `insertResizableImage({ src, alt, title, width, height, id, class })`
   - Inserts the resizable image node. Missing attrs fall back to options (e.g., `height`).
   - Reference: `resizable-image.js:398-416`
 
@@ -181,3 +183,13 @@ Reference: `resizable-image.js:358-372`
 
 - The extension is inline and draggable; selection toggles menu/handles.
 - Deselecting removes the overlay/menu from the DOM to keep markup clean.
+### Example with `id` and `class`
+
+```js
+editor.commands.insertResizableImage({
+  src: 'https://picsum.photos/300/200',
+  width: 300,
+  id: 'hero-image',
+  class: 'rounded shadow'
+});
+```

package/npm/index.js

@@ -39,9 +39,11 @@ class ResizableImageView {
     this.img.src = node.attrs.src
     this.img.alt = node.attrs.alt || ''
     this.img.style.display = 'block'
-    this.img.style.userSelect = 'none'
-    this.img.style.pointerEvents = 'none'
-    if (node.attrs.width) this.img.style.width = node.attrs.width + 'px'
+    this.img.style.userSelect = 'none'
+    this.img.style.pointerEvents = 'none'
+    if (node.attrs.id) this.img.id = node.attrs.id
+    if (node.attrs.class) this.img.className = node.attrs.class
+    if (node.attrs.width) this.img.style.width = node.attrs.width + 'px'
     if (node.attrs.height) {
       this.img.style.height = node.attrs.height + 'px'
     } else if (this.options && this.options.height) {
@@ -354,6 +356,8 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       title: { default: null },
       width: { default: null },
       height: { default: null },
+      id: { default: null },
+      class: { default: null },
       align: { default: 'left' },
       showAlignMenu: { default: null },
       alignMenuPosition: { default: null },
@@ -361,6 +365,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       iconCenter: { default: null },
       iconRight: { default: null },
       iconClear: { default: null },
+      iconView: { default: null },
     }
   },
 
@@ -467,6 +472,33 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
             },
           },
         },
+        appendTransaction: (transactions, oldState, newState) => {
+          const imgType = newState.schema.nodes.image
+          const resizeType = newState.schema.nodes[this.name]
+          if (!imgType || !resizeType) return null
+          let tr = newState.tr
+          let changed = false
+          newState.doc.descendants((node, pos) => {
+            if (node.type === imgType) {
+              tr = tr.setNodeMarkup(pos, resizeType, {
+                src: node.attrs.src,
+                alt: node.attrs.alt,
+                title: node.attrs.title,
+                width: node.attrs.width,
+                height: node.attrs.height ?? this.options.height,
+                showAlignMenu: this.options.showAlignMenu,
+                alignMenuPosition: this.options.alignMenuPosition,
+                iconLeft: this.options.alignMenuIcons?.left,
+                iconCenter: this.options.alignMenuIcons?.center,
+                iconRight: this.options.alignMenuIcons?.right,
+                iconClear: this.options.alignMenuIcons?.clear,
+                iconView: this.options.alignMenuIcons?.preview,
+              })
+              changed = true
+            }
+          })
+          return changed ? tr : null
+        },
       }),
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-izzy-resizable-image",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Resizable image NodeView for TipTap v2 with alignment menu and defaults",
   "license": "MIT",
   "type": "module",