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, reactive } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";

export const Component = defineComponent({
  props: {
    compId: string(),
    value: string().def(""),
  },
  emits: ["update:value"],
  setup(props, { emit }) {
    const comp = props.compId ? useCompData(props.compId) : null;
    const { store } = 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",
        ],
      },
    };

    const state = reactive({
      editing: false,
    });

    let editorInstance: InlineEditor;

    return () => (
      <View
        class={[state.editing && "drag-disable"]}
        compId={props.compId}
        onDblclick={() => {
          if (store.isEditMode) {
            state.editing = true;
            editorInstance.disableReadOnlyMode("editor");
            editorInstance.focus();
          }
        }}
      >
        <ckeditor
          class={textStyle}
          editor={InlineEditor}
          onBlur={(e: any, editor: InlineEditor) => {
            state.editing = false;
            editor.enableReadOnlyMode("editor");
            if (comp) {
              comp.value = editor.getData();
            } else {
              emit("update:value", editor.getData());
            }
          }}
          onReady={(editor: InlineEditor) => {
            editorInstance = editor;
            editor.setData(comp?.value || props.value);
            editor.enableReadOnlyMode("editor");
          }}
          config={config}
        />
      </View>
    );
  },
});

const textStyle = css`
  font-size: 12px;
  p {
    margin: 0;
  }
  &.ck.ck-editor__editable_inline {
    > :last-child,
    > :first-child {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
`;