@meta-1/editor 0.0.28 → 1.0.0

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

@@ -1,193 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,96 +0,0 @@
-// 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,
-  };
-};