@meta-1/editor 0.0.27

package/src/editor/menus/TextMenu/TextMenu.tsx

@@ -0,0 +1,193 @@
+import { memo } from "react";
+import { Content as PopoverContent, Root as PopoverRoot, Trigger as PopoverTrigger } from "@radix-ui/react-popover";
+import { BubbleMenu, type Editor } from "@tiptap/react";
+
+import { ColorPicker } from "../../panels";
+import { Icon } from "../../ui/Icon";
+import { Surface } from "../../ui/Surface";
+import { Toolbar } from "../../ui/Toolbar";
+import { i18n } from "../../utils/locale";
+import { ContentTypePicker } from "./components/ContentTypePicker";
+import { EditLinkPopover } from "./components/EditLinkPopover";
+import { FontFamilyPicker } from "./components/FontFamilyPicker";
+import { FontSizePicker } from "./components/FontSizePicker";
+import { useTextmenuCommands } from "./hooks/useTextmenuCommands";
+import { useTextmenuContentTypes } from "./hooks/useTextmenuContentTypes";
+import { useTextMenuStates } from "./hooks/useTextmenuStates";
+
+// We memorize the button so each button is not rerendered
+// on every editor state change
+const MemoButton = memo(Toolbar.Button);
+const MemoColorPicker = memo(ColorPicker);
+const MemoFontFamilyPicker = memo(FontFamilyPicker);
+const MemoFontSizePicker = memo(FontSizePicker);
+const MemoContentTypePicker = memo(ContentTypePicker);
+
+export type TextMenuProps = {
+  editor: Editor;
+};
+
+export const TextMenu = ({ editor }: TextMenuProps) => {
+  const commands = useTextmenuCommands(editor);
+  const states = useTextMenuStates(editor);
+  const blockOptions = useTextmenuContentTypes(editor);
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      pluginKey="textMenu"
+      shouldShow={states.shouldShow}
+      tippyOptions={{
+        zIndex: 40,
+        maxWidth: "none",
+        popperOptions: {
+          placement: "auto",
+        },
+      }}
+      updateDelay={100}
+    >
+      <Toolbar.Wrapper>
+        <MemoContentTypePicker options={blockOptions} />
+        <MemoFontFamilyPicker onChange={commands.onSetFont} value={states.currentFont || ""} />
+        <MemoFontSizePicker onChange={commands.onSetFontSize} value={states.currentSize || ""} />
+        <Toolbar.Divider />
+        <MemoButton
+          active={states.isBold}
+          onClick={commands.onBold}
+          tooltip={i18n("textMenu.bold")}
+          tooltipShortcut={["Mod", "B"]}
+        >
+          <Icon name="Bold" />
+        </MemoButton>
+        <MemoButton
+          active={states.isItalic}
+          onClick={commands.onItalic}
+          tooltip={i18n("textMenu.italic")}
+          tooltipShortcut={["Mod", "I"]}
+        >
+          <Icon name="Italic" />
+        </MemoButton>
+        <MemoButton
+          active={states.isUnderline}
+          onClick={commands.onUnderline}
+          tooltip={i18n("textMenu.underline")}
+          tooltipShortcut={["Mod", "U"]}
+        >
+          <Icon name="Underline" />
+        </MemoButton>
+        <MemoButton
+          active={states.isStrike}
+          onClick={commands.onStrike}
+          tooltip={i18n("textMenu.strikethrough")}
+          tooltipShortcut={["Mod", "Shift", "S"]}
+        >
+          <Icon name="Strikethrough" />
+        </MemoButton>
+        <MemoButton
+          active={states.isCode}
+          onClick={commands.onCode}
+          tooltip={i18n("textMenu.code")}
+          tooltipShortcut={["Mod", "E"]}
+        >
+          <Icon name="Code" />
+        </MemoButton>
+        <MemoButton onClick={commands.onCodeBlock} tooltip={i18n("textMenu.codeBlock")}>
+          <Icon name="Code" />
+        </MemoButton>
+        <EditLinkPopover onSetLink={commands.onLink} />
+        <PopoverRoot>
+          <PopoverTrigger asChild>
+            <MemoButton active={!!states.currentHighlight} tooltip={i18n("textMenu.highlighter")}>
+              <Icon name="Highlighter" />
+            </MemoButton>
+          </PopoverTrigger>
+          <PopoverContent asChild side="top" sideOffset={8}>
+            <Surface className="p-1">
+              <MemoColorPicker
+                color={states.currentHighlight}
+                onChange={commands.onChangeHighlight}
+                onClear={commands.onClearHighlight}
+              />
+            </Surface>
+          </PopoverContent>
+        </PopoverRoot>
+        <PopoverRoot>
+          <PopoverTrigger asChild>
+            <MemoButton active={!!states.currentColor} tooltip={i18n("textMenu.color")}>
+              <Icon name="Palette" />
+            </MemoButton>
+          </PopoverTrigger>
+          <PopoverContent asChild side="top" sideOffset={8}>
+            <Surface className="p-1">
+              <MemoColorPicker
+                color={states.currentColor}
+                onChange={commands.onChangeColor}
+                onClear={commands.onClearColor}
+              />
+            </Surface>
+          </PopoverContent>
+        </PopoverRoot>
+        <PopoverRoot>
+          <PopoverTrigger asChild>
+            <MemoButton tooltip={i18n("textMenu.more")}>
+              <Icon name="MoveVertical" />
+            </MemoButton>
+          </PopoverTrigger>
+          <PopoverContent asChild side="top">
+            <Toolbar.Wrapper>
+              <MemoButton
+                active={states.isSubscript}
+                onClick={commands.onSubscript}
+                tooltip={i18n("textMenu.subscript")}
+                tooltipShortcut={["Mod", "."]}
+              >
+                <Icon name="Subscript" />
+              </MemoButton>
+              <MemoButton
+                active={states.isSuperscript}
+                onClick={commands.onSuperscript}
+                tooltip={i18n("textMenu.superscript")}
+                tooltipShortcut={["Mod", ","]}
+              >
+                <Icon name="Superscript" />
+              </MemoButton>
+              <Toolbar.Divider />
+              <MemoButton
+                active={states.isAlignLeft}
+                onClick={commands.onAlignLeft}
+                tooltip={i18n("textMenu.alignLeft")}
+                tooltipShortcut={["Shift", "Mod", "L"]}
+              >
+                <Icon name="AlignLeft" />
+              </MemoButton>
+              <MemoButton
+                active={states.isAlignCenter}
+                onClick={commands.onAlignCenter}
+                tooltip={i18n("textMenu.alignCenter")}
+                tooltipShortcut={["Shift", "Mod", "E"]}
+              >
+                <Icon name="AlignCenter" />
+              </MemoButton>
+              <MemoButton
+                active={states.isAlignRight}
+                onClick={commands.onAlignRight}
+                tooltip={i18n("textMenu.alignRight")}
+                tooltipShortcut={["Shift", "Mod", "R"]}
+              >
+                <Icon name="AlignRight" />
+              </MemoButton>
+              <MemoButton
+                active={states.isAlignJustify}
+                onClick={commands.onAlignJustify}
+                tooltip={i18n("textMenu.alignJustify")}
+                tooltipShortcut={["Shift", "Mod", "J"]}
+              >
+                <Icon name="AlignJustify" />
+              </MemoButton>
+            </Toolbar.Wrapper>
+          </PopoverContent>
+        </PopoverRoot>
+      </Toolbar.Wrapper>
+    </BubbleMenu>
+  );
+};

