create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui/color-highlight-button/color-highlight-button.scss

@@ -0,0 +1,49 @@
+.tiptap-button-highlight {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  border-radius: var(--tt-radius-xl);
+  background-color: var(--highlight-color);
+  transition: transform 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-radius: inherit;
+    box-sizing: border-box;
+    border: 1px solid var(--highlight-color);
+    filter: brightness(95%);
+    mix-blend-mode: multiply;
+
+    .dark & {
+      filter: brightness(140%);
+      mix-blend-mode: lighten;
+    }
+  }
+}
+
+.tiptap-button {
+  &[data-active-state="on"] {
+    .tiptap-button-highlight {
+      &::after {
+        filter: brightness(80%);
+      }
+    }
+  }
+
+  .dark & {
+    &[data-active-state="on"] {
+      .tiptap-button-highlight {
+        &::after {
+          // Andere Eigenschaft für .dark Kontext
+          filter: brightness(180%);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,170 @@
+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 "@/components/tiptap-ui/color-highlight-button"
+import {
+  COLOR_HIGHLIGHT_SHORTCUT_KEY,
+  useColorHighlight,
+} from "@/components/tiptap-ui/color-highlight-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"
+
+// --- Styles ---
+import "@/components/tiptap-ui/color-highlight-button/color-highlight-button.scss"
+
+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,
+      useColorValue = false,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canColorHighlight,
+      isActive,
+      handleColorHighlight,
+      label,
+      shortcutKeys,
+    } = useColorHighlight({
+      editor,
+      highlightColor,
+      useColorValue,
+      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"
+        variant="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/template/src/admin/components/tiptap-ui/color-highlight-button/index.tsx

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

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

@@ -0,0 +1,380 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { type Editor } from "@tiptap/react"
+import { useHotkeys } from "react-hotkeys-hook"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "@/hooks/use-is-breakpoint"
+
+// --- Lib ---
+import {
+  isMarkInSchema,
+  isNodeTypeSelected,
+  isExtensionAvailable,
+} from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { HighlighterIcon } from "@/components/tiptap-icons/highlighter-icon"
+
+export const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h"
+export const HIGHLIGHT_COLORS = [
+  {
+    label: "Default background",
+    value: "var(--tt-bg-color)",
+    colorValue: "#ffffff",
+    border: "var(--tt-bg-color-contrast)",
+  },
+  {
+    label: "Gray background",
+    value: "var(--tt-color-highlight-gray)",
+    colorValue: "#f8f8f7",
+    border: "var(--tt-color-highlight-gray-contrast)",
+  },
+  {
+    label: "Brown background",
+    value: "var(--tt-color-highlight-brown)",
+    colorValue: "#f4eeee",
+    border: "var(--tt-color-highlight-brown-contrast)",
+  },
+  {
+    label: "Orange background",
+    value: "var(--tt-color-highlight-orange)",
+    colorValue: "#fbecdd",
+    border: "var(--tt-color-highlight-orange-contrast)",
+  },
+  {
+    label: "Yellow background",
+    value: "var(--tt-color-highlight-yellow)",
+    colorValue: "#fef9c3",
+    border: "var(--tt-color-highlight-yellow-contrast)",
+  },
+  {
+    label: "Green background",
+    value: "var(--tt-color-highlight-green)",
+    colorValue: "#dcfce7",
+    border: "var(--tt-color-highlight-green-contrast)",
+  },
+  {
+    label: "Blue background",
+    value: "var(--tt-color-highlight-blue)",
+    colorValue: "#e0f2fe",
+    border: "var(--tt-color-highlight-blue-contrast)",
+  },
+  {
+    label: "Purple background",
+    value: "var(--tt-color-highlight-purple)",
+    colorValue: "#f3e8ff",
+    border: "var(--tt-color-highlight-purple-contrast)",
+  },
+  {
+    label: "Pink background",
+    value: "var(--tt-color-highlight-pink)",
+    colorValue: "#fcf1f6",
+    border: "var(--tt-color-highlight-pink-contrast)",
+  },
+  {
+    label: "Red background",
+    value: "var(--tt-color-highlight-red)",
+    colorValue: "#ffe4e6",
+    border: "var(--tt-color-highlight-red-contrast)",
+  },
+]
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number]
+
+export type HighlightMode = "mark" | "node"
+
+/**
+ * Configuration for the color highlight functionality
+ */
+export interface UseColorHighlightConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The color to apply when toggling the highlight.
+   */
+  highlightColor?: string
+  /**
+   * Optional label to display alongside the icon.
+   */
+  label?: string
+  /**
+   * Whether the button should hide when the mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * The highlighting mode to use.
+   * - "mark": Uses the highlight mark extension (default)
+   * - "node": Uses the node background extension
+   * @default "mark"
+   */
+  mode?: HighlightMode
+  /**
+   * When true, uses the actual color value (colorValue) instead of CSS variable (value).
+   * @default false
+   */
+  useColorValue?: boolean
+  /**
+   * Called when the highlight is applied.
+   */
+  onApplied?: ({
+    color,
+    label,
+    mode,
+  }: {
+    color: string
+    label: string
+    mode: HighlightMode
+  }) => void
+}
+
+export function pickHighlightColorsByValue(values: string[]) {
+  const colorMap = new Map(
+    HIGHLIGHT_COLORS.map((color) => [color.value, color])
+  )
+  return values
+    .map((value) => colorMap.get(value))
+    .filter((color): color is (typeof HIGHLIGHT_COLORS)[number] => !!color)
+}
+
+/**
+ * Gets the appropriate color value based on configuration
+ */
+export function getHighlightColorValue(
+  color: string,
+  useColorValue: boolean = false
+): string {
+  if (!useColorValue) return color
+
+  const colorItem = HIGHLIGHT_COLORS.find(
+    (c) => c.value === color || c.colorValue === color
+  )
+  return colorItem?.colorValue || color
+}
+
+/**
+ * Checks if highlight can be applied based on the mode and current editor state
+ */
+export function canColorHighlight(
+  editor: Editor | null,
+  mode: HighlightMode = "mark"
+): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  if (mode === "mark") {
+    if (
+      !isMarkInSchema("highlight", editor) ||
+      isNodeTypeSelected(editor, ["image"])
+    )
+      return false
+
+    return editor.can().setMark("highlight")
+  } else {
+    if (!isExtensionAvailable(editor, ["nodeBackground"])) return false
+
+    try {
+      return editor.can().toggleNodeBackgroundColor("test")
+    } catch {
+      return false
+    }
+  }
+}
+
+/**
+ * Checks if highlight is currently active
+ */
+export function isColorHighlightActive(
+  editor: Editor | null,
+  highlightColor?: string,
+  mode: HighlightMode = "mark"
+): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  if (mode === "mark") {
+    return highlightColor
+      ? editor.isActive("highlight", { color: highlightColor })
+      : editor.isActive("highlight")
+  } else {
+    if (!highlightColor) return false
+
+    try {
+      const { state } = editor
+      const { selection } = state
+
+      const $pos = selection.$anchor
+      for (let depth = $pos.depth; depth >= 0; depth--) {
+        const node = $pos.node(depth)
+        if (node && node.attrs?.backgroundColor === highlightColor) {
+          return true
+        }
+      }
+      return false
+    } catch {
+      return false
+    }
+  }
+}
+
+/**
+ * Removes highlight based on the mode
+ */
+export function removeHighlight(
+  editor: Editor | null,
+  mode: HighlightMode = "mark"
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canColorHighlight(editor, mode)) return false
+
+  if (mode === "mark") {
+    return editor.chain().focus().unsetMark("highlight").run()
+  } else {
+    return editor.chain().focus().unsetNodeBackgroundColor().run()
+  }
+}
+
+/**
+ * Determines if the highlight button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  mode: HighlightMode
+}): boolean {
+  const { editor, hideWhenUnavailable, mode } = props
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!editor.isEditable) return false
+
+  // hideWhenUnavailable=true: check schema/extension availability
+  if (mode === "mark") {
+    if (!isMarkInSchema("highlight", editor)) return false
+  } else {
+    if (!isExtensionAvailable(editor, ["nodeBackground"])) return false
+  }
+
+  if (!editor.isActive("code")) {
+    return canColorHighlight(editor, mode)
+  }
+
+  return true
+}
+
+export function useColorHighlight(config: UseColorHighlightConfig) {
+  const {
+    editor: providedEditor,
+    label,
+    highlightColor,
+    hideWhenUnavailable = false,
+    mode = "mark",
+    useColorValue = false,
+    onApplied,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canColorHighlightState = canColorHighlight(editor, mode)
+  const actualColor = highlightColor
+    ? getHighlightColorValue(highlightColor, useColorValue)
+    : highlightColor
+  const isActive = isColorHighlightActive(editor, actualColor, mode)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, mode }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, mode])
+
+  const handleColorHighlight = useCallback(() => {
+    if (!editor || !canColorHighlightState || !actualColor || !label)
+      return false
+
+    if (mode === "mark") {
+      if (editor.state.storedMarks) {
+        const highlightMarkType = editor.schema.marks.highlight
+        if (highlightMarkType) {
+          editor.view.dispatch(
+            editor.state.tr.removeStoredMark(highlightMarkType)
+          )
+        }
+      }
+
+      setTimeout(() => {
+        const success = editor
+          .chain()
+          .focus()
+          .toggleHighlight({ color: actualColor })
+          .run()
+        if (success) {
+          onApplied?.({ color: actualColor, label, mode })
+        }
+        return success
+      }, 0)
+
+      return true
+    } else {
+      const success = editor
+        .chain()
+        .focus()
+        .toggleNodeBackgroundColor(actualColor)
+        .run()
+
+      if (success) {
+        onApplied?.({ color: actualColor, label, mode })
+      }
+      return success
+    }
+  }, [canColorHighlightState, actualColor, editor, label, onApplied, mode])
+
+  const handleRemoveHighlight = useCallback(() => {
+    const success = removeHighlight(editor, mode)
+    if (success) {
+      onApplied?.({ color: "", label: "Remove highlight", mode })
+    }
+    return success
+  }, [editor, onApplied, mode])
+
+  useHotkeys(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleColorHighlight()
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon,
+    mode,
+  }
+}