update

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

@@ -7,12 +7,12 @@ 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 { reactive } from "vue";
+import { defineComponent, reactive } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { createUIComp } from "../../defines/createUIComp";
+import { View } from "../View";
 
-export const Component = createUIComp({
+export const Component = defineComponent({
   props: {
     compId: string(),
     value: string().def(""),
@@ -54,32 +54,43 @@ export const Component = createUIComp({
     };
 
     const state = reactive({
-      focus: false,
+      editing: false,
     });
 
+    let editorInstance: InlineEditor;
+
     return () => (
-      <div class={["w-1/1 h-1/1", state.focus && "drag-disable"]}>
+      <View
+        class={[state.editing && "drag-disable"]}
+        compId={props.compId}
+        onDblclick={() => {
+          if (store.isEditMode) {
+            state.editing = true;
+            editorInstance.disableReadOnlyMode("editor");
+            editorInstance.focus();
+          }
+        }}
+      >
         <ckeditor
           class={textStyle}
           editor={InlineEditor}
           onBlur={(e: any, editor: InlineEditor) => {
-            state.focus = false;
+            state.editing = false;
+            editor.enableReadOnlyMode("editor");
             if (comp) {
               comp.value = editor.getData();
             } else {
               emit("update:value", editor.getData());
             }
           }}
-          onFocus={() => (state.focus = true)}
           onReady={(editor: InlineEditor) => {
+            editorInstance = editor;
             editor.setData(comp?.value || props.value);
-            if (!store.isEditMode) {
-              editor.enableReadOnlyMode("editor");
-            }
+            editor.enableReadOnlyMode("editor");
           }}
           config={config}
         />
-      </div>
+      </View>
     );
   },
 });