betterstart-cli 0.0.12 → 0.0.14

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

@@ -39,6 +39,7 @@ export function ContentEditor({
 
   const {
     activeSlashIndex,
+    closeSlashMenu,
     editor,
     filteredSlashCommands,
     handleModeChange,
@@ -47,7 +48,9 @@ export function ContentEditor({
     mode,
     selectSlashCommand,
     setActiveSlashIndex,
+    setSlashSearch,
     slashMenu,
+    slashSearchQuery,
     sourceValue,
     sourceSelectionRequest
   } = useContentEditor({
@@ -123,8 +126,11 @@ export function ContentEditor({
                   activeIndex={activeSlashIndex}
                   commands={filteredSlashCommands}
                   onActiveIndexChange={setActiveSlashIndex}
+                  onClose={closeSlashMenu}
                   onCommandSelect={selectSlashCommand}
+                  onSearchChange={setSlashSearch}
                   slashMenu={slashMenu}
+                  searchQuery={slashSearchQuery}
                 />
 
                 <EditorContent

package/dist/assets/shared-assets/react-admin/custom/content-editor/main-toolbar-content.tsx

@@ -103,7 +103,7 @@ export function MainToolbarContent({
                 mediaInsertion.insertMedia()
               }}
             >
-              <ImagePlusIcon className="tiptap-button-icon" />
+              <ImagePlusIcon />
               <span className="tiptap-button-text">Media</span>
             </Button>
           ) : null}

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

@@ -13,7 +13,7 @@ export function MathButton({ children, text, ...props }: MathButtonProps) {
     <Button type="button" variant="ghost" size={text ? 'sm' : 'icon-sm'} {...props}>
       {children ?? (
         <>
-          <SigmaIcon className="tiptap-button-icon" />
+          <SigmaIcon />
           {text ? <span className="tiptap-button-text">{text}</span> : null}
         </>
       )}

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

@@ -1,16 +1,13 @@
 'use client'
 
 import { Button } from '@admin/components/ui/button'
-import { Separator } from '@admin/components/ui/separator'
 import { Textarea } from '@admin/components/ui/textarea'
-import { cn } from '@admin/utils/shared/cn'
-import { CornerDownLeftIcon, TrashIcon } from 'lucide-react'
+import { TrashIcon } from 'lucide-react'
 import * as React from 'react'
 
 export interface MathEditorControlsProps {
   disabled?: boolean
   initialValue?: string
-  layout?: 'popover' | 'toolbar'
   onApply: (value: string) => boolean | undefined
   onComplete?: () => void
   onRemove?: () => boolean | undefined
@@ -19,14 +16,19 @@ export interface MathEditorControlsProps {
 export function MathEditorControls({
   disabled,
   initialValue = '',
-  layout = 'toolbar',
   onApply,
   onComplete,
   onRemove
 }: MathEditorControlsProps) {
   const [value, setValue] = React.useState(initialValue)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
   const canApply = Boolean(value.trim()) && !disabled
-  const isPopoverLayout = layout === 'popover'
+
+  React.useEffect(() => {
+    if (disabled) return
+
+    textareaRef.current?.focus({ preventScroll: true })
+  }, [disabled])
 
   const applyMath = React.useCallback(() => {
     if (!canApply) return
@@ -60,57 +62,42 @@ export function MathEditorControls({
   )
 
   return (
-    <div
-      className={
-        isPopoverLayout
-          ? 'flex w-72 max-w-[calc(100vw-2rem)] flex-col gap-3 p-3'
-          : 'flex min-w-72 max-w-[calc(100vw-2rem)] items-start gap-2 p-2'
-      }
-    >
+    <div className="flex w-72 flex-col gap-3 p-4">
       <Textarea
+        ref={textareaRef}
         value={value}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="Paste LaTeX..."
         disabled={disabled}
-        autoFocus
         className="min-h-24 resize-y rounded-md text-sm"
       />
 
-      <div
-        className={cn({
-          'flex flex-col gap-2': isPopoverLayout,
-          'flex shrink-0 items-center gap-1': !isPopoverLayout
-        })}
-      >
+      <div className="flex items-center flex-wrap gap-1">
+        {onRemove ? (
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={disabled}
+            aria-label="Remove math"
+            title="Remove"
+            onClick={removeMath}
+          >
+            <TrashIcon />
+          </Button>
+        ) : null}
+
         <Button
           type="button"
-          variant={isPopoverLayout ? 'default' : 'ghost'}
-          size={isPopoverLayout ? 'sm' : 'icon-sm'}
+          variant="default"
+          className="flex-1"
           disabled={!canApply}
           aria-label="Enter math"
           title="Enter"
           onClick={applyMath}
         >
-          {isPopoverLayout ? 'Enter' : <CornerDownLeftIcon className="tiptap-button-icon" />}
+          Insert
         </Button>
-
-        {onRemove ? (
-          <>
-            <Separator orientation="vertical" decorative className="h-6 my-auto self-center" />
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              disabled={disabled}
-              aria-label="Remove math"
-              title="Remove"
-              onClick={removeMath}
-            >
-              <TrashIcon className="tiptap-button-icon" />
-            </Button>
-          </>
-        ) : null}
       </div>
     </div>
   )

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

@@ -49,7 +49,6 @@ export function MathPopoverButton({
       <PopoverContent align="start" className="w-auto gap-0 p-0">
         <MathEditorControls
           disabled={disabled || !canInsert}
-          layout="popover"
           onApply={applyMath}
           onComplete={() => setIsOpen(false)}
         />

package/dist/assets/shared-assets/react-admin/custom/content-editor/mobile-toolbar-content.tsx

@@ -27,13 +27,13 @@ export function MobileToolbarContent({
           aria-label="Back to formatting toolbar"
           title="Back"
         >
-          <ArrowLeftIcon className="tiptap-button-icon" />
+          <ArrowLeftIcon />
           {type === 'highlighter' ? (
-            <HighlighterIcon className="tiptap-button-icon" />
+            <HighlighterIcon />
           ) : type === 'math' ? (
-            <SigmaIcon className="tiptap-button-icon" />
+            <SigmaIcon />
           ) : (
-            <LinkIcon className="tiptap-button-icon" />
+            <LinkIcon />
           )}
         </Button>
       </div>

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

@@ -22,7 +22,7 @@ export function ModeToggleButton({
       onClick={onClick}
       className="min-w-40"
     >
-      <FileCode2 className="tiptap-button-icon" />
+      <FileCode2 />
       <span className="tiptap-button-text">{label}</span>
     </Button>
   )

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-lg',
+            '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

@@ -105,7 +105,6 @@ export function SourceMode({
     isMarkdownLinkActive,
     markdownLinkUrl,
     openMediaGalleryAtCursor,
-    openMarkdownLink,
     redoMarkdownChange,
     removeHighlight,
     removeMarkdownLink,
@@ -140,7 +139,7 @@ export function SourceMode({
               aria-label="Undo"
               title="Undo"
             >
-              <Undo2Icon className="tiptap-button-icon" />
+              <Undo2Icon />
             </Button>
             <Button
               type="button"
@@ -151,7 +150,7 @@ export function SourceMode({
               aria-label="Redo"
               title="Redo"
             >
-              <Redo2Icon className="tiptap-button-icon" />
+              <Redo2Icon />
             </Button>
           </div>
 
@@ -178,7 +177,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 +195,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 +210,7 @@ export function SourceMode({
               aria-label="Blockquote"
               title="Blockquote"
             >
-              <BlockquoteIcon className="tiptap-button-icon" />
+              <BlockquoteIcon />
             </Button>
             <Button
               type="button"
@@ -222,7 +221,7 @@ export function SourceMode({
               aria-label="Code Block"
               title="Code Block"
             >
-              <CodeBlockIcon className="tiptap-button-icon" />
+              <CodeBlockIcon />
             </Button>
             <Button
               type="button"
@@ -233,7 +232,7 @@ export function SourceMode({
               aria-label="Insert divider"
               title="Divider"
             >
-              <Minus className="tiptap-button-icon" />
+              <Minus />
             </Button>
           </div>
 
@@ -281,7 +280,7 @@ export function SourceMode({
                 aria-label={mark.label}
                 title={mark.label}
               >
-                <mark.Icon className="tiptap-button-icon" />
+                <mark.Icon />
               </Button>
             ))}
             <SourceColorHighlightPopover
@@ -296,7 +295,6 @@ export function SourceMode({
               disabled={disabled}
               isActive={isMarkdownLinkActive}
               onOpenChange={handleMarkdownLinkPopoverOpenChange}
-              openLink={openMarkdownLink}
               removeLink={removeMarkdownLink}
               setLink={setMarkdownLink}
               setUrl={setMarkdownLinkUrl}
@@ -322,7 +320,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>
               )
             })}