From b63bb4e7f891f75ee2704ac831a1d844fe2038c8 Mon Sep 17 00:00:00 2001
From: bae-sh <hyeon1293@gmail.com>
Date: Sat, 18 May 2024 18:47:21 +0900
Subject: [PATCH] fix: dispatch when only click alignment

---
 lib/imageResize.ts | 20 +++++++++++++-------
 package.json       |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/imageResize.ts b/lib/imageResize.ts
index 7aef859..10ddade 100644
--- a/lib/imageResize.ts
+++ b/lib/imageResize.ts
@@ -26,6 +26,15 @@ export const ImageResize = Image.extend({
       const $img = document.createElement('img');
       const iconStyle = 'width: 24px; height: 24px; cursor: pointer;';
 
+      const dispatchNodeView = () => {
+        if (typeof getPos === 'function') {
+          const newAttrs = {
+            ...node.attrs,
+            style: `${$img.style.cssText}`,
+          };
+          view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, newAttrs));
+        }
+      };
       const paintPositionContoller = () => {
         const $postionController = document.createElement('div');
 
@@ -56,14 +65,17 @@ export const ImageResize = Image.extend({
         $leftController.addEventListener('click', () => {
           $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-start;');
           $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-start;`);
+          dispatchNodeView();
         });
         $centerController.addEventListener('click', () => {
           $positionContainer.setAttribute('style', 'display: flex; justify-content: center;');
           $img.setAttribute('style', `${$img.style.cssText} justify-content: center;`);
+          dispatchNodeView();
         });
         $rightController.addEventListener('click', () => {
           $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-end;');
           $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-end;`);
+          dispatchNodeView();
         });
 
         $postionController.appendChild($leftController);
@@ -148,13 +160,7 @@ export const ImageResize = Image.extend({
               if (isResizing) {
                 isResizing = false;
               }
-              if (typeof getPos === 'function') {
-                const newAttrs = {
-                  ...node.attrs,
-                  style: `${$img.style.cssText}`,
-                };
-                view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, newAttrs));
-              }
+              dispatchNodeView();
 
               document.removeEventListener('mousemove', onMouseMove);
               document.removeEventListener('mouseup', onMouseUp);
diff --git a/package.json b/package.json
index 241ebe0..fe3f60d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-resize-image",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "description": "A tiptap image resizing extension for React, Vue, Next, and VanillaJS. Additionally, it can align the image position.",
   "main": "dist/index.js",