Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -1,27 +1,23 @@
 import { useEditor } from "@/modules/editor";
 import { Alignment } from "@ckeditor/ckeditor5-alignment";
-import { Bold, Italic,Underline,Strikethrough } from "@ckeditor/ckeditor5-basic-styles";
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Underline,
+} from "@ckeditor/ckeditor5-basic-styles";
 import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
 import { Essentials } from "@ckeditor/ckeditor5-essentials";
 import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
-import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import {
-  defineComponent,
-  onUnmounted,
-  watch,
-  watchEffect,
-  ref,
-  reactive,
-  onMounted,
-} from "vue";
+import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
+import { nextTick } from "process";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
-import { nextTick } from "process";
-import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
 
 function GetConfig() {
   const fontSizeOptions = [];
@@ -76,7 +72,7 @@ function GetConfig() {
         "bold",
         "italic",
         "underline",
-        "strikethrough",       
+        "strikethrough",
         "|",
         "alignment",
         // "|",
@@ -129,7 +125,10 @@ export const Component = defineComponent({
             }}
           />
         ) : (
-          <div innerHTML={comp.value} class={[store.isEditMode && readOnlyText]} />
+          <div
+            innerHTML={comp.value}
+            class={[textStyle, store.isEditMode && `pointer-events-none`]}
+          />
         )}
       </View>
     );
@@ -156,18 +155,18 @@ const EditorComp = defineComponent({
       blurCanceler?.();
     });
 
-    function isInCkBodyWrapper(dom:HTMLElement) {
+    function isInCkBodyWrapper(dom: HTMLElement) {
       if (editorInstance.value) {
-        const in1 = editorInstance.value.ui.view.toolbar.element?.contains(dom) || editorInstance.value.ui.view.editable.element?.contains(dom)
+        const in1 =
+          editorInstance.value.ui.view.toolbar.element?.contains(dom) ||
+          editorInstance.value.ui.view.editable.element?.contains(dom);
         if (in1) return true;
+
+        const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
+        if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
+          return true;
+        }
       }
-      let c:any = dom;
-      let deep = 0;
-      do {
-        if (deep > 10 ) return false; 
-        if (c.classList.contains("ck-body-wrapper")) return true;
-        c = c.parentElement; 
-      } while(c)
       return false;
     }
 
@@ -176,7 +175,7 @@ const EditorComp = defineComponent({
         const target = e.target as HTMLElement;
         if (!editorInstance.value) return;
 
-        if( isInCkBodyWrapper(target) ) {
+        if (isInCkBodyWrapper(target)) {
           e.stopPropagation();
           return;
         }
@@ -238,16 +237,12 @@ const EditorComp = defineComponent({
   },
 });
 
-const readOnlyText = css`
-  pointer-events: none;
-  word-break: break-all;
-`;
-
 const textStyle = css`
   font-size: 12px;
   width: 100%;
   color: #666;
   word-break: break-all;
+
   p {
     margin: 0;
   }
@@ -255,6 +250,7 @@ const textStyle = css`
   .ck.ck-editor__editable_inline {
     cursor: text;
     overflow: hidden;
+    border: none !important;
 
     > :last-child,
     > :first-child {