update

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

@@ -16,8 +16,9 @@ import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
 import { nextTick } from "process";
 import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
+import { useCompData } from "../../defines/createCompHooks";
+import { CompText, TextValue } from "@/modules/editor/objects/Elements/text";
 
 function GetConfig() {
   const fontSizeOptions = [];
@@ -88,7 +89,8 @@ export const Component = defineComponent({
     compId: string().def(""),
   },
   setup(props) {
-    const comp = useCompData(props.compId);
+    const comp = useCompData<TextValue>(props.compId) as CompText;
+
     const { store, actions } = useEditor();
 
     const state = reactive({
@@ -126,7 +128,7 @@ export const Component = defineComponent({
           />
         ) : (
           <div
-            innerHTML={comp.value}
+            innerHTML={comp.value.refText()}
             class={[textStyle, store.isEditMode && `pointer-events-none`]}
           />
         )}
@@ -144,8 +146,8 @@ const EditorComp = defineComponent({
   setup(props, { emit }) {
     const inputRef = ref();
     let editorInstance = ref<InlineEditor>();
-    const comp = useCompData(props.compId);
-    const { store, actions, helper, controls } = useEditor();
+    const comp = useCompData(props.compId) as CompText;
+    const { store, actions, helper } = useEditor();
 
     let blurCanceler: any = null;
     onMounted(() => {
@@ -162,8 +164,11 @@ const EditorComp = defineComponent({
       const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
       const isChange = Math.abs(preHeight.value - h) > 1;
       preHeight.value = h;
-      actions.updateCompData(comp, "layout.size.1", preHeight.value);
+      
+      comp.state.size[1] = h;
       helper.extendStreamCard(store.currStreamCardId);
+
+
       if (isChange) {
         actions.selectObjs([]);
         setTimeout(() => {
@@ -212,17 +217,15 @@ const EditorComp = defineComponent({
         ref={inputRef}
         editor={InlineEditor}
         onInput={(value: any) => {
-          if (editorInstance.value && comp.value !== value) {
-            actions.updateCompData(comp, "value", value);
+          if (editorInstance.value && comp.value.text !== value) {
+            comp.value.setText( value );
+
             nextTick(() => {
               const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
               const isChange = Math.abs(preHeight.value - h) > 1;
               preHeight.value = h;
-              actions.updateCompDatas(
-                comp,
-                ["value", "layout.size.1"],
-                [value, preHeight.value]
-              );
+
+              comp.state.setSize([comp.state.size[0], h]);
               helper.extendStreamCard(store.currStreamCardId);
               if (isChange) {
                 console.log("changing=>", isChange);
@@ -237,7 +240,7 @@ const EditorComp = defineComponent({
         onReady={(editor: InlineEditor) => {
           editorInstance.value = editor;
           console.log("editor");
-          editor.setData(comp.value);
+          editor.setData(comp.value.text);
           editor.focus();
           const range = document.createRange();
           range.selectNodeContents(inputRef.value.$el);

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

@@ -1,7 +1,5 @@
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
-// import { TextForm } from "./TextForm";
 export { Component } from "./component";
 
 export const options = {
@@ -9,15 +7,6 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/text2.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`,
-  layout: {
-    size: [750, 60],
-  },
-});
-
-// export const Form = TextForm;
-
 export const Form = createAttrsForm([
   // {
   //   label: "文本",

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

@@ -6,6 +6,7 @@ import { RxValue } from "../../objects/Elements/RxValue";
 import { CardValue, CompCard, CompPage, PageValue, createCard, createPage } from "../../objects/Elements/page";
 import { HistoryController } from "../../objects/Elements/history";
 import { CompImage, createImageComp } from "../../objects/Elements/image";
+import { createTextComp } from "../../objects/Elements/text";
 
 
 
@@ -103,11 +104,23 @@ export class CompCtrl extends ModuleControl<EditorModule> {
         queenApi.messageError("请先选中一个卡片");
         return;
     }
+    let addedObj:CompBase<any> | null = null; // as CompBase<any>;
+
+    if(compKey == "Image")
+    {
+          const objIm = values?.url ?await createImageComp(values.url) : await createImageComp();
+          this.setObj(objIm.imageObj);
+          addedObj = objIm;
+    } else if (compKey == "Text") {
+        const t = values?.text ? values.text: undefined;
+        const  objt = createTextComp(t);
+        this.setObj(objt);
+        addedObj = objt;
+    }
 
-    let addedObj =values?.url ?await createImageComp(values.url) : await createImageComp();
-    this.setObj(addedObj);
+    if (!addedObj) return;
 
-    this.setObj(addedObj.imageObj);
+    this.setObj(addedObj);
 
     let yOffset = 0;
     if ( this.state.currCompId != this.state.currCardId ) {

src/modules/editor/objects/Elements/text.ts

@@ -0,0 +1,26 @@
+import { CompBase } from "./base"
+
+export type TextValue = {
+    text: string;
+}
+
+export class CompText extends CompBase<TextValue> {
+    
+   override onCreated() {
+        this.compKey = "Text";
+        this.state.size = [750, 60];
+   }
+
+    override init(): void {
+        super.init();
+
+        this.updateTransform();
+    }
+}
+
+const DefaultText = `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`;
+export function createTextComp(text:string = DefaultText) {
+    const obj = new CompText({text: text})
+    obj.init();
+    return obj;
+}