update

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

@@ -7,11 +7,55 @@ 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, onUnmounted, watch, watchEffect , ref} from "vue";
+import { defineComponent, onUnmounted, watch, watchEffect , ref, reactive, onMounted} 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=[];
+  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
+  for (const s of list) {
+    fontSizeOptions.push({title: s+"", model: s + "px"})
+  }
+  const config = {
+    // updateSourceElementOnDestroy: true,
+    language: "zh-cn",
+    plugins: [
+      Essentials,
+      Bold,
+      Italic,
+      Link,
+      Paragraph,
+      FontColor,
+      FontSize,
+      FontFamily,
+      Alignment,
+    ],
+    fontSize: {
+      options: fontSizeOptions,
+      supportAllValues:true,
+    },
+    toolbar: {
+      items: [
+        // "undo",
+        // "redo",
+        // "|",
+        "fontColor",
+        "fontsize",
+        "bold",
+        "italic",
+        "|",
+        "alignment",
+        // "|",
+        // "link",
+      ],
+    },
+  };
+  return config;
+}
 
 export const Component = defineComponent({
   props: {
@@ -19,81 +63,77 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, actions , helper, controls} = useEditor();
+    const { store, actions} = useEditor();
 
-    const fontSizeOptions=[];
-    const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
-    for (const s of list) {
-      fontSizeOptions.push({title: s+"", model: s + "px"})
+    const state = reactive({
+       editableId: ""
+    })
+    
+    if (store.isEditMode ) {
+        actions.on("textFocus", function(compId, focus){
+            if (compId != props.compId) return;
+            if (focus) {
+              state.editableId = "" + Date.now();
+              return;
+            }
+            state.editableId = "";
+        })
     }
-    const config = {
-      language: "zh-cn",
-      plugins: [
-        Essentials,
-        Bold,
-        Italic,
-        Link,
-        Paragraph,
-        FontColor,
-        FontSize,
-        FontFamily,
-        Alignment,
-      ],
-      fontSize: {
-        options: fontSizeOptions,
-        supportAllValues:true,
-      },
-      toolbar: {
-        items: [
-          // "undo",
-          // "redo",
-          // "|",
-          "fontColor",
-          "fontsize",
-          "bold",
-          "italic",
-          "|",
-          "alignment",
-          // "|",
-          // "link",
-        ],
-      },
-    };
-
-    let editorInstance: InlineEditor;
 
-    watch(
-      () => comp.value,
-      () => {
-        if (!store.textEditingState) {
-          editorInstance?.setData(comp.value);
-        }
+    return () => (
+      <View
+        class={[textStyle]}
+        compId={props.compId}
+        onDblclick={()=>{
+           if (store.isEditMode) {
+              state.editableId = "" + Date.now();
+           }
+        }}
+      >
+      {
+          state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
+            state.editableId = "";
+          }} /> 
+          : <div innerHTML={comp.value} />
       }
+      </View>
     );
+  },
+});
 
-    let blurCanceler: any = null;
-    watchEffect(() => {
-      blurCanceler?.();
-      if (store.currCompId === props.compId) {
-        blurCanceler = blurHandle();
-      }
-    });
+const EditorComp = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  emits: ["lost"],
 
