betterstart-cli 0.0.1

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

@@ -0,0 +1,90 @@
+'use client'
+
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import { LinkIcon } from 'lucide-react'
+import type * as React from 'react'
+import { useCallback, useState } from 'react'
+import { LinkButton, type LinkButtonProps } from './link-button'
+import { LinkMain, type LinkMainProps } from './link-main'
+
+export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>, LinkMainProps {
+  canSet?: boolean
+  label?: string
+  onOpenChange?: (isOpen: boolean) => void
+  open?: boolean
+}
+
+export function LinkControlPopover({
+  canSet = true,
+  children,
+  isActive,
+  label = 'Link',
+  onClick,
+  onOpenChange,
+  open,
+  openLink,
+  ref,
+  removeLink,
+  setLink,
+  setUrl,
+  url,
+  ...buttonProps
+}: LinkControlPopoverProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
+  const isOpen = open ?? uncontrolledOpen
+  const isDisabled = Boolean(buttonProps.disabled) || !canSet
+
+  const handleOnOpenChange = useCallback(
+    (nextIsOpen: boolean) => {
+      if (open === undefined) {
+        setUncontrolledOpen(nextIsOpen)
+      }
+      onOpenChange?.(nextIsOpen)
+    },
+    [onOpenChange, open]
+  )
+
+  const handleSetLink = useCallback(() => {
+    setLink()
+    handleOnOpenChange(false)
+  }, [handleOnOpenChange, setLink])
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      if (event.defaultPrevented) return
+      handleOnOpenChange(!isOpen)
+    },
+    [handleOnOpenChange, isOpen, onClick]
+  )
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleOnOpenChange}>
+      <PopoverTrigger asChild>
+        <LinkButton
+          {...buttonProps}
+          disabled={isDisabled}
+          data-active-state={isActive ? 'on' : 'off'}
+          data-disabled={isDisabled}
+          aria-label={label}
+          aria-pressed={isActive}
+          onClick={handleClick}
+          ref={ref}
+        >
+          {children ?? <LinkIcon className="tiptap-button-icon" />}
+        </LinkButton>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-full">
+        <LinkMain
+          url={url}
+          setUrl={setUrl}
+          setLink={handleSetLink}
+          removeLink={removeLink}
+          openLink={openLink}
+          isActive={isActive}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,96 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { InputGroup, InputGroupInput } from '@admin/components/ui/input-group'
+import { Separator } from '@admin/components/ui/separator'
+import { CornerDownLeftIcon, ExternalLinkIcon, TrashIcon } from 'lucide-react'
+import type * as React from 'react'
+
+export interface LinkMainProps {
+  /**
+   * The URL to set for the link.
+   */
+  url: string
+  /**
+   * Function to update the URL state.
+   */
+  setUrl: React.Dispatch<React.SetStateAction<string | null>>
+  /**
+   * Function to set the link in the editor.
+   */
+  setLink: () => void
+  /**
+   * Function to remove the link from the editor.
+   */
+  removeLink: () => void
+  /**
+   * Function to open the link.
+   */
+  openLink: () => void
+  /**
+   * Whether the link is currently active in the editor.
+   */
+  isActive: boolean
+}
+
+export function LinkMain({ url, setUrl, setLink, removeLink, openLink, isActive }: LinkMainProps) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      setLink()
+    }
+  }
+
+  return (
+    <div className="flex min-w-max items-center gap-1 p-2">
+      <InputGroup className="h-9 min-w-64">
+        <InputGroupInput
+          type="url"
+          placeholder="Paste a link..."
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={handleKeyDown}
+          autoFocus
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+        />
+      </InputGroup>
+
+      <Button
+        type="button"
+        onClick={setLink}
+        title="Apply link"
+        disabled={!url && !isActive}
+        variant="ghost"
+        size="icon-sm"
+      >
+        <CornerDownLeftIcon className="tiptap-button-icon" />
+      </Button>
+
+      <Separator orientation="vertical" decorative className="h-6 my-auto self-center" />
+
+      <Button
+        type="button"
+        onClick={openLink}
+        title="Open in new window"
+        disabled={!url && !isActive}
+        variant="ghost"
+        size="icon-sm"
+      >
+        <ExternalLinkIcon className="tiptap-button-icon" />
+      </Button>
+
+      <Button
+        type="button"
+        onClick={removeLink}
+        title="Remove link"
+        disabled={!url && !isActive}
+        variant="ghost"
+        size="icon-sm"
+      >
+        <TrashIcon className="tiptap-button-icon" />
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,121 @@
+'use client'
+
+// --- Hooks ---
+import {
+  type UseLinkPopoverConfig,
+  useLinkPopover
+} from '@admin/hooks/content-editor/use-link-popover'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import * as React from 'react'
+import type { LinkPopoverOpenMode } from '../control-options'
+import {
+  type ControlAvailability,
+  shouldHideUnavailableControl,
+  shouldOpenLinkPopoverFromActiveLink
+} from '../control-options'
+import type { LinkButtonProps } from './link-button'
+import { LinkControlPopover } from './link-control-popover'
+
+export { LinkButton } from './link-button'
+export { LinkContent } from './link-content'
+export type { LinkControlPopoverProps } from './link-control-popover'
+export { LinkControlPopover } from './link-control-popover'
+export type { LinkMainProps } from './link-main'
+
+export interface LinkPopoverProps
+  extends Omit<LinkButtonProps, 'type'>,
+    Omit<UseLinkPopoverConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Callback for when the popover opens or closes.
+   */
+  onOpenChange?: (isOpen: boolean) => void
+  openMode?: LinkPopoverOpenMode
+}
+
+type LinkPopoverOpenState = {
+  isActive: boolean
+  openMode: LinkPopoverOpenMode
+  open: boolean | null
+}
+
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export function LinkPopover({
+  editor: providedEditor,
+  availability,
+  onSetLink,
+  onOpenChange,
+  openMode = 'active-link',
+  onClick,
+  children,
+  ref,
+  ...buttonProps
+}: LinkPopoverProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+
+  const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } =
+    useLinkPopover({
+      editor,
+      hideWhenUnavailable: shouldHideUnavailableControl(availability),
+      onSetLink
+    })
+
+  const [openState, setOpenState] = React.useState<LinkPopoverOpenState>({
+    isActive,
+    openMode,
+    open: null
+  })
+  let manualOpen = openState.open
+  if (openState.openMode !== openMode || openState.isActive !== isActive) {
+    manualOpen = null
+    setOpenState({
+      isActive,
+      openMode,
+      open: null
+    })
+  }
+  const editorControlsOpen = shouldOpenLinkPopoverFromActiveLink(openMode) && isActive
+  const isOpen = manualOpen ?? editorControlsOpen
+
+  const handleOnOpenChange = React.useCallback(
+    (nextIsOpen: boolean) => {
+      setOpenState({
+        isActive,
+        openMode,
+        open: nextIsOpen
+      })
+      onOpenChange?.(nextIsOpen)
+    },
+    [isActive, onOpenChange, openMode]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <LinkControlPopover
+      canSet={canSet}
+      isActive={isActive}
+      label={label}
+      onClick={onClick}
+      onOpenChange={handleOnOpenChange}
+      open={isOpen}
+      openLink={openLink}
+      removeLink={removeLink}
+      setLink={setLink}
+      setUrl={setUrl}
+      url={url}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? <Icon className="tiptap-button-icon" />}
+    </LinkControlPopover>
+  )
+}
+
+export default LinkPopover

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

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

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

