@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/slash-dropdown-menu/use-slash-dropdown-menu.ts

@@ -0,0 +1,317 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// import { findSelectionPosition, hasContentAbove } from "../../../lib/tiptap-advanced-utils";
+// --- Lib ---
+import { isExtensionAvailable, isNodeInSchema } from "../../../lib/tiptap-utils";
+import { AtSignIcon } from "../../tiptap-icons/at-sign-icon";
+import { BlockquoteIcon } from "../../tiptap-icons/blockquote-icon";
+// --- Icons ---
+import { CodeBlockIcon } from "../../tiptap-icons/code-block-icon";
+import { HeadingOneIcon } from "../../tiptap-icons/heading-one-icon";
+import { HeadingThreeIcon } from "../../tiptap-icons/heading-three-icon";
+import { HeadingTwoIcon } from "../../tiptap-icons/heading-two-icon";
+import { ImageIcon } from "../../tiptap-icons/image-icon";
+import { ListIcon } from "../../tiptap-icons/list-icon";
+import { ListOrderedIcon } from "../../tiptap-icons/list-ordered-icon";
+import { ListTodoIcon } from "../../tiptap-icons/list-todo-icon";
+import { MinusIcon } from "../../tiptap-icons/minus-icon";
+// import { SmilePlusIcon } from "../../tiptap-icons/smile-plus-icon";
+import { TableIcon } from "../../tiptap-icons/table-icon";
+import { TypeIcon } from "../../tiptap-icons/type-icon";
+// --- Tiptap UI ---
+import type { SuggestionItem } from "../../tiptap-ui-utils/suggestion-menu";
+// import { addEmojiTrigger } from "../emoji-trigger-button";
+import { addMentionTrigger } from "../mention-trigger-button";
+
+export interface SlashMenuConfig {
+  enabledItems?: SlashMenuItemType[];
+  customItems?: SuggestionItem[];
+  itemGroups?: {
+    [key in SlashMenuItemType]?: string;
+  };
+  showGroups?: boolean;
+}
+
+const texts = {
+  // Style
+  text: {
+    title: "Text",
+    subtext: "Regular text paragraph",
+    keywords: ["p", "paragraph", "text"],
+    badge: TypeIcon,
+    group: "Style",
+  },
+  heading_1: {
+    title: "Heading 1",
+    subtext: "Top-level heading",
+    keywords: ["h", "heading1", "h1"],
+    badge: HeadingOneIcon,
+    group: "Style",
+  },
+  heading_2: {
+    title: "Heading 2",
+    subtext: "Key section heading",
+    keywords: ["h2", "heading2", "subheading"],
+    badge: HeadingTwoIcon,
+    group: "Style",
+  },
+  heading_3: {
+    title: "Heading 3",
+    subtext: "Subsection and group heading",
+    keywords: ["h3", "heading3", "subheading"],
+    badge: HeadingThreeIcon,
+    group: "Style",
+  },
+  bullet_list: {
+    title: "Bullet List",
+    subtext: "List with unordered items",
+    keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
+    badge: ListIcon,
+    group: "Style",
+  },
+  ordered_list: {
+    title: "Numbered List",
+    subtext: "List with ordered items",
+    keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
+    badge: ListOrderedIcon,
+    group: "Style",
+  },
+  task_list: {
+    title: "To-do list",
+    subtext: "List with tasks",
+    keywords: ["tasklist", "task list", "todo", "checklist"],
+    badge: ListTodoIcon,
+    group: "Style",
+  },
+  quote: {
+    title: "Blockquote",
+    subtext: "Blockquote block",
+    keywords: ["quote", "blockquote"],
+    badge: BlockquoteIcon,
+    group: "Style",
+  },
+  code_block: {
+    title: "Code Block",
+    subtext: "Code block with syntax highlighting",
+    keywords: ["code", "pre"],
+    badge: CodeBlockIcon,
+    group: "Style",
+  },
+
+  // Insert
+  mention: {
+    title: "Mention",
+    subtext: "Mention a user or item",
+    keywords: ["mention", "user", "item", "tag"],
+    badge: AtSignIcon,
+    group: "Insert",
+  },
+  // emoji: {
+  //   title: "Emoji",
+  //   subtext: "Insert an emoji",
+  //   keywords: ["emoji", "emoticon", "smiley"],
+  //   badge: SmilePlusIcon,
+  //   group: "Insert",
+  // },
+  table: {
+    title: "Table",
+    subtext: "Insert a table",
+    aliases: ["table", "insertTable"],
+    badge: TableIcon,
+    group: "Insert",
+  },
+  // Upload
+  image: {
+    title: "Image",
+    subtext: "Resizable image with caption",
+    keywords: ["image", "imageUpload", "upload", "img", "picture", "media", "url"],
+    badge: ImageIcon,
+    group: "Insert",
+  },
+};
+
+export type SlashMenuItemType = keyof typeof texts;
+
+const getItemImplementations = () => {
+  return {
+    // Style
+    text: {
+      check: (editor: Editor) => isNodeInSchema("paragraph", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().setParagraph().run();
+      },
+    },
+    heading_1: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+      },
+    },
+    heading_2: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+      },
+    },
+    heading_3: {
+      check: (editor: Editor) => isNodeInSchema("heading", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+      },
+    },
+    bullet_list: {
+      check: (editor: Editor) => isNodeInSchema("bulletList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleBulletList().run();
+      },
+    },
+    ordered_list: {
+      check: (editor: Editor) => isNodeInSchema("orderedList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleOrderedList().run();
+      },
+    },
+    task_list: {
+      check: (editor: Editor) => isNodeInSchema("taskList", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleTaskList().run();
+      },
+    },
+    quote: {
+      check: (editor: Editor) => isNodeInSchema("blockquote", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleBlockquote().run();
+      },
+    },
+    code_block: {
+      check: (editor: Editor) => isNodeInSchema("codeBlock", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
+      },
+    },
+
+    // Insert
+    mention: {
+      check: (editor: Editor) => isExtensionAvailable(editor, ["mention", "mentionAdvanced"]),
+      action: ({ editor }: { editor: Editor }) => addMentionTrigger(editor),
+    },
+    // emoji: {
+    //   check: (editor: Editor) => isExtensionAvailable(editor, ["emoji", "emojiPicker"]),
+    //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
+    // },
+    divider: {
+      check: (editor: Editor) => isNodeInSchema("horizontalRule", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor.chain().focus().setHorizontalRule().run();
+      },
+    },
+    table: {
+      check: (editor: Editor) => isNodeInSchema("table", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor
+          .chain()
+          .focus()
+          .insertTable({
+            rows: 3,
+            cols: 3,
+            withHeaderRow: true,
+          })
+          .run();
+      },
+    },
+
+    // Upload
+    image: {
+      check: (editor: Editor) => isNodeInSchema("image", editor),
+      action: ({ editor }: { editor: Editor }) => {
+        editor
+          .chain()
+          .focus()
+          .insertContent({
+            type: "imageUpload",
+          })
+          .run();
+      },
+    },
+  };
+};
+
+function organizeItemsByGroups(items: SuggestionItem[], showGroups: boolean): SuggestionItem[] {
+  if (!showGroups) {
+    return items.map((item) => ({ ...item, group: "" }));
+  }
+
+  const groups: { [groupLabel: string]: SuggestionItem[] } = {};
+
+  // Group items
+  items.forEach((item) => {
+    const groupLabel = item.group || "";
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = [];
+    }
+    groups[groupLabel].push(item);
+  });
+
+  // Flatten groups in order (this maintains the visual order for keyboard navigation)
+  const organizedItems: SuggestionItem[] = [];
+  Object.entries(groups).forEach(([, groupItems]) => {
+    organizedItems.push(...groupItems);
+  });
+
+  return organizedItems;
+}
+
+/**
+ * Custom hook for slash dropdown menu functionality
+ */
+export function useSlashDropdownMenu(config?: SlashMenuConfig) {
+  const { t } = useTranslation();
+  const getSlashMenuItems = useCallback(
+    (editor: Editor) => {
+      const items: SuggestionItem[] = [];
+
+      const enabledItems = config?.enabledItems || (Object.keys(texts) as SlashMenuItemType[]);
+      const showGroups = config?.showGroups !== false;
+
+      const itemImplementations = getItemImplementations();
+
+      enabledItems.forEach((itemType) => {
+        const itemImpl = itemImplementations[itemType];
+        const itemText = texts[itemType];
+
+        if (itemImpl && itemText && itemImpl.check(editor)) {
+          const item: SuggestionItem = {
+            onSelect: ({ editor }) => itemImpl.action({ editor }),
+            ...itemText,
+          };
+
+          if (config?.itemGroups?.[itemType]) {
+            item.group = config.itemGroups[itemType];
+          } else if (!showGroups) {
+            item.group = "";
+          }
+
+          items.push(item);
+        }
+      });
+
+      if (config?.customItems) {
+        items.push(...config.customItems);
+      }
+
+      // Reorganize items by groups to ensure keyboard navigation works correctly
+      const grouped = organizeItemsByGroups(items, showGroups);
+      return grouped.map((item) => ({ ...item, title: t(item.title as string), group: t(item.group as string) }));
+    },
+    [config],
+  );
+
+  return {
+    getSlashMenuItems,
+    config,
+  };
+}

