tiptap-extension-resize-image - npm Package Compare versions

Comparing version 1.1.9 to 1.2.1

dist/index.js

@@ -18,3 +18,3 @@ 'use strict';
                 default: 'width: 100%; height: auto; cursor: pointer;',
-                parseHTML: element => {
+                parseHTML: (element) => {
                     const width = element.getAttribute('width');
@@ -107,6 +107,6 @@ return width
                 const $rightController = document.createElement('img');
-                const controllerMouseOver = e => {
+                const controllerMouseOver = (e) => {
                     e.target.style.opacity = 0.3;
                 };
-                const controllerMouseOut = e => {
+                const controllerMouseOut = (e) => {
                     e.target.style.opacity = 1;
@@ -155,12 +155,17 @@ };
                 return { dom: $img };
+            const isMobile = document.documentElement.clientWidth < 768;
+            const dotPosition = isMobile ? '-8px' : '-4px';
             const dotsPosition = [
-                'top: -4px; left: -4px; cursor: nwse-resize;',
-                'top: -4px; right: -4px; cursor: nesw-resize;',
-                'bottom: -4px; left: -4px; cursor: nesw-resize;',
-                'bottom: -4px; right: -4px; cursor: nwse-resize;',
+                `top: ${dotPosition}; left: ${dotPosition}; cursor: nwse-resize;`,
+                `top: ${dotPosition}; right: ${dotPosition}; cursor: nesw-resize;`,
+                `bottom: ${dotPosition}; left: ${dotPosition}; cursor: nesw-resize;`,
+                `bottom: ${dotPosition}; right: ${dotPosition}; cursor: nwse-resize;`,
             ];
             let isResizing = false;
             let startX, startWidth;
-            $container.addEventListener('click', () => {
+            $container.addEventListener('click', (e) => {
+                var _a;
                 //remove remaining dots and position controller
+                const isMobile = document.documentElement.clientWidth < 768;
+                isMobile && ((_a = document.querySelector('.ProseMirror-focused')) === null || _a === void 0 ? void 0 : _a.blur());
                 if ($container.childElementCount > 3) {
@@ -175,4 +180,4 @@ for (let i = 0; i < 5; i++) {
                     const $dot = document.createElement('div');
-                    $dot.setAttribute('style', `position: absolute; width: 9px; height: 9px; border: 1.5px solid #6C6C6C; border-radius: 50%; ${dotsPosition[index]}`);
-                    $dot.addEventListener('mousedown', e => {
+                    $dot.setAttribute('style', `position: absolute; width: ${isMobile ? 16 : 9}px; height: ${isMobile ? 16 : 9}px; border: 1.5px solid #6C6C6C; border-radius: 50%; ${dotsPosition[index]}`);
+                    $dot.addEventListener('mousedown', (e) => {
                         e.preventDefault();
@@ -201,2 +206,28 @@ isResizing = true;
                     });
+                    $dot.addEventListener('touchstart', (e) => {
+                        e.cancelable && e.preventDefault();
+                        isResizing = true;
+                        startX = e.touches[0].clientX;
+                        startWidth = $container.offsetWidth;
+                        const onTouchMove = (e) => {
+                            if (!isResizing)
+                                return;
+                            const deltaX = index % 2 === 0
+                                ? -(e.touches[0].clientX - startX)
+                                : e.touches[0].clientX - startX;
+                            const newWidth = startWidth + deltaX;
+                            $container.style.width = newWidth + 'px';
+                            $img.style.width = newWidth + 'px';
+                        };
+                        const onTouchEnd = () => {
+                            if (isResizing) {
+                                isResizing = false;
+                            }
+                            dispatchNodeView();
+                            document.removeEventListener('touchmove', onTouchMove);
+                            document.removeEventListener('touchend', onTouchEnd);
+                        };
+                        document.addEventListener('touchmove', onTouchMove);
+                        document.addEventListener('touchend', onTouchEnd);
+                    }, { passive: false });
                     $container.appendChild($dot);
@@ -203,0 +234,0 @@ });

esm/index.js

@@ -14,3 +14,3 @@ import Image from '@tiptap/extension-image';
                 default: 'width: 100%; height: auto; cursor: pointer;',
-                parseHTML: element => {
+                parseHTML: (element) => {
                     const width = element.getAttribute('width');
@@ -103,6 +103,6 @@ return width
                 const $rightController = document.createElement('img');
-                const controllerMouseOver = e => {
+                const controllerMouseOver = (e) => {
                     e.target.style.opacity = 0.3;
                 };
-                const controllerMouseOut = e => {
+                const controllerMouseOut = (e) => {
                     e.target.style.opacity = 1;
@@ -151,12 +151,17 @@ };
                 return { dom: $img };
+            const isMobile = document.documentElement.clientWidth < 768;
+            const dotPosition = isMobile ? '-8px' : '-4px';
             const dotsPosition = [
-                'top: -4px; left: -4px; cursor: nwse-resize;',
-                'top: -4px; right: -4px; cursor: nesw-resize;',
-                'bottom: -4px; left: -4px; cursor: nesw-resize;',
-                'bottom: -4px; right: -4px; cursor: nwse-resize;',
+                `top: ${dotPosition}; left: ${dotPosition}; cursor: nwse-resize;`,
+                `top: ${dotPosition}; right: ${dotPosition}; cursor: nesw-resize;`,
+                `bottom: ${dotPosition}; left: ${dotPosition}; cursor: nesw-resize;`,
+                `bottom: ${dotPosition}; right: ${dotPosition}; cursor: nwse-resize;`,
             ];
             let isResizing = false;
             let startX, startWidth;
-            $container.addEventListener('click', () => {
+            $container.addEventListener('click', (e) => {
+                var _a;
                 //remove remaining dots and position controller
+                const isMobile = document.documentElement.clientWidth < 768;
+                isMobile && ((_a = document.querySelector('.ProseMirror-focused')) === null || _a === void 0 ? void 0 : _a.blur());
                 if ($container.childElementCount > 3) {
@@ -171,4 +176,4 @@ for (let i = 0; i < 5; i++) {
                     const $dot = document.createElement('div');
-                    $dot.setAttribute('style', `position: absolute; width: 9px; height: 9px; border: 1.5px solid #6C6C6C; border-radius: 50%; ${dotsPosition[index]}`);
-                    $dot.addEventListener('mousedown', e => {
+                    $dot.setAttribute('style', `position: absolute; width: ${isMobile ? 16 : 9}px; height: ${isMobile ? 16 : 9}px; border: 1.5px solid #6C6C6C; border-radius: 50%; ${dotsPosition[index]}`);
+                    $dot.addEventListener('mousedown', (e) => {
                         e.preventDefault();
@@ -197,2 +202,28 @@ isResizing = true;
                     });
+                    $dot.addEventListener('touchstart', (e) => {
+                        e.cancelable && e.preventDefault();
+                        isResizing = true;
+                        startX = e.touches[0].clientX;
+                        startWidth = $container.offsetWidth;
+                        const onTouchMove = (e) => {
+                            if (!isResizing)
+                                return;
+                            const deltaX = index % 2 === 0
+                                ? -(e.touches[0].clientX - startX)
+                                : e.touches[0].clientX - startX;
+                            const newWidth = startWidth + deltaX;
+                            $container.style.width = newWidth + 'px';
+                            $img.style.width = newWidth + 'px';
+                        };
+                        const onTouchEnd = () => {
+                            if (isResizing) {
+                                isResizing = false;
+                            }
+                            dispatchNodeView();
+                            document.removeEventListener('touchmove', onTouchMove);
+                            document.removeEventListener('touchend', onTouchEnd);
+                        };
+                        document.addEventListener('touchmove', onTouchMove);
+                        document.addEventListener('touchend', onTouchEnd);
+                    }, { passive: false });
                     $container.appendChild($dot);
@@ -199,0 +230,0 @@ });

package.json

 {
   "name": "tiptap-extension-resize-image",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "type": "module",
@@ -53,2 +53,3 @@ "description": "A tiptap image resizing extension for React, Vue, Next, and VanillaJS. Additionally, it can align the image position.",
     "@types/node": "^20.10.4",
+    "prettier": "^3.3.3",
     "rollup": "^4.8.0",
@@ -55,0 +56,0 @@ "tslib": "^2.6.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68103

increased by19.15%

Number of package files

10

increased by11.11%

Lines of code

503

increased by14.06%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes