betterstart-cli 0.0.12 → 0.0.13

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

@@ -10,6 +10,7 @@ import { Separator } from '@admin/components/ui/separator'
 import { cn } from '@admin/utils/shared/cn'
 import type { Editor } from '@tiptap/core'
 import { BubbleMenu } from '@tiptap/react/menus'
+import * as React from 'react'
 
 const HIDDEN_SELECTION_TOOLBAR_TYPES = [
   'mediaGalleryPlaceholder',
@@ -26,6 +27,31 @@ const HIDDEN_SELECTION_TOOLBAR_TYPES = [
 ] as const
 
 export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
+  const [hasOpenSelectionMenuChild, setHasOpenSelectionMenuChild] = React.useState(false)
+  const hasOpenSelectionMenuChildRef = React.useRef(false)
+  const setSelectionMenuChildOpen = React.useCallback((isOpen: boolean) => {
+    hasOpenSelectionMenuChildRef.current = isOpen
+    setHasOpenSelectionMenuChild(isOpen)
+  }, [])
+  const handleSelectionMenuChildOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      setSelectionMenuChildOpen(isOpen)
+    },
+    [setSelectionMenuChildOpen]
+  )
+  const handleSelectionMenuPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const target = event.target
+      if (!(target instanceof Element)) return
+
+      const menuTrigger = target.closest('button[aria-haspopup], button[aria-expanded]')
+      if (menuTrigger) {
+        setSelectionMenuChildOpen(true)
+      }
+    },
+    [setSelectionMenuChildOpen]
+  )
+
   return (
     <>
       <BubbleMenu
@@ -46,8 +72,8 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
           role="toolbar"
           aria-label="Link formatting toolbar"
           className={cn(
-            'flex items-center gap-1 overflow-x-auto border-border rounded-full border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            'relative z-50 p-0'
+            'flex items-center gap-1 overflow-x-auto border-border border bg-popover p-4 text-foreground shadow-2xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-xl',
+            'relative z-10'
           )}
         >
           <LinkContent editor={editor} />
@@ -60,7 +86,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
         updateDelay={0}
         shouldShow={({ editor: currentEditor, from, to }) =>
           currentEditor.isEditable &&
-          from !== to &&
+          (from !== to || hasOpenSelectionMenuChild || hasOpenSelectionMenuChildRef.current) &&
           HIDDEN_SELECTION_TOOLBAR_TYPES.every((type) => !currentEditor.isActive(type))
         }
         options={{
@@ -73,14 +99,22 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
         <div
           role="toolbar"
           aria-label="Selection formatting toolbar"
+          onPointerDownCapture={handleSelectionMenuPointerDown}
           className={cn(
             'flex items-center gap-1 overflow-x-auto border-border rounded-full border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            'relative z-50'
+            'relative z-10'
           )}
         >
           <div className="flex items-center gap-0.5">
-            <HeadingDropdownMenu editor={editor} />
-            <ListDropdownMenu editor={editor} types={['bulletList', 'orderedList', 'taskList']} />
+            <HeadingDropdownMenu
+              editor={editor}
+              onOpenChange={handleSelectionMenuChildOpenChange}
+            />
+            <ListDropdownMenu
+              editor={editor}
+              types={['bulletList', 'orderedList', 'taskList']}
+              onOpenChange={handleSelectionMenuChildOpenChange}
+            />
           </div>
 
           <Separator
@@ -95,8 +129,11 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
             <MarkButton editor={editor} type="strike" />
             <MarkButton editor={editor} type="code" />
             <MarkButton editor={editor} type="underline" />
-            <ColorHighlightPopover editor={editor} />
-            <LinkPopover editor={editor} />
+            <ColorHighlightPopover
+              editor={editor}
+              onOpenChange={handleSelectionMenuChildOpenChange}
+            />
+            <LinkPopover editor={editor} onOpenChange={handleSelectionMenuChildOpenChange} />
           </div>
         </div>
       </BubbleMenu>

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

@@ -1,65 +1,191 @@
+'use client'
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList
+} from '@admin/components/ui/combobox'
 import type { ContentEditorSlashCommand } from '@admin/utils/editor/slash-commands'
-import { getSlashMenuStyle, type SlashMenuState } from '@admin/utils/editor/tiptap'
+import type { SlashMenuState } from '@admin/utils/editor/tiptap'
 import { cn } from '@admin/utils/shared/cn'
+import * as React from 'react'
 
 export function SlashCommandMenu({
   activeIndex,
   commands,
   onActiveIndexChange,
+  onClose,
   onCommandSelect,
-  slashMenu
+  onSearchChange,
+  slashMenu,
+  searchQuery
 }: {
   activeIndex: number
   commands: ContentEditorSlashCommand[]
   onActiveIndexChange: (index: number) => void
+  onClose: () => void
   onCommandSelect: (command: ContentEditorSlashCommand) => void
+  onSearchChange: (query: string) => void
   slashMenu: SlashMenuState | null
+  searchQuery: string
 }) {
+  const activeItemRef = React.useRef<HTMLDivElement | null>(null)
+  const searchInputRef = React.useRef<HTMLInputElement | null>(null)
+  const activeCommandId = commands[activeIndex]?.id
+
+  const handleSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const stopComboboxKeyHandling = () => {
+      const baseUIEvent = event as React.KeyboardEvent<HTMLInputElement> & {
+        preventBaseUIHandler?: () => void
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      baseUIEvent.preventBaseUIHandler?.()
+    }
+
+    if (event.key === 'ArrowDown') {
+      stopComboboxKeyHandling()
+      onActiveIndexChange(commands.length > 0 ? (activeIndex + 1) % commands.length : 0)
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      stopComboboxKeyHandling()
+      onActiveIndexChange(
+        commands.length > 0 ? (activeIndex - 1 + commands.length) % commands.length : 0
+      )
+      return
+    }
+
+    if (event.key === 'Escape') {
+      stopComboboxKeyHandling()
+      onClose()
+      return
+    }
+
+    if (event.key === 'Enter' || event.key === 'Tab') {
+      const command = commands[activeIndex]
+      if (!command) return
+
+      stopComboboxKeyHandling()
+      onCommandSelect(command)
+    }
+  }
+
+  React.useEffect(() => {
+    if (!slashMenu) return
+
+    const focusSearchInput = () => {
+      searchInputRef.current?.focus({ preventScroll: true })
+      searchInputRef.current?.select()
+    }
+
+    focusSearchInput()
+    const frame = requestAnimationFrame(focusSearchInput)
+
+    return () => cancelAnimationFrame(frame)
+  }, [slashMenu])
+
+  React.useEffect(() => {
+    if (!activeCommandId) return
+
+    activeItemRef.current?.scrollIntoView({ block: 'nearest' })
+  }, [activeCommandId])
+
   if (!slashMenu) return null
 
+  const slashAnchor = {
+    getBoundingClientRect: () => slashMenu.rect
+  }
+
   return (
-    <div
-      className="z-50 w-72 max-w-[calc(100vw-2rem)] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
-      style={getSlashMenuStyle(slashMenu.rect)}
+    <Combobox<ContentEditorSlashCommand>
+      autoHighlight
+      filter={null}
+      filteredItems={commands}
+      inputValue={searchQuery}
+      itemToStringLabel={(command) => command.title}
+      itemToStringValue={(command) => command.id}
+      items={commands}
+      onInputValueChange={onSearchChange}
+      onItemHighlighted={(command) => {
+        if (!command) return
+
+        const nextIndex = commands.findIndex((item) => item.id === command.id)
+        if (nextIndex >= 0) onActiveIndexChange(nextIndex)
+      }}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose()
+      }}
+      onValueChange={(command) => {
+        if (command) onCommandSelect(command)
+      }}
+      open
+      value={null}
     >
-      {commands.length > 0 ? (
-        <div className="max-h-80 overflow-y-auto">
+      <ComboboxContent
+        anchor={slashAnchor}
+        align="start"
+        className="w-72 min-w-72 max-w-[calc(100vw-2rem)] p-2 gap-2 flex flex-col"
+        collisionPadding={8}
+        finalFocus={false}
+        initialFocus={false}
+        positionMethod="fixed"
+        side="bottom"
+        sideOffset={8}
+        data-content-editor-slash-menu
+      >
+        <ComboboxInput
+          aria-label="Search commands"
+          ref={searchInputRef}
+          onKeyDown={handleSearchKeyDown}
+          placeholder="Search commands..."
+          showClear
+          showTrigger={false}
+          className="border border-border"
+        />
+        <ComboboxEmpty className="py-6">No commands found</ComboboxEmpty>
+        <ComboboxList className="max-h-80 p-0">
           {commands.map((command, index) => {
             const Icon = command.Icon
             const isActive = index === activeIndex
 
             return (
-              <button
+              <ComboboxItem
+                index={index}
                 key={command.id}
-                type="button"
+                data-active={isActive ? 'true' : undefined}
+                ref={(node) => {
+                  if (isActive) activeItemRef.current = node
+                }}
+                onMouseDown={(event) => event.preventDefault()}
+                onMouseEnter={() => onActiveIndexChange(index)}
+                value={command}
                 className={cn(
-                  'flex w-full items-start gap-3 rounded-sm px-2.5 py-2 text-left text-sm outline-none transition-colors',
+                  'border border-transparent p-2 data-highlighted:bg-card! data-highlighted:border-border!',
                   {
-                    'bg-accent text-accent-foreground': isActive,
-                    'text-popover-foreground hover:bg-accent hover:text-accent-foreground':
-                      !isActive
+                    'bg-card border-border shadow-input text-foreground': isActive
                   }
                 )}
-                onMouseDown={(event) => event.preventDefault()}
-                onMouseEnter={() => onActiveIndexChange(index)}
-                onClick={() => onCommandSelect(command)}
               >
-                <span className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-sm bg-muted">
-                  <Icon className="size-4" />
+                <span className="flex size-8 shrink-0 items-center justify-center rounded-sm bg-card border border-border shadow-input">
+                  <Icon />
                 </span>
-                <span className="min-w-0">
-                  <span className="block font-medium leading-none">{command.title}</span>
-                  <span className="mt-1 block truncate text-xs text-muted-foreground">
+                <span className="min-w-0 space-y-1 flex flex-col w-full">
+                  <span className="font-medium leading-none">{command.title}</span>
+                  <span className="truncate text-xs text-muted-foreground">
                     {command.description}
                   </span>
                 </span>
-              </button>
+              </ComboboxItem>
             )
           })}
-        </div>
-      ) : (
-        <div className="px-3 py-6 text-center text-sm text-muted-foreground">No commands found</div>
-      )}
-    </div>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
   )
 }

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

