text unfocus

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

@@ -20,6 +20,7 @@ import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
 import { queenApi } from "queenjs";
 import {
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   reactive,
@@ -394,26 +395,40 @@ export const TextStroke = defineComponent({
   },
 });
 
-export const LinkButton = defineComponent({
-  props: {
-    icon: any(),
-    value: any(),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const showLinkInput = async () => {
-      const res = await queenApi.showInput({
-        title: "请输入链接地址",
-        defaultValue: "http://",
-      });
-      emit("change", res);
-    };
-    return () => (
-      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
-    );
-  },
-});
-
+// export const LinkButton = defineComponent({
+//   props: {
+//     icon: any(),
+//     value: any(),
+//   },
+//   emits: ["change"],
+//   setup(props, { emit }) {
+//     const showLinkInput = async () => {
+//       const res = await queenApi.showInput({
+//         title: "请输入链接地址",
+//         defaultValue: "http://",
+//       });
+//       emit("change", res);
+//     };
+//     return () => (
+//       <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
+//     );
+//   },
+// });
+const stylesKey: { [key: string]: any } = {
+  fontSize: "font-size",
+  fontFamily: "font-family",
+  letterSpacing: "letter-spacing",
+  lineHeight: "line-height",
+  alignment: "text-align",
+  fontColor: "color",
+  textStroke: "-webkit-text-stroke",
+};
+const tagsKey: { [key: string]: any } = {
+  bold: "<strong>",
+  italic: "<i>",
+  underline: "<u>",
+  strikethrough: "<s>",
+};
 export const TextToolItem = defineComponent({
   props: {
     column: object<ColumnItem>(),
@@ -422,10 +437,10 @@ export const TextToolItem = defineComponent({
   },
   setup(props) {
     const state = reactive({
-      value: undefined,
+      value: undefined as any,
     });
 
-    const { controls } = useEditor();
+    const { controls, store, actions, helper } = useEditor();
     let editor: any = null;
     watch(
       () => controls.textEditorCtrl.state.currEditor,
@@ -434,6 +449,31 @@ export const TextToolItem = defineComponent({
         initCommands();
       }
     );
+    watch(
+      () => store.currComp.value,
+      () => {
+        editor = toRaw(controls.textEditorCtrl.state.currEditor);
+        if (!editor && store.currComp.compKey == "Text") {
+          initCommands();
+          nextTick(() => {
+            const element: HTMLElement | null = document.querySelector(
+              `#editor_${store.currComp.id}`
+            );
+            if (!element) {
+              return;
+            }
+            const h = helper.pxToDesignSize(element.clientHeight);
+            console.log(h);
+            actions.updateCompData(store.currComp, "layout.size.1", h);
+            helper.extendStreamCard(store.currStreamCardId);
+            actions.selectObjs([]);
+            setTimeout(() => {
+              actions.selectObjs([store.currComp.id]);
+            }, 0);
+          });
+        }
+      }
+    );
     function handleValueChange() {
       const { column } = props;
       if (!editor) {
@@ -447,6 +487,30 @@ export const TextToolItem = defineComponent({
     const initCommands = () => {
       const { column } = props;
       if (!editor) {
+        if (!column?.dataIndex) {
+          return;
+        }
+        const compValue = store.currComp.value;
+        if (tagsKey[column.dataIndex]) {
+          const hasTag = compValue.indexOf(tagsKey[column.dataIndex]);
+          if (hasTag != -1) {
+            state.value = true;
+          } else {
+            state.value = false;
+          }
+          return;
+        }
+        const regString = `(${stylesKey[column.dataIndex]}:)([\\s\\S]*?)(\\;)`;
+        const styleReg = new RegExp(regString, "ig");
+
+        const values = compValue.match(styleReg);
+        if (!values) {
+          state.value = undefined;
+          return;
+        }
+        let value = values[0];
+        value = value.replace(styleReg, "$2");
+        state.value = value;
         return;
       }
       const command = editor.commands.get(column?.dataIndex);

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

@@ -27,7 +27,7 @@ export const TextToolForm = defineComponent({
     const changeVal = (e: { dataIndex: string; value: any }) => {
       let editor = controls.textEditorCtrl.state.currEditor;
       if (!editor) {
-        // controls.textEditorCtrl.setCompValueInReg(e.dataIndex, e.value);
+        controls.textEditorCtrl.setCompValueInReg(e.dataIndex, e.value);
         return;
       }
       editor = toRaw(editor);

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

@@ -51,6 +51,7 @@ export const Component = defineComponent({
         ) : (
           <div
             innerHTML={comp.value}
+            id={`editor_${props.compId}`}
             class={[textStyle, store.isEditMode && `pointer-events-none`]}
           />
         )}
@@ -186,11 +187,7 @@ const EditorComp = defineComponent({
             const h = helper.pxToDesignSize(element.clientHeight);
             const isChange = Math.abs(preHeight.value - h) > 1;
             preHeight.value = h;
-            actions.updateCompDatas(
-              comp,
-              ["value", "layout.size.1"],
-              [value, preHeight.value]
-            );
+            actions.updateCompData(comp, "layout.size.1", preHeight.value);
             helper.extendStreamCard(store.currStreamCardId);
             if (isChange) {
               actions.selectObjs([]);

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

@@ -25,63 +25,211 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       title: "请输入链接地址",
       defaultValue: "http://",
     });
-    if (!res || !this.state.currEditor) {
+    if (!res) {
+      return;
+    }
+    if (!this.state.currEditor) {
+      let alink = `<a href="${res}"><span style="font-size:14px">${res}</span></a>`;
+      const compValue = this.store.currComp.value;
+      const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+      const blocks = compValue.match(pTagReg);
+      if (!blocks) {
+        return;
+      }
+      blocks[blocks.length - 1] = blocks[blocks.length - 1].replace(
+        pTagReg,
+        `$1$2${alink}$3`
+      );
+      this.actions.updateCompData(
+        this.store.currComp,
+        "value",
+        blocks.join("")
+      );
       return;
     }
     const editor = toRaw(this.state.currEditor);
     editor.execute("link", res);
   }
   setCompValueInReg(key: string, e: any) {
-    console.log(key, e);
     const addTagsKey = ["bold", "italic", "underline", "strikethrough"];
     if (addTagsKey.includes(key)) {
       this.addCompValueTags(key, e);
       return;
     }
     const compValue = this.store.currComp.value;
-    const regString = `(${stylesKey[key]}:)([0-9a-zA-z#.])*(\\;)`;
-    const styleReg = new RegExp(regString, "ig");
-    const matchs = compValue.match(styleReg);
-    if (matchs) {
-      const changeValue = compValue.replace(styleReg, `$1${e.value}$3`);
-      console.log(changeValue);
-      this.actions.updateCompData(this.store.currComp, "value", changeValue);
+
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const blocks = compValue.match(pTagReg);
+    if (!blocks) {
+      return;
+    }
+    const blockStyles = ["lineHeight", "alignment"];
+
+    blocks.map((item: string, index: number) => {
+      const isBlockStyle = blockStyles.includes(key);
+      let stylesStr = null;
+      if (isBlockStyle) {
+        stylesStr = this.blockStyleChange(item, key, e);
+      } else {
+        stylesStr = this.spanStyleChange(item, key, e);
+      }
+
+      blocks[index] = stylesStr;
+    });
+    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+  }
+  blockStyleChange(item: string, key: string, e: any) {
+    const pStyleReg = /<p[\s|\s]*style=[\s|\S]*?>/;
+    let blockStr = item;
+    const hasStyles = item.indexOf(stylesKey[key]);
+    if (hasStyles != -1) {
+      const regString = `(${stylesKey[key]}:)([\\s\\S]*?)(\\;)`;
+      const styleReg = new RegExp(regString, "ig");
+      blockStr = item.replace(styleReg, `$1${e.value}$3`);
+      return blockStr;
+    }
+    if (pStyleReg.test(item)) {
+      const addStyleReg = /(<p[\s|\s]*style=[\s|\S]*?)(">[\s|\S]*)/;
+      blockStr = item.replace(addStyleReg, `$${stylesKey[key]}:${e.value};$2`);
     } else {
-      console.log(1);
+      const noStyleReg = /(<p[\s|\s]*)(>[\s|\S]*)/;
+      blockStr = item.replace(
+        noStyleReg,
+        `$1 style="${stylesKey[key]}:${e.value};"$2`
+      );
     }
+    return blockStr;
+  }
+  spanStyleChange(item: string, key: string, e: any) {
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    let spanStr = item;
+    const hasSpan: any = spanStr.indexOf("span");
+    if (hasSpan == -1) {
+      spanStr = spanStr.replace(
+        pTagReg,
+        '$1<span style="font-size:14px;">$2</span>$3'
+      );
+    }
+    const hasStyles = item.indexOf(stylesKey[key]);
+    if (hasStyles != -1) {
+      const regString = `(${stylesKey[key]}:)([\\s\\S]*?)(\\;)`;
+      const styleReg = new RegExp(regString, "ig");
+      spanStr = spanStr.replace(styleReg, `$1${e.value}$3`);
+    } else {
+      const addStyleReg = /(<span\s*style=[\s|\S]*?)(">[\s|\S]*?<\/span>)/g;
+      spanStr = spanStr.replace(
+        addStyleReg,
+        `$1${stylesKey[key]}:${e.value};$2`
+      );
+    }
+
+    const noStyleReg = /(<span\s*?)(>[\s|\S]*?<\/span>)/g;
+    spanStr = spanStr.replace(
+      noStyleReg,
+      `$1 style="${stylesKey[key]}:${e.value};">$2`
+    );
+
+    return spanStr;
   }
-  addCompValueTags(key: string, e: any) {
-    // console.log(key, e);
-    // // const
-    // // ("i s strong u");
-    // const keyToTags = {
-    //   italic: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    //   strikethrough: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
 
-    //   bold: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    //   underline: {
-    //     tag: "<strong>",
-    //     end: "</strong>",
-    //   },
-    // };
-    // const compValue = this.store.currComp.value;
-    // console.log(compValue);
-    // const blocks = compValue.match(/<p(([\s\S])*?)<\/p>/gi);
-    // if (!blocks) {
-    //   return;
-    // }
-    // blocks.map((item: string, index: number) => {
+  addCompValueTags(key: string, e: any) {
+    const compValue = this.store.currComp.value;
+    const pTagReg = /(<p[\s\S]*?>)([\s\S]*?)(<\/p>)/gi;
+    const blocks = compValue.match(pTagReg);
+    if (!blocks) {
+      return;
+    }
+    blocks.map((item: string, index: number) => {
+      const hasSpan: any = item.indexOf("span");
+      if (hasSpan != -1) {
+        blocks[index] = this.formatSortTags(item, key, e);
+        return;
+      }
+      const spanStr = item.replace(
+        pTagReg,
+        '$1<span style="font-size:14px;">$2</span>$3'
+      );
+      blocks[index] = this.formatSortTags(spanStr, key, e);
+    });
+    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+  }
+  formatSortTags(item: string, key: string, e: any) {
+    const keyToTags: { [key: string]: any }[] = [
+      {
+        key: "italic",
+        tag: "<i>",
+        end: "</i>",
+      },
+      {
+        key: "strikethrough",
+        tag: "<s>",
+        end: "</s>",
+      },
+      {
+        key: "bold",
+        tag: "<strong>",
+        end: "</strong>",
+      },
+      {
+        key: "underline",
+        tag: "<u>",
+        end: "</u>",
+      },
+    ];
+    const spanTagReg = /([\s\S]*?<span[\s\S]*?>)([\s\S]*?)(<\/span>[\s\S]*?)/gi;
+    let htmlStr = item;
 
-    // });
-    // console.log(blocks);
+    if (e.value) {
+      const currTagIndex = keyToTags.findIndex((e: any) => {
+        return e.key == key;
+      });
+      if (currTagIndex == -1) {
+        return htmlStr;
+      }
+      if (htmlStr.indexOf(keyToTags[currTagIndex].tag) != -1) {
+        return htmlStr;
+      }
+      if (currTagIndex == 0) {
+        htmlStr = htmlStr.replace(
+          spanTagReg,
+          `$1${keyToTags[0].tag}$2${keyToTags[0].end}$3`
+        );
+      }
+      if (currTagIndex > 0) {
+        let prevTagIndex = currTagIndex - 1;
+        let prevTag: any = null;
+        for (let i = prevTagIndex; i >= 0; i--) {
+          const hasTag: any = htmlStr.indexOf(keyToTags[prevTagIndex].tag);
+          if (hasTag != -1) {
+            prevTag = keyToTags[prevTagIndex];
+            break;
+          }
+        }
+        if (prevTag) {
+          const regString = `([\\s\\S]*?)(${prevTag.tag})([\\s\\S]*?)(${prevTag.end})([\\s\\S]*?)`;
+          const tempReg = new RegExp(regString, "ig");
+          htmlStr = htmlStr.replace(
+            tempReg,
+            `$1$2${keyToTags[currTagIndex].tag}$3${keyToTags[currTagIndex].end}$4$5`
+          );
+        } else {
+          htmlStr = htmlStr.replace(
+            spanTagReg,
+            `$1${keyToTags[currTagIndex].tag}$2${keyToTags[currTagIndex].end}$3`
+          );
+        }
+      }
+    } else {
+      const currTag = keyToTags.find((e: any) => {
+        return e.key == key;
+      });
+      if (!currTag) {
+        return htmlStr;
+      }
+      const regString = `([\\s\\S]*?)(${currTag?.tag})([\\s\\S]*?)(${currTag?.end})([\\s\\S]*?)`;
+      const tempReg = new RegExp(regString, "ig");
+      htmlStr = htmlStr.replace(tempReg, "$1$3$5");
+    }
+    return htmlStr;
   }
 }