package/src/components/tiptap-ui/text-align-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./text-align-button"
+export * from "./use-text-align"

package/src/components/tiptap-ui/text-align-button/text-align-button.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils";
+import { Badge } from "../../tiptap-ui-primitive/badge";
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button";
+import { Button } from "../../tiptap-ui-primitive/button";
+// --- Tiptap UI ---
+import type { TextAlign, UseTextAlignConfig } from "./";
+import { TEXT_ALIGN_SHORTCUT_KEYS, useTextAlign } from "./";
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+
+export interface TextAlignButtonProps extends Omit<ButtonProps, "type">, UseTextAlignConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string;
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean;
+  /**
+   * Optional custom icon component to render instead of the default.
+   */
+  icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+
+export function TextAlignShortcutBadge({
+  align,
+  shortcutKeys = TEXT_ALIGN_SHORTCUT_KEYS[align],
+}: {
+  align: TextAlign;
+  shortcutKeys?: string;
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>;
+}
+
+/**
+ * Button component for setting text alignment in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTextAlign` hook instead.
+ */
+export const TextAlignButton = forwardRef<HTMLButtonElement, TextAlignButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      align,
+      text,
+      hideWhenUnavailable = false,
+      onAligned,
+      showShortcut = false,
+      onClick,
+      icon: CustomIcon,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, handleTextAlign, label, canAlign, isActive, Icon, shortcutKeys } = useTextAlign({
+      editor,
+      align,
+      hideWhenUnavailable,
+      onAligned,
+    });
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleTextAlign();
+      },
+      [handleTextAlign, onClick],
+    );
+
+    if (!isVisible) {
+      return null;
+    }
+
+    const RenderIcon = CustomIcon ?? Icon;
+
+    return (
+      <Button
+        aria-label={label}
+        aria-pressed={isActive}
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canAlign}
+        data-style="ghost"
+        disabled={!canAlign}
+        onClick={handleClick}
+        role="button"
+        tabIndex={-1}
+        tooltip={t(label)}
+        type="button"
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <RenderIcon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <TextAlignShortcutBadge align={align} shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+
+TextAlignButton.displayName = "TextAlignButton";

