@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-ui/code-block-button/code-block-button.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+
+// --- 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 { UseCodeBlockConfig } from "./";
+import { CODE_BLOCK_SHORTCUT_KEY, useCodeBlock } from "./";
+
+export interface CodeBlockButtonProps extends Omit<ButtonProps, "type">, UseCodeBlockConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string;
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean;
+}
+
+export function CodeBlockShortcutBadge({ shortcutKeys = CODE_BLOCK_SHORTCUT_KEY }: { shortcutKeys?: string }) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>;
+}
+
+/**
+ * Button component for toggling code block in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCodeBlock` hook instead.
+ */
+export const CodeBlockButton = forwardRef<HTMLButtonElement, CodeBlockButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, canToggle, isActive, handleToggle, label, shortcutKeys, Icon } = useCodeBlock({
+      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
+        aria-label={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="Code Block"
+        type="button"
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <CodeBlockShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+
+CodeBlockButton.displayName = "CodeBlockButton";

package/src/components/tiptap-ui/code-block-button/index.tsx

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

package/src/components/tiptap-ui/code-block-button/use-code-block.ts

@@ -0,0 +1,256 @@
+"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"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes,
+} from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { CodeBlockIcon } from "../../tiptap-icons/code-block-icon"
+
+export const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c"
+
+/**
+ * Configuration for the code block functionality
+ */
+export interface UseCodeBlockConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when code block is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful code block toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if code block can be toggled in the current editor state
+ */
+export function canToggle(
+  editor: Editor | null,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isNodeInSchema("codeBlock", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  if (!turnInto) {
+    return editor.can().toggleNode("codeBlock", "paragraph")
+  }
+
+  // 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 toggle code block directly on the selection,
+  // or we can clear formatting/nodes to arrive at a code block.
+  return (
+    editor.can().toggleNode("codeBlock", "paragraph") ||
+    editor.can().clearNodes()
+  )
+}
+
+/**
+ * Toggles code block in the editor
+ */
+export function toggleCodeBlock(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggle(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("codeBlock")
+      ? chain.setNode("paragraph")
+      : chain.toggleNode("codeBlock", "paragraph")
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the code block 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("codeBlock", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggle(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides code block functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle } = useCodeBlock()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       Code Block
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle, label } = useCodeBlock({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Code block toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Code Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useCodeBlock(config?: UseCodeBlockConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggleState = canToggle(editor)
+  const isActive = editor?.isActive("codeBlock") || 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 = toggleCodeBlock(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: "Code Block",
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: CodeBlockIcon,
+  }
+}

package/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+.tiptap-button-highlight {
+  @apply relative rounded-full;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  background-color: var(--highlight-color);
+  transition: transform 0.2s ease;
+}
+
+.tiptap-button-highlight::after {
+  @apply absolute inset-0 rounded-full;
+  content: "";
+  box-sizing: border-box;
+  border: 1px solid var(--highlight-color);
+  filter: brightness(95%);
+  mix-blend-mode: multiply;
+}
+
+.dark .tiptap-button-highlight::after {
+  filter: brightness(140%);
+  mix-blend-mode: lighten;
+}
+
+.tiptap-button[data-active-state="on"] .tiptap-button-highlight::after {
+  filter: brightness(80%);
+}
+
+.dark .tiptap-button[data-active-state="on"] .tiptap-button-highlight::after {
+  filter: brightness(180%);
+}

package/src/components/tiptap-ui/color-highlight-button/color-highlight-button.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import { forwardRef, useCallback, useMemo } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseColorHighlightConfig } from "./"
+import {
+  COLOR_HIGHLIGHT_SHORTCUT_KEY,
+  useColorHighlight,
+} 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"
+
+// --- Styles ---
+import "./color-highlight-button.css"
+
+export interface ColorHighlightButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseColorHighlightConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ColorHighlightShortcutBadge({
+  shortcutKeys = COLOR_HIGHLIGHT_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for applying color highlights in a Tiptap editor.
+ *
+ * Supports two highlighting modes:
+ * - "mark": Uses the highlight mark extension (default)
+ * - "node": Uses the node background extension
+ *
+ * For custom button implementations, use the `useColorHighlight` hook instead.
+ *
+ * @example
+ * ```tsx
+ * // Mark-based highlighting (default)
+ * <ColorHighlightButton highlightColor="yellow" />
+ *
+ * // Node-based background coloring
+ * <ColorHighlightButton
+ *   highlightColor="var(--tt-color-highlight-blue)"
+ *   mode="node"
+ * />
+ *
+ * // With custom callback
+ * <ColorHighlightButton
+ *   highlightColor="red"
+ *   mode="mark"
+ *   onApplied={({ color, mode }) => console.log(`Applied ${color} in ${mode} mode`)}
+ * />
+ * ```
+ */
+export const ColorHighlightButton = forwardRef<
+  HTMLButtonElement,
+  ColorHighlightButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      highlightColor,
+      text,
+      hideWhenUnavailable = false,
+      mode = "mark",
+      onApplied,
+      showShortcut = false,
+      onClick,
+      children,
+      style,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canColorHighlight,
+      isActive,
+      handleColorHighlight,
+      label,
+      shortcutKeys,
+    } = useColorHighlight({
+      editor,
+      highlightColor,
+      label: text || `Toggle highlight (${highlightColor})`,
+      hideWhenUnavailable,
+      mode,
+      onApplied,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleColorHighlight()
+      },
+      [handleColorHighlight, onClick]
+    )
+
+    const buttonStyle = useMemo(
+      () =>
+        ({
+          ...style,
+          "--highlight-color": highlightColor,
+        }) as React.CSSProperties,
+      [highlightColor, style]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canColorHighlight}
+        data-disabled={!canColorHighlight}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        style={buttonStyle}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <span
+              className="tiptap-button-highlight"
+              style={
+                { "--highlight-color": highlightColor } as React.CSSProperties
+              }
+            />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ColorHighlightShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ColorHighlightButton.displayName = "ColorHighlightButton"

package/src/components/tiptap-ui/color-highlight-button/index.tsx

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