package/src/editor/menus/TextMenu/components/AIDropdown.tsx

@@ -0,0 +1,140 @@
+import { useCallback } from "react";
+import {
+  Content as DropdownContent,
+  Item as DropdownItem,
+  Root as DropdownRoot,
+  Sub as DropdownSub,
+  SubContent as DropdownSubContent,
+  SubTrigger as DropdownSubTrigger,
+  Trigger as DropdownTrigger,
+} from "@radix-ui/react-dropdown-menu";
+
+import { languages, tones } from "../../../constants";
+import { DropdownButton } from "../../../ui/Dropdown";
+import { Icon } from "../../../ui/Icon";
+import { Surface } from "../../../ui/Surface";
+import { Toolbar } from "../../../ui/Toolbar";
+
+export type AIDropdownProps = {
+  onSimplify: () => void;
+  onFixSpelling: () => void;
+  onMakeShorter: () => void;
+  onMakeLonger: () => void;
+  onEmojify: () => void;
+  onTldr: () => void;
+  onTranslate: (language: string) => void;
+  onTone: (tone: string) => void;
+  onCompleteSentence: () => void;
+};
+
+export const AIDropdown = ({
+  onCompleteSentence,
+  onEmojify,
+  onFixSpelling,
+  onMakeLonger,
+  onMakeShorter,
+  onSimplify,
+  onTldr,
+  onTone,
+  onTranslate,
+}: AIDropdownProps) => {
+  const handleTone = useCallback((tone: string) => () => onTone(tone), [onTone]);
+  const handleTranslate = useCallback((language: string) => () => onTranslate(language), [onTranslate]);
+
+  return (
+    <DropdownRoot>
+      <DropdownTrigger asChild>
+        <Toolbar.Button
+          activeClassname="text-purple-600 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-200"
+          className="text-purple-500 hover:text-purple-600 active:text-purple-600 dark:text-purple-400 dark:active:text-purple-400 dark:hover:text-purple-300"
+        >
+          <Icon className="mr-1" name="Sparkles" />
+          AI Tools
+          <Icon className="ml-1 h-2 w-2" name="ChevronDown" />
+        </Toolbar.Button>
+      </DropdownTrigger>
+      <DropdownContent asChild>
+        <Surface className="min-w-[10rem] p-2">
+          <DropdownItem onClick={onSimplify}>
+            <DropdownButton>
+              <Icon name="CircleSlash" />
+              Simplify
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownItem onClick={onFixSpelling}>
+            <DropdownButton>
+              <Icon name="Eraser" />
+              Fix spelling & grammar
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownItem onClick={onMakeShorter}>
+            <DropdownButton>
+              <Icon name="ArrowLeftToLine" />
+              Make shorter
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownItem onClick={onMakeLonger}>
+            <DropdownButton>
+              <Icon name="ArrowRightToLine" />
+              Make longer
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownSub>
+            <DropdownSubTrigger>
+              <DropdownButton>
+                <Icon name="Mic" />
+                Change tone
+                <Icon className="ml-auto h-4 w-4" name="ChevronRight" />
+              </DropdownButton>
+            </DropdownSubTrigger>
+            <DropdownSubContent>
+              <Surface className="flex max-h-[20rem] min-w-[15rem] flex-col overflow-auto p-2">
+                {tones.map((tone) => (
+                  <DropdownItem key={tone.value} onClick={handleTone(tone.value)}>
+                    <DropdownButton>{tone.label}</DropdownButton>
+                  </DropdownItem>
+                ))}
+              </Surface>
+            </DropdownSubContent>
+          </DropdownSub>
+          <DropdownItem onClick={onTldr}>
+            <DropdownButton>
+              <Icon name="MoveHorizontal" />
+              Tl;dr:
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownItem onClick={onEmojify}>
+            <DropdownButton>
+              <Icon name="SmilePlus" />
+              Emojify
+            </DropdownButton>
+          </DropdownItem>
+          <DropdownSub>
+            <DropdownSubTrigger>
+              <DropdownButton>
+                <Icon name="Languages" />
+                Translate
+                <Icon className="ml-auto h-4 w-4" name="ChevronRight" />
+              </DropdownButton>
+            </DropdownSubTrigger>
+            <DropdownSubContent>
+              <Surface className="flex max-h-[20rem] min-w-[15rem] flex-col overflow-auto p-2">
+                {languages.map((lang) => (
+                  <DropdownItem key={lang.value} onClick={handleTranslate(lang.value)}>
+                    <DropdownButton>{lang.label}</DropdownButton>
+                  </DropdownItem>
+                ))}
+              </Surface>
+            </DropdownSubContent>
+          </DropdownSub>
+          <DropdownItem onClick={onCompleteSentence}>
+            <DropdownButton>
+              <Icon name="PenLine" />
+              Complete sentence
+            </DropdownButton>
+          </DropdownItem>
+        </Surface>
+      </DropdownContent>
+    </DropdownRoot>
+  );
+};

