betterstart-cli 0.0.1

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/color-highlight-popover-content.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { useColorHighlight } from '@admin/hooks/content-editor/use-color-highlight'
+import { useMenuNavigation } from '@admin/hooks/content-editor/use-menu-navigation'
+import type { Editor } from '@tiptap/react'
+import { BanIcon } from 'lucide-react'
+import { useMemo, useRef } from 'react'
+import { HighlightColorButton } from './highlight-color-button'
+import { DEFAULT_HIGHLIGHT_COLORS, type HighlightColor } from './highlight-colors'
+
+interface ColorHighlightPopoverContentBaseProps {
+  /**
+   * 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[]
+  useColorValue?: boolean
+  disabled?: boolean
+}
+
+interface EditorColorHighlightPopoverContentProps extends ColorHighlightPopoverContentBaseProps {
+  mode?: 'editor'
+  onHighlightColorSelect?: never
+  onRemoveHighlight?: never
+}
+
+interface SourceColorHighlightPopoverContentProps
+  extends Omit<ColorHighlightPopoverContentBaseProps, 'editor'> {
+  editor?: never
+  mode: 'source'
+  onHighlightColorSelect: (color: HighlightColor) => void
+  onRemoveHighlight: () => void
+}
+
+export type ColorHighlightPopoverContentProps =
+  | EditorColorHighlightPopoverContentProps
+  | SourceColorHighlightPopoverContentProps
+
+export function ColorHighlightPopoverContent(props: ColorHighlightPopoverContentProps) {
+  const {
+    editor,
+    colors = DEFAULT_HIGHLIGHT_COLORS,
+    useColorValue = false,
+    disabled = false
+  } = props
+  const { handleRemoveHighlight } = useColorHighlight({ editor })
+  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 (disabled) return false
+
+      if (item.value === 'none') {
+        if (props.mode === 'source') {
+          props.onRemoveHighlight()
+        } else {
+          handleRemoveHighlight()
+        }
+        return true
+      }
+
+      if (!containerRef.current) return false
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      ) as HTMLElement
+      if (highlightedElement) highlightedElement.click()
+      return true
+    },
+    autoSelectFirstItem: false
+  })
+
+  const handleRemoveHighlightClick = () => {
+    if (disabled) return
+
+    if (props.mode === 'source') {
+      props.onRemoveHighlight()
+      return
+    }
+
+    handleRemoveHighlight()
+  }
+
+  return (
+    <div ref={containerRef} className="flex min-w-max items-center gap-1 p-1">
+      <div className="flex items-center gap-1">
+        {colors.map((color, index) => (
+          <HighlightColorButton
+            key={color.value}
+            color={color}
+            editor={editor}
+            disabled={disabled}
+            isHighlighted={selectedIndex === index}
+            onSelect={props.mode === 'source' ? props.onHighlightColorSelect : undefined}
+            tabIndex={index === selectedIndex ? 0 : -1}
+            useColorValue={useColorValue}
+          />
+        ))}
+      </div>
+      <Button
+        onClick={handleRemoveHighlightClick}
+        aria-label="Remove highlight"
+        title="Remove highlight"
+        tabIndex={selectedIndex === colors.length ? 0 : -1}
+        type="button"
+        role="menuitem"
+        variant="ghost"
+        size="icon-sm"
+        className="rounded-full"
+        data-highlighted={selectedIndex === colors.length}
+        disabled={disabled}
+        data-disabled={disabled}
+      >
+        <BanIcon className="tiptap-button-icon" />
+      </Button>
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import type {
+  ControlAvailability,
+  ControlTooltip
+} from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+// --- Hooks ---
+import type { UseColorHighlightConfig } from '@admin/hooks/content-editor/use-color-highlight'
+import { useColorHighlight } from '@admin/hooks/content-editor/use-color-highlight'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import * as React from 'react'
+import { shouldHideUnavailableControl } from '../control-options'
+import {
+  ColorHighlightPopoverButton,
+  type ColorHighlightPopoverButtonProps
+} from './color-highlight-popover-button'
+import { ColorHighlightPopoverContent } from './color-highlight-popover-content'
+import { DEFAULT_HIGHLIGHT_COLORS, type HighlightColor } from './highlight-colors'
+
+export { ColorHighlightPopoverButton } from './color-highlight-popover-button'
+export type { ColorHighlightPopoverContentProps } from './color-highlight-popover-content'
+export { ColorHighlightPopoverContent } from './color-highlight-popover-content'
+export type { SourceColorHighlightPopoverProps } from './source-color-highlight-popover'
+export { SourceColorHighlightPopover } from './source-color-highlight-popover'
+
+export interface ColorHighlightPopoverProps
+  extends Omit<ColorHighlightPopoverButtonProps, 'type'>,
+    Pick<UseColorHighlightConfig, 'editor' | 'onApplied'> {
+  availability?: ControlAvailability
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+  tooltip?: ControlTooltip
+  useColorValue?: boolean
+}
+
+export function ColorHighlightPopover({
+  editor: providedEditor,
+  availability,
+  colors = DEFAULT_HIGHLIGHT_COLORS,
+  useColorValue = false,
+  onApplied,
+  tooltip,
+  disabled,
+  ref,
+  ...props
+}: ColorHighlightPopoverProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const highlightState = useColorHighlight({
+    editor,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability),
+    onApplied
+  })
+  const isVisible = highlightState.isVisible
+  const canColorHighlight = highlightState.canColorHighlight
+  const isActive = highlightState.isActive
+  const label = highlightState.label
+  const Icon = highlightState.Icon
+
+  if (!isVisible) return null
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <ColorHighlightPopoverButton
+          disabled={disabled || !canColorHighlight}
+          data-active-state={isActive ? 'on' : 'off'}
+          data-disabled={disabled || !canColorHighlight}
+          aria-pressed={isActive}
+          aria-label={label}
+          title={label}
+          tooltip={tooltip}
+          {...props}
+          ref={ref}
+        >
+          <Icon className="tiptap-button-icon" />
+        </ColorHighlightPopoverButton>
+      </PopoverTrigger>
+      <PopoverContent
+        aria-label="Highlight colors"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-full"
+      >
+        <ColorHighlightPopoverContent
+          editor={editor}
+          colors={colors}
+          disabled={disabled}
+          useColorValue={useColorValue}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ColorHighlightPopover

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/highlight-color-button.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { cn } from '@admin/utils/shared/cn'
+import type { Editor } from '@tiptap/react'
+import { ColorHighlightButton, HighlightSwatch } from '../color-highlight-button'
+import type { HighlightButtonStyle, HighlightColor } from './highlight-colors'
+
+export function HighlightColorButton({
+  color,
+  disabled,
+  editor,
+  isHighlighted,
+  onSelect,
+  tabIndex,
+  useColorValue
+}: {
+  color: HighlightColor
+  disabled: boolean
+  editor?: Editor | null
+  isHighlighted: boolean
+  onSelect?: (color: HighlightColor) => void
+  tabIndex: number
+  useColorValue: boolean
+}) {
+  const buttonStyle = getHighlightButtonStyle(color, useColorValue)
+  const highlightColor = buttonStyle['--highlight-color']
+
+  if (!onSelect) {
+    return (
+      <ColorHighlightButton
+        editor={editor}
+        highlightColor={highlightColor}
+        title={color.label}
+        aria-label={`${color.label} highlight color`}
+        tabIndex={tabIndex}
+        data-highlighted={isHighlighted}
+        useColorValue={useColorValue}
+        style={buttonStyle}
+        size="icon-sm"
+        className="rounded-full"
+      />
+    )
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className={cn('group/highlight rounded-full')}
+      disabled={disabled}
+      data-disabled={disabled}
+      aria-label={`${color.label} highlight color`}
+      title={color.label}
+      role="menuitem"
+      tabIndex={tabIndex}
+      data-highlighted={isHighlighted}
+      style={buttonStyle}
+      onClick={() => onSelect(color)}
+    >
+      <HighlightSwatch highlightColor={highlightColor} />
+    </Button>
+  )
+}
+
+function getHighlightButtonStyle(
+  color: HighlightColor,
+  useColorValue: boolean
+): HighlightButtonStyle {
+  return {
+    '--highlight-color': useColorValue ? color.colorValue : color.value,
+    '--highlight-border-color': color.border
+  }
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/highlight-colors.ts

@@ -0,0 +1,24 @@
+import {
+  type HighlightColor,
+  pickHighlightColorsByValue
+} from '@admin/hooks/content-editor/use-color-highlight'
+import type * as React from 'react'
+
+export type HighlightButtonStyle = React.CSSProperties & {
+  '--highlight-color': string
+  '--highlight-border-color': string
+}
+
+export const DEFAULT_HIGHLIGHT_COLORS = pickHighlightColorsByValue([
+  'var(--tt-color-highlight-gray)',
+  'var(--tt-color-highlight-brown)',
+  'var(--tt-color-highlight-orange)',
+  'var(--tt-color-highlight-yellow)',
+  'var(--tt-color-highlight-green)',
+  'var(--tt-color-highlight-blue)',
+  'var(--tt-color-highlight-purple)',
+  'var(--tt-color-highlight-pink)',
+  'var(--tt-color-highlight-red)'
+])
+
+export type { HighlightColor }

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/index.tsx

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

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/source-color-highlight-popover.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import { HighlighterIcon } from 'lucide-react'
+import { useState } from 'react'
+import {
+  ColorHighlightPopoverButton,
+  type ColorHighlightPopoverButtonProps
+} from './color-highlight-popover-button'
+import { ColorHighlightPopoverContent } from './color-highlight-popover-content'
+import { DEFAULT_HIGHLIGHT_COLORS, type HighlightColor } from './highlight-colors'
+
+export interface SourceColorHighlightPopoverProps
+  extends Omit<ColorHighlightPopoverButtonProps, 'type'> {
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+  disabled?: boolean
+  onHighlightColorSelect: (color: HighlightColor) => void
+  onRemoveHighlight: () => void
+}
+
+export function SourceColorHighlightPopover({
+  colors = DEFAULT_HIGHLIGHT_COLORS,
+  disabled,
+  onHighlightColorSelect,
+  onRemoveHighlight,
+  tooltip,
+  ...props
+}: SourceColorHighlightPopoverProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <ColorHighlightPopoverButton
+          disabled={disabled}
+          data-active-state="off"
+          data-disabled={disabled}
+          aria-pressed={false}
+          aria-label="Highlight"
+          title="Highlight"
+          tooltip={tooltip}
+          {...props}
+        >
+          <HighlighterIcon className="tiptap-button-icon" />
+        </ColorHighlightPopoverButton>
+      </PopoverTrigger>
+      <PopoverContent
+        aria-label="Highlight colors"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-full"
+      >
+        <ColorHighlightPopoverContent
+          mode="source"
+          colors={colors}
+          disabled={disabled}
+          onHighlightColorSelect={onHighlightColorSelect}
+          onRemoveHighlight={onRemoveHighlight}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/control-options.ts

@@ -0,0 +1,27 @@
+export type ControlAvailability = 'always' | 'when-available'
+export type ControlShortcut = 'hidden' | 'visible'
+export type ControlTooltip = 'label' | 'none'
+export type LinkPopoverOpenMode = 'active-link' | 'manual'
+
+export function getControlTooltipTitle(
+  tooltip: ControlTooltip = 'label',
+  title: string
+): string | undefined {
+  return tooltip === 'none' ? undefined : title
+}
+
+export function shouldHideUnavailableControl(
+  availability: ControlAvailability = 'always'
+): boolean {
+  return availability === 'when-available'
+}
+
+export function shouldOpenLinkPopoverFromActiveLink(
+  openMode: LinkPopoverOpenMode = 'active-link'
+): boolean {
+  return openMode === 'active-link'
+}
+
+export function shouldShowControlShortcut(shortcut: ControlShortcut = 'hidden'): boolean {
+  return shortcut === 'visible'
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu-item.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { type Level, useHeading } from '@admin/hooks/content-editor/use-heading'
+import type { Editor } from '@tiptap/react'
+
+export function HeadingDropdownMenuItem({
+  editor,
+  level
+}: {
+  editor: Editor | null
+  level: Level
+}) {
+  const { isVisible, canToggle, isActive, handleToggle, label, Icon } = useHeading({
+    editor,
+    level
+  })
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <DropdownMenuItem
+      data-active-state={isActive ? 'on' : 'off'}
+      disabled={!canToggle}
+      aria-label={label}
+      title={label}
+      onSelect={() => handleToggle()}
+    >
+      <Icon className="tiptap-button-icon" />
+      <span className="tiptap-button-text">{label}</span>
+    </DropdownMenuItem>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import {
+  type UseHeadingDropdownMenuConfig,
+  useHeadingDropdownMenu
+} from '@admin/hooks/content-editor/use-heading-dropdown-menu'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Icons ---
+import { ChevronDownIcon } from 'lucide-react'
+import { useCallback, useState } from 'react'
+import {
+  type ControlAvailability,
+  type ControlTooltip,
+  getControlTooltipTitle,
+  shouldHideUnavailableControl
+} from '../control-options'
+import { HeadingDropdownMenuItem } from './heading-dropdown-menu-item'
+
+type EditorButtonProps = React.ComponentProps<typeof Button> & {
+  tooltip?: ControlTooltip
+}
+
+export interface HeadingDropdownMenuProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseHeadingDropdownMenuConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Callback for when the dropdown opens or closes
+   */
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+/**
+ * Dropdown menu component for selecting heading levels in a Tiptap editor.
+ *
+ * For custom dropdown implementations, use the `useHeadingDropdownMenu` hook instead.
+ */
+export function HeadingDropdownMenu({
+  editor: providedEditor,
+  availability,
+  levels = [2, 3, 4, 5, 6],
+  onOpenChange,
+  tooltip,
+  children,
+  ref,
+  ...buttonProps
+}: HeadingDropdownMenuProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const { isVisible, isActive, canToggle, Icon } = useHeadingDropdownMenu({
+    editor,
+    levels,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability)
+  })
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!editor || !canToggle) return
+      setIsOpen(open)
+      onOpenChange?.(open)
+    },
+    [canToggle, editor, onOpenChange]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          data-active-state={isActive ? 'on' : 'off'}
+          role="button"
+          tabIndex={-1}
+          disabled={!canToggle}
+          data-disabled={!canToggle}
+          aria-label="Format text as heading"
+          aria-pressed={isActive}
+          title={getControlTooltipTitle(tooltip, 'Heading')}
+          size="icon-sm"
+          className="w-auto px-2"
+          {...buttonProps}
+          ref={ref}
+          onPointerDown={(e) => e.preventDefault()}
+          onClick={() => handleOpenChange(!isOpen)}
+        >
+          {children ? (
+            children
+          ) : (
+            <>
+              <Icon className="tiptap-button-icon" />
+              <ChevronDownIcon className="tiptap-button-dropdown-small" />
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="w-auto min-w-40">
+        <DropdownMenuGroup>
+          {levels.map((level) => (
+            <HeadingDropdownMenuItem key={`heading-${level}`} editor={editor} level={level} />
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default HeadingDropdownMenu

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/index.tsx

@@ -0,0 +1 @@
+export * from './heading-dropdown-menu'

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/index.tsx

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

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-button.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import {
+  type ControlTooltip,
+  getControlTooltipTitle
+} from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import { Button } from '@admin/components/ui/button'
+import { LinkIcon } from 'lucide-react'
+import type * as React from 'react'
+
+export type LinkButtonProps = React.ComponentProps<typeof Button> & {
+  tooltip?: ControlTooltip
+}
+
+export function LinkButton({
+  className,
+  children,
+  tooltip,
+  title,
+  ref,
+  ...props
+}: LinkButtonProps) {
+  return (
+    <Button
+      type="button"
+      className={className}
+      variant="ghost"
+      size="icon-sm"
+      role="button"
+      tabIndex={-1}
+      aria-label="Link"
+      title={getControlTooltipTitle(tooltip, title ?? 'Link')}
+      ref={ref}
+      {...props}
+    >
+      {children || <LinkIcon className="tiptap-button-icon" />}
+    </Button>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-content.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useLinkPopover } from '@admin/hooks/content-editor/use-link-popover'
+import type { Editor } from '@tiptap/react'
+import { LinkMain } from './link-main'
+
+export function LinkContent({ editor }: { editor?: Editor | null }) {
+  const linkPopover = useLinkPopover({
+    editor
+  })
+
+  return <LinkMain {...linkPopover} />
+}