类型定义

type NonEmptyArray<T> = [T, ...T[]];
interface ToolbarItemCommon {
  key: string;
  hoverText?: string | (() => string);
  name?: string | (() => string) | React.ReactNode | (() => ReactNode);
  isActive?: () => boolean;
  disable?: () => boolean;
  command?: () => void;
}

/**
 * Toolbar button
 * @example { type: 'button', icon: <BoldOutlined />, desc: 'text blod', quicklyTip: 'ctrl + b' }
 */
type ToolbarItemButtonType = {
  type: 'button';
  icon: React.ReactNode;
  desc?: string;
  quicklyTip?: string;
};

/**
 * Toolbar dropdown
 * @example { type: 'fontSize', items: [], dropdownIcon: <BoldOutlined /> }
 */
type ToolbarItemDropdownType = {
  type: 'dropdown';
  items: MenuProps['items'];
  dropdownIcon: ReactNode;
  icon?: ReactNode; // Toolbar not use, FloatingMenu use
};

/**
 * Toolbar divider
 * @example { type: 'divider' }
 */
type ToolbarDividerType = { type: 'divider' };

/**
 * Toolbar custom Node
 * @example { type: 'custom', render: <BoldOutlined /> }
 */
type ToolbarCustomType = { type: 'custom'; render: ReactNode };

/**
 * FloatingMenu top common block
 */
type ToolbarItemCardButtonCommonType = {
  type: 'cardButtonCommon';
  cardButtonCommon: {
    title: string;
    list: NonEmptyArray<ToolbarItemCommon & ToolbarItemButtonType>;
  };
};
/**
 * FloatingMenu block, which is not top common
 */
type ToolbarItemCardButtonBlockType = {
  type: 'cardButtonBlock';
  cardButtonBlock: {
    title: string;
    list:
      | NonEmptyArray<ToolbarItemCommon & ToolbarItemButtonType>
      | NonEmptyArray<ToolbarItemCommon & ToolbarItemDropdownType>;
  };
};
type ToolbarItemType =
  | ToolbarItemButtonType
  | ToolbarItemDropdownType
  | ToolbarDividerType
  | ToolbarCustomType
  | ToolbarItemCardButtonCommonType
  | ToolbarItemCardButtonBlockType;

/**
 * used to Toolbar, FloatingMenu, SlashMenu
 */
export type ToolbarItem = ToolbarItemCommon & ToolbarItemType;

定义后续会改动的参数const p = {}