tiptap-extension-izzy-resizable-image 0.1.9 → 0.1.11

package/README.md

@@ -93,6 +93,9 @@ const editor = new Editor({
             // size50: true,
             // size100: true,
           },
+          fitToContainerSelector: '.tiptap',
+          autoFitWhenOversized: true,
+          maxAllowedWidth: null,
         };
       },
     }),
@@ -110,6 +113,9 @@ editor.commands.insertResizableImage({ src: 'https://picsum.photos/300/200', wid
 - `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.
 - `alignMenuButtonsHide: Record<string, boolean>` — hide specific buttons when `true` (supports `left`, `center`, `right`, `clear`, `preview`, `size50`, `size100`).
+- `fitToContainerSelector: string` — CSS selector used as width reference for the initial image fit (default: `.tiptap`).
+- `autoFitWhenOversized: boolean` — when `true`, oversized images inserted without explicit width are automatically set to `width: 100%` and `height: auto` (default: `true`).
+- `maxAllowedWidth: number | null` — maximum allowed width in pixels. If image width exceeds this value, it is forced to `width: 100%` and `height: auto`.
 
 Reference:
 - Defined in `resizable-image.js:387-394`

package/npm/index.js

@@ -9,13 +9,50 @@ function createHandle(direction) {
   return handle
 }
 
+function applyDimensionStyle(el, property, value) {
+  if (value == null || value === '') {
+    el.style.removeProperty(property)
+    return
+  }
+
+  if (typeof value === 'number') {
+    el.style[property] = value + 'px'
+    return
+  }
+
+  const raw = String(value).trim()
+  if (!raw) {
+    el.style.removeProperty(property)
+    return
+  }
+
+  if (/^\d+(\.\d+)?$/.test(raw)) {
+    el.style[property] = raw + 'px'
+    return
+  }
+
+  el.style[property] = raw
+}
+
+function toFiniteNumber(value) {
+  const n = Number(value)
+  return Number.isFinite(n) ? n : null
+}
+
+function isWidth100Percent(value) {
+  if (value == null) return false
+  return String(value).trim() === '100%'
+}
+
 class ResizableImageView {
   constructor(node, view, getPos, options) {
     this.node = node
     this.view = view
     this.getPos = getPos
     this.options = options || {}
-    this.aspect = (node.attrs.height && node.attrs.width) ? node.attrs.width / node.attrs.height : null
+    const initialWidth = toFiniteNumber(node.attrs.width)
+    const initialHeight = toFiniteNumber(node.attrs.height)
+    this.aspect = (initialWidth && initialHeight) ? initialWidth / initialHeight : null
 
     this.dom = document.createElement('span')
     this.dom.className = 'tiptap-izzy-resizable-image'
@@ -43,16 +80,17 @@ class ResizableImageView {
     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'
+    applyDimensionStyle(this.img, 'width', node.attrs.width)
     if (node.attrs.height) {
-      this.img.style.height = node.attrs.height + 'px'
+      applyDimensionStyle(this.img, 'height', node.attrs.height)
     } else if (this.options && this.options.height) {
-      this.img.style.height = this.options.height + 'px'
+      applyDimensionStyle(this.img, 'height', this.options.height)
     }
     this.img.addEventListener('load', () => {
       if (!this.aspect && this.img.naturalWidth && this.img.naturalHeight) {
         this.aspect = this.img.naturalWidth / this.img.naturalHeight
       }
+      this.applyInitialFitIfNeeded()
     })
     this.inner.appendChild(this.img)
 
@@ -160,6 +198,65 @@ class ResizableImageView {
 
   }
 
+  getEditorContentWidth() {
+    const selector = this.options?.fitToContainerSelector
+    const root = this.view?.dom || this.dom?.parentElement
+    if (!root) return null
+
+    if (selector) {
+      const bySelector = root.closest?.(selector) || root.querySelector?.(selector)
+      if (bySelector) {
+        const w = Math.round(bySelector.getBoundingClientRect().width)
+        if (w > 0) return w
+      }
+    }
+
+    const tiptap = this.dom?.closest?.('.tiptap') || root.closest?.('.tiptap') || root.querySelector?.('.tiptap')
+    if (tiptap) {
+      const w = Math.round(tiptap.getBoundingClientRect().width)
+      if (w > 0) return w
+    }
+
+    const rootWidth = Math.round(root.getBoundingClientRect().width)
+    return rootWidth > 0 ? rootWidth : null
+  }
+
+  applyInitialFitIfNeeded() {
+    if (!this.img) return
+
+    const maxAllowedWidth = toFiniteNumber(this.options?.maxAllowedWidth)
+    const shouldAutoFit = this.options?.autoFitWhenOversized !== false
+    if (!shouldAutoFit && maxAllowedWidth == null) return
+
+    const attrWidth = this.node?.attrs?.width
+    if (isWidth100Percent(attrWidth)) return
+
+    const containerWidth = this.getEditorContentWidth()
+    if (!containerWidth) return
+
+    let limitWidth = shouldAutoFit ? containerWidth : null
+    if (maxAllowedWidth != null) {
+      limitWidth = limitWidth == null ? maxAllowedWidth : Math.min(limitWidth, maxAllowedWidth)
+    }
+    if (limitWidth == null) return
+
+    const currentWidth = toFiniteNumber(attrWidth) || this.img.naturalWidth || Math.round(this.img.getBoundingClientRect().width)
+    if (!currentWidth) return
+
+    if (currentWidth <= limitWidth) return
+
+    applyDimensionStyle(this.img, 'width', '100%')
+    applyDimensionStyle(this.img, 'height', 'auto')
+
+    const pos = this.getPos()
+    const tr = this.view.state.tr.setNodeMarkup(pos, null, {
+      ...this.node.attrs,
+      width: '100%',
+      height: 'auto',
+    })
+    this.view.dispatch(tr)
+  }
+
   updateMenuPosition(pos) {
     this.menu.classList.remove('menu-above', 'menu-below')
     if (pos === 'above') {
@@ -203,6 +300,17 @@ class ResizableImageView {
     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 maxAllowedWidth = toFiniteNumber(this.options?.maxAllowedWidth)
+    if (maxAllowedWidth != null && targetW > maxAllowedWidth) {
+      const tr = this.view.state.tr.setNodeMarkup(pos, null, {
+        ...this.node.attrs,
+        width: '100%',
+        height: 'auto',
+      })
+      this.view.dispatch(tr)
+      return
+    }
+
     const tr = this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, width: targetW, height: targetH })
     this.view.dispatch(tr)
   }
@@ -259,8 +367,19 @@ class ResizableImageView {
     const finalRect = this.img.getBoundingClientRect()
     const newWidth = Math.round(finalRect.width)
     const newHeight = Math.round(finalRect.height)
+    const maxAllowedWidth = toFiniteNumber(this.options?.maxAllowedWidth)
     this.dragging = null
     const pos = this.getPos()
+    if (maxAllowedWidth != null && newWidth > maxAllowedWidth) {
+      const tr = this.view.state.tr.setNodeMarkup(pos, null, {
+        ...this.node.attrs,
+        width: '100%',
+        height: 'auto',
+      })
+      this.view.dispatch(tr)
+      return
+    }
+
     const tr = this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, width: newWidth, height: newHeight })
     this.view.dispatch(tr)
   }
@@ -270,10 +389,8 @@ class ResizableImageView {
     this.node = node
     if (node.attrs.src !== this.img.src) this.img.src = node.attrs.src
     this.img.alt = node.attrs.alt || ''
-    if (node.attrs.width) this.img.style.width = node.attrs.width + 'px'
-    else this.img.style.removeProperty('width')
-    if (node.attrs.height) this.img.style.height = node.attrs.height + 'px'
-    else this.img.style.removeProperty('height')
+    applyDimensionStyle(this.img, 'width', node.attrs.width)
+    applyDimensionStyle(this.img, 'height', node.attrs.height)
     this.applyAlignment(node.attrs.align)
     this.updateMenuPosition(node.attrs.alignMenuPosition != null ? node.attrs.alignMenuPosition : (this.options && this.options.alignMenuPosition != null ? this.options.alignMenuPosition : 'below'))
     this.btnLeft.innerHTML = (node.attrs.iconLeft != null ? node.attrs.iconLeft : (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.left : '⟸'))
@@ -281,7 +398,9 @@ class ResizableImageView {
     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 = (node.attrs.iconView != null ? node.attrs.iconView : (this.options && this.options.alignMenuIcons ? this.options.alignMenuIcons.preview : '🔍'))
-    this.aspect = (node.attrs.height && node.attrs.width) ? node.attrs.width / node.attrs.height : this.aspect
+    const widthNum = toFiniteNumber(node.attrs.width)
+    const heightNum = toFiniteNumber(node.attrs.height)
+    this.aspect = (widthNum && heightNum) ? widthNum / heightNum : this.aspect
     return true
   }
 
@@ -387,6 +506,9 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       alignMenuPosition: 'below',
       alignMenuIcons: { left: '⟸', center: '⇔', right: '⟹', clear: 'x', preview: '🔍' },
       alignMenuButtonsHide: {},
+      fitToContainerSelector: '.tiptap',
+      autoFitWhenOversized: true,
+      maxAllowedWidth: null,
     }
   },
 

package/package.json

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