@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-node/table-node/ui/table-trigger-button/table-trigger-button.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { forwardRef } from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseTableTriggerButtonConfig } from "./"
+import { useTableTriggerButton } from "./"
+
+// --- Components ---
+import { TableGridSelector } from "./table-grid-selector"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../tiptap-ui-primitive/popover"
+
+// --- Styles ---
+import { Card, CardBody } from "../../../../tiptap-ui-primitive/card"
+
+export interface TableTriggerButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableTriggerButtonConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+}
+
+/**
+ * Button component for inserting tables in a Tiptap editor with a grid selector.
+ *
+ * For custom button implementations, use the `useTableTriggerButton` hook instead.
+ *
+ * @example
+ * ```tsx
+ * <TableTriggerButton
+ *   editor={editor}
+ *   hideWhenUnavailable={true}
+ *   onInserted={(rows, cols) => console.log(`Inserted ${rows}x${cols} table`)}
+ * />
+ * ```
+ */
+export const TableTriggerButton = forwardRef<
+  HTMLButtonElement,
+  TableTriggerButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      maxRows = 8,
+      maxCols = 8,
+      onInserted,
+      text,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canInsert,
+      isOpen,
+      setIsOpen,
+      hoveredCell,
+      handleCellHover,
+      handleCellClick,
+      resetHoveredCell,
+      label,
+      Icon,
+    } = useTableTriggerButton({
+      editor,
+      hideWhenUnavailable,
+      maxRows,
+      maxCols,
+      onInserted,
+    })
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            type="button"
+            data-style="ghost"
+            disabled={!canInsert}
+            data-disabled={!canInsert}
+            aria-label={label}
+            tooltip={label}
+            {...buttonProps}
+          >
+            {children ?? (
+              <>
+                <Icon className="tiptap-button-icon" />
+                {text && <span className="tiptap-button-text">{text}</span>}
+              </>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" side="bottom">
+          <Card>
+            <CardBody>
+              <TableGridSelector
+                maxRows={maxRows}
+                maxCols={maxCols}
+                hoveredCell={hoveredCell}
+                onCellHover={handleCellHover}
+                onCellClick={handleCellClick}
+                onMouseLeave={resetHoveredCell}
+                disabled={!canInsert}
+              />
+            </CardBody>
+          </Card>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+TableTriggerButton.displayName = "TableTriggerButton"

package/src/components/tiptap-node/table-node/ui/table-trigger-button/use-table-trigger.ts

@@ -0,0 +1,166 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { Editor } from "@tiptap/react";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isExtensionAvailable } from "../../../../../lib/tiptap-utils";
+// --- Icons ---
+import { TableIcon } from "../../../../tiptap-icons/table-icon";
+
+const REQUIRED_EXTENSIONS = ["table"];
+
+/**
+ * Configuration for the table trigger functionality
+ */
+export interface UseTableTriggerButtonConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the button should hide when table insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Maximum number of rows in the grid selector.
+   * @default 8
+   */
+  maxRows?: number;
+  /**
+   * Maximum number of columns in the grid selector.
+   * @default 8
+   */
+  maxCols?: number;
+  /**
+   * Callback function called after a successful table insertion.
+   */
+  onInserted?: (rows: number, cols: number) => void;
+}
+
+/**
+ * Checks if a table can be inserted in the current editor state
+ */
+export function canInsertTable(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+  return isExtensionAvailable(editor, REQUIRED_EXTENSIONS);
+}
+
+/**
+ * Inserts a table with the specified dimensions
+ */
+export function insertTable(editor: Editor | null, rows: number, cols: number): boolean {
+  if (!editor || !canInsertTable(editor)) return false;
+
+  try {
+    return editor
+      .chain()
+      .focus()
+      .insertTable({
+        rows,
+        cols,
+        withHeaderRow: true,
+      })
+      .run();
+  } catch (error) {
+    console.error("Error inserting table:", error);
+    return false;
+  }
+}
+
+/**
+ * Determines if the table trigger button should be shown
+ */
+export function shouldShowButton(editor: Editor | null, hideWhenUnavailable: boolean): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  const hasExtension = isExtensionAvailable(editor, REQUIRED_EXTENSIONS);
+  if (!hasExtension) return false;
+
+  // If hiding when unavailable, also check if we can actually insert
+  return !hideWhenUnavailable || canInsertTable(editor);
+}
+
+/**
+ * Custom hook that provides table insertion functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * function MyTableButton() {
+ *   const {
+ *     isVisible,
+ *     canInsert,
+ *     isOpen,
+ *     setIsOpen,
+ *     hoveredCell,
+ *     handleCellHover,
+ *     handleCellClick,
+ *     resetHoveredCell
+ *   } = useTableTriggerButton({ editor })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <Popover open={isOpen} onOpenChange={setIsOpen}>
+ *       <PopoverTrigger>Insert Table</PopoverTrigger>
+ *       <PopoverContent>
+ *         <TableGridSelector
+ *           hoveredCell={hoveredCell}
+ *           onCellHover={handleCellHover}
+ *           onCellClick={handleCellClick}
+ *           onMouseLeave={resetHoveredCell}
+ *         />
+ *       </PopoverContent>
+ *     </Popover>
+ *   )
+ * }
+ * ```
+ */
+export function useTableTriggerButton(config?: UseTableTriggerButtonConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onInserted } = config || {};
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isOpen, setIsOpen] = useState(false);
+  const [hoveredCell, setHoveredCell] = useState<{
+    row: number;
+    col: number;
+  } | null>(null);
+
+  const isVisible = shouldShowButton(editor, hideWhenUnavailable);
+  const canInsert = canInsertTable(editor);
+
+  const handleCellHover = useCallback((row: number, col: number) => {
+    setHoveredCell({ row, col });
+  }, []);
+
+  const handleCellClick = useCallback(
+    (row: number, col: number) => {
+      const success = insertTable(editor, row + 1, col + 1);
+      if (success) {
+        setIsOpen(false);
+        onInserted?.(row + 1, col + 1);
+      }
+    },
+    [editor, onInserted],
+  );
+
+  const resetHoveredCell = useCallback(() => {
+    setHoveredCell(null);
+  }, []);
+
+  return {
+    isVisible,
+    canInsert,
+    isOpen,
+    setIsOpen,
+    hoveredCell,
+    handleCellHover,
+    handleCellClick,
+    resetHoveredCell,
+    label: "Insert table",
+    Icon: TableIcon,
+  };
+}

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

