@meta-1/editor 0.0.29 → 1.0.1

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

@@ -0,0 +1,315 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+import type { Node } from "@tiptap/pm/model"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeTypeSelected,
+  isValidPosition,
+} from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { SmilePlusIcon } from "../../tiptap-icons/smile-plus-icon"
+
+export const EMOJI_TRIGGER_SHORTCUT_KEY = "mod+shift+e"
+
+/**
+ * Configuration for the emoji trigger functionality
+ */
+export interface UseEmojiTriggerConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Optional node to insert trigger after.
+   */
+  node?: Node | null
+  /**
+   * Optional position of the node to insert trigger after.
+   */
+  nodePos?: number | null
+  /**
+   * The trigger text to insert.
+   * @default ":"
+   */
+  trigger?: string
+  /**
+   * Whether the button should hide when trigger insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful trigger insertion.
+   */
+  onTriggerApplied?: (trigger: string) => void
+}
+
+/**
+ * Checks if emoji trigger can be added in the current editor state
+ */
+export function canAddEmojiTrigger(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (isNodeTypeSelected(editor, ["image"])) return false
+
+  return true
+}
+
+/**
+ * Inserts a trigger in a block node at a specified position or after the current selection
+ */
+function insertTriggerInBlockNode(
+  editor: Editor,
+  trigger: string,
+  node?: Node | null,
+  nodePos?: number | null
+): boolean {
+  if ((node !== undefined && node !== null) || isValidPosition(nodePos)) {
+    const foundPos = findNodePosition({
+      editor,
+      node: node || undefined,
+      nodePos: nodePos || undefined,
+    })
+
+    if (!foundPos) {
+      return false
+    }
+
+    const isEmpty =
+      foundPos.node.type.name === "paragraph" &&
+      foundPos.node.content.size === 0
+    const posAndNodeSize = foundPos.pos + foundPos.node.nodeSize
+
+    return editor
+      .chain()
+      .insertContentAt(isEmpty ? foundPos.pos : posAndNodeSize, {
+        type: "paragraph",
+        content: [{ type: "text", text: trigger }],
+      })
+      .focus(isEmpty ? foundPos.pos + 2 : posAndNodeSize + trigger.length + 1)
+      .run()
+  }
+
+  const { $from } = editor.state.selection
+
+  return editor
+    .chain()
+    .insertContentAt($from.after(), {
+      type: "paragraph",
+      content: [{ type: "text", text: trigger }],
+    })
+    .focus()
+    .run()
+}
+
+/**
+ * Inserts a trigger in a text node at the current selection
+ */
+function insertTriggerInTextNode(
+  editor: Editor,
+  trigger: string,
+  node?: Node | null,
+  nodePos?: number | null
+): boolean {
+  if ((node !== undefined && node !== null) || isValidPosition(nodePos)) {
+    const foundPos = findNodePosition({
+      editor,
+      node: node || undefined,
+      nodePos: nodePos || undefined,
+    })
+
+    if (!foundPos) {
+      return false
+    }
+
+    const isEmpty =
+      foundPos.node.type.name === "paragraph" &&
+      foundPos.node.content.size === 0
+    const posAndNodeSize = foundPos.pos + foundPos.node.nodeSize
+
+    editor.view.dispatch(
+      editor.view.state.tr
+        .scrollIntoView()
+        .insertText(
+          trigger,
+          isEmpty ? foundPos.pos : posAndNodeSize,
+          isEmpty ? foundPos.pos : posAndNodeSize
+        )
+    )
+
+    editor.commands.focus(
+      isEmpty ? foundPos.pos + 2 : posAndNodeSize + trigger.length + 1
+    )
+
+    return true
+  }
+
+  const { $from } = editor.state.selection
+  const currentNode = $from.node()
+  const hasContentBefore =
+    $from.parentOffset > 0 &&
+    currentNode.textContent[$from.parentOffset - 1] !== " "
+
+  return editor
+    .chain()
+    .insertContent({
+      type: "text",
+      text: hasContentBefore ? ` ${trigger}` : trigger,
+    })
+    .focus()
+    .run()
+}
+
+/**
+ * Adds an emoji trigger at the current selection or specified node position
+ */
+export function addEmojiTrigger(
+  editor: Editor | null,
+  trigger: string = ":",
+  node?: Node | null,
+  nodePos?: number | null
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canAddEmojiTrigger(editor)) return false
+
+  try {
+    const { $from } = editor.state.selection
+    const currentNode = $from.node()
+    const isBlockNode = currentNode.isBlock && !currentNode.isTextblock
+
+    if (isBlockNode) {
+      return insertTriggerInBlockNode(editor, trigger, node, nodePos)
+    }
+
+    return insertTriggerInTextNode(editor, trigger, node, nodePos)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the emoji trigger 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 (hideWhenUnavailable && !editor.isActive("code")) {
+    return canAddEmojiTrigger(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides emoji trigger functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleEmojiTriggerButton() {
+ *   const { isVisible, handleAddTrigger } = useEmojiTrigger()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleAddTrigger}>Add Emoji</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedEmojiTriggerButton() {
+ *   const { isVisible, handleAddTrigger, label } = useEmojiTrigger({
+ *     editor: myEditor,
+ *     trigger: "::",
+ *     hideWhenUnavailable: true,
+ *     onTriggerApplied: (trigger) => console.log('Trigger added:', trigger)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleAddTrigger}
+ *       aria-label={label}
+ *     >
+ *       Add Emoji Trigger
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useEmojiTrigger(config?: UseEmojiTriggerConfig) {
+  const {
+    editor: providedEditor,
+    node,
+    nodePos,
+    trigger = ":",
+    hideWhenUnavailable = false,
+    onTriggerApplied,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canAddTrigger = canAddEmojiTrigger(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleAddTrigger = useCallback(() => {
+    if (!editor) return false
+
+    const success = addEmojiTrigger(editor, trigger, node, nodePos)
+    if (success) {
+      onTriggerApplied?.(trigger)
+    }
+    return success
+  }, [editor, trigger, node, nodePos, onTriggerApplied])
+
+  useHotkeys(
+    EMOJI_TRIGGER_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleAddTrigger()
+    },
+    {
+      enabled: isVisible && canAddTrigger,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    handleAddTrigger,
+    canAddTrigger,
+    label: "Add emoji",
+    shortcutKeys: EMOJI_TRIGGER_SHORTCUT_KEY,
+    trigger,
+    Icon: SmilePlusIcon,
+  }
+}

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

@@ -0,0 +1,127 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Tiptap UI ---
+import type {
+  Level,
+  UseHeadingConfig,
+} from "./"
+import {
+  HEADING_SHORTCUT_KEYS,
+  useHeading,
+} from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+export interface HeadingButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseHeadingConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function HeadingShortcutBadge({
+  level,
+  shortcutKeys = HEADING_SHORTCUT_KEYS[level],
+}: {
+  level: Level
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling heading in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHeading` hook instead.
+ */
+export const HeadingButton = forwardRef<HTMLButtonElement, HeadingButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      level,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      Icon,
+      shortcutKeys,
+    } = useHeading({
+      editor,
+      level,
+      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={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <HeadingShortcutBadge level={level} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+HeadingButton.displayName = "HeadingButton"

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

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