tiptap-extension-izzy-resizable-image 0.1.3 → 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,13 +74,23 @@ const editor = new Editor({
           height: 200,
           showAlignMenu: true,
           alignMenuPosition: 'below',
-          alignMenuIcons: {
-            left: '⟸',
-            center: '⇔',
-            right: '⟹',
-            clear: 'x',
-            preview: '🔍',
-          },
+          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,
+          },
         };
       },
     }),
@@ -96,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, preview: 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`
@@ -117,9 +128,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`
-- `iconView: string | null` — HTML or text for the preview (lightbox) button.
+- `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

@@ -85,24 +85,33 @@ class ResizableImageView {
     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.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.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'))
 
@@ -187,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
@@ -364,6 +382,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       showAlignMenu: true,
       alignMenuPosition: 'below',
       alignMenuIcons: { left: '⟸', center: '⇔', right: '⟹', clear: 'x', preview: '🔍' },
+      alignMenuButtonsHide: {},
     }
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-izzy-resizable-image",
-  "version": "0.1.3",
+  "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",