betterstart-cli 0.0.1

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

@@ -0,0 +1,59 @@
+'use client'
+
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import { insertContentEditorMath } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/core'
+import * as React from 'react'
+import { MathButton, type MathButtonProps } from './math-button'
+import { MathEditorControls } from './math-editor-controls'
+
+export interface MathPopoverButtonProps extends Omit<MathButtonProps, 'onClick'> {
+  editor?: Editor | null
+  onInsertMath?: (value: string) => boolean | undefined
+}
+
+export function MathPopoverButton({
+  disabled,
+  editor: providedEditor,
+  onInsertMath,
+  text = 'Math',
+  ...buttonProps
+}: MathPopoverButtonProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const canInsert = Boolean(onInsertMath || editor?.isEditable)
+
+  const applyMath = React.useCallback(
+    (value: string) => {
+      if (disabled || !canInsert) return false
+
+      return onInsertMath ? onInsertMath(value) : insertContentEditorMath(editor, value)
+    },
+    [canInsert, disabled, editor, onInsertMath]
+  )
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <MathButton
+          {...buttonProps}
+          text={text}
+          disabled={disabled || !canInsert}
+          aria-label="Insert math"
+          title="Math"
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={() => setIsOpen((current) => !current)}
+        />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto gap-0 p-0">
+        <MathEditorControls
+          disabled={disabled || !canInsert}
+          layout="popover"
+          onApply={applyMath}
+          onComplete={() => setIsOpen(false)}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,6 @@
+'use client'
+
+export * from './math-bubble-menu'
+export * from './math-button'
+export * from './math-editor-controls'
+export * from './math-popover-button'

package/dist/assets/shared-assets/react-admin/custom/content-editor/media-gallery-block.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { MediaGalleryField } from '@admin/components/custom/media-gallery-field'
+
+export interface ContentEditorMediaGalleryBlockProps {
+  accept?: string
+  disabled?: boolean
+  onMediaSelected: (url: string) => void
+  onRemove: () => void
+}
+
+export function ContentEditorMediaGalleryBlock({
+  accept = 'image/*',
+  disabled = false,
+  onMediaSelected,
+  onRemove
+}: ContentEditorMediaGalleryBlockProps) {
+  return (
+    <MediaGalleryField
+      value=""
+      onChange={(url) => {
+        if (url) onMediaSelected(url)
+      }}
+      onRemove={onRemove}
+      disabled={disabled}
+      accept={accept}
+      isRemovable
+      valueMode="url"
+    />
+  )
+}

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

@@ -0,0 +1,56 @@
+import { ColorHighlightPopoverContent } from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
+import { LinkContent } from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
+import { Button } from '@admin/components/ui/button'
+import { Separator } from '@admin/components/ui/separator'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import { insertContentEditorMath } from '@admin/utils/editor/tiptap'
+import { ArrowLeftIcon, HighlighterIcon, LinkIcon, SigmaIcon } from 'lucide-react'
+import { MathEditorControls } from './math-popover'
+
+export function MobileToolbarContent({
+  type,
+  onBack
+}: {
+  type: 'highlighter' | 'link' | 'math'
+  onBack: () => void
+}) {
+  const { editor } = useTiptapEditor()
+
+  return (
+    <>
+      <div className="flex items-center gap-0.5">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          onClick={onBack}
+          aria-label="Back to formatting toolbar"
+          title="Back"
+        >
+          <ArrowLeftIcon className="tiptap-button-icon" />
+          {type === 'highlighter' ? (
+            <HighlighterIcon className="tiptap-button-icon" />
+          ) : type === 'math' ? (
+            <SigmaIcon className="tiptap-button-icon" />
+          ) : (
+            <LinkIcon className="tiptap-button-icon" />
+          )}
+        </Button>
+      </div>
+
+      <Separator orientation="vertical" decorative className="my-auto h-[65%] mx-1 self-center" />
+
+      {type === 'highlighter' ? (
+        <ColorHighlightPopoverContent />
+      ) : type === 'math' ? (
+        <MathEditorControls
+          disabled={!editor?.isEditable}
+          onApply={(value) => insertContentEditorMath(editor, value)}
+          onComplete={onBack}
+        />
+      ) : (
+        <LinkContent />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Button } from '@admin/components/ui/button'
+import { FileCode2 } from 'lucide-react'
+
+export function ModeToggleButton({
+  isSourceMode,
+  onClick
+}: {
+  isSourceMode: boolean
+  onClick: () => void
+}) {
+  const label = isSourceMode ? 'Show Rich Text' : 'Show Markdown'
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      data-active-state={isSourceMode ? 'on' : 'off'}
+      aria-pressed={isSourceMode}
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className="min-w-40"
+    >
+      <FileCode2 className="tiptap-button-icon" />
+      <span className="tiptap-button-text">{label}</span>
+    </Button>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/remove-table-part-icon.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { MinusIcon } from 'lucide-react'
+import type * as React from 'react'
+
+export function RemoveTablePartIcon({
+  Icon
+}: {
+  Icon: React.ComponentType<{ className?: string }>
+}) {
+  return (
+    <span className="tiptap-button-icon relative inline-flex size-4 items-center justify-center">
+      <Icon className="size-4" />
+      <MinusIcon className="-right-1 -bottom-0.5 border border-border absolute size-3 rounded-full bg-card stroke-3" />
+    </span>
+  )
+}

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

@@ -0,0 +1,105 @@
+import { ColorHighlightPopover } from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
+import { HeadingDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/heading-dropdown-menu'
+import {
+  LinkContent,
+  LinkPopover
+} from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
+import { ListDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/list-dropdown-menu'
+import { MarkButton } from '@admin/components/custom/content-editor/tiptap-ui/mark-button'
+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'
+
+const HIDDEN_SELECTION_TOOLBAR_TYPES = [
+  'mediaGalleryPlaceholder',
+  'image',
+  'horizontalRule',
+  'codeBlock',
+  'code',
+  'inlineMath',
+  'rawContentBlock',
+  'link',
+  'table',
+  'tableCell',
+  'tableHeader'
+] as const
+
+export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
+  return (
+    <>
+      <BubbleMenu
+        editor={editor}
+        pluginKey="linkBubbleMenu"
+        updateDelay={0}
+        shouldShow={({ editor: currentEditor }) =>
+          currentEditor.isEditable && currentEditor.isActive('link')
+        }
+        options={{
+          placement: 'top',
+          offset: 8,
+          flip: { padding: 8 },
+          shift: { padding: 8 }
+        }}
+      >
+        <div
+          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'
+          )}
+        >
+          <LinkContent editor={editor} />
+        </div>
+      </BubbleMenu>
+
+      <BubbleMenu
+        editor={editor}
+        pluginKey="selectionBubbleMenu"
+        updateDelay={0}
+        shouldShow={({ editor: currentEditor, from, to }) =>
+          currentEditor.isEditable &&
+          from !== to &&
+          HIDDEN_SELECTION_TOOLBAR_TYPES.every((type) => !currentEditor.isActive(type))
+        }
+        options={{
+          placement: 'top',
+          offset: 8,
+          flip: { padding: 8 },
+          shift: { padding: 8 }
+        }}
+      >
+        <div
+          role="toolbar"
+          aria-label="Selection 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'
+          )}
+        >
+          <div className="flex items-center gap-0.5">
+            <HeadingDropdownMenu editor={editor} />
+            <ListDropdownMenu editor={editor} types={['bulletList', 'orderedList', 'taskList']} />
+          </div>
+
+          <Separator
+            orientation="vertical"
+            decorative
+            className="my-auto h-[65%] mx-1 self-center"
+          />
+
+          <div className="flex items-center gap-0.5">
+            <MarkButton editor={editor} type="bold" />
+            <MarkButton editor={editor} type="italic" />
+            <MarkButton editor={editor} type="strike" />
+            <MarkButton editor={editor} type="code" />
+            <MarkButton editor={editor} type="underline" />
+            <ColorHighlightPopover editor={editor} />
+            <LinkPopover editor={editor} />
+          </div>
+        </div>
+      </BubbleMenu>
+    </>
+  )
+}

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

@@ -0,0 +1,65 @@
+import type { ContentEditorSlashCommand } from '@admin/utils/editor/slash-commands'
+import { getSlashMenuStyle, type SlashMenuState } from '@admin/utils/editor/tiptap'
+import { cn } from '@admin/utils/shared/cn'
+
+export function SlashCommandMenu({
+  activeIndex,
+  commands,
+  onActiveIndexChange,
+  onCommandSelect,
+  slashMenu
+}: {
+  activeIndex: number
+  commands: ContentEditorSlashCommand[]
+  onActiveIndexChange: (index: number) => void
+  onCommandSelect: (command: ContentEditorSlashCommand) => void
+  slashMenu: SlashMenuState | null
+}) {
+  if (!slashMenu) return null
+
+  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)}
+    >
+      {commands.length > 0 ? (
+        <div className="max-h-80 overflow-y-auto">
+          {commands.map((command, index) => {
+            const Icon = command.Icon
+            const isActive = index === activeIndex
+
+            return (
+              <button
+                key={command.id}
+                type="button"
+                className={cn(
+                  'flex w-full items-start gap-3 rounded-sm px-2.5 py-2 text-left text-sm outline-none transition-colors',
+                  {
+                    'bg-accent text-accent-foreground': isActive,
+                    'text-popover-foreground hover:bg-accent hover:text-accent-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>
+                <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">
+                    {command.description}
+                  </span>
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      ) : (
+        <div className="px-3 py-6 text-center text-sm text-muted-foreground">No commands found</div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import { ChevronDownIcon } from 'lucide-react'
+import * as React from 'react'
+
+type SvgIcon = React.ComponentType<{ className?: string }>
+
+export interface SourceModeDropdownButtonProps {
+  label: string
+  ariaLabel?: string
+  Icon: SvgIcon
+  children: React.ReactNode
+}
+
+export function SourceModeDropdownButton({
+  label,
+  ariaLabel,
+  Icon,
+  children
+}: SourceModeDropdownButtonProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="w-auto px-2"
+          aria-label={ariaLabel ?? label}
+          title={label}
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={() => setIsOpen((current) => !current)}
+        >
+          <Icon className="tiptap-button-icon" />
+          <ChevronDownIcon className="tiptap-button-dropdown-small" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-auto min-w-40">
+        <DropdownMenuGroup>{children}</DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}