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

package/README.md

@@ -4,6 +4,8 @@ Resizable inline image node for TipTap v2 with eight resize handles, optional al
 
 Demo: https://startinn.github.io/TipTap-Extension-Izzy-Resizable-Image/
 
+Download: https://www.npmjs.com/package/tiptap-extension-izzy-resizable-image
+
 ## Features
 
 - Inline resizable image with 8 handles (nw, n, ne, e, se, s, sw, w)

package/npm/index.js

@@ -39,11 +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.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'
+    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) {
@@ -94,7 +94,7 @@ class ResizableImageView {
     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.btnView.innerHTML = (node.attrs.iconView != null ? node.attrs.iconView : (this.options.alignMenuIcons?.preview ?? '🔍'))
     this.btnSize50.textContent = '50%'
     this.btnSize100.textContent = '100%'
 
@@ -280,8 +280,7 @@ 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 ?? '🔍'
+    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
     return true
   }
@@ -358,7 +357,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
       height: { default: null },
       id: { default: null },
       class: { default: null },
-      align: { default: 'left' },
+      align: { default: null },
       showAlignMenu: { default: null },
       alignMenuPosition: { default: null },
       iconLeft: { default: null },
@@ -394,7 +393,7 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
   addCommands() {
     return {
       insertResizableImage:
-        ({ src, alt, title, width, height }) => ({ commands }) => {
+        ({ src, alt, title, width, height, id, class: className, iconView }) => ({ commands }) => {
           return commands.insertContent({
             type: this.name,
             attrs: {
@@ -403,13 +402,15 @@ export const TiptapIzzyExtensionResizableImage = Node.create({
               title,
               width,
               height: height != null ? height : this.options.height,
+              id,
+              class: className,
               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,
+              iconView: iconView != null ? iconView : this.options.alignMenuIcons?.preview,
             },
           })
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-izzy-resizable-image",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Resizable image NodeView for TipTap v2 with alignment menu and defaults",
   "license": "MIT",
   "type": "module",
@@ -8,7 +8,13 @@
   "exports": {
     ".": "./npm/index.js"
   },
-  "homepage": "https://bernanr.github.io/TipTap-Extension-Izzy-Resizable-Image",
+  "homepage": "https://startinn.github.io/TipTap-Extension-Izzy-Resizable-Image/",
+  "bugs": {
+    "url": "https://github.com/startinn/TipTap-Extension-Izzy-Resizable-Image/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "files": [
     "npm/index.js",
     "README.md"