betterstart-cli 0.0.12 → 0.0.14

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

@@ -4,16 +4,9 @@ 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 { normalizeCount } from '@admin/utils/editor/table-input'
-import { insertContentEditorTable } from '@admin/utils/editor/tiptap'
+import { useTableButton } from '@admin/hooks/content-editor/use-table-button'
 import type { Editor } from '@tiptap/core'
 import { TableIcon } from 'lucide-react'
-import * as React from 'react'
-
-const DEFAULT_TABLE_ROWS = 3
-const DEFAULT_TABLE_COLS = 3
-const MIN_TABLE_ROWS = 2
-const MIN_TABLE_COLS = 1
 
 interface TableButtonProps {
   disabled?: boolean
@@ -22,92 +15,56 @@ interface TableButtonProps {
 }
 
 export function TableButton({ disabled, editor, onInsertTable }: TableButtonProps) {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [rows, setRows] = React.useState(String(DEFAULT_TABLE_ROWS))
-  const [cols, setCols] = React.useState(String(DEFAULT_TABLE_COLS))
-  const rowsId = React.useId()
-  const colsId = React.useId()
-  const canInsert = Boolean(onInsertTable || editor?.isEditable)
-
-  const closePopover = React.useCallback(() => {
-    setIsOpen(false)
-    window.setTimeout(() => setIsOpen(false), 0)
-  }, [])
-
-  const insertTable = React.useCallback(() => {
-    if (disabled || !canInsert) return
-
-    const rowCount = normalizeCount(rows, DEFAULT_TABLE_ROWS, MIN_TABLE_ROWS)
-    const colCount = normalizeCount(cols, DEFAULT_TABLE_COLS, MIN_TABLE_COLS)
-
-    if (onInsertTable) {
-      onInsertTable({ cols: colCount, rows: rowCount })
-      closePopover()
-      return
-    }
-
-    if (!editor) return
-
-    insertContentEditorTable(editor, rowCount, colCount)
-    closePopover()
-  }, [canInsert, closePopover, cols, disabled, editor, onInsertTable, rows])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key !== 'Enter') return
-
-      event.preventDefault()
-      event.stopPropagation()
-      insertTable()
-    },
-    [insertTable]
-  )
+  const tableButton = useTableButton({ disabled, editor, onInsertTable })
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    <Popover open={tableButton.isOpen} onOpenChange={tableButton.setIsOpen}>
       <PopoverTrigger asChild>
         <Button
           type="button"
           variant="ghost"
           size="sm"
-          disabled={disabled || !canInsert}
+          disabled={tableButton.isDisabled}
           aria-label="Insert table"
           title="Table"
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
         >
-          <TableIcon className="tiptap-button-icon" />
+          <TableIcon />
           <span className="tiptap-button-text">Table</span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-56 p-3">
-        <div className="flex flex-col gap-3" onKeyDownCapture={handleKeyDown}>
+      <PopoverContent align="start" className="w-72 p-4">
+        <div className="flex flex-col gap-3" onKeyDownCapture={tableButton.handleKeyDown}>
           <div className="grid grid-cols-2 gap-2">
             <div className="flex flex-col gap-1.5">
-              <Label htmlFor={rowsId}>Rows</Label>
+              <Label htmlFor={tableButton.rowsId}>Rows</Label>
               <Input
-                id={rowsId}
+                id={tableButton.rowsId}
                 inputMode="numeric"
-                min={MIN_TABLE_ROWS}
-                onChange={(event) => setRows(event.target.value)}
+                min={tableButton.minRows}
+                onChange={tableButton.handleRowsChange}
                 type="number"
-                value={rows}
+                value={tableButton.rows}
               />
             </div>
             <div className="flex flex-col gap-1.5">
-              <Label htmlFor={colsId}>Cols</Label>
+              <Label htmlFor={tableButton.colsId}>Cols</Label>
               <Input
-                id={colsId}
+                id={tableButton.colsId}
                 inputMode="numeric"
-                min={MIN_TABLE_COLS}
-                onChange={(event) => setCols(event.target.value)}
+                min={tableButton.minCols}
+                onChange={tableButton.handleColsChange}
                 type="number"
