betterstart-cli 0.0.96 → 0.0.98

package/dist/assets/shared-assets/react-admin/custom/content-editor/slash-command-menu.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import * as React from 'react'
+import type { ContentEditorSlashCommand } from '@admin/utils/editor/slash-commands'
+import type { SlashMenuState } from '@admin/utils/editor/tiptap'
 import {
   Combobox,
   ComboboxContent,
@@ -8,10 +11,7 @@ import {
   ComboboxItem,
   ComboboxList
 } from '@admin/components/ui/combobox'
-import type { ContentEditorSlashCommand } from '@admin/utils/editor/slash-commands'
-import type { SlashMenuState } from '@admin/utils/editor/tiptap'
 import { cn } from '@admin/utils/shared/cn'
-import * as React from 'react'
 
 export function SlashCommandMenu({
   activeIndex,
@@ -130,7 +130,7 @@ export function SlashCommandMenu({
       <ComboboxContent
         anchor={slashAnchor}
         align="start"
-        className="w-72 min-w-72 max-w-[calc(100vw-2rem)] p-2 gap-2 flex flex-col"
+        className="flex w-72 max-w-[calc(100vw-2rem)] min-w-72 flex-col gap-2 p-2"
         collisionPadding={8}
         finalFocus={false}
         initialFocus={false}
@@ -166,17 +166,17 @@ export function SlashCommandMenu({
                 onMouseEnter={() => onActiveIndexChange(index)}
                 value={command}
                 className={cn(
-                  'border border-transparent p-2 data-highlighted:bg-card! data-highlighted:border-border!',
+                  'border border-transparent p-2 data-highlighted:border-border! data-highlighted:bg-card!',
                   {
-                    'bg-card border-border shadow-input text-foreground': isActive
+                    'border-border bg-card text-foreground shadow-input': isActive
                   }
                 )}
               >
-                <span className="flex size-8 shrink-0 items-center justify-center rounded-sm bg-card border border-border shadow-input">
+                <span className="flex size-8 shrink-0 items-center justify-center rounded-sm border border-border bg-card shadow-input">
                   <Icon />
                 </span>
-                <span className="min-w-0 space-y-1 flex flex-col w-full">
-                  <span className="font-medium leading-none">{command.title}</span>
+                <span className="flex w-full min-w-0 flex-col space-y-1">
+                  <span className="leading-none font-medium">{command.title}</span>
                   <span className="truncate text-xs text-muted-foreground">
                     {command.description}
                   </span>

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode-dropdown-button.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { Button } from '@admin/components/ui/button'
 import {
   DropdownMenu,
@@ -8,7 +9,6 @@ import {
   DropdownMenuTrigger
 } from '@admin/components/ui/dropdown-menu'
 import { ChevronDownIcon } from 'lucide-react'
-import * as React from 'react'
 
 type SvgIcon = React.ComponentType<{ className?: string }>
 

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode.tsx

@@ -1,21 +1,16 @@
 'use client'
 
+import type * as React from 'react'
+import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor'
+import type { MarkdownHeadingLevel, MarkdownListType } from '@admin/utils/editor/markdown'
 import { SourceColorHighlightPopover } from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
 import { LinkControlPopover } from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
 import { Button } from '@admin/components/ui/button'
 import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
 import { Separator } from '@admin/components/ui/separator'
 import { useContentEditorSourceMode } from '@admin/hooks/content-editor/use-content-editor-source-mode'
-import {
-  type ContentEditorSelectionRequest,
-  getContentEditorHighlightColorName
-} from '@admin/utils/editor/content-editor'
-import {
-  MARKDOWN_HEADING_OPTIONS,
-  MARKDOWN_LIST_OPTIONS,
-  type MarkdownHeadingLevel,
-  type MarkdownListType
-} from '@admin/utils/editor/markdown'
+import { getContentEditorHighlightColorName } from '@admin/utils/editor/content-editor'
+import { MARKDOWN_HEADING_OPTIONS, MARKDOWN_LIST_OPTIONS } from '@admin/utils/editor/markdown'
 import { cn } from '@admin/utils/shared/cn'
 import CodeMirror from '@uiw/react-codemirror'
 import {
@@ -40,7 +35,6 @@ import {
   UnderlineIcon,
   Undo2Icon
 } from 'lucide-react'
-import type * as React from 'react'
 import { EditorToolbar } from './editor-toolbar'
 import { MathPopoverButton } from './math-popover'
 import { SourceModeDropdownButton } from './source-mode-dropdown-button'
@@ -124,13 +118,13 @@ export function SourceMode({
   return (
     <div
       className={cn(
-        'content-editor-wrapper relative flex min-h-[240px] max-h-[90vh] flex-col overflow-hidden resize-y rounded-md border bg-background',
+        'content-editor-wrapper relative flex max-h-[90vh] min-h-[240px] resize-y flex-col overflow-hidden rounded-md border bg-background',
         { 'opacity-50': disabled },
         className
       )}
     >
       <EditorToolbar ariaLabel="Markdown editor toolbar" className="shrink-0">
-        <div className="flex min-w-0 h-full flex-1 items-center overflow-x-auto">
+        <div className="flex h-full min-w-0 flex-1 items-center overflow-x-auto">
           <div className="flex items-center gap-0.5">
             <Button
               type="button"
@@ -159,7 +153,7 @@ export function SourceMode({
           <Separator
             orientation="vertical"
             decorative
-            className="my-auto h-[65%] mx-1 self-center"
+            className="mx-1 my-auto h-[65%] self-center"
           />
 
           <div className="flex items-center gap-0.5">
@@ -241,7 +235,7 @@ export function SourceMode({
           <Separator
             orientation="vertical"
             decorative
-            className="my-auto h-[65%] mx-1 self-center"
+            className="mx-1 my-auto h-[65%] self-center"
           />
 
           <div className="flex items-center gap-0.5">
@@ -307,7 +301,7 @@ export function SourceMode({
           <Separator
             orientation="vertical"
             decorative
-            className="my-auto h-[65%] mx-1 self-center"
+            className="mx-1 my-auto h-[65%] self-center"
           />
 
           <div className="flex items-center">
@@ -348,9 +342,9 @@ export function SourceMode({
             highlightActiveLineGutter: false
           }}
           className={cn(
-            'flex min-h-0 flex-1 flex-col overflow-hidden font-mono text-sm font-normal leading-6 [&_.cm-content]:!bg-transparent [&_.cm-editor]:!bg-input [&_.cm-gutters]:!bg-input [&_.cm-scroller]:!bg-input',
+            'flex min-h-0 flex-1 flex-col overflow-hidden font-mono text-sm leading-6 font-normal [&_.cm-content]:!bg-transparent [&_.cm-editor]:!bg-input [&_.cm-gutters]:!bg-input [&_.cm-scroller]:!bg-input',
             {
-              'opacity-50 cursor-not-allowed': disabled
+              'cursor-not-allowed opacity-50': disabled
             }
           )}
         />

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-add-controls.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '@admin/components/ui/button'
 import type { ContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
+import { Button } from '@admin/components/ui/button'
 import { PlusIcon } from 'lucide-react'
 import { createPortal } from 'react-dom'
 
@@ -13,10 +13,10 @@ export function TableAddControls({ controls }: TableAddControlsProps) {
   if (!controls) return null
 
   return createPortal(
-    <div className="contents not-prose" contentEditable={false}>
+    <div className="not-prose contents" contentEditable={false}>
       <Button
         aria-label="Add table column"
-        className="group absolute top-0 right-0 bottom-6 z-[1] inline-flex h-auto w-4 shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap outline-none transition-colors select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        className="group absolute top-0 right-0 bottom-6 z-[1] inline-flex h-auto w-4 shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap transition-colors outline-none select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
         onClick={controls.addColumn}
         onPointerDown={(event) => event.preventDefault()}
         title="Add table column"
@@ -29,7 +29,7 @@ export function TableAddControls({ controls }: TableAddControlsProps) {
       </Button>
       <Button
         aria-label="Add table row"
-        className="group absolute right-6 bottom-0 left-0 z-[1] inline-flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap outline-none transition-colors select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        className="group absolute right-6 bottom-0 left-0 z-[1] inline-flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-none border border-border bg-muted/80 p-0 whitespace-nowrap transition-colors outline-none select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
         onClick={controls.addRow}
         onPointerDown={(event) => event.preventDefault()}
         title="Add table row"

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-bubble-menu.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import * as React from 'react'
+import type { ContentEditorTableAlignment } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/core'
 import { Button } from '@admin/components/ui/button'
 import { Separator } from '@admin/components/ui/separator'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
@@ -14,12 +17,10 @@ import {
   showTablePartPreview
 } from '@admin/utils/editor/table-bubble'
 import {
-  type ContentEditorTableAlignment,
   getActiveTableColumnAlignment,
   setActiveTableColumnAlignment
 } from '@admin/utils/editor/tiptap'
 import { cn } from '@admin/utils/shared/cn'
-import type { Editor } from '@tiptap/core'
 import { BubbleMenu } from '@tiptap/react/menus'
 import {
   AlignCenterIcon,
@@ -28,7 +29,6 @@ import {
   Columns3Icon,
   Rows3Icon
 } from 'lucide-react'
-import * as React from 'react'
 import { RemoveTablePartIcon } from './remove-table-part-icon'
 
 const ALIGNMENT_CONTROLS: Array<{
@@ -202,7 +202,7 @@ export function TableBubbleMenu({ editor }: { editor: Editor }) {
           role="toolbar"
           aria-label="Table formatting toolbar"
           className={cn(
-            'flex items-center gap-1 overflow-x-auto border-border rounded-sm border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'flex items-center gap-1 overflow-x-auto rounded-sm border border-border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
             'relative z-50'
           )}
         >
@@ -235,7 +235,7 @@ export function TableBubbleMenu({ editor }: { editor: Editor }) {
           <Separator
             orientation="vertical"
             decorative
-            className="my-auto h-5 w-px mx-1 self-center bg-border opacity-100"
+            className="mx-1 my-auto h-5 w-px self-center bg-border opacity-100"
           />
           <div className="flex items-center gap-0.5">
             <Button

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-button.tsx

@@ -1,11 +1,11 @@
 'use client'
 
+import type { Editor } from '@tiptap/core'
 import { Button } from '@admin/components/ui/button'
 import { Input } from '@admin/components/ui/input'
 import { Label } from '@admin/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
 import { useTableButton } from '@admin/hooks/content-editor/use-table-button'
-import type { Editor } from '@tiptap/core'
 import { TableIcon } from 'lucide-react'
 
 interface TableButtonProps {

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-extension/node-background-extension.ts

@@ -1,7 +1,7 @@
-import { getSelectedNodesOfType, updateNodesAttr } from '@admin/utils/editor/tiptap'
 import type { NodeWithPos } from '@tiptap/core'
-import { Extension } from '@tiptap/core'
 import type { EditorState, Transaction } from '@tiptap/pm/state'
+import { getSelectedNodesOfType, updateNodesAttr } from '@admin/utils/editor/tiptap'
+import { Extension } from '@tiptap/core'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -14,21 +14,10 @@ declare module '@tiptap/core' {
 }
 
 export interface NodeBackgroundOptions {
-  /**
-   * Node types that should support background colors
-   * @default ["paragraph", "heading", "blockquote", "taskList", "bulletList", "orderedList", "tableCell", "tableHeader"]
-   */
   types: string[]
-  /**
-   * Use inline style instead of data attribute
-   * @default true
-   */
   useStyle?: boolean
 }
 
-/**
- * Determines the target color for toggle operations
- */
 function getToggleColor(targets: NodeWithPos[], inputColor: string): string | null {
   if (targets.length === 0) return null
 
@@ -98,9 +87,6 @@ export const NodeBackground = Extension.create<NodeBackgroundOptions>({
   },
 
   addCommands() {
-    /**
-     * Generic command executor for background color operations
-     */
     const executeBackgroundCommand = (
       getTargetColor: (targets: NodeWithPos[], inputColor?: string) => string | null
     ) => {
@@ -117,19 +103,10 @@ export const NodeBackground = Extension.create<NodeBackgroundOptions>({
     }
 
     return {
-      /**
-       * Set background color to specific value
-       */
       setNodeBackgroundColor: executeBackgroundCommand((_, inputColor) => inputColor || null),
 
-      /**
-       * Remove background color
-       */
       unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
 
-      /**
-       * Toggle background color (set if different/missing, unset if all have it)
-       */
       toggleNodeBackgroundColor: executeBackgroundCommand((targets, inputColor) =>
         getToggleColor(targets, inputColor || '')
       )

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node-extension.ts

@@ -3,21 +3,8 @@ import { mergeAttributes, Node, ReactNodeViewRenderer } from '@tiptap/react'
 import { MediaGalleryPlaceholderNode as MediaGalleryPlaceholderNodeComponent } from './media-gallery-placeholder-node'
 
 export interface MediaGalleryPlaceholderNodeOptions {
-  /**
-   * The type of the node.
-   * @default 'image'
-   */
   type?: string | NodeType | undefined
-  /**
-   * Acceptable media types for the gallery dialog.
-   * @default 'image/*'
-   */
   accept?: string
-  /**
-   * HTML attributes to add to the image element.
-   * @default {}
-   * @example { class: 'foo' }
-   */
   HTMLAttributes: Record<string, unknown>
 }
 
@@ -29,10 +16,6 @@ declare module '@tiptap/react' {
   }
 }
 
-/**
- * A Tiptap node extension that creates a media gallery placeholder.
- * @see registry/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node
- */
 export const MediaGalleryPlaceholderNode = Node.create<MediaGalleryPlaceholderNodeOptions>({
   name: 'mediaGalleryPlaceholder',
 
@@ -85,9 +68,6 @@ export const MediaGalleryPlaceholderNode = Node.create<MediaGalleryPlaceholderNo
     }
   },
 
-  /**
-   * Adds Enter key handler to reopen the media gallery when the placeholder is selected.
-   */
   addKeyboardShortcuts() {
     return {
       Enter: ({ editor }) => {

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node.tsx

@@ -1,11 +1,11 @@
 'use client'
 
+import * as React from 'react'
+import type { NodeViewProps } from '@tiptap/react'
 import { ContentEditorMediaGalleryBlock } from '@admin/components/custom/content-editor/media-gallery-block'
 import { getMediaLabel } from '@admin/utils/editor/source-media'
 import { focusNextNode, isValidPosition } from '@admin/utils/editor/tiptap'
-import type { NodeViewProps } from '@tiptap/react'
 import { NodeViewWrapper } from '@tiptap/react'
-import * as React from 'react'
 
 export const MediaGalleryPlaceholderNode: React.FC<NodeViewProps> = (props) => {
   const { accept } = props.node.attrs

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/removable-image-node/removable-image-node.tsx

@@ -1,16 +1,16 @@
 'use client'
 
+import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
+import type { NodeViewProps } from '@tiptap/react'
 import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
 import { Button } from '@admin/components/ui/button'
-import type { AdminMedia } from '@admin/types'
 import { getNumberAttr, getStringAttr } from '@admin/utils/editor/node-attrs'
 import { getMediaLabel } from '@admin/utils/editor/source-media'
 import { focusNextNode, isValidPosition } from '@admin/utils/editor/tiptap'
 import { cn } from '@admin/utils/shared/cn'
-import type { NodeViewProps } from '@tiptap/react'
 import { NodeViewWrapper } from '@tiptap/react'
 import NextImage from 'next/image'
-import * as React from 'react'
 
 export const RemovableImageNode: React.FC<NodeViewProps> = (props) => {
   const { editor, node } = props
@@ -126,7 +126,7 @@ export const RemovableImageNode: React.FC<NodeViewProps> = (props) => {
           <div
             data-content-editor-image-controls-overlay=""
             className={cn(
-              'pointer-events-none rounded-md absolute inset-0 flex items-center justify-center gap-1 bg-black/10 backdrop-blur-xs transition-opacity duration-200 ease-out',
+              'pointer-events-none absolute inset-0 flex items-center justify-center gap-1 rounded-md bg-black/10 backdrop-blur-xs transition-opacity duration-200 ease-out',
               {
                 'opacity-100': isControlsVisible,
                 'opacity-0': !isControlsVisible

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

@@ -1,21 +1,14 @@
 'use client'
 
+import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
+import type { UseBlockquoteConfig } from '@admin/hooks/content-editor/use-blockquote'
 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 { BLOCKQUOTE_SHORTCUT_KEY, 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
@@ -26,12 +19,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface BlockquoteButtonProps
-  extends Omit<EditorButtonProps, 'type'>,
-    Omit<UseBlockquoteConfig, 'hideWhenUnavailable'> {
+  extends Omit<EditorButtonProps, 'type'>, Omit<UseBlockquoteConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Optional text to display alongside the icon.
-   */
   text?: string
   shortcut?: ControlShortcut
 }
@@ -44,11 +33,6 @@ export function BlockquoteShortcutBadge({
   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,

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

@@ -1,21 +1,14 @@
 'use client'
 
+import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
+import type { UseCodeBlockConfig } from '@admin/hooks/content-editor/use-code-block'
 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 { CODE_BLOCK_SHORTCUT_KEY, 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
@@ -26,12 +19,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface CodeBlockButtonProps
-  extends Omit<EditorButtonProps, 'type'>,
-    Omit<UseCodeBlockConfig, 'hideWhenUnavailable'> {
+  extends Omit<EditorButtonProps, 'type'>, Omit<UseCodeBlockConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Optional text to display alongside the icon.
-   */
   text?: string
   shortcut?: ControlShortcut
 }
@@ -44,11 +33,6 @@ export function CodeBlockShortcutBadge({
   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,

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

@@ -1,22 +1,18 @@
 'use client'
 
+import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
+import type { UseColorHighlightConfig } from '@admin/hooks/content-editor/use-color-highlight'
 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
@@ -27,12 +23,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface ColorHighlightButtonProps
-  extends Omit<EditorButtonProps, 'type'>,
-    Omit<UseColorHighlightConfig, 'hideWhenUnavailable'> {
+  extends Omit<EditorButtonProps, 'type'>, Omit<UseColorHighlightConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Optional text to display alongside the icon.
-   */
   text?: string
   shortcut?: ControlShortcut
 }
@@ -52,7 +44,7 @@ export function HighlightSwatch({ highlightColor }: { highlightColor: string })
         'relative -mx-[0.175rem] size-5 rounded-sm 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-sm after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out",
+        "after:absolute after:inset-0 after:box-border after:size-full after:rounded-sm after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-['']",
         'after:border-[var(--highlight-after-border)]',
         'group-data-[active-state=on]/highlight:scale-110',
         'group-data-[highlighted=true]/highlight:scale-110',
@@ -73,34 +65,6 @@ export function HighlightSwatch({ highlightColor }: { highlightColor: string })
   )
 }
 
-/**
- * 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,

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

@@ -1,12 +1,10 @@
 'use client'
 
-import {
-  type ControlTooltip,
-  getControlTooltipTitle
-} from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import type * as React from 'react'
+import type { ControlTooltip } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import { 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

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

@@ -1,23 +1,17 @@
 'use client'
 
+import type { HighlightColor } from './highlight-colors'
+import type { Editor } from '@tiptap/react'
 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'
+import { DEFAULT_HIGHLIGHT_COLORS } 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
@@ -29,8 +23,10 @@ interface EditorColorHighlightPopoverContentProps extends ColorHighlightPopoverC
   onRemoveHighlight?: never
 }
 
-interface SourceColorHighlightPopoverContentProps
-  extends Omit<ColorHighlightPopoverContentBaseProps, 'editor'> {
+interface SourceColorHighlightPopoverContentProps extends Omit<
+  ColorHighlightPopoverContentBaseProps,
+  'editor'
+> {
   editor?: never
   mode: 'source'
   onHighlightColorSelect: (color: HighlightColor) => void