betterstart-cli 0.0.1

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/task-item-node/task-item-node-extension.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { Checkbox } from '@admin/components/ui/checkbox'
+import { hasOwnAttribute, setElementAttribute } from '@admin/utils/editor/node-attrs'
+import { getTaskItemCheckboxLabel, isTaskItemChecked } from '@admin/utils/editor/task-item'
+import { getRenderedAttributes } from '@tiptap/core'
+import { TaskItem } from '@tiptap/extension-list'
+import { createRoot } from 'react-dom/client'
+
+export const ContentEditorTaskItem = TaskItem.extend({
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
+      let currentNode = node
+      let renderedChecked = isTaskItemChecked(node)
+
+      const listItem = document.createElement('li')
+      const checkboxContainer = document.createElement('span')
+      const checkboxMount = document.createElement('span')
+      const content = document.createElement('div')
+      const checkboxRoot = createRoot(checkboxMount)
+      const staticAttributes = this.options.HTMLAttributes as Record<string, unknown>
+
+      checkboxContainer.contentEditable = 'false'
+      checkboxContainer.className = 'content-editor-task-item-checkbox'
+      checkboxContainer.append(checkboxMount)
+      listItem.append(checkboxContainer, content)
+
+      const renderCheckbox = () => {
+        const hasReadOnlyHandler = Boolean(this.options.onReadOnlyChecked)
+
+        checkboxRoot.render(
+          <Checkbox
+            aria-label={getTaskItemCheckboxLabel(
+              currentNode,
+              renderedChecked,
+              this.options.a11y?.checkboxLabel
+            )}
+            checked={renderedChecked}
+            disabled={!editor.isEditable && !hasReadOnlyHandler}
+            onMouseDown={(event) => event.preventDefault()}
+            onCheckedChange={(checkedState) => {
+              const checked = checkedState === true
+
+              if (!editor.isEditable && !this.options.onReadOnlyChecked) {
+                renderCheckbox()
+                return
+              }
+
+              if (editor.isEditable && typeof getPos === 'function') {
+                editor
+                  .chain()
+                  .focus(undefined, { scrollIntoView: false })
+                  .command(({ tr }) => {
+                    const position = getPos()
+                    if (typeof position !== 'number') return false
+
+                    const taskItem = tr.doc.nodeAt(position)
+                    tr.setNodeMarkup(position, undefined, {
+                      ...taskItem?.attrs,
+                      checked
+                    })
+                    return true
+                  })
+                  .run()
+                return
+              }
+
+              if (!editor.isEditable && this.options.onReadOnlyChecked?.(currentNode, checked)) {
+                renderedChecked = checked
+              }
+
+              renderCheckbox()
+            }}
+          />
+        )
+      }
+
+      function applyAttributes(nextHTMLAttributes: Record<string, unknown>) {
+        for (const [key, value] of Object.entries(staticAttributes)) {
+          setElementAttribute(listItem, key, value)
+        }
+
+        for (const [key, value] of Object.entries(nextHTMLAttributes)) {
+          setElementAttribute(listItem, key, value)
+        }
+
+        listItem.dataset.checked = String(renderedChecked)
+      }
+
+      applyAttributes(HTMLAttributes as Record<string, unknown>)
+      renderCheckbox()
+
+      let prevRenderedAttributeKeys = new Set(Object.keys(HTMLAttributes))
+
+      return {
+        dom: listItem,
+        contentDOM: content,
+        update: (updatedNode) => {
+          if (updatedNode.type !== this.type) return false
+
+          currentNode = updatedNode
+          renderedChecked = isTaskItemChecked(updatedNode)
+
+          const extensionAttributes = editor.extensionManager.attributes
+          const newHTMLAttributes = getRenderedAttributes(
+            updatedNode,
+            extensionAttributes
+          ) as Record<string, unknown>
+          const newKeys = new Set(Object.keys(newHTMLAttributes))
+
+          prevRenderedAttributeKeys.forEach((key) => {
+            if (newKeys.has(key)) return
+
+            if (hasOwnAttribute(staticAttributes, key)) {
+              setElementAttribute(listItem, key, staticAttributes[key])
+              return
+            }
+
+            listItem.removeAttribute(key)
+          })
+
+          applyAttributes(newHTMLAttributes)
+          prevRenderedAttributeKeys = newKeys
+          renderCheckbox()
+
+          return true
+        },
+        stopEvent: (event) => {
+          return checkboxContainer.contains(event.target as Node | null)
+        },
+        ignoreMutation: (mutation) => {
+          return checkboxContainer.contains(mutation.target)
+        },
+        destroy: () => {
+          queueMicrotask(() => checkboxRoot.unmount())
+        }
+      }
+    }
+  }
+})
+
+export default ContentEditorTaskItem

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

