fix: textComp bug and history bug

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

@@ -1,5 +1,4 @@
 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";
@@ -8,17 +7,18 @@ 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, watchEffect } from "vue";
+import { defineComponent, onUnmounted, watch, watchEffect } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
+
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, helper, actions, controls } = useEditor();
+    const { store, actions } = useEditor();
     const config = {
       language: "zh-cn",
       plugins: [
@@ -54,11 +54,14 @@ export const Component = defineComponent({
 
     let editorInstance: InlineEditor;
 
-    watchEffect(() => {
-      if (!store.textEditingState) {
-        editorInstance?.setData(comp.value);
+    watch(
+      () => comp.value,
+      () => {
+        if (!store.textEditingState) {
+          editorInstance?.setData(comp.value);
+        }
       }
-    });
+    );
 
     let blurCanceler: any = null;
     watchEffect(() => {
@@ -82,7 +85,7 @@ export const Component = defineComponent({
           return;
         }
         store.setTextEditingState(false);
-        controls.historyCtrl.history.submit();
+        actions.submitUpdate();
       }
       document.addEventListener("mousedown", blur, {
         capture: true,
@@ -103,12 +106,10 @@ export const Component = defineComponent({
           onFocus={() => {
             store.setTextEditingState(true);
           }}
-          onInput={(e: any) => {
-            actions.setTextarea(
-              helper.findComp(props.compId) as DesignComp,
-              "value",
-              e
-            );
+          onInput={(value: any) => {
+            if (editorInstance && comp.value !== value) {
+              actions.updateCompData(comp, "value", value);
+            }
           }}
           onReady={(editor: InlineEditor) => {
             editorInstance = editor;

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -9,7 +9,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: "请输入内容",
+  value: "<p>请输入内容</p>",
 });
 
 export const Form = createAttrsForm([

src/modules/editor/controllers/HistoryCtrl/HistoryController.ts

@@ -45,17 +45,18 @@ export class HistoryController {
     state.currLen = queue.length;
     // 更新当前缓存GroupAction
     this.cacheGroupAction = new GroupAction();
-    console.log(this);
   }
 
   undo() {
     if (!this.state.canUndo) return;
+    this.submit();
     this.queue[this.state.opIndex--].undo();
     console.log(this)
   }
 
   redo() {
     if (!this.state.canRedo) return;
+    this.submit();
     this.queue[++this.state.opIndex].redo();
     console.log(this)
   }
@@ -94,6 +95,7 @@ export class GroupAction {
       lastAction?.root === action.root &&
       lastAction?.path === action.path
     ) {
+      action.oldValue = lastAction.oldValue;
       this.actions[this.actions.length - 1] = action;
     } else {
       this.actions.push(action);

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

@@ -1,10 +1,10 @@
-import { cloneDeep, pick, set } from "lodash";
+import { cloneDeep, pick } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
+import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
-import { CompObject } from "../../controllers/SelectCtrl/compObj";
 
 export const editActions = EditorModule.action({
   // 通过拖拽添加组件到画布
@@ -35,7 +35,6 @@ export const editActions = EditorModule.action({
     cb?.(currComp);
 
     //添加组件到当前选中的组件下面
-    const obj = new CompObject(currComp);
     const selectCtrl = this.controls.selectCtrl;
     let xOffset = this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2);
     selectCtrl.translate(xOffset, yOffset);
@@ -69,44 +68,44 @@ export const editActions = EditorModule.action({
   },
 
   // 切换当前组件
-  pickComp(compId: string) {
-    const { store, helper } = this;
-    // 组合模式下，切换组件
-    // if (store.currCompId && store.groupModeStatus) {
-    //   const enableGroupIds = helper
-    //     .findParentComp(compId)
-    //     ?.getChildIds() as string[];
-    //   const comps = helper.getCompTrees(compId);
-    //   while (comps.length) {
-    //     const comp = comps.pop() as DesignComp;
-    //     const index = store.groupIds.indexOf(comp.id);
-    //     if (index >= 0) {
-    //       const groupIds = [...store.groupIds];
-    //       groupIds.splice(index, 1);
-    //       store.setGroupIds(groupIds);
-    //     } else if (enableGroupIds.includes(comp.id)) {
-    //       store.groupIds.push(comp.id);
-    //       return;
-    //     }
-    //   }
-    //   return;
-    // }
-    // let nextCompId = compId;
-    // if (this.store.isEditPage) {
-    //   const comps = this.helper.getCompTrees(compId);
-    //   nextCompId = comps[1].id;
-    // }
-    if (this.store.currCompId == compId) {
-      return;
-    }
-    if (this.store.currComp.compKey == "Text") {
-      this.store.setTextEditingState(false);
-    }
-    this.store.setCurrComp(compId);
-    if (this.store.currCompId == this.store.currStreamCardId) {
-      this.controls.transferCtrl.destroy();
-    }
-  },
+  // pickComp(compId: string) {
+  //   const { store, helper } = this;
+  //   // 组合模式下，切换组件
+  //   // if (store.currCompId && store.groupModeStatus) {
+  //   //   const enableGroupIds = helper
+  //   //     .findParentComp(compId)
+  //   //     ?.getChildIds() as string[];
+  //   //   const comps = helper.getCompTrees(compId);
+  //   //   while (comps.length) {
+  //   //     const comp = comps.pop() as DesignComp;
+  //   //     const index = store.groupIds.indexOf(comp.id);
+  //   //     if (index >= 0) {
+  //   //       const groupIds = [...store.groupIds];
+  //   //       groupIds.splice(index, 1);
+  //   //       store.setGroupIds(groupIds);
+  //   //     } else if (enableGroupIds.includes(comp.id)) {
+  //   //       store.groupIds.push(comp.id);
+  //   //       return;
+  //   //     }
+  //   //   }
+  //   //   return;
+  //   // }
+  //   // let nextCompId = compId;
+  //   // if (this.store.isEditPage) {
+  //   //   const comps = this.helper.getCompTrees(compId);
+  //   //   nextCompId = comps[1].id;
+  //   // }
+  //   if (this.store.currCompId == compId) {
+  //     return;
+  //   }
+  //   if (this.store.currComp.compKey == "Text") {
+  //     this.store.setTextEditingState(false);
+  //   }
+  //   this.store.setCurrComp(compId);
+  //   if (this.store.currCompId == this.store.currStreamCardId) {
+  //     this.controls.transferCtrl.destroy();
+  //   }
+  // },
   // 切换到父组件
   pickParentComp(compId: string) {
     const parentComp = this.helper.findParentComp(compId);
@@ -248,10 +247,6 @@ export const editActions = EditorModule.action({
     comp.layout.transformMatrix = transformMatrix;
   },
 
-  updateCompData(comp: DesignComp, path: string, value: any) {
-    set(comp, path, value);
-  },
-
    // 设置组件浮动
    setCompPositionFloat(comp: DesignComp) {
     comp.layout.position = "absolute"

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

@@ -0,0 +1,33 @@
+import { set } from "lodash";
+import { EditorModule } from "..";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+
+export const manualActions = EditorModule.action({
+  pickComp(compId: string) {
+    if (this.store.currCompId == compId) return;
+
+    const { historyCtrl } = this.controls;
+    const isActionRoot = !historyCtrl.historyActionDoing;
+
+    if (isActionRoot) historyCtrl.historyActionDoing = true;
+    historyCtrl.historyCombine = true;
+    this.store.setCurrComp(compId);
+    historyCtrl.historyCombine = false;
+    if (isActionRoot) historyCtrl.historyActionDoing = false;
+
+    if (this.store.currCompId == this.store.currStreamCardId) {
+      this.controls.transferCtrl.destroy();
+    }
+  },
+  updateCompData(comp: DesignComp, path: string, value: any) {
+    const { historyCtrl } = this.controls;
+    historyCtrl.historyActionDoing = true;
+    historyCtrl.historyCombine = true;
+    set(comp, path, value);
+    historyCtrl.historyCombine = false;
+    historyCtrl.historyActionDoing = false;
+  },
+  submitUpdate() {
+    this.controls.historyCtrl.history.submit();
+  },
+});

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

@@ -1,14 +0,0 @@
-import { set } from "lodash";
-import { EditorModule } from "..";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-
-export const textActions = EditorModule.action({
-  setTextarea(comp: DesignComp, path: string, value: any) {
-    const { historyCtrl } = this.controls;
-    historyCtrl.historyActionDoing = true;
-    historyCtrl.historyCombine = true;
-    set(comp, path, value);
-    historyCtrl.historyCombine = false;
-    historyCtrl.historyActionDoing = false;
-  },
-});

src/modules/editor/module/index.ts

@@ -16,7 +16,7 @@ import { store } from "./stores";
 import { DragAddCtrl } from "../controllers/DragAddCtrl";
 import { SelectCtrl } from "../controllers/SelectCtrl";
 import { CompObject } from "../controllers/SelectCtrl/compObj";
-import { textActions } from "./actions/text";
+import { manualActions } from "./actions/editWithManualHistory";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -26,7 +26,7 @@ export class EditorModule extends ModuleRoot {
   });
   components = this.useComponents(components);
 
-  actions = this.createActions([initActions, editActions, ImgCompActions, textActions]);
+  actions = this.createActions([initActions, editActions, ImgCompActions, manualActions]);
   https = this.createHttps(https);
   store = this.createStore(store, {
     transform: (state) => createProxy(state),

src/modules/editor/module/stores/index.ts

@@ -95,12 +95,13 @@ export const store = EditorModule.store({
       const parentComp = this.helper.findParentComp(compId);
       let deleteOK = false;
       if (parentComp) {
-        const ids = parentComp.children.default;
+        const ids = [...parentComp.children.default || []];
         // 只能删除children.default中的组件
         if (ids?.includes(compId)) {
           const index = ids.findIndex((id) => id === compId);
           if (index >= 0) {
             ids.splice(index, 1);
+            parentComp.children.default = ids;
             deleteOK = true;
           }
         }