@betterstart/cli 0.1.3 → 0.1.4

package/templates/tiptap/tiptap-ui/color-highlight-button/color-highlight-button.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { forwardRef, useCallback, useMemo } 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 { UseColorHighlightConfig } from '.'
+import { COLOR_HIGHLIGHT_SHORTCUT_KEY, useColorHighlight } from '.'
+
+// --- Styles ---
+import './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/templates/tiptap/tiptap-ui/color-highlight-button/index.tsx

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

package/templates/tiptap/tiptap-ui/color-highlight-button/use-color-highlight.ts

@@ -0,0 +1,345 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useCallback, useEffect, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useIsBreakpoint } from '../../hooks/use-is-breakpoint'
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Lib ---
+import { isExtensionAvailable, isMarkInSchema, isNodeTypeSelected } from '../../lib/tiptap-utils'
+
+// --- Icons ---
+import { HighlighterIcon } from '../../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 || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  // 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
+  }
+}

package/templates/tiptap/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { forwardRef, useMemo, useRef, useState } from 'react'
+import { useIsBreakpoint } from '../../hooks/use-is-breakpoint'
+// --- Hooks ---
+import { useMenuNavigation } from '../../hooks/use-menu-navigation'
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Icons ---
+import { BanIcon } from '../../tiptap-icons/ban-icon'
+import { HighlighterIcon } from '../../tiptap-icons/highlighter-icon'
+
+// --- UI Primitives ---
+import type { ButtonProps } from '../../tiptap-ui-primitive/button'
+import { Button, ButtonGroup } from '../../tiptap-ui-primitive/button'
+import { Card, CardBody, CardItemGroup } from '../../tiptap-ui-primitive/card'
+import { Popover, PopoverContent, PopoverTrigger } from '../../tiptap-ui-primitive/popover'
+import { Separator } from '../../tiptap-ui-primitive/separator'
+
+// --- Tiptap UI ---
+import type { HighlightColor, UseColorHighlightConfig } from '../color-highlight-button'
+import {
+  ColorHighlightButton,
+  pickHighlightColorsByValue,
+  useColorHighlight
+} from '../color-highlight-button'
+
+export interface ColorHighlightPopoverContentProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+  /**
+   * When true, uses the actual color value (colorValue) instead of CSS variable (value).
+   * @default false
+   */
+  useColorValue?: boolean
+}
+
+export interface ColorHighlightPopoverProps
+  extends Omit<ButtonProps, 'type'>,
+    Pick<UseColorHighlightConfig, 'editor' | 'hideWhenUnavailable' | 'onApplied'> {
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+  /**
+   * When true, uses the actual color value (colorValue) instead of CSS variable (value).
+   * @default false
+   */
+  useColorValue?: boolean
+}
+
+export const ColorHighlightPopoverButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, children, ...props }, ref) => (
+    <Button
+      type="button"
+      className={className}
+      variant="ghost"
+      data-appearance="default"
+      role="button"
+      tabIndex={-1}
+      aria-label="Highlight text"
+      tooltip="Highlight"
+      ref={ref}
+      {...props}
+    >
+      {children ?? <HighlighterIcon className="tiptap-button-icon" />}
+    </Button>
+  )
+)
+
+ColorHighlightPopoverButton.displayName = 'ColorHighlightPopoverButton'
+
+export function ColorHighlightPopoverContent({
+  editor,
+  colors = pickHighlightColorsByValue([
+    'var(--tt-color-highlight-green)',
+    'var(--tt-color-highlight-blue)',
+    'var(--tt-color-highlight-red)',
+    'var(--tt-color-highlight-purple)',
+    'var(--tt-color-highlight-yellow)'
+  ]),
+  useColorValue = false
+}: ColorHighlightPopoverContentProps) {
+  const { handleRemoveHighlight } = useColorHighlight({ editor })
+  const isMobile = useIsBreakpoint()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const menuItems = useMemo(
+    () => [...colors, { label: 'Remove highlight', value: 'none' }],
+    [colors]
+  )
+
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: 'both',
+    onSelect: (item) => {
+      if (!containerRef.current) return false
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      ) as HTMLElement
+      if (highlightedElement) highlightedElement.click()
+      if (item.value === 'none') handleRemoveHighlight()
+      return true
+    },
+    autoSelectFirstItem: false
+  })
+
+  return (
+    <Card ref={containerRef} tabIndex={0} style={isMobile ? { boxShadow: 'none', border: 0 } : {}}>
+      <CardBody style={isMobile ? { padding: 0 } : {}}>
+        <CardItemGroup orientation="horizontal">
+          <ButtonGroup orientation="horizontal">
+            {colors.map((color, index) => (
+              <ColorHighlightButton
+                key={color.value}
+                editor={editor}
+                highlightColor={useColorValue ? color.colorValue : color.value}
+                tooltip={color.label}
+                aria-label={`${color.label} highlight color`}
+                tabIndex={index === selectedIndex ? 0 : -1}
+                data-highlighted={selectedIndex === index}
+                useColorValue={useColorValue}
+              />
+            ))}
+          </ButtonGroup>
+          <Separator />
+          <ButtonGroup orientation="horizontal">
+            <Button
+              onClick={handleRemoveHighlight}
+              aria-label="Remove highlight"
+              tooltip="Remove highlight"
+              tabIndex={selectedIndex === colors.length ? 0 : -1}
+              type="button"
+              role="menuitem"
+              variant="ghost"
+              data-highlighted={selectedIndex === colors.length}
+            >
+              <BanIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  )
+}
+
+export function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    'var(--tt-color-highlight-green)',
+    'var(--tt-color-highlight-blue)',
+    'var(--tt-color-highlight-red)',
+    'var(--tt-color-highlight-purple)',
+    'var(--tt-color-highlight-yellow)'
+  ]),
+  hideWhenUnavailable = false,
+  useColorValue = false,
+  onApplied,
+  ...props
+}: ColorHighlightPopoverProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState(false)
+  const { isVisible, canColorHighlight, isActive, label, Icon } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  })
+
+  if (!isVisible) return null
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <ColorHighlightPopoverButton
+          disabled={!canColorHighlight}
+          data-active-state={isActive ? 'on' : 'off'}
+          data-disabled={!canColorHighlight}
+          aria-pressed={isActive}
+          aria-label={label}
+          tooltip={label}
+          {...props}
+        >
+          <Icon className="tiptap-button-icon" />
+        </ColorHighlightPopoverButton>
+      </PopoverTrigger>
+      <PopoverContent aria-label="Highlight colors">
+        <ColorHighlightPopoverContent
+          editor={editor}
+          colors={colors}
+          useColorValue={useColorValue}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ColorHighlightPopover

package/templates/tiptap/tiptap-ui/color-highlight-popover/index.tsx

@@ -0,0 +1 @@
+export * from './color-highlight-popover'