fix: Resolve image align bug on view mode by modfying style

bae-sh · Jun 3, 2024 · cef05e6 · cef05e6
2 parents 8f4a9e7 + fe2cac3
commit cef05e6
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/lib/imageResize.ts b/lib/imageResize.ts
@@ -87,7 +87,7 @@ export const ImageResize = Image.extend({
         options: { editable },
       } = editor;
       const { style } = node.attrs;
-      const $positionContainer = document.createElement('div');
+      const $wrapper = document.createElement('div');
       const $container = document.createElement('div');
       const $img = document.createElement('img');
       const iconStyle = 'width: 24px; height: 24px; cursor: pointer;';
@@ -108,39 +108,53 @@ export const ImageResize = Image.extend({
         const $centerController = document.createElement('img');
         const $rightController = document.createElement('img');
 
+        const controllerMouseOver = e => {
+          e.target.style.opacity = 0.3;
+        };
+
+        const controllerMouseOut = e => {
+          e.target.style.opacity = 1;
+        };
+
         $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);
+        $leftController.addEventListener('mouseover', controllerMouseOver);
+        $leftController.addEventListener('mouseout', controllerMouseOut);
+
         $centerController.setAttribute(
           'src',
           'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_center/default/20px.svg',
         );
         $centerController.setAttribute('style', iconStyle);
+        $centerController.addEventListener('mouseover', controllerMouseOver);
+        $centerController.addEventListener('mouseout', controllerMouseOut);
+
         $rightController.setAttribute(
           'src',
           'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/format_align_right/default/20px.svg',
         );
         $rightController.setAttribute('style', iconStyle);
+        $rightController.addEventListener('mouseover', controllerMouseOver);
+        $rightController.addEventListener('mouseout', controllerMouseOut);
 
         $leftController.addEventListener('click', () => {
-          $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-start;');
-          $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-start;`);
+          $img.setAttribute('style', `${$img.style.cssText} margin: 0 auto 0 0;`);
           dispatchNodeView();
         });
         $centerController.addEventListener('click', () => {
-          $positionContainer.setAttribute('style', 'display: flex; justify-content: center;');
-          $img.setAttribute('style', `${$img.style.cssText} justify-content: center;`);
+          $img.setAttribute('style', `${$img.style.cssText} margin: 0 auto;`);
           dispatchNodeView();
         });
         $rightController.addEventListener('click', () => {
-          $positionContainer.setAttribute('style', 'display: flex; justify-content: flex-end;');
-          $img.setAttribute('style', `${$img.style.cssText} justify-content: flex-end;`);
+          $img.setAttribute('style', `${$img.style.cssText} margin: 0 0 0 auto;`);
           dispatchNodeView();
         });
 
@@ -151,17 +165,8 @@ export const ImageResize = Image.extend({
         $container.appendChild($postionController);
       };
 
-      // add position style and className
-      $positionContainer.appendChild($container);
-      const justifyContent = style.match(/justify-content: (.*?);/);
-      $positionContainer.setAttribute(
-        'style',
-        `display: flex; ${justifyContent ? justifyContent[0] : ''}`,
-      );
-
-      if (justifyContent) {
-        $img.className = `tiptap-image-${justifyContent[1]}`;
-      }
+      $wrapper.setAttribute('style', `display: flex;`);
+      $wrapper.appendChild($container);
 
       $container.setAttribute('style', `${style}`);
       $container.appendChild($img);
@@ -262,7 +267,7 @@ export const ImageResize = Image.extend({
       });
 
       return {
-        dom: $positionContainer,
+        dom: $wrapper,
       };
     };
   },