@@ -0,0 +1,114 @@
+'use client'
+
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+// --- Hooks ---
+import {
+  BLOCKQUOTE_SHORTCUT_KEY,
+  type UseBlockquoteConfig,
+  useBlockquote
+} from '@admin/hooks/content-editor/use-blockquote'
+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 BlockquoteButtonProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseBlockquoteConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  shortcut?: ControlShortcut
+}
+
+export function BlockquoteShortcutBadge({
+  shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling blockquote in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useBlockquote` hook instead.
+ */
+export function BlockquoteButton({
+  editor: providedEditor,
+  availability,
+  text,
+  onToggled,
+  shortcut,
+  tooltip,
+  onClick,
+  children,
+  ref,
+  ...buttonProps
+}: BlockquoteButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isVisible, canToggle, isActive, handleToggle, label, shortcutKeys, Icon } = useBlockquote(
+    {
+      editor,
+      hideWhenUnavailable: shouldHideUnavailableControl(availability),
+      onToggled
+    }
+  )
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      if (event.defaultPrevented) return
+      handleToggle()
+    },
+    [handleToggle, onClick]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size={text ? 'sm' : 'icon-sm'}
+      data-active-state={isActive ? 'on' : 'off'}
+      role="button"
+      tabIndex={-1}
+      disabled={!canToggle}
+      data-disabled={!canToggle}
+      aria-label={label}
+      aria-pressed={isActive}
+      title={getControlTooltipTitle(tooltip, 'Blockquote')}
+      onClick={handleClick}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? (
+        <>
+          <Icon className="tiptap-button-icon" />
+          {text && <span className="tiptap-button-text">{text}</span>}
+          {shouldShowControlShortcut(shortcut) && (
+            <BlockquoteShortcutBadge shortcutKeys={shortcutKeys} />
+          )}
+        </>
+      )}
+    </Button>
+  )
+}

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

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

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

@@ -0,0 +1,112 @@
+'use client'
+
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+// --- Hooks ---
+import {
+  CODE_BLOCK_SHORTCUT_KEY,
+  type UseCodeBlockConfig,
+  useCodeBlock
+} from '@admin/hooks/content-editor/use-code-block'
+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 CodeBlockButtonProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseCodeBlockConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  shortcut?: ControlShortcut
+}
+
+export function CodeBlockShortcutBadge({
+  shortcutKeys = CODE_BLOCK_SHORTCUT_KEY
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling code block in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCodeBlock` hook instead.
+ */
+export function CodeBlockButton({
+  editor: providedEditor,
+  availability,
+  text,
+  onToggled,
+  shortcut,
+  tooltip,
+  onClick,
+  children,
+  ref,
+  ...buttonProps
+}: CodeBlockButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isVisible, canToggle, isActive, handleToggle, label, shortcutKeys, Icon } = useCodeBlock({
+    editor,
+    hideWhenUnavailable: shouldHideUnavailableControl(availability),
+    onToggled
+  })
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      if (event.defaultPrevented) return
+      handleToggle()
+    },
+    [handleToggle, onClick]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size={text ? 'sm' : 'icon-sm'}
+      data-active-state={isActive ? 'on' : 'off'}
+      role="button"
+      disabled={!canToggle}
+      data-disabled={!canToggle}
+      tabIndex={-1}
+      aria-label={label}
+      aria-pressed={isActive}
+      title={getControlTooltipTitle(tooltip, 'Code Block')}
+      onClick={handleClick}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? (
+        <>
+          <Icon className="tiptap-button-icon" />
+          {text && <span className="tiptap-button-text">{text}</span>}
+          {shouldShowControlShortcut(shortcut) && (
+            <CodeBlockShortcutBadge shortcutKeys={shortcutKeys} />
+          )}
+        </>
+      )}
+    </Button>
+  )
+}

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

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

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