-                value={cols}
+                value={tableButton.cols}
               />
             </div>
           </div>
-          <Button type="button" size="sm" disabled={disabled || !canInsert} onClick={insertTable}>
-            Enter
+          <Button
+            type="button"
+            variant="default"
+            disabled={tableButton.isDisabled}
+            onClick={tableButton.insertTable}
+          >
+            Insert
           </Button>
         </div>
       </PopoverContent>

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

@@ -102,7 +102,7 @@ export function BlockquoteButton({
     >
       {children ?? (
         <>
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           {text && <span className="tiptap-button-text">{text}</span>}
           {shouldShowControlShortcut(shortcut) && (
             <BlockquoteShortcutBadge shortcutKeys={shortcutKeys} />

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

@@ -100,7 +100,7 @@ export function CodeBlockButton({
     >
       {children ?? (
         <>
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           {text && <span className="tiptap-button-text">{text}</span>}
           {shouldShowControlShortcut(shortcut) && (
             <CodeBlockShortcutBadge shortcutKeys={shortcutKeys} />

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

@@ -34,7 +34,7 @@ export function ColorHighlightPopoverButton({
       ref={ref}
       {...props}
     >
-      {children ?? <HighlighterIcon className="tiptap-button-icon" />}
+      {children ?? <HighlighterIcon />}
     </Button>
   )
 }

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

@@ -123,7 +123,7 @@ export function ColorHighlightPopoverContent(props: ColorHighlightPopoverContent
         disabled={disabled}
         data-disabled={disabled}
       >
-        <BanIcon className="tiptap-button-icon" />
+        <BanIcon />
       </Button>
     </div>
   )

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

@@ -33,6 +33,7 @@ export interface ColorHighlightPopoverProps
    * If not provided, defaults to a predefined set of colors.
    */
   colors?: HighlightColor[]
+  onOpenChange?: (isOpen: boolean) => void
   tooltip?: ControlTooltip
   useColorValue?: boolean
 }
@@ -43,6 +44,7 @@ export function ColorHighlightPopover({
   colors = DEFAULT_HIGHLIGHT_COLORS,
   useColorValue = false,
   onApplied,
+  onOpenChange,
   tooltip,
   disabled,
   ref,
@@ -60,11 +62,18 @@ export function ColorHighlightPopover({
   const isActive = highlightState.isActive
   const label = highlightState.label
   const Icon = highlightState.Icon
+  const handleOpenChange = React.useCallback(
+    (open: boolean) => {
+      setIsOpen(open)
+      onOpenChange?.(open)
+    },
+    [onOpenChange]
+  )
 
   if (!isVisible) return null
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <ColorHighlightPopoverButton
           disabled={disabled || !canColorHighlight}
@@ -77,7 +86,7 @@ export function ColorHighlightPopover({
           {...props}
           ref={ref}
         >
-          <Icon className="tiptap-button-icon" />
+          <Icon />
         </ColorHighlightPopoverButton>
       </PopoverTrigger>
       <PopoverContent

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

@@ -45,7 +45,7 @@ export function SourceColorHighlightPopover({
           tooltip={tooltip}
           {...props}
         >
-          <HighlighterIcon className="tiptap-button-icon" />
+          <HighlighterIcon />
         </ColorHighlightPopoverButton>
       </PopoverTrigger>
       <PopoverContent

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

@@ -28,7 +28,7 @@ export function HeadingDropdownMenuItem({
       title={label}
       onSelect={() => handleToggle()}
     >
-      <Icon className="tiptap-button-icon" />
+      <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

@@ -74,7 +74,7 @@ export function HeadingDropdownMenu({
   }
 
   return (
-    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+    <DropdownMenu modal={false} open={isOpen} onOpenChange={handleOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button
           type="button"
@@ -91,21 +91,26 @@ export function HeadingDropdownMenu({
           className="w-auto px-2"
           {...buttonProps}
           ref={ref}
-          onPointerDown={(e) => e.preventDefault()}
+          onPointerDown={(event) => event.preventDefault()}
           onClick={() => handleOpenChange(!isOpen)}
         >
           {children ? (
             children
           ) : (
             <>
-              <Icon className="tiptap-button-icon" />
+              <Icon />
               <ChevronDownIcon className="tiptap-button-dropdown-small" />
             </>
           )}
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" className="w-auto min-w-40">
+      <DropdownMenuContent
+        align="start"
+        className="w-auto min-w-40"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        portalled={false}
+      >
         <DropdownMenuGroup>
           {levels.map((level) => (
             <HeadingDropdownMenuItem key={`heading-${level}`} editor={editor} level={level} />

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

@@ -33,7 +33,7 @@ export function LinkButton({
       ref={ref}
       {...props}
     >
-      {children || <LinkIcon className="tiptap-button-icon" />}
+      {children || <LinkIcon />}
     </Button>
   )
 }

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

@@ -9,6 +9,7 @@ import { LinkMain, type LinkMainProps } from './link-main'
 
 export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>, LinkMainProps {
   canSet?: boolean
+  isActive?: boolean
   label?: string
   onOpenChange?: (isOpen: boolean) => void
   open?: boolean
@@ -17,12 +18,11 @@ export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>,
 export function LinkControlPopover({
   canSet = true,
   children,
-  isActive,
+  isActive = false,
   label = 'Link',
   onClick,
   onOpenChange,
   open,
-  openLink,
   ref,
   removeLink,
   setLink,
@@ -71,19 +71,12 @@ export function LinkControlPopover({
           onClick={handleClick}
           ref={ref}
         >
-          {children ?? <LinkIcon className="tiptap-button-icon" />}
+          {children ?? <LinkIcon />}
         </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 className="w-auto max-w-[calc(100vw-2rem)]">
+        <LinkMain url={url} setUrl={setUrl} setLink={handleSetLink} removeLink={removeLink} />
       </PopoverContent>
     </Popover>
   )

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

@@ -2,8 +2,7 @@
 
 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 { TrashIcon } from 'lucide-react'
 import type * as React from 'react'
 
 export interface LinkMainProps {
@@ -23,17 +22,9 @@ export interface LinkMainProps {
    * 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) {
+export function LinkMain({ url, setUrl, setLink, removeLink }: LinkMainProps) {
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       event.preventDefault()
@@ -42,7 +33,7 @@ export function LinkMain({ url, setUrl, setLink, removeLink, openLink, isActive
   }
 
   return (
-    <div className="flex min-w-max items-center gap-1 p-2">
+    <div className="flex flex-col min-w-max items-center gap-2">
       <InputGroup className="h-9 min-w-64">
         <InputGroupInput
           type="url"
@@ -57,40 +48,23 @@ export function LinkMain({ url, setUrl, setLink, removeLink, openLink, isActive
         />
       </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>
+      <div className="flex items-center gap-1 w-full">
+        {url && (
+          <Button type="button" onClick={removeLink} title="Remove link" variant="destructive">
+            <TrashIcon />
+          </Button>
+        )}
 
-      <Button
-        type="button"
-        onClick={removeLink}
-        title="Remove link"
-        disabled={!url && !isActive}
-        variant="ghost"
-        size="icon-sm"
-      >
-        <TrashIcon className="tiptap-button-icon" />
-      </Button>
+        <Button
+          type="button"
+          onClick={setLink}
+          title="Apply link"
+          variant="default"
+          className="flex-1"
+        >
+          Insert
+        </Button>
+      </div>
     </div>
   )
 }

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

@@ -57,7 +57,7 @@ export function LinkPopover({
 }: LinkPopoverProps) {
   const { editor } = useTiptapEditor(providedEditor)
 
-  const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } =
+  const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, label, Icon } =
     useLinkPopover({
       editor,
       hideWhenUnavailable: shouldHideUnavailableControl(availability),
@@ -105,7 +105,6 @@ export function LinkPopover({
       onClick={onClick}
       onOpenChange={handleOnOpenChange}
       open={isOpen}
-      openLink={openLink}
       removeLink={removeLink}
       setLink={setLink}
       setUrl={setUrl}
@@ -113,7 +112,7 @@ export function LinkPopover({
       {...buttonProps}
       ref={ref}
     >
-      {children ?? <Icon className="tiptap-button-icon" />}
+      {children ?? <Icon />}
     </LinkControlPopover>
   )
 }

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

@@ -37,7 +37,7 @@ export function ListDropdownMenuItem({
       title={itemLabel}
       onSelect={() => handleToggle()}
     >
-      <Icon className="tiptap-button-icon" />
+      <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

@@ -73,7 +73,7 @@ export function ListDropdownMenu({
   }
 
   return (
-    <DropdownMenu open={isOpen} onOpenChange={handleOnOpenChange}>
+    <DropdownMenu modal={false} open={isOpen} onOpenChange={handleOnOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button
           type="button"
@@ -88,15 +88,20 @@ export function ListDropdownMenu({
           size="icon-sm"
           className="w-auto px-2"
           {...props}
-          onPointerDown={(e) => e.preventDefault()}
+          onPointerDown={(event) => event.preventDefault()}
           onClick={() => handleOnOpenChange(!isOpen)}
         >
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           <ChevronDownIcon className="tiptap-button-dropdown-small" />
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" className="w-auto min-w-40">
+      <DropdownMenuContent
+        align="start"
+        className="w-auto min-w-40"
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        portalled={false}
+      >
         <DropdownMenuGroup>
           {filteredLists.map((option) => (
             <ListDropdownMenuItem

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

@@ -105,7 +105,7 @@ export function MarkButton({
     >
       {children ?? (
         <>
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           {text && <span className="tiptap-button-text">{text}</span>}
           {shouldShowControlShortcut(shortcut) && (
             <MarkShortcutBadge type={type} shortcutKeys={shortcutKeys} />

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

@@ -103,7 +103,7 @@ export function UndoRedoButton({
     >
       {children ?? (
         <>
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           {text && <span className="tiptap-button-text">{text}</span>}
           {shouldShowControlShortcut(shortcut) && (
             <HistoryShortcutBadge action={action} shortcutKeys={shortcutKeys} />

package/dist/assets/shared-assets/react-admin/custom/date-range-picker.tsx

@@ -134,9 +134,9 @@ export function DateRangePicker({
     >
       <PopoverTrigger asChild>
         <Button variant="outline" className={cn('w-[206px]', className)} disabled={disabled}>
-          <CalendarIcon data-icon="inline-start" />
+          <CalendarIcon />
           <span className="min-w-0 flex-1 truncate text-left tabular-nums">{triggerLabel}</span>
-          <ChevronDown data-icon="inline-end" />
+          <ChevronDown />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-lg p-0" align="start">

package/dist/assets/shared-assets/react-admin/custom/dynamic-list-field.tsx

@@ -1,9 +1,15 @@
 'use client'
 
 import { Button } from '@admin/components/ui/button'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@admin/components/ui/form'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
 import { Input } from '@admin/components/ui/input'
-import { Label } from '@admin/components/ui/label'
 import { cn } from '@admin/utils/shared/cn'
 import { Plus, Trash2 } from 'lucide-react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
@@ -46,12 +52,18 @@ export function DynamicListField({
   return (
     <div className={cn('space-y-4', className)}>
       <div className="flex items-start justify-between gap-3">
-        <div className="flex flex-col gap-1">
-          <Label className={cn({ 'sr-only': hideLabel })}>{label}</Label>
-          {description ? (
-            <p className="text-[0.8rem] text-muted-foreground">{description}</p>
-          ) : null}
-        </div>
+        <FormField
+          control={control}
+          name={name}
+          render={() => (
+            <FormItem className="flex flex-col gap-1">
+              <FormLabel className={cn({ 'sr-only': hideLabel })}>{label}</FormLabel>
+              {description ? (
+                <FormDescription className="text-muted-foreground">{description}</FormDescription>
+              ) : null}
+            </FormItem>
+          )}
+        />
         <Button
           type="button"
           variant="outline"

package/dist/assets/shared-assets/react-admin/custom/media-gallery-field.tsx

@@ -81,7 +81,7 @@ export function MediaGalleryField({
               <>
                 <div
                   aria-hidden="true"
-                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100"
+                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-lg"
                 />
                 <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
                   <Button