package/src/editor/menus/TextMenu/components/ContentTypePicker.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from "react";
+import {
+  Content as DropdownContent,
+  Root as DropdownRoot,
+  Trigger as DropdownTrigger,
+} from "@radix-ui/react-dropdown-menu";
+import type { icons } from "lucide-react";
+
+import { DropdownButton, DropdownCategoryTitle } from "../../../ui/Dropdown";
+import { Icon } from "../../../ui/Icon";
+import { Surface } from "../../../ui/Surface";
+import { Toolbar } from "../../../ui/Toolbar";
+
+export type ContentTypePickerOption = {
+  label: string;
+  id: string;
+  type: "option";
+  disabled: () => boolean;
+  isActive: () => boolean;
+  onClick: () => void;
+  icon: keyof typeof icons;
+};
+
+export type ContentTypePickerCategory = {
+  label: string;
+  id: string;
+  type: "category";
+};
+
+export type ContentPickerOptions = Array<ContentTypePickerOption | ContentTypePickerCategory>;
+
+export type ContentTypePickerProps = {
+  options: ContentPickerOptions;
+};
+
+const isOption = (option: ContentTypePickerOption | ContentTypePickerCategory): option is ContentTypePickerOption =>
+  option.type === "option";
+const isCategory = (option: ContentTypePickerOption | ContentTypePickerCategory): option is ContentTypePickerCategory =>
+  option.type === "category";
+
+export const ContentTypePicker = ({ options }: ContentTypePickerProps) => {
+  const activeItem = useMemo(() => options.find((option) => option.type === "option" && option.isActive()), [options]);
+
+  return (
+    <DropdownRoot>
+      <DropdownTrigger asChild>
+        <Toolbar.Button active={activeItem?.id !== "paragraph" && !!activeItem?.type}>
+          <Icon name={(activeItem?.type === "option" && activeItem.icon) || "Pilcrow"} />
+          <Icon className="h-2 w-2" name="ChevronDown" />
+        </Toolbar.Button>
+      </DropdownTrigger>
+      <DropdownContent asChild>
+        <Surface className="flex flex-col gap-1 px-2 py-4">
+          {options.map((option) => {
+            if (isOption(option)) {
+              return (
+                <DropdownButton isActive={option.isActive()} key={option.id} onClick={option.onClick}>
+                  <Icon className="mr-1 h-4 w-4" name={option.icon} />
+                  {option.label}
+                </DropdownButton>
+              );
+            }
+            if (isCategory(option)) {
+              return (
+                <div className="mt-2 first:mt-0" key={option.id}>
+                  <DropdownCategoryTitle key={option.id}>{option.label}</DropdownCategoryTitle>
+                </div>
+              );
+            }
+            return null;
+          })}
+        </Surface>
+      </DropdownContent>
+    </DropdownRoot>
+  );
+};