@@ -0,0 +1,185 @@
+'use client'
+
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+// --- Hooks ---
+import {
+  COLOR_HIGHLIGHT_SHORTCUT_KEY,
+  type UseColorHighlightConfig,
+  useColorHighlight
+} from '@admin/hooks/content-editor/use-color-highlight'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import { parseShortcutKeys } from '@admin/utils/editor/tiptap'
+import { cn } from '@admin/utils/shared/cn'
+import { useCallback, useMemo } 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 ColorHighlightButtonProps
+  extends Omit<EditorButtonProps, 'type'>,
+    Omit<UseColorHighlightConfig, 'hideWhenUnavailable'> {
+  availability?: ControlAvailability
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  shortcut?: ControlShortcut
+}
+
+export function ColorHighlightShortcutBadge({
+  shortcutKeys = COLOR_HIGHLIGHT_SHORTCUT_KEY
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+export function HighlightSwatch({ highlightColor }: { highlightColor: string }) {
+  return (
+    <span
+      className={cn(
+        'relative -mx-[0.175rem] size-5 rounded-full transition-transform duration-200 ease-in-out',
+        'bg-[var(--highlight-color)]',
+        'shadow-[inset_0_0_0_1px_var(--highlight-shadow),_0_1px_2px_var(--highlight-shadow-soft)]',
+        "after:content-[''] after:absolute after:inset-0 after:box-border after:size-full after:rounded-full after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out",
+        'after:border-[var(--highlight-after-border)]',
+        'group-data-[active-state=on]/highlight:scale-110',
+        'group-data-[highlighted=true]/highlight:scale-110',
+        'group-data-[active-state=on]/highlight:after:opacity-100',
+        'group-data-[highlighted=true]/highlight:after:opacity-100'
+      )}
+      style={
+        {
+          '--highlight-color': highlightColor,
+          '--highlight-shadow':
+            'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 72%, var(--foreground) 28%)',
+          '--highlight-shadow-soft': 'color-mix(in oklab, var(--foreground) 10%, transparent)',
+          '--highlight-after-border':
+            'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 52%, var(--foreground) 48%)'
+        } as React.CSSProperties
+      }
+    />
+  )
+}
+
+/**
+ * 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 function ColorHighlightButton({
+  editor: providedEditor,
+  availability,
+  highlightColor = 'yellow',
+  text,
+  mode = 'mark',
+  onApplied,
+  shortcut,
+  tooltip,
+  onClick,
+  children,
+  style,
+  useColorValue = false,
+  ref,
+  className,
+  ...buttonProps
+}: ColorHighlightButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isVisible, canColorHighlight, isActive, handleColorHighlight, label, shortcutKeys } =
+    useColorHighlight({
+      editor,
+      highlightColor,
+      useColorValue,
+      label: text || `Toggle highlight (${highlightColor})`,
+      hideWhenUnavailable: shouldHideUnavailableControl(availability),
+      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"
+      size={text ? 'sm' : 'icon-sm'}
+      data-active-state={isActive ? 'on' : 'off'}
+      role="button"
+      tabIndex={-1}
+      disabled={!canColorHighlight}
+      data-disabled={!canColorHighlight}
+      aria-label={label}
+      aria-pressed={isActive}
+      title={getControlTooltipTitle(tooltip, label)}
+      onClick={handleClick}
+      style={buttonStyle}
+      className={cn('group/highlight', className)}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children ?? (
+        <>
+          <HighlightSwatch highlightColor={highlightColor} />
+          {text && <span className="tiptap-button-text">{text}</span>}
+          {shouldShowControlShortcut(shortcut) && (
+            <ColorHighlightShortcutBadge shortcutKeys={shortcutKeys} />
+          )}
+        </>
+      )}
+    </Button>
+  )
+}

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

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

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

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