@@ -40,7 +40,7 @@ export function SourceModeDropdownButton({
           onPointerDown={(event) => event.preventDefault()}
           onClick={() => setIsOpen((current) => !current)}
         >
-          <Icon className="tiptap-button-icon" />
+          <Icon />
           <ChevronDownIcon className="tiptap-button-dropdown-small" />
         </Button>
       </DropdownMenuTrigger>

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

@@ -140,7 +140,7 @@ export function SourceMode({
               aria-label="Undo"
               title="Undo"
             >
-              <Undo2Icon className="tiptap-button-icon" />
+              <Undo2Icon />
             </Button>
             <Button
               type="button"
@@ -151,7 +151,7 @@ export function SourceMode({
               aria-label="Redo"
               title="Redo"
             >
-              <Redo2Icon className="tiptap-button-icon" />
+              <Redo2Icon />
             </Button>
           </div>
 
@@ -178,7 +178,7 @@ export function SourceMode({
                     title={option.label}
                     onSelect={() => applyHeading(option.level)}
                   >
-                    <Icon className="tiptap-button-icon" />
+                    <Icon />
                     <span className="tiptap-button-text">{option.label}</span>
                   </DropdownMenuItem>
                 )
@@ -196,7 +196,7 @@ export function SourceMode({
                     title={option.label}
                     onSelect={() => applyList(option.type)}
                   >
-                    <Icon className="tiptap-button-icon" />
+                    <Icon />
                     <span className="tiptap-button-text">{option.label}</span>
                   </DropdownMenuItem>
                 )
@@ -211,7 +211,7 @@ export function SourceMode({
               aria-label="Blockquote"
               title="Blockquote"
             >
-              <BlockquoteIcon className="tiptap-button-icon" />
+              <BlockquoteIcon />
             </Button>
             <Button
               type="button"
@@ -222,7 +222,7 @@ export function SourceMode({
               aria-label="Code Block"
               title="Code Block"
             >
-              <CodeBlockIcon className="tiptap-button-icon" />
+              <CodeBlockIcon />
             </Button>
             <Button
               type="button"
@@ -233,7 +233,7 @@ export function SourceMode({
               aria-label="Insert divider"
               title="Divider"
             >
-              <Minus className="tiptap-button-icon" />
+              <Minus />
             </Button>
           </div>
 
@@ -281,7 +281,7 @@ export function SourceMode({
                 aria-label={mark.label}
                 title={mark.label}
               >
-                <mark.Icon className="tiptap-button-icon" />
+                <mark.Icon />
               </Button>
             ))}
             <SourceColorHighlightPopover
@@ -322,7 +322,7 @@ export function SourceMode({
               aria-label="Add media"
               title="Add media"
             >
-              <ImagePlusIcon className="tiptap-button-icon" />
+              <ImagePlusIcon />
               <span className="tiptap-button-text">Media</span>
             </Button>
           </div>

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

@@ -227,7 +227,7 @@ export function TableBubbleMenu({ editor }: { editor: Editor }) {
                   }}
                   title={label}
                 >
-                  <Icon className="tiptap-button-icon" />
+                  <Icon />
                 </Button>
               )
             })}

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

@@ -76,11 +76,11 @@ export function TableButton({ disabled, editor, onInsertTable }: TableButtonProp
           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">
+      <PopoverContent align="start" className="w-72 p-4">
         <div className="flex flex-col gap-3" onKeyDownCapture={handleKeyDown}>
           <div className="grid grid-cols-2 gap-2">
             <div className="flex flex-col gap-1.5">
@@ -106,8 +106,13 @@ export function TableButton({ disabled, editor, onInsertTable }: TableButtonProp
               />
             </div>
           </div>
-          <Button type="button" size="sm" disabled={disabled || !canInsert} onClick={insertTable}>
-            Enter
+          <Button
+            type="button"
+            variant="default"
+            disabled={disabled || !canInsert}
+            onClick={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

@@ -22,7 +22,6 @@ export function LinkControlPopover({
   onClick,
   onOpenChange,
   open,
-  openLink,
   ref,
   removeLink,
   setLink,
@@ -71,17 +70,16 @@ 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">
+      <PopoverContent className="w-auto max-w-[calc(100vw-2rem)]">
         <LinkMain
           url={url}
           setUrl={setUrl}
           setLink={handleSetLink}
           removeLink={removeLink}
-          openLink={openLink}
           isActive={isActive}
         />
       </PopoverContent>