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

import { ModuleControl, queenApi } from "queenjs";
import { reactive, toRaw } from "vue";
import { EditorModule } from "../../module";
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",
};
export class TextEditorCtrl extends ModuleControl<EditorModule> {
  state = reactive({
    currEditor: null as any,
  });
  constructor(moduel: EditorModule) {
    super(moduel);
  }
  setCurrEditor(editor: any) {
    this.state.currEditor = editor;
  }
  async setLinkUrl() {
    const res = await queenApi.showInput({
      title: "请输入链接地址",
      defaultValue: "http://",
    });
    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) {
    const addTagsKey = ["bold", "italic", "underline", "strikethrough"];
    if (addTagsKey.includes(key)) {
      this.addCompValueTags(key, e);
      return;
    }
    const compValue = this.store.currComp.value;

    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 {
      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) {
    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;

    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;
  }
}