@meta-1/editor 0.0.29 → 1.0.1

package/src/components/tiptap-ui/list-button/use-list.ts

@@ -0,0 +1,326 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { type Editor } from "@tiptap/react"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { ListIcon } from "../../tiptap-icons/list-icon"
+import { ListOrderedIcon } from "../../tiptap-icons/list-ordered-icon"
+import { ListTodoIcon } from "../../tiptap-icons/list-todo-icon"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes,
+} from "../../../lib/tiptap-utils"
+
+export type ListType = "bulletList" | "orderedList" | "taskList"
+
+/**
+ * Configuration for the list functionality
+ */
+export interface UseListConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The type of list to toggle.
+   */
+  type: ListType
+  /**
+   * Whether the button should hide when list is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+export const listIcons = {
+  bulletList: ListIcon,
+  orderedList: ListOrderedIcon,
+  taskList: ListTodoIcon,
+}
+
+export const listLabels: Record<ListType, string> = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List",
+}
+
+export const LIST_SHORTCUT_KEYS: Record<ListType, string> = {
+  bulletList: "mod+shift+8",
+  orderedList: "mod+shift+7",
+  taskList: "mod+shift+9",
+}
+
+/**
+ * Checks if a list can be toggled in the current editor state
+ */
+export function canToggleList(
+  editor: Editor | null,
+  type: ListType,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+    return false
+
+  if (!turnInto) {
+    switch (type) {
+      case "bulletList":
+        return editor.can().toggleBulletList()
+      case "orderedList":
+        return editor.can().toggleOrderedList()
+      case "taskList":
+        return editor.can().toggleList("taskList", "taskItem")
+      default:
+        return false
+    }
+  }
+
+  // Ensure selection is in nodes we're allowed to convert
+  if (
+    !selectionWithinConvertibleTypes(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock",
+    ])
+  )
+    return false
+
+  // Either we can set list directly on the selection,
+  // or we can clear formatting/nodes to arrive at a list.
+  switch (type) {
+    case "bulletList":
+      return editor.can().toggleBulletList() || editor.can().clearNodes()
+    case "orderedList":
+      return editor.can().toggleOrderedList() || editor.can().clearNodes()
+    case "taskList":
+      return (
+        editor.can().toggleList("taskList", "taskItem") ||
+        editor.can().clearNodes()
+      )
+    default:
+      return false
+  }
+}
+
+/**
+ * Checks if list is currently active
+ */
+export function isListActive(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList")
+    case "orderedList":
+      return editor.isActive("orderedList")
+    case "taskList":
+      return editor.isActive("taskList")
+    default:
+      return false
+  }
+}
+
+/**
+ * Toggles list in the editor
+ */
+export function toggleList(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleList(editor, type)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      const resolvedFrom = state.doc.resolve(from)
+      const resolvedTo = state.doc.resolve(to)
+
+      chain = chain
+        .setTextSelection(TextSelection.between(resolvedFrom, resolvedTo))
+        .clearNodes()
+    }
+
+    if (editor.isActive(type)) {
+      // Unwrap list
+      chain
+        .liftListItem("listItem")
+        .lift("bulletList")
+        .lift("orderedList")
+        .lift("taskList")
+        .run()
+    } else {
+      // Wrap in specific list type
+      const toggleMap: Record<ListType, () => typeof chain> = {
+        bulletList: () => chain.toggleBulletList(),
+        orderedList: () => chain.toggleOrderedList(),
+        taskList: () => chain.toggleList("taskList", "taskItem"),
+      }
+
+      const toggle = toggleMap[type]
+      if (!toggle) return false
+
+      toggle().run()
+    }
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the list button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  type: ListType
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, type, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema(type, editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleList(editor, type)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides list functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleListButton() {
+ *   const { isVisible, handleToggle, isActive } = useList({ type: "bulletList" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Bullet List</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useList({
+ *     type: "orderedList",
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('List toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle List
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useList(config: UseListConfig) {
+  const {
+    editor: providedEditor,
+    type,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleList(editor, type)
+  const isActive = isListActive(editor, type)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, type, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleList(editor, type)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, type, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: listLabels[type],
+    shortcutKeys: LIST_SHORTCUT_KEYS[type],
+    Icon: listIcons[type],
+  }
+}

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

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

package/src/components/tiptap-ui/mark-button/mark-button.tsx

@@ -0,0 +1,110 @@
+"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 { Mark, UseMarkConfig } from "./";
+import { MARK_SHORTCUT_KEYS, useMark } from "./";
+
+export interface MarkButtonProps extends Omit<ButtonProps, "type">, UseMarkConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string;
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean;
+}
+
+export function MarkShortcutBadge({
+  type,
+  shortcutKeys = MARK_SHORTCUT_KEYS[type],
+}: {
+  type: Mark;
+  shortcutKeys?: string;
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>;
+}
+
+/**
+ * Button component for toggling marks in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useMark` hook instead.
+ */
+export const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      type,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, handleMark, label, canToggle, isActive, Icon, shortcutKeys } = useMark({
+      editor,
+      type,
+      hideWhenUnavailable,
+      onToggled,
+    });
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleMark();
+      },
+      [handleMark, onClick],
+    );
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <Button
+        aria-label={t(label)}
+        aria-pressed={isActive}
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canToggle}
+        data-style="ghost"
+        disabled={!canToggle}
+        onClick={handleClick}
+        role="button"
+        tabIndex={-1}
+        tooltip={t(label)}
+        type="button"
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <MarkShortcutBadge shortcutKeys={shortcutKeys} type={type} />}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+
+MarkButton.displayName = "MarkButton";

package/src/components/tiptap-ui/mark-button/use-mark.ts

@@ -0,0 +1,195 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isMarkInSchema, isNodeTypeSelected } from "../../../lib/tiptap-utils";
+// --- Icons ---
+import { BoldIcon } from "../../tiptap-icons/bold-icon";
+import { Code2Icon } from "../../tiptap-icons/code2-icon";
+import { ItalicIcon } from "../../tiptap-icons/italic-icon";
+import { StrikeIcon } from "../../tiptap-icons/strike-icon";
+import { SubscriptIcon } from "../../tiptap-icons/subscript-icon";
+import { SuperscriptIcon } from "../../tiptap-icons/superscript-icon";
+import { UnderlineIcon } from "../../tiptap-icons/underline-icon";
+
+export type Mark = "bold" | "italic" | "strike" | "code" | "underline" | "superscript" | "subscript";
+
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * The type of mark to toggle
+   */
+  type: Mark;
+  /**
+   * Whether the button should hide when mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful mark toggle.
+   */
+  onToggled?: () => void;
+}
+
+export const markIcons = {
+  bold: BoldIcon,
+  italic: ItalicIcon,
+  underline: UnderlineIcon,
+  strike: StrikeIcon,
+  code: Code2Icon,
+  superscript: SuperscriptIcon,
+  subscript: SubscriptIcon,
+};
+
+export const MARK_SHORTCUT_KEYS: Record<Mark, string> = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,",
+};
+
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export function canToggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ["image"])) return false;
+
+  return editor.can().toggleMark(type);
+}
+
+/**
+ * Checks if a mark is currently active
+ */
+export function isMarkActive(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false;
+  return editor.isActive(type);
+}
+
+/**
+ * Toggles a mark in the editor
+ */
+export function toggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggleMark(editor, type)) return false;
+
+  return editor.chain().focus().toggleMark(type).run();
+}
+
+/**
+ * Determines if the mark button should be shown
+ */
+export function shouldShowButton(props: { editor: Editor | null; type: Mark; hideWhenUnavailable: boolean }): boolean {
+  const { editor, type, hideWhenUnavailable } = props;
+
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema(type, editor)) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleMark(editor, type);
+  }
+
+  return true;
+}
+
+/**
+ * Gets the formatted mark name
+ */
+export function getFormattedMarkName(type: Mark): string {
+  return type.charAt(0).toUpperCase() + type.slice(1);
+}
+
+/**
+ * Custom hook that provides mark functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useMark(config: UseMarkConfig) {
+  const { editor: providedEditor, type, hideWhenUnavailable = false, onToggled } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canToggle = canToggleMark(editor, type);
+  const isActive = isMarkActive(editor, type);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, type, hideWhenUnavailable]);
+
+  const handleMark = useCallback(() => {
+    if (!editor) return false;
+
+    const success = toggleMark(editor, type);
+    if (success) {
+      onToggled?.();
+    }
+    return success;
+  }, [editor, type, onToggled]);
+
+  return {
+    isVisible,
+    isActive,
+    handleMark,
+    canToggle,
+    label: getFormattedMarkName(type),
+    shortcutKeys: MARK_SHORTCUT_KEYS[type],
+    Icon: markIcons[type],
+  };
+}

package/src/components/tiptap-ui/mention-dropdown-menu/index.tsx

@@ -0,0 +1 @@
+export * from "./mention-dropdown-menu"