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

import {
  IconStrikethrough,
  IconTextBold,
  IconTextItalic,
  IconTextUnderline,
} from "@/assets/icons";
import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { LinkOutlined } from "@ant-design/icons-vue";

import { css } from "@linaria/core";
import { Button, Divider, InputNumber, Select } from "ant-design-vue";
import { defineComponent, nextTick } from "vue";
import { any } from "vue-types";

import ToolbarsUI from "../../formItems/ToolbarsUI";
import {
  AlignComp,
  LineHeightComp,
  TextColor,
  FontStyleComp,
  FontFamily,
  FontSize,
} from "./ToolbarComp";

export const TextToolbar = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    const { store, actions, controls } = useEditor();

    const toolbarColumns = [
      {
        dataIndex: "fontFamily",
        component: FontFamily,
        props: {
          class: "w-180px",
        },
      },
      {
        label: "字号",
        dataIndex: "fontSize",
        component: FontSize,
      },
      {
        label: "字体颜色",
        dataIndex: "fontColor",
        component: TextColor,
      },
      {
        label: "加粗",
        dataIndex: "bold",
        component: (props: any) => (
          <FontStyleComp icon={<IconTextBold />} {...props} />
        ),
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        label: "斜体",
        dataIndex: "italic",
        component: (props: any) => (
          <FontStyleComp icon={<IconTextItalic />} {...props} />
        ),
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        label: "下划线",
        dataIndex: "underline",
        component: (props: any) => (
          <FontStyleComp icon={<IconTextUnderline />} {...props} />
        ),
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        label: "删除线",
        dataIndex: "strikethrough",
        component: (props: any) => (
          <FontStyleComp icon={<IconStrikethrough />} {...props} />
        ),
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        component: () => (
          <Divider
            type="vertical"
            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
          />
        ),
      },
      {
        label: "对齐方式",
        dataIndex: "alignment",
        component: AlignComp,
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        label: "行高",
        dataIndex: "lineHeight",
        component: LineHeightComp,
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        component: () => (
          <Divider
            type="vertical"
            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
          />
        ),
      },
      {
        label: "链接",
        dataIndex: "link",
        component: (props: any) => (
          <Button
            icon={<LinkOutlined />}
            type="text"
            onClick={() => {
              console.log(props);
            }}
          ></Button>
        ),
        itemProps: {
          class: "!mx-2px",
        },
      },
      {
        component: () => (
          <Divider
            type="vertical"
            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
          />
        ),
      },
    ];
    const changeVal = (e: { dataIndex: string; value: any }) => {
      const editor = controls.textEditor;
      if (!editor) {
        return;
      }
      // const command = editor ? editor.commands.get(e.dataIndex) : null;
      // console.log(e, command);
      editor.execute(e.dataIndex, { value: e.value });
      editor.editing.view.focus();

      // const command =  editor.commands.get(e.commandName)
      // actions.updateCompData(props.component, e.dataIndex, e.value);
    };
    return () => {
      const { component } = props;
      return (
        <div class={[TextToolbarStyle, "flex items-center"]} id="text_toolbar">
          <ToolbarsUI
            editor={controls.textEditor}
            data={component}
            columns={toolbarColumns}
            onChange={changeVal}
          />
        </div>
      );
    };
  },
});
const TextToolbarStyle = css``;