text editor

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

@@ -57,6 +57,7 @@ export const TextColor = defineComponent({
     watch(
       () => props.value,
       () => {
+        console.log(props.value);
         emitFlagRef.value = false;
         picker.setColor(props.value);
       }
@@ -65,8 +66,9 @@ export const TextColor = defineComponent({
       initPicker();
     });
     onUnmounted(() => {
+      console.log("destroy");
       if (picker) {
-        picker.destroy();
+        picker.destroyAndRemove();
         picker = null;
       }
     });
@@ -78,7 +80,7 @@ export const TextColor = defineComponent({
           picker?.show();
         }}
       >
-        <div class={"color_picker"}></div>
+        <div class={"color_picker"} id="color_picker"></div>
       </div>
     );
   },

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

@@ -106,43 +106,18 @@ const EditorComp = defineComponent({
           out.in = true;
           return out;
         }
-
-        const toolbarWrapper = document.querySelector("#text_toolbar");
-        if (toolbarWrapper === dom || toolbarWrapper?.contains(dom)) {
-          out.in = true;
-          out.stop = false;
-          return out;
-        }
-        const dropToolbars = document.querySelectorAll(".editor_toolbar_drop");
-        dropToolbars.forEach((e) => {
-          if (e === dom || e?.contains(dom)) {
-            out.in = true;
-            out.stop = false;
-            return out;
-          }
-        });
-        const selectToolbars = document.querySelectorAll(
-          ".ant-select-dropdown"
-        );
-        selectToolbars.forEach((e) => {
-          if (e === dom || e?.contains(dom)) {
-            out.in = true;
-            out.stop = false;
-            return out;
-          }
-        });
-
-        const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
-        if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
-          out.in = true;
-          return out;
-        }
       }
 
       let n = 0;
       let curr: any = dom;
       do {
-        if (curr.id == "toptoolbar") {
+        if (
+          curr.id == "toptoolbar" ||
+          curr.class.contains(".pcr-app") ||
+          curr.class.contains(".editor_toolbar_drop") ||
+          curr.class.contains(".ant-select-dropdown") ||
+          curr.class.contains(".ck-body-wrapper")
+        ) {
           out.in = true;
           return out;
         }