package/src/editor/menus/TextMenu/components/EditLinkPopover.tsx

@@ -0,0 +1,25 @@
+import { Content as PopoverContent, Root as PopoverRoot, Trigger as PopoverTrigger } from "@radix-ui/react-popover";
+
+import { LinkEditorPanel } from "../../../panels";
+import { Icon } from "../../../ui/Icon";
+import { Toolbar } from "../../../ui/Toolbar";
+import { i18n } from "../../../utils/locale";
+
+export type EditLinkPopoverProps = {
+  onSetLink: (link: string, openInNewTab?: boolean) => void;
+};
+
+export const EditLinkPopover = ({ onSetLink }: EditLinkPopoverProps) => {
+  return (
+    <PopoverRoot>
+      <PopoverTrigger asChild>
+        <Toolbar.Button tooltip={i18n("textMenu.editLink")}>
+          <Icon name="Link" />
+        </Toolbar.Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <LinkEditorPanel onSetLink={onSetLink} />
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};

package/src/editor/menus/TextMenu/components/FontFamilyPicker.tsx

@@ -0,0 +1,84 @@
+import { useCallback } from "react";
+import {
+  Content as DropdownContent,
+  Root as DropdownRoot,
+  Trigger as DropdownTrigger,
+} from "@radix-ui/react-dropdown-menu";
+
+import { DropdownButton, DropdownCategoryTitle } from "../../../ui/Dropdown";
+import { Icon } from "../../../ui/Icon";
+import { Surface } from "../../../ui/Surface";
+import { Toolbar } from "../../../ui/Toolbar";
+import { i18n } from "../../../utils/locale";
+
+const getFontFamilyGroups = () => [
+  {
+    label: "Sans Serif",
+    options: [
+      { label: i18n("default"), value: "" },
+      { label: "Arial", value: "Arial" },
+      { label: "Helvetica", value: "Helvetica" },
+    ],
+  },
+  {
+    label: "Serif",
+    options: [
+      { label: "Times New Roman", value: "Times" },
+      { label: "Garamond", value: "Garamond" },
+      { label: "Georgia", value: "Georgia" },
+    ],
+  },
+  {
+    label: "Monospace",
+    options: [
+      { label: "Courier", value: "Courier" },
+      { label: "Courier New", value: "Courier New" },
+    ],
+  },
+];
+
+const getFontFamilies = () =>
+  getFontFamilyGroups()
+    .flatMap((group) => [group.options])
+    .flat();
+
+export type FontFamilyPickerProps = {
+  onChange: (value: string) => void;
+  value: string;
+};
+
+export const FontFamilyPicker = ({ onChange, value }: FontFamilyPickerProps) => {
+  const currentValue = getFontFamilies().find((size) => size.value === value);
+  const currentFontLabel = currentValue?.label?.split(" ")[0] || i18n("default");
+
+  const selectFont = useCallback((font: string) => () => onChange(font), [onChange]);
+
+  return (
+    <DropdownRoot>
+      <DropdownTrigger asChild>
+        <Toolbar.Button active={!!currentValue?.value}>
+          {currentFontLabel}
+          <Icon className="h-2 w-2" name="ChevronDown" />
+        </Toolbar.Button>
+      </DropdownTrigger>
+      <DropdownContent asChild>
+        <Surface className="flex flex-col gap-1 px-2 py-4">
+          {getFontFamilyGroups().map((group) => (
+            <div className="mt-2.5 flex flex-col gap-0.5 first:mt-0" key={group.label}>
+              <DropdownCategoryTitle>{group.label}</DropdownCategoryTitle>
+              {group.options.map((font) => (
+                <DropdownButton
+                  isActive={value === font.value}
+                  key={`${font.label}_${font.value}`}
+                  onClick={selectFont(font.value)}
+                >
+                  <span style={{ fontFamily: font.value }}>{font.label}</span>
+                </DropdownButton>
+              ))}
+            </div>
+          ))}
+        </Surface>
+      </DropdownContent>
+    </DropdownRoot>
+  );
+};

package/src/editor/menus/TextMenu/components/FontSizePicker.tsx

@@ -0,0 +1,56 @@
+import { useCallback } from "react";
+import {
+  Content as DropdownContent,
+  Root as DropdownRoot,
+  Trigger as DropdownTrigger,
+} from "@radix-ui/react-dropdown-menu";
+
+import { DropdownButton } from "../../../ui/Dropdown";
+import { Icon } from "../../../ui/Icon";
+import { Surface } from "../../../ui/Surface";
+import { Toolbar } from "../../../ui/Toolbar";
+import { i18n } from "../../../utils/locale";
+
+const getFontSizes = () => [
+  { label: i18n("fontSize.mini"), value: "12px" },
+  { label: i18n("fontSize.small"), value: "14px" },
+  { label: i18n("fontSize.normal"), value: "" },
+  { label: i18n("fontSize.large"), value: "18px" },
+  { label: i18n("fontSize.huge"), value: "24px" },
+];
+
+export type FontSizePickerProps = {
+  onChange: (value: string) => void;
+  value: string;
+};
+
+export const FontSizePicker = ({ onChange, value }: FontSizePickerProps) => {
+  const currentValue = getFontSizes().find((size) => size.value === value);
+  const currentSizeLabel = currentValue?.label?.split(" ")[0] || i18n("default");
+
+  const selectSize = useCallback((size: string) => () => onChange(size), [onChange]);
+
+  return (
+    <DropdownRoot>
+      <DropdownTrigger asChild>
+        <Toolbar.Button active={!!currentValue?.value}>
+          {currentSizeLabel}
+          <Icon className="h-2 w-2" name="ChevronDown" />
+        </Toolbar.Button>
+      </DropdownTrigger>
+      <DropdownContent asChild>
+        <Surface className="flex flex-col gap-1 px-2 py-4">
+          {getFontSizes().map((size) => (
+            <DropdownButton
+              isActive={value === size.value}
+              key={`${size.label}_${size.value}`}
+              onClick={selectSize(size.value)}
+            >
+              <span style={{ fontSize: size.value }}>{size.label}</span>
+            </DropdownButton>
+          ))}
+        </Surface>
+      </DropdownContent>
+    </DropdownRoot>
+  );
+};

package/src/editor/menus/TextMenu/hooks/useTextmenuCommands.ts

@@ -0,0 +1,96 @@
+// import { Language } from '@tiptap-pro/extension-ai'
+
+import { useCallback } from "react";
+import type { Editor } from "@tiptap/react";
+
+export const useTextmenuCommands = (editor: Editor) => {
+  const onBold = useCallback(() => editor.chain().focus().toggleBold().run(), [editor]);
+  const onItalic = useCallback(() => editor.chain().focus().toggleItalic().run(), [editor]);
+  const onStrike = useCallback(() => editor.chain().focus().toggleStrike().run(), [editor]);
+  const onUnderline = useCallback(() => editor.chain().focus().toggleUnderline().run(), [editor]);
+  const onCode = useCallback(() => editor.chain().focus().toggleCode().run(), [editor]);
+  const onCodeBlock = useCallback(() => editor.chain().focus().toggleCodeBlock().run(), [editor]);
+
+  const onSubscript = useCallback(() => editor.chain().focus().toggleSubscript().run(), [editor]);
+  const onSuperscript = useCallback(() => editor.chain().focus().toggleSuperscript().run(), [editor]);
+  const onAlignLeft = useCallback(() => editor.chain().focus().setTextAlign("left").run(), [editor]);
+  const onAlignCenter = useCallback(() => editor.chain().focus().setTextAlign("center").run(), [editor]);
+  const onAlignRight = useCallback(() => editor.chain().focus().setTextAlign("right").run(), [editor]);
+  const onAlignJustify = useCallback(() => editor.chain().focus().setTextAlign("justify").run(), [editor]);
+
+  const onChangeColor = useCallback((color: string) => editor.chain().setColor(color).run(), [editor]);
+  const onClearColor = useCallback(() => editor.chain().focus().unsetColor().run(), [editor]);
+
+  const onChangeHighlight = useCallback((color: string) => editor.chain().setHighlight({ color }).run(), [editor]);
+  const onClearHighlight = useCallback(() => editor.chain().focus().unsetHighlight().run(), [editor]);
+
+  // const onSimplify = useCallback(() => editor.chain().focus().aiSimplify().run(), [editor])
+  // const onEmojify = useCallback(() => editor.chain().focus().aiEmojify().run(), [editor])
+  // const onCompleteSentence = useCallback(() => editor.chain().focus().aiComplete().run(), [editor])
+  // const onFixSpelling = useCallback(() => editor.chain().focus().aiFixSpellingAndGrammar().run(), [editor])
+  // const onMakeLonger = useCallback(() => editor.chain().focus().aiExtend().run(), [editor])
+  // const onMakeShorter = useCallback(() => editor.chain().focus().aiShorten().run(), [editor])
+  // const onTldr = useCallback(() => editor.chain().focus().aiTldr().run(), [editor])
+  // const onTone = useCallback((tone: string) => editor.chain().focus().aiAdjustTone(tone).run(), [editor])
+  // const onTranslate = useCallback((language: Language) => editor.chain().focus().aiTranslate(language).run(), [editor])
+  const onLink = useCallback(
+    (url: string, inNewTab?: boolean) =>
+      editor
+        .chain()
+        .focus()
+        .setLink({ href: url, target: inNewTab ? "_blank" : "" })
+        .run(),
+    [editor],
+  );
+
+  const onSetFont = useCallback(
+    (font: string) => {
+      if (!font || font.length === 0) {
+        return editor.chain().focus().unsetFontFamily().run();
+      }
+      return editor.chain().focus().setFontFamily(font).run();
+    },
+    [editor],
+  );
+
+  const onSetFontSize = useCallback(
+    (fontSize: string) => {
+      if (!fontSize || fontSize.length === 0) {
+        return editor.chain().focus().unsetFontSize().run();
+      }
+      return editor.chain().focus().setFontSize(fontSize).run();
+    },
+    [editor],
+  );
+
+  return {
+    onBold,
+    onItalic,
+    onStrike,
+    onUnderline,
+    onCode,
+    onCodeBlock,
+    onSubscript,
+    onSuperscript,
+    onAlignLeft,
+    onAlignCenter,
+    onAlignRight,
+    onAlignJustify,
+    onChangeColor,
+    onClearColor,
+    onChangeHighlight,
+    onClearHighlight,
+    onSetFont,
+    onSetFontSize,
+    // onSimplify,
+    // onEmojify,
+    // onCompleteSentence,
+    // onFixSpelling,
+    // onMakeLonger,
+    // onMakeShorter,
+    // onTldr,
+    // onTone,
+    // onTranslate,
+    onLink,
+  };
+};