update

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

@@ -6,6 +6,7 @@ import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
+import { before } from "lodash";
 
 export const Component = defineComponent({
   props: {
@@ -72,9 +73,9 @@ const EditorComp = defineComponent({
 
     let blurCanceler: any = null;
 
-    // onUnmounted(() => {
-    //   blurCanceler?.();
-    // });
+    onUnmounted(() => {
+      blurCanceler?.();
+    });
     const preHeight = ref<number>(0);
     const initHeight = () => {
       const dom: HTMLElement | null = document.querySelector(
@@ -96,18 +97,38 @@ const EditorComp = defineComponent({
       }
     };
     function isInCkBodyWrapper(dom: HTMLElement) {
+
+      const out = {in: false, stop: true};
+
       if (editorRefVal) {
         const in1 =
           editorRefVal.ui.view.toolbar.element?.contains(dom) ||
           editorRefVal.ui.view.editable.element?.contains(dom);
-        if (in1) return true;
+        if (in1)  {
+          out.in = true;
+          return out;
+        }
 
         const toolbarWrapper = document.querySelector("#text_toolbar");
         if (toolbarWrapper === dom || toolbarWrapper?.contains(dom)) {
-          return true;
+          out.in = true;
+          out.stop = false;
+          return out;
         }
       }
-      return false;
+
+      let n = 0;
+      let curr:any = dom;
+      do {
+        if (curr.id == "toptoolbar") {
+          out.in = true;
+          return out;
+        };
+        curr = curr.parentElement;
+        n +=1;
+        if (n > 10) break;
+      }while(curr)
+      return out;
     }
 
     function blurHandle() {
@@ -115,14 +136,17 @@ const EditorComp = defineComponent({
         const target = e.target as HTMLElement;
 
         if (!editorRefVal) return;
-
-        if (isInCkBodyWrapper(target)) {
-          e.stopPropagation();
+        const test = isInCkBodyWrapper(target)
+        if (test.in) {
+          if (test.stop) {
+            e.stopPropagation();
+          }
           return;
         }
         actions.submitUpdate();
-        // emit("lost");
+        emit("lost");
       }
+
       document.addEventListener("mousedown", blur, {
         capture: true,
       });
@@ -179,7 +203,7 @@ const EditorComp = defineComponent({
 
     onMounted(() => {
       initEditor();
-      // blurCanceler = blurHandle();
+      blurCanceler = blurHandle();
       nextTick(() => {
         initHeight();
       });

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -21,7 +21,7 @@ export default defineUI({
       return (
         <div>
           {
-            <div class={"p-10px h-50px flex items-center justify-between"}>
+            <div id="toptoolbar" class={"p-10px h-50px flex items-center justify-between"}>
               <div class="flex-grow flex items-center">
               {
                 toolsLeft.map((item) => {