@@ -0,0 +1,44 @@
+'use client'
+
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { type ListType, useList } from '@admin/hooks/content-editor/use-list'
+import type { Editor } from '@tiptap/react'
+
+export function ListDropdownMenuItem({
+  editor,
+  type,
+  label
+}: {
+  editor: Editor | null
+  type: ListType
+  label: string
+}) {
+  const {
+    isVisible,
+    canToggle,
+    isActive,
+    handleToggle,
+    label: itemLabel,
+    Icon
+  } = useList({
+    editor,
+    type
+  })
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <DropdownMenuItem
+      data-active-state={isActive ? 'on' : 'off'}
+      disabled={!canToggle}
+      aria-label={itemLabel}
+      title={itemLabel}
+      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/list-dropdown-menu/list-dropdown-menu.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+// --- Hooks ---
+import type { ListType } from '@admin/hooks/content-editor/use-list'
+import { useListDropdownMenu } from '@admin/hooks/content-editor/use-list-dropdown-menu'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { ChevronDownIcon } from 'lucide-react'
+import { useCallback, useState } from 'react'
+import {
+  type ControlAvailability,
+  type ControlTooltip,
+  getControlTooltipTitle,
+  shouldHideUnavailableControl
+} from '../control-options'
+import { ListDropdownMenuItem } from './list-dropdown-menu-item'
+
+type EditorButtonProps = React.ComponentProps<typeof Button> & {
+  tooltip?: ControlTooltip
+}
+
+export interface ListDropdownMenuProps extends Omit<EditorButtonProps, 'type'> {
+  availability?: ControlAvailability
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor
+  /**
+   * The list types to display in the dropdown.
+   */
+  types?: ListType[]
+  /**
+   * Callback for when the dropdown opens or closes
+   */
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+export function ListDropdownMenu({
+  editor: providedEditor,
+  availability,
+  types = ['bulletList', 'orderedList', 'taskList'],
+  onOpenChange,
+  tooltip,
+  ...props
+}: ListDropdownMenuProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState(false)
+
+  const { filteredLists, canToggle, isActive, isVisible, Icon } = useListDropdownMenu({
+    editor,
+    types,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability)
+  })
+
+  const handleOnOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open)
+      onOpenChange?.(open)
+    },
+    [onOpenChange]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOnOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          data-active-state={isActive ? 'on' : 'off'}
+          role="button"
+          tabIndex={-1}
+          disabled={!canToggle}
+          data-disabled={!canToggle}
+          aria-label="List options"
+          title={getControlTooltipTitle(tooltip, 'List')}
+          size="icon-sm"
+          className="w-auto px-2"
+          {...props}
+          onPointerDown={(e) => e.preventDefault()}
+          onClick={() => handleOnOpenChange(!isOpen)}
+        >
+          <Icon className="tiptap-button-icon" />
+          <ChevronDownIcon className="tiptap-button-dropdown-small" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="w-auto min-w-40">
+        <DropdownMenuGroup>
+          {filteredLists.map((option) => (
+            <ListDropdownMenuItem
+              key={option.type}
+              editor={editor}
+              type={option.type}
+              label={option.label}
+            />
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ListDropdownMenu

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

@@ -0,0 +1 @@
+export * from './mark-button'

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

@@ -0,0 +1,117 @@
+'use client'
+
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+// --- Hooks ---
+import {
+  MARK_SHORTCUT_KEYS,
+  type Mark,
+  type UseMarkConfig,
+  useMark
+} from '@admin/hooks/content-editor/use-mark'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import { parseShortcutKeys } from '@admin/utils/editor/tiptap'
+import { useCallback } from 'react'
+import {
+  type ControlAvailability,
+  type ControlShortcut,
+  type ControlTooltip,
+  getControlTooltipTitle,
+  shouldHideUnavailableControl,
+  shouldShowControlShortcut
+} from '../control-options'
+
+type EditorButtonProps = React.ComponentProps<typeof Button> & {
+  tooltip?: ControlTooltip
+}
+
+export interface MarkButtonProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseMarkConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  shortcut?: ControlShortcut
+}
+
+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 function MarkButton({
+  editor: providedEditor,
+  availability,
+  type,
+  text,
+  onToggled,
+  shortcut,
+  tooltip,
+  onClick,
+  children,
+  ref,
+  ...buttonProps
+}: MarkButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isVisible, handleMark, label, canToggle, isActive, Icon, shortcutKeys } = useMark({
+    editor,
+    type,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability),
+    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"
+      size={text ? 'sm' : 'icon-sm'}
+      data-active-state={isActive ? 'on' : 'off'}
+      data-disabled={!canToggle}
+      role="button"
+      tabIndex={-1}
+      aria-label={label}
+      aria-pressed={isActive}
+      title={getControlTooltipTitle(tooltip, label)}
+      onClick={handleClick}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? (
+        <>
+          <Icon className="tiptap-button-icon" />
+          {text && <span className="tiptap-button-text">{text}</span>}
+          {shouldShowControlShortcut(shortcut) && (
+            <MarkShortcutBadge type={type} shortcutKeys={shortcutKeys} />
+          )}
+        </>
+      )}
+    </Button>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/undo-redo-button/index.tsx

@@ -0,0 +1 @@
+export * from './undo-redo-button'

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

@@ -0,0 +1,115 @@
+'use client'
+
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Hooks ---
+import {
+  UNDO_REDO_SHORTCUT_KEYS,
+  type UndoRedoAction,
+  type UseUndoRedoConfig,
+  useUndoRedo
+} from '@admin/hooks/content-editor/use-undo-redo'
+// --- Lib ---
+import { parseShortcutKeys } from '@admin/utils/editor/tiptap'
+import { useCallback } from 'react'
+import {
+  type ControlAvailability,
+  type ControlShortcut,
+  type ControlTooltip,
+  getControlTooltipTitle,
+  shouldHideUnavailableControl,
+  shouldShowControlShortcut
+} from '../control-options'
+
+type EditorButtonProps = React.ComponentProps<typeof Button> & {
+  tooltip?: ControlTooltip
+}
+
+export interface UndoRedoButtonProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseUndoRedoConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  shortcut?: ControlShortcut
+}
+
+export function HistoryShortcutBadge({
+  action,
+  shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action]
+}: {
+  action: UndoRedoAction
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for triggering undo/redo actions in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHistory` hook instead.
+ */
+export function UndoRedoButton({
+  editor: providedEditor,
+  action,
+  availability,
+  text,
+  onExecuted,
+  shortcut,
+  tooltip,
+  onClick,
+  children,
+  ref,
+  ...buttonProps
+}: UndoRedoButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
+    editor,
+    action,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability),
+    onExecuted
+  })
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      if (event.defaultPrevented) return
+      handleAction()
+    },
+    [handleAction, onClick]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      disabled={!canExecute}
+      variant="ghost"
+      size={text ? 'sm' : 'icon-sm'}
+      data-disabled={!canExecute}
+      role="button"
+      tabIndex={-1}
+      aria-label={label}
+      title={getControlTooltipTitle(tooltip, label)}
+      onClick={handleClick}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? (
+        <>
+          <Icon className="tiptap-button-icon" />
+          {text && <span className="tiptap-button-text">{text}</span>}
+          {shouldShowControlShortcut(shortcut) && (
+            <HistoryShortcutBadge action={action} shortcutKeys={shortcutKeys} />
+          )}
+        </>
+      )}
+    </Button>
+  )
+}