package/src/components/tiptap-ui/text-align-button/use-text-align.ts

@@ -0,0 +1,224 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import type { ChainedCommands } from "@tiptap/react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Lib ---
+import {
+  isExtensionAvailable,
+  isNodeTypeSelected,
+} from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { AlignCenterIcon } from "../../tiptap-icons/align-center-icon"
+import { AlignJustifyIcon } from "../../tiptap-icons/align-justify-icon"
+import { AlignLeftIcon } from "../../tiptap-icons/align-left-icon"
+import { AlignRightIcon } from "../../tiptap-icons/align-right-icon"
+
+export type TextAlign = "left" | "center" | "right" | "justify"
+
+/**
+ * Configuration for the text align functionality
+ */
+export interface UseTextAlignConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The text alignment to apply.
+   */
+  align: TextAlign
+  /**
+   * Whether the button should hide when alignment is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful alignment change.
+   */
+  onAligned?: () => void
+}
+
+export const TEXT_ALIGN_SHORTCUT_KEYS: Record<TextAlign, string> = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j",
+}
+
+export const textAlignIcons = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon,
+  justify: AlignJustifyIcon,
+}
+
+export const textAlignLabels: Record<TextAlign, string> = {
+  left: "Align left",
+  center: "Align center",
+  right: "Align right",
+  justify: "Align justify",
+}
+
+/**
+ * Checks if text alignment can be performed in the current editor state
+ */
+export function canSetTextAlign(
+  editor: Editor | null,
+  align: TextAlign
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isExtensionAvailable(editor, "textAlign") ||
+    isNodeTypeSelected(editor, ["image", "horizontalRule"])
+  )
+    return false
+
+  return editor.can().setTextAlign(align)
+}
+
+export function hasSetTextAlign(
+  commands: ChainedCommands
+): commands is ChainedCommands & {
+  setTextAlign: (align: TextAlign) => ChainedCommands
+} {
+  return "setTextAlign" in commands
+}
+
+/**
+ * Checks if the text alignment is currently active
+ */
+export function isTextAlignActive(
+  editor: Editor | null,
+  align: TextAlign
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive({ textAlign: align })
+}
+
+/**
+ * Sets text alignment in the editor
+ */
+export function setTextAlign(editor: Editor | null, align: TextAlign): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canSetTextAlign(editor, align)) return false
+
+  const chain = editor.chain().focus()
+  if (hasSetTextAlign(chain)) {
+    return chain.setTextAlign(align).run()
+  }
+
+  return false
+}
+
+/**
+ * Determines if the text align button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  align: TextAlign
+}): boolean {
+  const { editor, hideWhenUnavailable, align } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, "textAlign")) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetTextAlign(editor, align)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides text align functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleAlignButton() {
+ *   const { isVisible, handleTextAlign } = useTextAlign({ align: "center" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleTextAlign}>Align Center</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedAlignButton() {
+ *   const { isVisible, handleTextAlign, label, isActive } = useTextAlign({
+ *     editor: myEditor,
+ *     align: "right",
+ *     hideWhenUnavailable: true,
+ *     onAligned: () => console.log('Text aligned!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleTextAlign}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Align Right
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useTextAlign(config: UseTextAlignConfig) {
+  const {
+    editor: providedEditor,
+    align,
+    hideWhenUnavailable = false,
+    onAligned,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canAlign = canSetTextAlign(editor, align)
+  const isActive = isTextAlignActive(editor, align)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, align, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, align])
+
+  const handleTextAlign = useCallback(() => {
+    if (!editor) return false
+
+    const success = setTextAlign(editor, align)
+    if (success) {
+      onAligned?.()
+    }
+    return success
+  }, [editor, align, onAligned])
+
+  return {
+    isVisible,
+    isActive,
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align],
+  }
+}

package/src/components/tiptap-ui/text-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./text-button"
+export * from "./use-text"