create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts

@@ -0,0 +1,220 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { ListIcon } from "@/components/tiptap-icons/list-icon"
+import { ListOrderedIcon } from "@/components/tiptap-icons/list-ordered-icon"
+import { ListTodoIcon } from "@/components/tiptap-icons/list-todo-icon"
+
+// --- Lib ---
+import { isNodeInSchema } from "@/lib/tiptap-utils"
+
+// --- Tiptap UI ---
+import {
+  canToggleList,
+  isListActive,
+  listIcons,
+  type ListType,
+} from "@/components/tiptap-ui/list-button"
+
+/**
+ * Configuration for the list dropdown menu functionality
+ */
+export interface UseListDropdownMenuConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The list types to display in the dropdown.
+   * @default ["bulletList", "orderedList", "taskList"]
+   */
+  types?: ListType[]
+  /**
+   * Whether the dropdown should be hidden when no list types are available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+export interface ListOption {
+  label: string
+  type: ListType
+  icon: React.ElementType
+}
+
+export const listOptions: ListOption[] = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: ListIcon,
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: ListOrderedIcon,
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: ListTodoIcon,
+  },
+]
+
+export function canToggleAnyList(
+  editor: Editor | null,
+  listTypes: ListType[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => canToggleList(editor, type))
+}
+
+export function isAnyListActive(
+  editor: Editor | null,
+  listTypes: ListType[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => isListActive(editor, type))
+}
+
+export function getFilteredListOptions(
+  availableTypes: ListType[]
+): typeof listOptions {
+  return listOptions.filter(
+    (option) => !option.type || availableTypes.includes(option.type)
+  )
+}
+
+export function shouldShowListDropdown(params: {
+  editor: Editor | null
+  listTypes: ListType[]
+  hideWhenUnavailable: boolean
+  listInSchema: boolean
+  canToggleAny: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!listInSchema) return false
+
+  if (!editor.isActive("code")) {
+    return canToggleAny
+  }
+
+  return true
+}
+
+/**
+ * Gets the currently active list type from the available types
+ */
+export function getActiveListType(
+  editor: Editor | null,
+  availableTypes: ListType[]
+): ListType | undefined {
+  if (!editor || !editor.isEditable) return undefined
+  return availableTypes.find((type) => isListActive(editor, type))
+}
+
+/**
+ * Custom hook that provides list dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *     isAnyActive,
+ *     canToggleAny,
+ *     filteredLists,
+ *   } = useListDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *   } = useListDropdownMenu({
+ *     editor: myEditor,
+ *     types: ["bulletList", "orderedList"],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useListDropdownMenu(config?: UseListDropdownMenuConfig) {
+  const {
+    editor: providedEditor,
+    types = ["bulletList", "orderedList", "taskList"],
+    hideWhenUnavailable = false,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState(true)
+
+  const listInSchema = types.some((type) => isNodeInSchema(type, editor))
+
+  const filteredLists = useMemo(() => getFilteredListOptions(types), [types])
+
+  const canToggleAny = canToggleAnyList(editor, types)
+  const isAnyActive = isAnyListActive(editor, types)
+  const activeType = getActiveListType(editor, types)
+  const activeList = filteredLists.find((option) => option.type === activeType)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowListDropdown({
+          editor,
+          listTypes: types,
+          hideWhenUnavailable,
+          listInSchema,
+          canToggleAny,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [canToggleAny, editor, hideWhenUnavailable, listInSchema, types])
+
+  return {
+    isVisible,
+    activeType,
+    isActive: isAnyActive,
+    canToggle: canToggleAny,
+    types,
+    filteredLists,
+    label: "List",
+    Icon: activeList ? listIcons[activeList.type] : ListIcon,
+  }
+}

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

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

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

@@ -0,0 +1,122 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { Mark, UseMarkConfig } from "@/components/tiptap-ui/mark-button"
+import { MARK_SHORTCUT_KEYS, useMark } from "@/components/tiptap-ui/mark-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+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 { 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
+        type="button"
+        disabled={!canToggle}
+        variant="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canToggle}
+        role="button"
+        tabIndex={-1}
+        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 && (
+              <MarkShortcutBadge type={type} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+MarkButton.displayName = "MarkButton"

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

@@ -0,0 +1,219 @@
+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 "@/components/tiptap-icons/bold-icon"
+import { Code2Icon } from "@/components/tiptap-icons/code2-icon"
+import { ItalicIcon } from "@/components/tiptap-icons/italic-icon"
+import { StrikeIcon } from "@/components/tiptap-icons/strike-icon"
+import { SubscriptIcon } from "@/components/tiptap-icons/subscript-icon"
+import { SuperscriptIcon } from "@/components/tiptap-icons/superscript-icon"
+import { UnderlineIcon } from "@/components/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) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!editor.isEditable) return false
+
+  if (!isMarkInSchema(type, editor)) return false
+
+  if (!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/template/src/admin/components/tiptap-ui/search-and-replace/index.tsx

@@ -0,0 +1,2 @@
+export * from "./search-and-replace"
+export * from "./use-search-and-replace"