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

package/README.md

@@ -2,7 +2,7 @@
 
 Resizable inline image node for TipTap v2 with eight resize handles, optional alignment menu, drag-and-drop, and sensible defaults via `.extend()`.
 
-Demo: https://bernanr.github.io/TipTap-Extension-Izzy-Resizable-Image
+Demo: https://startinn.github.io/TipTap-Extension-Izzy-Resizable-Image/
 
 ## Features
 
@@ -44,14 +44,14 @@ editor.commands.setResizableImageAlignment('center');
 
 ### Using from npm (bundler)
 
-```bash
-npm install tiptap-extension-izzy-resizable-image @tiptap/core@^3 prosemirror-state
-```
+```bash
+npm install tiptap-extension-izzy-resizable-image @tiptap/core@^3 prosemirror-state
+```
 
 ```js
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { TiptapIzzyExtensionResizableImage } from 'tiptap-extension-izzy-resizable-image';
+import { TiptapIzzyExtensionResizableImage } from 'tiptap-extension-izzy-resizable-image';
 
 const editor = new Editor({
   element: document.querySelector('#editor'),
@@ -74,12 +74,23 @@ const editor = new Editor({
           height: 200,
           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: '🔍',
+          },
+          alignMenuButtonsHide: {
+            // hide specific buttons if true
+            // left: true,
+            // right: true,
+            // center: true,
+            // clear: true,
+            // preview: true,
+            // size50: true,
+            // size100: true,
+          },
         };
       },
     }),
@@ -95,7 +106,8 @@ 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.
+- `alignMenuButtonsHide: Record<string, boolean>` — hide specific buttons when `true` (supports `left`, `center`, `right`, `clear`, `preview`, `size50`, `size100`).
 
 Reference:
 - Defined in `resizable-image.js:387-394`
@@ -118,6 +130,7 @@ These can be set per-node, overriding options.
 - `iconCenter: 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,34 @@ class ResizableImageView {
     this.btnCenter = document.createElement('button')
     this.btnRight = document.createElement('button')
     this.btnClear = document.createElement('button')
+    this.btnView = document.createElement('button')
+    this.btnSize50 = document.createElement('button')
+    this.btnSize100 = 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.btnSize50.textContent = '50%'
+    this.btnSize100.textContent = '100%'
 
     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.menu.appendChild(this.btnLeft)
-    this.menu.appendChild(this.btnCenter)
-    this.menu.appendChild(this.btnRight)
-    this.menu.appendChild(this.btnClear)
+    this.btnView.addEventListener('click', () => this.openModal())
+    this.btnSize50.addEventListener('click', () => this.applyResizePercent(0.5))
+    this.btnSize100.addEventListener('click', () => this.applyResizePercent(1))
+
+    const hidden = this.options.alignMenuButtonsHide || {}
+    if (!hidden.left) this.menu.appendChild(this.btnLeft)
+    if (!hidden.center) this.menu.appendChild(this.btnCenter)
+    if (!hidden.right) this.menu.appendChild(this.btnRight)
+    if (!hidden.clear) this.menu.appendChild(this.btnClear)
+    if (!hidden.preview) this.menu.appendChild(this.btnView)
+    if (!hidden.size50) this.menu.appendChild(this.btnSize50)
+    if (!hidden.size100) this.menu.appendChild(this.btnSize100)
 
     this.updateMenuPosition(node.attrs.alignMenuPosition != null ? node.attrs.alignMenuPosition : (this.options && this.options.alignMenuPosition != null ? this.options.alignMenuPosition : 'below'))
 
@@ -111,6 +124,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) {
@@ -151,6 +196,15 @@ class ResizableImageView {
     }
   }
 
+  applyResizePercent(percent) {
+    const naturalW = this.img.naturalWidth || Math.round(this.img.getBoundingClientRect().width)
+    const targetW = Math.max(20, Math.round(naturalW * percent))
+    const targetH = this.aspect ? Math.round(targetW / this.aspect) : Math.round(this.img.getBoundingClientRect().height)
+    const pos = this.getPos()
+    const tr = this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, width: targetW, height: targetH })
+    this.view.dispatch(tr)
+  }
+
   onPointerDown(event) {
     event.preventDefault()
     const direction = event.currentTarget.dataset.direction
@@ -224,6 +278,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 +327,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 +381,8 @@ 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: '🔍' },
+      alignMenuButtonsHide: {},
     }
   },
 
@@ -343,6 +404,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.4",
   "description": "Resizable image NodeView for TipTap v2 with alignment menu and defaults",
   "license": "MIT",
   "type": "module",
@@ -15,7 +15,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/BernanR/TipTap-Extension-Izzy-Resizable-Image.git"
+    "url": "git+https://github.com/startinn/TipTap-Extension-Izzy-Resizable-Image.git"
   },
   "keywords": [
     "tiptap",