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

Comparing version 1.0.4 to 1.0.5

dist/index.js

@@ -25,4 +25,39 @@ 'use strict';
             const { src, alt, style } = node.attrs;
+            const $positionContainer = document.createElement('div');
             const $container = document.createElement('div');
             const $img = document.createElement('img');
+            const iconStyle = 'width: 24px; height: 24px; cursor: pointer;';
+            const paintPositionContoller = () => {
+                const $postionController = document.createElement('div');
+                const $leftController = document.createElement('img');
+                const $centerController = document.createElement('img');
+                const $rightController = document.createElement('img');
+                $postionController.setAttribute('style', 'position: absolute; top: 0%; left: 50%; width: 100px; height: 25px; z-index: 999; background-color: rgba(255, 255, 255, 0.7); border-radius: 4px; border: 2px solid #6C6C6C; cursor: pointer; transform: translate(-50%, -50%); display: flex; justify-content: space-between; align-items: center; padding: 0 10px;');
+                $leftController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_left/default/20px.svg');
+                $leftController.setAttribute('style', iconStyle);
+                $centerController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_center/default/20px.svg');
+                $centerController.setAttribute('style', iconStyle);
+                $rightController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_right/default/20px.svg');
+                $rightController.setAttribute('style', iconStyle);
+                $leftController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-start;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-start;`);
+                });
+                $centerController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: center;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: center;`);
+                });
+                $rightController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-end;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-end;`);
+                });
+                $postionController.appendChild($leftController);
+                $postionController.appendChild($centerController);
+                $postionController.appendChild($rightController);
+                $container.appendChild($postionController);
+            };
+            $positionContainer.appendChild($container);
+            const justifyContent = style.match(/justify-content: (.*?);/);
+            $positionContainer.setAttribute('style', `display: flex; ${justifyContent === null || justifyContent === void 0 ? void 0 : justifyContent[0]}`);
+            $container.setAttribute('style', `${style}`);
             $container.appendChild($img);
@@ -44,2 +79,9 @@ $img.setAttribute('src', src);
             $container.addEventListener('click', () => {
+                //remove remaining dots and position controller
+                if ($container.childElementCount > 3) {
+                    for (let i = 0; i < 5; i++) {
+                        $container.removeChild($container.lastChild);
+                    }
+                }
+                paintPositionContoller();
                 $container.setAttribute('style', `position: relative; border: 1px dashed #6C6C6C; ${style} cursor: pointer;`);
@@ -58,3 +100,3 @@ Array.from({ length: 4 }, (_, index) => {
                                 return;
-                            const deltaX = e.clientX - startX;
+                            const deltaX = index % 2 === 0 ? -(e.clientX - startX) : e.clientX - startX;
                             const aspectRatio = startWidth / startHeight;
@@ -86,6 +128,10 @@ const newWidth = startWidth + deltaX;
             document.addEventListener('click', (e) => {
-                if (!$container.contains(e.target)) {
-                    $container.removeAttribute('style');
-                    if ($container.childElementCount > 2) {
-                        for (let i = 0; i < 4; i++) {
+                const $target = e.target;
+                const isClickInside = $container.contains($target) || $target.style.cssText === iconStyle;
+                if (!isClickInside) {
+                    const containerStyle = $container.getAttribute('style');
+                    const newStyle = containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.replace('border: 1px dashed #6C6C6C;', '');
+                    $container.setAttribute('style', newStyle);
+                    if ($container.childElementCount > 3) {
+                        for (let i = 0; i < 5; i++) {
                             $container.removeChild($container.lastChild);
@@ -97,3 +143,3 @@ }
             return {
-                dom: $container,
+                dom: $positionContainer,
             };
@@ -100,0 +146,0 @@ };

esm/index.js

@@ -21,4 +21,39 @@ import Image from '@tiptap/extension-image';
             const { src, alt, style } = node.attrs;
+            const $positionContainer = document.createElement('div');
             const $container = document.createElement('div');
             const $img = document.createElement('img');
+            const iconStyle = 'width: 24px; height: 24px; cursor: pointer;';
+            const paintPositionContoller = () => {
+                const $postionController = document.createElement('div');
+                const $leftController = document.createElement('img');
+                const $centerController = document.createElement('img');
+                const $rightController = document.createElement('img');
+                $postionController.setAttribute('style', 'position: absolute; top: 0%; left: 50%; width: 100px; height: 25px; z-index: 999; background-color: rgba(255, 255, 255, 0.7); border-radius: 4px; border: 2px solid #6C6C6C; cursor: pointer; transform: translate(-50%, -50%); display: flex; justify-content: space-between; align-items: center; padding: 0 10px;');
+                $leftController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_left/default/20px.svg');
+                $leftController.setAttribute('style', iconStyle);
+                $centerController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_center/default/20px.svg');
+                $centerController.setAttribute('style', iconStyle);
+                $rightController.setAttribute('src', 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_right/default/20px.svg');
+                $rightController.setAttribute('style', iconStyle);
+                $leftController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-start;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-start;`);
+                });
+                $centerController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: center;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: center;`);
+                });
+                $rightController.addEventListener('click', () => {
+                    $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-end;');
+                    $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-end;`);
+                });
+                $postionController.appendChild($leftController);
+                $postionController.appendChild($centerController);
+                $postionController.appendChild($rightController);
+                $container.appendChild($postionController);
+            };
+            $positionContainer.appendChild($container);
+            const justifyContent = style.match(/justify-content: (.*?);/);
+            $positionContainer.setAttribute('style', `display: flex; ${justifyContent === null || justifyContent === void 0 ? void 0 : justifyContent[0]}`);
+            $container.setAttribute('style', `${style}`);
             $container.appendChild($img);
@@ -40,2 +75,9 @@ $img.setAttribute('src', src);
             $container.addEventListener('click', () => {
+                //remove remaining dots and position controller
+                if ($container.childElementCount > 3) {
+                    for (let i = 0; i < 5; i++) {
+                        $container.removeChild($container.lastChild);
+                    }
+                }
+                paintPositionContoller();
                 $container.setAttribute('style', `position: relative; border: 1px dashed #6C6C6C; ${style} cursor: pointer;`);
@@ -54,3 +96,3 @@ Array.from({ length: 4 }, (_, index) => {
                                 return;
-                            const deltaX = e.clientX - startX;
+                            const deltaX = index % 2 === 0 ? -(e.clientX - startX) : e.clientX - startX;
                             const aspectRatio = startWidth / startHeight;
@@ -82,6 +124,10 @@ const newWidth = startWidth + deltaX;
             document.addEventListener('click', (e) => {
-                if (!$container.contains(e.target)) {
-                    $container.removeAttribute('style');
-                    if ($container.childElementCount > 2) {
-                        for (let i = 0; i < 4; i++) {
+                const $target = e.target;
+                const isClickInside = $container.contains($target) || $target.style.cssText === iconStyle;
+                if (!isClickInside) {
+                    const containerStyle = $container.getAttribute('style');
+                    const newStyle = containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.replace('border: 1px dashed #6C6C6C;', '');
+                    $container.setAttribute('style', newStyle);
+                    if ($container.childElementCount > 3) {
+                        for (let i = 0; i < 5; i++) {
                             $container.removeChild($container.lastChild);
@@ -93,3 +139,3 @@ }
             return {
-                dom: $container,
+                dom: $positionContainer,
             };
@@ -96,0 +142,0 @@ };

package.json

 {
   "name": "tiptap-extension-resize-image",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "A tiptap image resizing extension for React, Vue, Next, and VanillaJS",

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

47839

increased by71.73%

Lines of code

289

increased by48.21%

No dependency changes