feat(rich-text-editor): [rich-text-editor] add image drag adjustment (o…

…pentiny#1504) * feat(rich-text-editor): [rich-text-editor] add image drag adjustment to rich-text-editor * fix(rich-text-editor/image-view): change script to uniform writing rules * fix(rich-text-editor/image-view): initialize image size to 400 and optimize insertion of images
jxhhdx · Mar 30, 2024 · e419936 · e419936
1 parent ec94076
commit e419936
Show file tree

Hide file tree

Showing 5 changed files with 380 additions and 15 deletions.
diff --git a/packages/theme-saas/src/rich-text-editor/index.less b/packages/theme-saas/src/rich-text-editor/index.less
@@ -633,4 +633,59 @@
       border-radius: 8px;
     }
   }
+
+  .tiny-image {
+    &__node__view {
+      display: inline-block;
+      margin: 0 5px;
+    }
+
+    &__view {
+      position: relative;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      display: inline-block;
+      max-width: 100%;
+    }
+
+    &__handle {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: var(--ti-base-color-brand-7);
+      position: absolute;
+    }
+
+    &__resize {
+      border: 2px solid var(--ti-base-color-brand-7);
+      left: 0;
+      position: absolute;
+      top: 0;
+      z-index: 1;
+
+      &__tl {
+        left: -5px;
+        top: -5px;
+        cursor: nwse-resize;
+      }
+
+      &__tr {
+        right: -5px;
+        top: -5px;
+        cursor: nesw-resize;
+      }
+
+      &__bl {
+        left: -5px;
+        bottom: -5px;
+        cursor: nesw-resize;
+      }
+
+      &__br {
+        right: -5px;
+        bottom: -5px;
+        cursor: nwse-resize;
+      }
+    }
+  }
 }
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
@@ -205,8 +205,8 @@
         }
 
         .isActive {
-          background-color: rgba(32, 122, 183, 0.5);
-          border-color: rgba(32, 122, 183, 0.5);
+          background-color: rgb(32 122 183 / 50%);
+          border-color: rgb(32 122 183 / 50%);
         }
       }
     }
@@ -274,9 +274,8 @@
 
     input {
       position: absolute;
-      width: 100%;
       height: 100%;
-      left: 0px;
+      left: 0;
       opacity: 0;
       width: 0;
     }
@@ -286,15 +285,15 @@
     .line-height-button {
       position: relative;
 
-    .line-height-options {
-      position: absolute;
-      padding: 0.15rem;
-      background-color: var(--ti-rich-text-editor-options-bg-color);
-      left: 0;
-      display: none;
-      border-radius: var(--ti-rich-text-editor-options-border-radius);
-      box-shadow: var(--ti-rich-text-editor-options-box-shadow);
-      z-index: 999;
+      .line-height-options {
+        position: absolute;
+        padding: 0.15rem;
+        background-color: var(--ti-rich-text-editor-options-bg-color);
+        left: 0;
+        display: none;
+        border-radius: var(--ti-rich-text-editor-options-border-radius);
+        box-shadow: var(--ti-rich-text-editor-options-box-shadow);
+        z-index: 999;
 
         button {
           color: black;
@@ -419,7 +418,6 @@
 
     img {
       max-width: 100%;
-      height: auto;
     }
 
     blockquote {
@@ -636,4 +634,59 @@
       border-radius: 8px;
     }
   }
+
+  .tiny-image {
+    &__node__view {
+      display: inline-block;
+      margin: 0 5px;
+    }
+
+    &__view {
+      position: relative;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      display: inline-block;
+      max-width: 100%;
+    }
+
+    &__handle {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      background: var(--ti-base-color-brand-7);
+      position: absolute;
+    }
+
+    &__resize {
+      border: 2px solid var(--ti-base-color-brand-7);
+      left: 0;
+      position: absolute;
+      top: 0;
+      z-index: 1;
+
+      &__tl {
+        left: -5px;
+        top: -5px;
+        cursor: nwse-resize;
+      }
+
+      &__tr {
+        right: -5px;
+        top: -5px;
+        cursor: nesw-resize;
+      }
+
+      &__bl {
+        left: -5px;
+        bottom: -5px;
+        cursor: nesw-resize;
+      }
+
+      &__br {
+        right: -5px;
+        bottom: -5px;
+        cursor: nwse-resize;
+      }
+    }
+  }
 }
diff --git a/packages/vue/src/rich-text-editor/src/extensions/image.ts b/packages/vue/src/rich-text-editor/src/extensions/image.ts
@@ -0,0 +1,55 @@
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import TiptapImage from '@tiptap/extension-image'
+import ImageView from '../image-view.vue'
+
+const Image = TiptapImage.extend({
+  inline() {
+    return true
+  },
+  group() {
+    return 'inline'
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: 500,
+        parseHTML(element) {
+          const width = element.style.width || element.getAttribute('width')
+          return width
+        },
+        renderHTML: (attributes) => {
+          const { width } = attributes
+          return {
+            width
+          }
+        }
+      },
+      height: {
+        default: 500,
+        parseHTML(element) {
+          const height = element.style.height || element.getAttribute('height')
+          return height
+        },
+        renderHTML: (attributes) => {
+          const { height } = attributes
+          return {
+            height
+          }
+        }
+      }
+    }
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(ImageView)
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]'
+      }
+    ]
+  }
+})
+
+export default Image