update

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

@@ -1,4 +1,5 @@
 import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { Alignment } from "@ckeditor/ckeditor5-alignment";
 import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
 import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
@@ -7,11 +8,10 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { defineComponent, ref, watch, watchEffect, reactive } from "vue";
+import { defineComponent, onUnmounted, watchEffect } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
@@ -53,24 +53,44 @@ export const Component = defineComponent({
     };
 
     let editorInstance: InlineEditor;
-    let timeOut = ref();
-    const state = reactive({
-      textEditing: false,
-    });
 
     watchEffect(() => {
-      if (!state.textEditing) {
+      if (!store.textEditingState) {
         editorInstance?.setData(comp.value);
       }
     });
-    const toolbarClickListener = () => {
-      editorInstance.ui.view.toolbar.element?.addEventListener("click", () => {
-        if (timeOut.value) {
-          clearTimeout(timeOut.value);
-          timeOut.value = null;
+
+    let blurCanceler: any = null;
+    watchEffect(() => {
+      blurCanceler?.();
+      if (store.currCompId === props.compId) {
+        blurCanceler = blurHandle();
+      }
+    });
+
+    onUnmounted(() => {
+      blurCanceler?.();
+    });
+
+    function blurHandle() {
+      function blur(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+        if (
+          editorInstance.ui.view.toolbar.element?.contains(target) ||
+          comp.$el.contains(target)
+        ) {
+          return;
         }
+        store.setTextEditingState(false);
+        controls.historyCtrl.history.submit();
+      }
+      document.addEventListener("mousedown", blur, {
+        capture: true,
       });
-    };
+      return () => {
+        document.removeEventListener("mousedown", blur, { capture: true });
+      };
+    }
 
     return () => (
       <View
@@ -80,30 +100,19 @@ export const Component = defineComponent({
         <ckeditor
           class={textStyle}
           editor={InlineEditor}
-          onBlur={() => {
-            timeOut.value = setTimeout(() => {
-              state.textEditing = false;
-              store.setTextEditingState(false);
-              controls.historyCtrl.history.submit();
-            }, 500);
-          }}
           onFocus={() => {
             store.setTextEditingState(true);
-            state.textEditing = true;
           }}
           onInput={(e: any) => {
-            if (editorInstance) {
-              actions.setTextarea(
-                helper.findComp(props.compId) as DesignComp,
-                "value",
-                e
-              );
-            }
+            actions.setTextarea(
+              helper.findComp(props.compId) as DesignComp,
+              "value",
+              e
+            );
           }}
           onReady={(editor: InlineEditor) => {
             editorInstance = editor;
             editor.setData(comp.value);
-            toolbarClickListener();
             if (store.isPreview) {
               editor.enableReadOnlyMode("editor");
             }