@@ -0,0 +1,125 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Tiptap UI ---
+import type { UseBlockquoteConfig } from "./"
+import {
+  BLOCKQUOTE_SHORTCUT_KEY,
+  useBlockquote,
+} from "./"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+
+export interface BlockquoteButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseBlockquoteConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function BlockquoteShortcutBadge({
+  shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling blockquote in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useBlockquote` hook instead.
+ */
+export const BlockquoteButton = forwardRef<
+  HTMLButtonElement,
+  BlockquoteButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useBlockquote({
+      editor,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip="Blockquote"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <BlockquoteShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+BlockquoteButton.displayName = "BlockquoteButton"

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

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

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

@@ -0,0 +1,246 @@
+"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 { BlockquoteIcon } from "../../tiptap-icons/blockquote-icon"
+
+// --- UI Utils ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes,
+} from "../../../lib/tiptap-utils"
+
+export const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b"
+
+/**
+ * Configuration for the blockquote functionality
+ */
+export interface UseBlockquoteConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when blockquote is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if blockquote can be toggled in the current editor state
+ */
+export function canToggleBlockquote(
+  editor: Editor | null,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isNodeInSchema("blockquote", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  if (!turnInto) {
+    return editor.can().toggleWrap("blockquote")
+  }
+
+  // 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 wrap in blockquote directly on the selection,
+  // or we can clear formatting/nodes to arrive at a blockquote.
+  return editor.can().toggleWrap("blockquote") || editor.can().clearNodes()
+}
+
+/**
+ * Toggles blockquote formatting for a specific node or the current selection
+ */
+export function toggleBlockquote(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleBlockquote(editor)) 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()
+    }
+
+    const toggle = editor.isActive("blockquote")
+      ? chain.lift("blockquote")
+      : chain.wrapIn("blockquote")
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the blockquote button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema("blockquote", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleBlockquote(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides blockquote functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleBlockquoteButton() {
+ *   const { isVisible, handleToggle, isActive } = useBlockquote()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Blockquote</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedBlockquoteButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Blockquote toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Blockquote
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useBlockquote(config?: UseBlockquoteConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleBlockquote(editor)
+  const isActive = editor?.isActive("blockquote") || false
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleBlockquote(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: BlockquoteIcon,
+  }
+}