betterstart-cli 0.0.1

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

@@ -0,0 +1,360 @@
+'use client'
+
+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 { cn } from '@admin/utils/shared/cn'
+import CodeMirror from '@uiw/react-codemirror'
+import {
+  TextQuoteIcon as BlockquoteIcon,
+  BoldIcon,
+  Code2Icon,
+  SquareCodeIcon as CodeBlockIcon,
+  Heading5Icon as HeadingFiveIcon,
+  Heading4Icon as HeadingFourIcon,
+  HeadingIcon,
+  Heading6Icon as HeadingSixIcon,
+  Heading3Icon as HeadingThreeIcon,
+  Heading2Icon as HeadingTwoIcon,
+  ImagePlusIcon,
+  ItalicIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  Minus,
+  Redo2Icon,
+  StrikethroughIcon as StrikeIcon,
+  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'
+import { TableButton } from './table-button'
+
+type SvgIcon = React.ComponentType<{ className?: string }>
+const HEADING_ICONS: Record<MarkdownHeadingLevel, SvgIcon> = {
+  2: HeadingTwoIcon,
+  3: HeadingThreeIcon,
+  4: HeadingFourIcon,
+  5: HeadingFiveIcon,
+  6: HeadingSixIcon
+}
+
+const LIST_ICONS: Record<MarkdownListType, SvgIcon> = {
+  bullet: ListIcon,
+  ordered: ListOrderedIcon,
+  task: ListTodoIcon
+}
+
+export interface SourceModeProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  toolbarEnd?: React.ReactNode
+  selectionRequest?: ContentEditorSelectionRequest | null
+  onSelectionChange?: (offset: number) => void
+}
+
+export function SourceMode({
+  value = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  className,
+  toolbarEnd,
+  selectionRequest,
+  onSelectionChange
+}: SourceModeProps) {
+  const {
+    applyBlockquote,
+    applyBold,
+    applyCode,
+    applyHeading,
+    applyHighlight,
+    applyItalic,
+    applyList,
+    applyStrike,
+    applyUnderline,
+    codeMirrorExtensions,
+    editorRef,
+    editorTheme,
+    handleCreateEditor,
+    handleEditorChange,
+    handleMarkdownLinkPopoverOpenChange,
+    insertCodeBlock,
+    insertDivider,
+    insertMath,
+    insertTable,
+    isMarkdownLinkActive,
+    markdownLinkUrl,
+    openMediaGalleryAtCursor,
+    openMarkdownLink,
+    redoMarkdownChange,
+    removeHighlight,
+    removeMarkdownLink,
+    setMarkdownLink,
+    setMarkdownLinkUrl,
+    undoMarkdownChange
+  } = useContentEditorSourceMode({
+    value,
+    onChange,
+    disabled,
+    selectionRequest,
+    onSelectionChange
+  })
+
+  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',
+        { '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 items-center gap-0.5">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={undoMarkdownChange}
+              disabled={disabled}
+              aria-label="Undo"
+              title="Undo"
+            >
+              <Undo2Icon className="tiptap-button-icon" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={redoMarkdownChange}
+              disabled={disabled}
+              aria-label="Redo"
+              title="Redo"
+            >
+              <Redo2Icon className="tiptap-button-icon" />
+            </Button>
+          </div>
+
+          <Separator
+            orientation="vertical"
+            decorative
+            className="my-auto h-[65%] mx-1 self-center"
+          />
+
+          <div className="flex items-center gap-0.5">
+            <SourceModeDropdownButton
+              label="Heading"
+              ariaLabel="Format text as heading"
+              Icon={HeadingIcon}
+            >
+              {MARKDOWN_HEADING_OPTIONS.map((option) => {
+                const Icon = HEADING_ICONS[option.level]
+
+                return (
+                  <DropdownMenuItem
+                    key={option.level}
+                    disabled={disabled}
+                    aria-label={option.label}
+                    title={option.label}
+                    onSelect={() => applyHeading(option.level)}
+                  >
+                    <Icon className="tiptap-button-icon" />
+                    <span className="tiptap-button-text">{option.label}</span>
+                  </DropdownMenuItem>
+                )
+              })}
+            </SourceModeDropdownButton>
+            <SourceModeDropdownButton label="List" ariaLabel="List options" Icon={ListIcon}>
+              {MARKDOWN_LIST_OPTIONS.map((option) => {
+                const Icon = LIST_ICONS[option.type]
+
+                return (
+                  <DropdownMenuItem
+                    key={option.type}
+                    disabled={disabled}
+                    aria-label={option.label}
+                    title={option.label}
+                    onSelect={() => applyList(option.type)}
+                  >
+                    <Icon className="tiptap-button-icon" />
+                    <span className="tiptap-button-text">{option.label}</span>
+                  </DropdownMenuItem>
+                )
+              })}
+            </SourceModeDropdownButton>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={applyBlockquote}
+              disabled={disabled}
+              aria-label="Blockquote"
+              title="Blockquote"
+            >
+              <BlockquoteIcon className="tiptap-button-icon" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={insertCodeBlock}
+              disabled={disabled}
+              aria-label="Code Block"
+              title="Code Block"
+            >
+              <CodeBlockIcon className="tiptap-button-icon" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={insertDivider}
+              disabled={disabled}
+              aria-label="Insert divider"
+              title="Divider"
+            >
+              <Minus className="tiptap-button-icon" />
+            </Button>
+          </div>
+
+          <Separator
+            orientation="vertical"
+            decorative
+            className="my-auto h-[65%] mx-1 self-center"
+          />
+
+          <div className="flex items-center gap-0.5">
+            {[
+              {
+                label: 'Bold',
+                Icon: BoldIcon,
+                onClick: applyBold
+              },
+              {
+                label: 'Italic',
+                Icon: ItalicIcon,
+                onClick: applyItalic
+              },
+              {
+                label: 'Strike',
+                Icon: StrikeIcon,
+                onClick: applyStrike
+              },
+              {
+                label: 'Code',
+                Icon: Code2Icon,
+                onClick: applyCode
+              },
+              {
+                label: 'Underline',
+                Icon: UnderlineIcon,
+                onClick: applyUnderline
+              }
+            ].map((mark) => (
+              <Button
+                key={mark.label}
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                onClick={mark.onClick}
+                disabled={disabled}
+                aria-label={mark.label}
+                title={mark.label}
+              >
+                <mark.Icon className="tiptap-button-icon" />
+              </Button>
+            ))}
+            <SourceColorHighlightPopover
+              disabled={disabled}
+              onHighlightColorSelect={(color) =>
+                applyHighlight(getContentEditorHighlightColorName(color.value))
+              }
+              onRemoveHighlight={removeHighlight}
+            />
+            <LinkControlPopover
+              canSet={!disabled}
+              disabled={disabled}
+              isActive={isMarkdownLinkActive}
+              onOpenChange={handleMarkdownLinkPopoverOpenChange}
+              openLink={openMarkdownLink}
+              removeLink={removeMarkdownLink}
+              setLink={setMarkdownLink}
+              setUrl={setMarkdownLinkUrl}
+              url={markdownLinkUrl}
+            />
+          </div>
+
+          <Separator
+            orientation="vertical"
+            decorative
+            className="my-auto h-[65%] mx-1 self-center"
+          />
+
+          <div className="flex items-center">
+            <TableButton disabled={disabled} onInsertTable={insertTable} />
+            <MathPopoverButton disabled={disabled} onInsertMath={insertMath} />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={openMediaGalleryAtCursor}
+              disabled={disabled}
+              aria-label="Add media"
+              title="Add media"
+            >
+              <ImagePlusIcon className="tiptap-button-icon" />
+              <span className="tiptap-button-text">Media</span>
+            </Button>
+          </div>
+        </div>
+
+        {toolbarEnd ? <div className="flex shrink-0 items-center gap-0.5">{toolbarEnd}</div> : null}
+      </EditorToolbar>
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <CodeMirror
+          ref={editorRef}
+          value={value}
+          onChange={handleEditorChange}
+          onCreateEditor={handleCreateEditor}
+          placeholder={placeholder}
+          extensions={codeMirrorExtensions}
+          theme={editorTheme}
+          editable={!disabled}
+          basicSetup={{
+            lineNumbers: true,
+            foldGutter: true,
+            highlightActiveLine: false,
+            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-background [&_.cm-gutters]:!bg-background [&_.cm-scroller]:!bg-background',
+            {
+              'opacity-50 cursor-not-allowed': disabled
+            }
+          )}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,46 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import type { ContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
+import { PlusIcon } from 'lucide-react'
+import { createPortal } from 'react-dom'
+
+interface TableAddControlsProps {
+  controls: ContentEditorTableAddControls | null
+}
+
+export function TableAddControls({ controls }: TableAddControlsProps) {
+  if (!controls) return null
+
+  return createPortal(
+    <div className="contents not-prose" 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"
+        onClick={controls.addColumn}
+        onPointerDown={(event) => event.preventDefault()}
+        title="Add table column"
+        type="button"
+        variant="outline"
+      >
+        <span className="pointer-events-none inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-input text-foreground transition-colors group-hover:bg-secondary group-focus-visible:bg-secondary">
+          <PlusIcon aria-hidden="true" data-icon="inline-start" />
+        </span>
+      </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"
+        onClick={controls.addRow}
+        onPointerDown={(event) => event.preventDefault()}
+        title="Add table row"
+        type="button"
+        variant="outline"
+      >
+        <span className="pointer-events-none inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-input text-foreground transition-colors group-hover:bg-secondary group-focus-visible:bg-secondary">
+          <PlusIcon aria-hidden="true" data-icon="inline-start" />
+        </span>
+      </Button>
+    </div>,
+    controls.wrapper
+  )
+}

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

@@ -0,0 +1,290 @@
+'use client'
+
+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 {
+  clearTablePartPreview,
+  getClosestTableCell,
+  getEditorElement,
+  getEditorScrollElement,
+  getEventTableCell,
+  getMountedEditorView,
+  isSelectedTableVisible,
+  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,
+  AlignLeftIcon,
+  AlignRightIcon,
+  Columns3Icon,
+  Rows3Icon
+} from 'lucide-react'
+import * as React from 'react'
+import { RemoveTablePartIcon } from './remove-table-part-icon'
+
+const ALIGNMENT_CONTROLS: Array<{
+  alignment: ContentEditorTableAlignment
+  Icon: React.ComponentType<{ className?: string }>
+  label: string
+}> = [
+  {
+    alignment: 'left',
+    Icon: AlignLeftIcon,
+    label: 'Align column left'
+  },
+  {
+    alignment: 'center',
+    Icon: AlignCenterIcon,
+    label: 'Align column center'
+  },
+  {
+    alignment: 'right',
+    Icon: AlignRightIcon,
+    label: 'Align column right'
+  }
+]
+
+export function TableBubbleMenu({ editor }: { editor: Editor }) {
+  const { editor: currentEditor } = useTiptapEditor(editor)
+  const tableEditor = currentEditor ?? editor
+  const activeAlignment = getActiveTableColumnAlignment(tableEditor)
+  const [isSelectedTableInView, setIsSelectedTableInView] = React.useState(false)
+  const [isTypingInCell, setIsTypingInCell] = React.useState(false)
+  const [, markEditorViewChanged] = React.useReducer((version: number) => version + 1, 0)
+  const isTypingInCellRef = React.useRef(false)
+  const isEditorViewMounted = Boolean(getMountedEditorView(editor))
+
+  const updateIsTypingInCell = React.useCallback((nextValue: boolean) => {
+    if (isTypingInCellRef.current === nextValue) return
+
+    isTypingInCellRef.current = nextValue
+    setIsTypingInCell(nextValue)
+  }, [])
+
+  const updateSelectedTableVisibility = React.useCallback(() => {
+    setIsSelectedTableInView(editor.isActive('table') && isSelectedTableVisible(editor))
+  }, [editor])
+
+  React.useEffect(
+    () => () => {
+      clearTablePartPreview(editor)
+    },
+    [editor]
+  )
+
+  React.useEffect(() => {
+    const handleEditorViewChange = () => markEditorViewChanged()
+
+    editor.on('mount', handleEditorViewChange)
+    editor.on('unmount', handleEditorViewChange)
+    if (getMountedEditorView(editor)) {
+      handleEditorViewChange()
+    }
+
+    return () => {
+      editor.off('mount', handleEditorViewChange)
+      editor.off('unmount', handleEditorViewChange)
+    }
+  }, [editor])
+
+  React.useEffect(() => {
+    if (!isEditorViewMounted) {
+      setIsSelectedTableInView(false)
+      return
+    }
+
+    const scrollElement = getEditorScrollElement(editor)
+    const editorElement = getEditorElement(editor)
+    if (!scrollElement || !editorElement) {
+      setIsSelectedTableInView(false)
+      return
+    }
+
+    const ownerDocument = editorElement.ownerDocument
+
+    scrollElement.addEventListener('scroll', updateSelectedTableVisibility, {
+      passive: true
+    })
+    ownerDocument.addEventListener('scroll', updateSelectedTableVisibility, {
+      capture: true,
+      passive: true
+    })
+    editor.on('selectionUpdate', updateSelectedTableVisibility)
+    editor.on('transaction', updateSelectedTableVisibility)
+    updateSelectedTableVisibility()
+
+    return () => {
+      scrollElement.removeEventListener('scroll', updateSelectedTableVisibility)
+      ownerDocument.removeEventListener('scroll', updateSelectedTableVisibility, true)
+      editor.off('selectionUpdate', updateSelectedTableVisibility)
+      editor.off('transaction', updateSelectedTableVisibility)
+    }
+  }, [editor, isEditorViewMounted, updateSelectedTableVisibility])
+
+  React.useEffect(() => {
+    if (!isEditorViewMounted) {
+      updateIsTypingInCell(false)
+      return
+    }
+
+    const editorElement = getEditorElement(editor)
+    if (!editorElement) {
+      updateIsTypingInCell(false)
+      return
+    }
+
+    const suppressForCellInput = (event: Event) => {
+      const cell = getEventTableCell(editor, event.target)
+      if (!cell || !editorElement.contains(cell)) return
+
+      clearTablePartPreview(editor)
+      updateIsTypingInCell(true)
+    }
+
+    const showForCellClick = (event: Event) => {
+      const cell = getClosestTableCell(event.target)
+      if (!cell || !editorElement.contains(cell)) return
+
+      updateIsTypingInCell(false)
+    }
+
+    editorElement.addEventListener('beforeinput', suppressForCellInput)
+    editorElement.addEventListener('click', showForCellClick)
+    editorElement.addEventListener('compositionstart', suppressForCellInput)
+    editorElement.addEventListener('drop', suppressForCellInput)
+    editorElement.addEventListener('input', suppressForCellInput)
+    editorElement.addEventListener('mousedown', showForCellClick)
+    editorElement.addEventListener('paste', suppressForCellInput)
+    editorElement.addEventListener('pointerdown', showForCellClick)
+
+    return () => {
+      editorElement.removeEventListener('beforeinput', suppressForCellInput)
+      editorElement.removeEventListener('click', showForCellClick)
+      editorElement.removeEventListener('compositionstart', suppressForCellInput)
+      editorElement.removeEventListener('drop', suppressForCellInput)
+      editorElement.removeEventListener('input', suppressForCellInput)
+      editorElement.removeEventListener('mousedown', showForCellClick)
+      editorElement.removeEventListener('paste', suppressForCellInput)
+      editorElement.removeEventListener('pointerdown', showForCellClick)
+    }
+  }, [editor, isEditorViewMounted, updateIsTypingInCell])
+
+  return (
+    isEditorViewMounted &&
+    isSelectedTableInView && (
+      <BubbleMenu
+        editor={editor}
+        pluginKey="tableBubbleMenu"
+        updateDelay={0}
+        shouldShow={({ editor: nextEditor }) =>
+          nextEditor.isEditable &&
+          nextEditor.isFocused &&
+          nextEditor.isActive('table') &&
+          !isTypingInCell
+        }
+        options={{
+          flip: { padding: 8 },
+          offset: 8,
+          placement: 'top',
+          shift: { padding: 8 }
+        }}
+      >
+        <div
+          role="toolbar"
+          aria-label="Table 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">
+            {ALIGNMENT_CONTROLS.map(({ alignment, Icon, label }) => {
+              const isActive = activeAlignment === alignment
+
+              return (
+                <Button
+                  key={alignment}
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={label}
+                  aria-pressed={isActive}
+                  className={cn({
+                    'bg-accent text-accent-foreground': isActive
+                  })}
+                  onPointerDown={(event) => event.preventDefault()}
+                  onClick={() => {
+                    setActiveTableColumnAlignment(tableEditor, alignment)
+                  }}
+                  title={label}
+                >
+                  <Icon className="tiptap-button-icon" />
+                </Button>
+              )
+            })}
+          </div>
+          <Separator
+            orientation="vertical"
+            decorative
+            className="my-auto h-5 w-px mx-1 self-center bg-border opacity-100"
+          />
+          <div className="flex items-center gap-0.5">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Remove table row"
+              onBlur={() => clearTablePartPreview(tableEditor)}
+              onFocus={() => showTablePartPreview(tableEditor, 'row')}
+              onMouseEnter={() => showTablePartPreview(tableEditor, 'row')}
+              onMouseLeave={() => clearTablePartPreview(tableEditor)}
+              onMouseMove={() => showTablePartPreview(tableEditor, 'row')}
+              onPointerDown={(event) => event.preventDefault()}
+              onPointerEnter={() => showTablePartPreview(tableEditor, 'row')}
+              onPointerLeave={() => clearTablePartPreview(tableEditor)}
+              onPointerMove={() => showTablePartPreview(tableEditor, 'row')}
+              onClick={() => {
+                clearTablePartPreview(tableEditor)
+                tableEditor.chain().focus().deleteRow().run()
+              }}
+              title="Remove Row"
+            >
+              <RemoveTablePartIcon Icon={Rows3Icon} />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Remove table column"
+              onBlur={() => clearTablePartPreview(tableEditor)}
+              onFocus={() => showTablePartPreview(tableEditor, 'column')}
+              onMouseEnter={() => showTablePartPreview(tableEditor, 'column')}
+              onMouseLeave={() => clearTablePartPreview(tableEditor)}
+              onMouseMove={() => showTablePartPreview(tableEditor, 'column')}
+              onPointerDown={(event) => event.preventDefault()}
+              onPointerEnter={() => showTablePartPreview(tableEditor, 'column')}
+              onPointerLeave={() => clearTablePartPreview(tableEditor)}
+              onPointerMove={() => showTablePartPreview(tableEditor, 'column')}
+              onClick={() => {
+                clearTablePartPreview(tableEditor)
+                tableEditor.chain().focus().deleteColumn().run()
+              }}
+              title="Remove Column"
+            >
+              <RemoveTablePartIcon Icon={Columns3Icon} />
+            </Button>
+          </div>
+        </div>
+      </BubbleMenu>
+    )
+  )
+}