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

import { useEditor } from "@/modules/editor";
import { Alignment } from "@ckeditor/ckeditor5-alignment";
import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
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, watch, watchEffect } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";

export const Component = defineComponent({
  props: {
    compId: string().def(""),
  },
  setup(props) {
    const comp = useCompData(props.compId);
    const { store, helper, actions } = useEditor();
    const config = {
      plugins: [
        Essentials,
        Bold,
        Italic,
        Link,
        Paragraph,
        FontColor,
        FontSize,
        FontFamily,
        Alignment,
      ],
      fontSize: {
        options: [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60],
      },
      toolbar: {
        items: [
          // "undo",
          // "redo",
          // "|",
          "fontColor",
          "fontsize",
          "bold",
          "italic",
          "|",
          "alignment",
          // "|",
          // "link",
        ],
      },
    };

    let editorInstance: InlineEditor;

    // watchEffect(() => {
    //   if (!store.textEditingState) {
    //     editorInstance?.setData(comp.value);
    //   }
    // });

    return () => (
      <View
        class={[textStyle, store.currCompId === props.compId && "drag-disable"]}
        compId={props.compId}
      >
        <ckeditor
          class={textStyle}
          editor={InlineEditor}
          onBlur={() => {
            actions.updateCompData(
              helper.findComp(props.compId) as DesignComp,
              "value",
              editorInstance.getData()
            );
            store.setTextEditingState(false);
          }}
          onFocus={() => {
            store.setTextEditingState(true);
          }}
          onReady={(editor: InlineEditor) => {
            editorInstance = editor;
            editor.setData(comp.value);
            if (store.isPreview) {
              editor.enableReadOnlyMode("editor");
            }
          }}
          config={config}
        />
      </View>
    );
  },
});

const textStyle = css`
  font-size: 12px;
  color: #666;
  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;
    }
  }
`;