tiptap-extension-izzy-resizable-image 0.1.2 → 0.1.3

package/README.md

@@ -75,10 +75,11 @@ const editor = new Editor({
           showAlignMenu: true,
           alignMenuPosition: 'below',
           alignMenuIcons: {
-            left: '<i class="bi bi-text-left"></i>',
-            center: '<i class="bi bi-text-center"></i>',
-            right: '<i class="bi bi-text-right"></i>',
+            left: '⟸',
+            center: '⇔',
+            right: '⟹',
             clear: 'x',
+            preview: '🔍',
           },
         };
       },
@@ -95,7 +96,7 @@ editor.commands.insertResizableImage({ src: 'https://picsum.photos/300/200', wid
 - `height: number | null` — default height in pixels when node `height` attr is missing.
 - `showAlignMenu: boolean` — whether the inline alignment menu is shown by default.
 - `alignMenuPosition: 'above' | 'below'` — where the menu appears relative to the image.
-- `alignMenuIcons: { left: string, center: string, right: string, clear: string }` — HTML strings for menu buttons.
+- `alignMenuIcons: { left: string, center: string, right: string, clear: string, preview: string }` — HTML strings for menu buttons.
 
 Reference:
 - Defined in `resizable-image.js:387-394`
@@ -116,8 +117,9 @@ These can be set per-node, overriding options.
 - `alignMenuPosition: 'above' | 'below' | null`
 - `iconLeft: string | null` — HTML or text for the left button.
 - `iconCenter: string | null`
-- `iconRight: string | null`
-- `iconClear: string | null`
+- `iconRight: string | null`
+- `iconClear: string | null`
+- `iconView: string | null` — HTML or text for the preview (lightbox) button.
 
 Reference: `resizable-image.js:358-372`
 

package/npm/index.js

@@ -84,21 +84,25 @@ class ResizableImageView {
     this.btnCenter = document.createElement('button')
     this.btnRight = document.createElement('button')
     this.btnClear = document.createElement('button')
+    this.btnView = document.createElement('button')
 
     this.btnLeft.innerHTML = (node.attrs.iconLeft != null ? node.attrs.iconLeft : (this.options.alignMenuIcons?.left ?? '⟸'))
     this.btnCenter.innerHTML = (node.attrs.iconCenter != null ? node.attrs.iconCenter : (this.options.alignMenuIcons?.center ?? '⇔'))
     this.btnRight.innerHTML = (node.attrs.iconRight != null ? node.attrs.iconRight : (this.options.alignMenuIcons?.right ?? '⟹'))
     this.btnClear.innerHTML = (node.attrs.iconClear != null ? node.attrs.iconClear : (this.options.alignMenuIcons?.clear ?? 'x'))
+    this.btnView.innerHTML = (this.options.alignMenuIcons?.preview ?? '🔍')
 
     this.btnLeft.addEventListener('click', () => this.applyAlignAttr('left'))
     this.btnCenter.addEventListener('click', () => this.applyAlignAttr('center'))
     this.btnRight.addEventListener('click', () => this.applyAlignAttr('right'))
     this.btnClear.addEventListener('click', () => this.applyAlignAttr(null))
+    this.btnView.addEventListener('click', () => this.openModal())
 
     this.menu.appendChild(this.btnLeft)
     this.menu.appendChild(this.btnCenter)
     this.menu.appendChild(this.btnRight)
     this.menu.appendChild(this.btnClear)
+    this.menu.appendChild(this.btnView)
 
     this.updateMenuPosition(node.attrs.alignMenuPosition != null ? node.attrs.alignMenuPosition : (this.options && this.options.alignMenuPosition != null ? this.options.alignMenuPosition : 'below'))
 
@@ -111,6 +115,38 @@ class ResizableImageView {
 
     this.dragging = null
     this.applyAlignment(node.attrs.align)
+
+    this.modalOverlay = document.createElement('div')
+    this.modalOverlay.style.position = 'fixed'
+    this.modalOverlay.style.inset = '0'
+    this.modalOverlay.style.background = 'rgba(0,0,0,0.8)'
+    this.modalOverlay.style.display = 'flex'
+    this.modalOverlay.style.alignItems = 'center'
+    this.modalOverlay.style.justifyContent = 'center'
+    this.modalOverlay.style.zIndex = '9999'
+    this.modalOverlay.style.cursor = 'zoom-out'
+    this.modalImg = document.createElement('img')
+    this.modalImg.src = this.img.src
+    this.modalImg.style.maxWidth = '90vw'
+    this.modalImg.style.maxHeight = '90vh'
+    this.modalImg.style.boxShadow = '0 8px 24px rgba(0,0,0,0.5)'
+    const modalClose = document.createElement('button')
+    modalClose.textContent = '✕'
+    modalClose.style.position = 'absolute'
+    modalClose.style.top = '16px'
+    modalClose.style.right = '16px'
+    modalClose.style.background = '#fff'
+    modalClose.style.border = 'none'
+    modalClose.style.borderRadius = '6px'
+    modalClose.style.padding = '6px 8px'
+    modalClose.style.cursor = 'pointer'
+    this.modalOverlay.appendChild(this.modalImg)
+    this.modalOverlay.appendChild(modalClose)
+    this.modalOverlay.addEventListener('click', (ev) => {
+      if (ev.target === this.modalOverlay) this.closeModal()
+    })
+    modalClose.addEventListener('click', () => this.closeModal())
+
   }
 
   updateMenuPosition(pos) {
@@ -224,6 +260,8 @@ class ResizableImageView {
     this.btnCenter.innerHTML = (node.attrs.iconCenter != null ? node.attrs.iconCenter : (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.center : '⇔'))
     this.btnRight.innerHTML = (node.attrs.iconRight != null ? node.attrs.iconRight : (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.right : '⟹'))
     this.btnClear.innerHTML = (node.attrs.iconClear != null ? node.attrs.iconClear : (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.clear : 'x'))
+    if (this.btnView) this.btnView.innerHTML = (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.preview : '🔍')
+    this.btnView.innerHTML = this.options.iconView ?? '🔍'
     this.aspect = (node.attrs.height && node.attrs.width) ? node.attrs.width / node.attrs.height : this.aspect
     return true
   }
@@ -271,6 +309,15 @@ class ResizableImageView {
   destroy() {
     window.removeEventListener('pointermove', this._moveHandler)
     window.removeEventListener('pointerup', this._upHandler)
+    if (this.modalOverlay && this.modalOverlay.parentNode) this.modalOverlay.parentNode.removeChild(this.modalOverlay)
+  }
+
+  openModal() {
+    if (!this.modalOverlay.parentNode) document.body.appendChild(this.modalOverlay)
+  }
+
+  closeModal() {
+    if (this.modalOverlay && this.modalOverlay.parentNode) this.modalOverlay.parentNode.removeChild(this.modalOverlay)
   }
 }
 
@@ -316,12 +363,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       height: null,
       showAlignMenu: true,
       alignMenuPosition: 'below',
-      alignMenuIcons: {
-        left: '<i class="bi bi-text-left"></i>',
-        center: '<i class="bi bi-text-center"></i>',
-        right: '<i class="bi bi-text-right"></i>',
-        clear: 'x'
-      },
+      alignMenuIcons: { left: '⟸', center: '⇔', right: '⟹', clear: 'x', preview: '🔍' },
     }
   },
 
@@ -343,6 +385,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
               iconCenter: this.options.alignMenuIcons?.center,
               iconRight: this.options.alignMenuIcons?.right,
               iconClear: this.options.alignMenuIcons?.clear,
+              iconView: this.options.alignMenuIcons?.preview,
             },
           })
         },

package/package.json

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