-    onUnmounted(() => {
-      blurCanceler?.();
+  setup(props, {emit}) {
+    const inputRef = ref();
+    let editorInstance = ref<InlineEditor>();
+    const comp = useCompData(props.compId);
+    const { store, actions , helper, controls} = useEditor();
+
+   let blurCanceler:any= null;
+    onMounted(()=>{
+      blurCanceler = blurHandle();
     });
+    onUnmounted(()=>{
+      blurCanceler?.();
+    })
 
     function blurHandle() {
       function blur(e: MouseEvent) {
         const target = e.target as HTMLElement;
+        if ( !editorInstance.value) return;
         if (
-          editorInstance.ui.view.toolbar.element?.contains(target) ||
-          editorInstance.ui.view.editable.element?.contains(target)
+          editorInstance.value.ui.view.toolbar.element?.contains(target) ||
+          editorInstance.value.ui.view.editable.element?.contains(target)
         ) {
+          e.stopPropagation();
           return;
         }
-        store.setTextEditingState(false);
         actions.submitUpdate();
+        emit("lost");
       }
       document.addEventListener("mousedown", blur, {
         capture: true,
@@ -102,53 +142,38 @@ export const Component = defineComponent({
         document.removeEventListener("mousedown", blur, { capture: true });
       };
     }
-    const inputRef = ref<any>();
-    if (store.isEditMode) {
-      actions.on("textFocus", (compId, focus:boolean)=>{
-        if (compId != props.compId) return;
 
-        if (focus) {
-          editorInstance.focus();
-          return;
-        } 
-      })  
-    }
-    
-    return () => (
-      <View
-        class={[textStyle, store.currCompId === props.compId && "drag-disable"]}
-        compId={props.compId}
-      >
-        <ckeditor
+    return ()=><ckeditor
           class={textStyle}
           ref={inputRef}
           editor={InlineEditor}
-          onFocus={() => {
-            console.log("on  onn focus !!!")
-            store.setTextEditingState(true);
-          }}
           onInput={(value: any) => {
-            if (editorInstance && comp.value !== value) {
-              // actions.updateCompData(comp, "value", value);
+            if (editorInstance.value && comp.value !== value) {
+              actions.updateCompData(comp, "value", value);
               nextTick(()=>{
                 actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, helper.pxToDesignSize(inputRef.value?.$el.clientHeight)])
                 controls.selectCtrl.upgateGizmoStyle();
+                helper.extendStreamCard(store.currStreamCardId);
               })
             }
           }}
           onReady={(editor: InlineEditor) => {
-            editorInstance = editor;
+            editorInstance.value = editor;
+            console.log("editor")
             editor.setData(comp.value);
-            if (store.isPreview) {
-              editor.enableReadOnlyMode("editor");
-            }
+            editor.focus();
+            const range = document.createRange();
+            range.selectNodeContents(inputRef.value.$el);
+            const  selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(range);
           }}
-          config={config}
+          config={GetConfig()}
         />
-      </View>
-    );
   },
-});
+})
+
+
 
 const textStyle = css`
   font-size: 0.24rem;
@@ -157,21 +182,16 @@ const textStyle = css`
   p {
     margin: 0;
   }
+
   .ck.ck-editor__editable_inline {
     cursor: text;
     overflow: hidden;
-    pointer-events: none;
 
     > :last-child,
     > :first-child {
       margin-top: 0;
       margin-bottom: 0;
     }
-  }
-
-  &.drag-disable {
-    .ck.ck-editor__editable_inline {
-      pointer-events: auto;
-    }
+    padding: 0 !important;
   }
 `;

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -121,14 +121,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _downClickedCompId = "";
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
-
-    const compKey = this.getDivFlag(e.target as any, "compKey");
-    console.log("compKey === >", compKey);
-    if (compKey == "Text" && !this.transferStyle.editingText) {
-       e.preventDefault();
-       e.stopPropagation();
-    }
-
     if (!this.pageEl || !this.selCanvas) return;
     if (this.store.textEditingState) return;
 
@@ -407,8 +399,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
              if ( this.selected.length ==  1 && this.store.currComp.id == compId ) {
                 //取消当前选择
                 this.selecteObjs([])
-                this.actions.textFocus(compId);
-                this.transferStyle.editingText = true;
              }
         }
       }
@@ -459,10 +449,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._initMovePos.x = -1;
       this._initMovePos.y = -1;
 
-      if ( !clicked && this.store.selected.length == 1 && this.store.currComp.compKey == "Text") {
-          this.actions.textFocus(this.store.currCompId, false)
-      }
-
       if (initX == -1 && initY == -1) return;
 
 

src/modules/editor/module/actions/edit.ts

@@ -87,6 +87,10 @@ export const editActions = EditorModule.action({
     this.actions.pickComp(compId)
 
     this.helper.extendStreamCard(currCard.id);
+
+    if (compKey == "Text") {
+      this.actions.textFocus(compId, true);
+    }
   },
 
   // 通过拖拽添加组件到画布