@betterstart/cli 0.1.2 → 0.1.4

package/templates/ui/markdown-editor.tsx

@@ -0,0 +1,303 @@
+'use client'
+
+import { useTheme } from '@cms/hooks/use-cms-theme'
+import { useEditorImageUpload } from '@cms/hooks/use-editor-image-upload'
+import type { MarkdownEditorProps } from '@cms/types'
+import { cn } from '@cms/utils/cn'
+import { markdown } from '@codemirror/lang-markdown'
+import { EditorView } from '@codemirror/view'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { ChevronDown, Loader2, WandSparkles } from 'lucide-react'
+import * as React from 'react'
+import { Button } from './button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './dropdown-menu'
+import {
+  applyCursorChange,
+  formatMarkdown,
+  insertComponentAtCursor,
+  insertTextAtCursor,
+  toolbarButtons
+} from './markdown-utils'
+
+export function MarkdownEditor({
+  componentSnippets,
+  value = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  className
+}: MarkdownEditorProps) {
+  const editorRef = React.useRef<ReactCodeMirrorRef>(null)
+  const { resolvedTheme } = useTheme()
+  const editorTheme = resolvedTheme === 'dark' ? githubDark : githubLight
+
+  // Keep refs so image upload callback can access latest value/onChange
+  const valueRef = React.useRef(value)
+  valueRef.current = value
+  const onChangeRef = React.useRef(onChange)
+  onChangeRef.current = onChange
+
+  const {
+    isUploading,
+    progress,
+    uploadImages,
+    handleDrop,
+    openFilePicker,
+    fileInputRef,
+    handleFileInputChange
+  } = useEditorImageUpload({
+    onImagesUploaded: (images) => {
+      if (disabled) return
+      const view = editorRef.current?.view ?? null
+      const currentValue = valueRef.current || ''
+      let resultValue = currentValue
+      let cursor: number | undefined
+
+      for (const img of images) {
+        const markdownImage = `![${img.filename}](${img.url})`
+        const { newValue, newCursorPos } = insertTextAtCursor(view, resultValue, {
+          before: markdownImage,
+          after: '',
+          placeholder: ''
+        })
+        resultValue = newValue
+        cursor = newCursorPos
+      }
+
+      onChangeRef.current?.(resultValue)
+      if (view && cursor !== undefined) {
+        applyCursorChange(view, cursor)
+      }
+    }
+  })
+
+  // Stable ref so CodeMirror paste extension can access latest uploadImages
+  const pasteUploadRef = React.useRef(uploadImages)
+  pasteUploadRef.current = uploadImages
+
+  const insertText = React.useCallback(
+    (before: string, after: string = '', placeholder: string = '') => {
+      if (disabled) return
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = value || ''
+
+      const { newValue, newCursorPos } = insertTextAtCursor(view, currentValue, {
+        before,
+        after,
+        placeholder
+      })
+
+      onChange?.(newValue)
+
+      if (view) {
+        applyCursorChange(view, newCursorPos)
+      }
+    },
+    [disabled, value, onChange]
+  )
+
+  const insertComponent = React.useCallback(
+    (snippet: string) => {
+      if (disabled) return
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = value || ''
+
+      const { newValue, newCursorPos } = insertComponentAtCursor(view, currentValue, snippet)
+
+      onChange?.(newValue)
+
+      if (view) {
+        applyCursorChange(view, newCursorPos)
+      }
+    },
+    [disabled, value, onChange]
+  )
+
+  const formatContent = React.useCallback(() => {
+    if (disabled) return
+
+    const currentValue = value || ''
+    const formatted = formatMarkdown(currentValue)
+
+    if (formatted !== currentValue) {
+      onChange?.(formatted)
+    }
+  }, [disabled, value, onChange])
+
+  // Paste handler for CodeMirror - intercept image pastes
+  const pasteExtension = React.useMemo(
+    () =>
+      EditorView.domEventHandlers({
+        paste: (event) => {
+          const items = event.clipboardData?.items
+          if (!items) return false
+          const imageFiles: File[] = []
+          for (const item of items) {
+            if (item.type.startsWith('image/')) {
+              const file = item.getAsFile()
+              if (file) imageFiles.push(file)
+            }
+          }
+          if (imageFiles.length > 0) {
+            event.preventDefault()
+            pasteUploadRef.current(imageFiles)
+            return true
+          }
+          return false
+        }
+      }),
+    []
+  )
+
+  const overallProgress =
+    progress.length > 0
+      ? Math.round(progress.reduce((sum, p) => sum + p.progress, 0) / progress.length)
+      : 0
+
+  // Image toolbar button index (the Image button in toolbarButtons)
+  const IMAGE_BUTTON_INDEX = 9
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target
+    <div
+      className={cn(
+        'border rounded-md corner-squircle overflow-hidden flex flex-col resize-y min-h-[200px] max-h-[90vh] relative',
+        className
+      )}
+      onDragOver={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      onDrop={handleDrop}
+    >
+      <div className="flex items-center gap-1 p-2 border-b bg-muted/30 shrink-0">
+        <div className="flex items-center gap-0.5 flex-wrap">
+          {toolbarButtons.map((btn, index) => (
+            <Button
+              key={btn.label}
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={
+                index === IMAGE_BUTTON_INDEX
+                  ? openFilePicker
+                  : () => insertText(btn.before, btn.after, btn.placeholder)
+              }
+              disabled={disabled || (index === IMAGE_BUTTON_INDEX && isUploading)}
+              title={btn.label}
+              className="size-8"
+            >
+              <btn.icon className="size-4" />
+            </Button>
+          ))}
+        </div>
+
+        <div className="h-6 w-px bg-border mx-1" />
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={formatContent}
+          disabled={disabled}
+          title="Format content"
+          className="size-8"
+        >
+          <WandSparkles className="size-4" />
+        </Button>
+
+        <div className="h-6 w-px bg-border mx-1" />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="ghost" size="sm" disabled={disabled} className="gap-1">
+              Components
+              <ChevronDown className="size-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-56 max-h-96 overflow-y-auto">
+            {Object.entries(componentSnippets).map(([category, items]) => (
+              <React.Fragment key={category}>
+                <DropdownMenuLabel>{category}</DropdownMenuLabel>
+                {items.map((component) => (
+                  <DropdownMenuItem
+                    key={component.name}
+                    onClick={() => insertComponent(component.snippet)}
+                  >
+                    {component.name}
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+              </React.Fragment>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col">
+        <CodeMirror
+          ref={editorRef}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          extensions={[
+            markdown(),
+            EditorView.lineWrapping,
+            EditorView.theme({
+              '&': { flex: '1', minHeight: '0', overflow: 'hidden' },
+              '& .cm-scroller': { overflow: 'auto' }
+            }),
+            pasteExtension
+          ]}
+          theme={editorTheme}
+          editable={!disabled}
+          basicSetup={{
+            lineNumbers: true,
+            foldGutter: true,
+            highlightActiveLine: true,
+            highlightActiveLineGutter: true
+          }}
+          className={cn('text-[13px] font-medium flex-1 min-h-0 overflow-hidden flex flex-col', {
+            'opacity-50 cursor-not-allowed': disabled
+          })}
+        />
+      </div>
+
+      {/* Upload progress overlay */}
+      {isUploading && (
+        <div className="absolute inset-0 bg-background/60 flex items-center justify-center z-10">
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="size-6 animate-spin text-primary" />
+            <div className="text-sm text-muted-foreground">Uploading... {overallProgress}%</div>
+            <div className="w-48 h-1.5 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all duration-200"
+                style={{ width: `${overallProgress}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept="image/*"
+        className="hidden"
+        onChange={handleFileInputChange}
+      />
+    </div>
+  )
+}

package/templates/ui/markdown-utils.ts

@@ -0,0 +1,128 @@
+import type { EditorView } from '@codemirror/view'
+import {
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Image,
+  Italic,
+  Link,
+  List,
+  ListOrdered,
+  type LucideIcon,
+  Quote,
+  Strikethrough
+} from 'lucide-react'
+
+export interface ToolbarButton {
+  label: string
+  icon: LucideIcon
+  before: string
+  after: string
+  placeholder: string
+}
+
+export const toolbarButtons: ToolbarButton[] = [
+  { label: 'Bold', icon: Bold, before: '**', after: '**', placeholder: 'bold text' },
+  { label: 'Italic', icon: Italic, before: '_', after: '_', placeholder: 'italic text' },
+  {
+    label: 'Strikethrough',
+    icon: Strikethrough,
+    before: '~~',
+    after: '~~',
+    placeholder: 'strikethrough'
+  },
+  { label: 'Heading 1', icon: Heading1, before: '# ', after: '', placeholder: 'Heading' },
+  { label: 'Heading 2', icon: Heading2, before: '## ', after: '', placeholder: 'Heading' },
+  { label: 'Heading 3', icon: Heading3, before: '### ', after: '', placeholder: 'Heading' },
+  { label: 'Bulleted List', icon: List, before: '- ', after: '', placeholder: 'List item' },
+  { label: 'Numbered List', icon: ListOrdered, before: '1. ', after: '', placeholder: 'List item' },
+  { label: 'Quote', icon: Quote, before: '> ', after: '', placeholder: 'Quote' },
+  { label: 'Image', icon: Image, before: '![', after: '](url)', placeholder: 'alt text' },
+  { label: 'Link', icon: Link, before: '[', after: '](url)', placeholder: 'link text' },
+  { label: 'Code', icon: Code, before: '`', after: '`', placeholder: 'code' }
+]
+
+interface InsertResult {
+  newValue: string
+  newCursorPos: number
+}
+
+export function insertTextAtCursor(
+  view: EditorView | null,
+  currentValue: string,
+  opts: { before: string; after: string; placeholder: string }
+): InsertResult {
+  const { before, after, placeholder } = opts
+
+  if (view) {
+    const { from, to } = view.state.selection.main
+    const selected = view.state.sliceDoc(from, to)
+    const insert = selected || placeholder
+    const newText = `${before}${insert}${after}`
+
+    view.dispatch({
+      changes: { from, to, insert: newText },
+      selection: {
+        anchor: from + before.length,
+        head: from + before.length + insert.length
+      }
+    })
+
+    return {
+      newValue: currentValue.slice(0, from) + newText + currentValue.slice(to),
+      newCursorPos: from + before.length + insert.length
+    }
+  }
+
+  const insert = placeholder
+  const newText = `${before}${insert}${after}`
+  return {
+    newValue: currentValue + newText,
+    newCursorPos: currentValue.length + before.length + insert.length
+  }
+}
+
+export function insertComponentAtCursor(
+  view: EditorView | null,
+  currentValue: string,
+  snippet: string
+): InsertResult {
+  const wrapped = `\n${snippet}\n`
+
+  if (view) {
+    const { from } = view.state.selection.main
+    view.dispatch({
+      changes: { from, insert: wrapped },
+      selection: { anchor: from + wrapped.length }
+    })
+
+    return {
+      newValue: currentValue.slice(0, from) + wrapped + currentValue.slice(from),
+      newCursorPos: from + wrapped.length
+    }
+  }
+
+  return {
+    newValue: currentValue + wrapped,
+    newCursorPos: currentValue.length + wrapped.length
+  }
+}
+
+export function applyCursorChange(view: EditorView, cursorPos: number): void {
+  requestAnimationFrame(() => {
+    view.dispatch({
+      selection: { anchor: Math.min(cursorPos, view.state.doc.length) }
+    })
+    view.focus()
+  })
+}
+
+export function formatMarkdown(content: string): string {
+  return content
+    .replace(/\n{3,}/g, '\n\n') // collapse multiple blank lines
+    .replace(/[ \t]+$/gm, '') // trim trailing whitespace
+    .replace(/^\n+/, '') // trim leading newlines
+    .replace(/\n*$/, '\n') // ensure trailing newline
+}

package/templates/ui/media-upload-field.tsx

@@ -0,0 +1,255 @@
+'use client'
+
+import { useUpload } from '@cms/hooks/use-upload'
+import { cn } from '@cms/utils/cn'
+import { Loader2, Upload, X } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+import { Button } from './button'
+import { Progress } from './progress'
+
+export interface MediaUploadFieldProps {
+  value?: string
+  onChange: (value: string) => void
+  onBlur?: () => void
+  disabled?: boolean
+  accept?: string
+  maxSizeInMB?: number
+  className?: string
+  label?: string
+  description?: string
+}
+
+// Common image and video MIME types
+const IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml']
+const VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo']
+const MEDIA_TYPES = [...IMAGE_TYPES, ...VIDEO_TYPES]
+
+/**
+ * Detect if a URL or file is an image or video based on extension or MIME type
+ */
+function getMediaType(urlOrMime: string): 'image' | 'video' | 'unknown' {
+  const lower = urlOrMime.toLowerCase()
+
+  // Check for video MIME types or extensions
+  if (
+    VIDEO_TYPES.some((type) => lower.includes(type)) ||
+    /\.(mp4|webm|ogg|mov|avi|mkv)($|\?)/.test(lower)
+  ) {
+    return 'video'
+  }
+
+  // Check for image MIME types or extensions
+  if (
+    IMAGE_TYPES.some((type) => lower.includes(type)) ||
+    /\.(jpg|jpeg|png|gif|webp|svg)($|\?)/.test(lower)
+  ) {
+    return 'image'
+  }
+
+  return 'unknown'
+}
+
+/**
+ * Media upload field component with R2 integration
+ * Supports both images and videos
+ * Designed for use in forms with react-hook-form
+ */
+export function MediaUploadField({
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  accept = 'image/*,video/*',
+  maxSizeInMB = 100,
+  className,
+  label,
+  description
+}: MediaUploadFieldProps) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const [previewUrl, setPreviewUrl] = React.useState<string | null>(value || null)
+  const [mediaType, setMediaType] = React.useState<'image' | 'video' | 'unknown'>(
+    value ? getMediaType(value) : 'unknown'
+  )
+
+  const { upload, mutation, progress } = useUpload({
+    validationConfig: {
+      maxSizeInBytes: maxSizeInMB * 1024 * 1024,
+      allowedTypes:
+        accept === 'image/*,video/*' ? MEDIA_TYPES : accept.split(',').map((t) => t.trim()),
+      maxFiles: 1
+    },
+    onSuccess: (result) => {
+      if (result.success && result.files?.[0]) {
+        const uploadedUrl = result.files[0].url
+        onChange(uploadedUrl)
+        setPreviewUrl(uploadedUrl)
+        setMediaType(getMediaType(uploadedUrl))
+        toast.success('Media uploaded successfully')
+      } else {
+        const errorMsg = result.error || 'Upload failed'
+        toast.error(errorMsg)
+        console.error('Upload failed:', errorMsg)
+        setPreviewUrl(value || null)
+        setMediaType(value ? getMediaType(value) : 'unknown')
+      }
+    },
+    onError: (error) => {
+      const errorMsg = error.message || 'Network error during upload'
+      toast.error(errorMsg)
+      console.error('Upload error:', error)
+      setPreviewUrl(value || null)
+      setMediaType(value ? getMediaType(value) : 'unknown')
+    },
+    prefix: 'media'
+  })
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (file.size === 0) {
+      toast.error('Cannot upload empty file')
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+      return
+    }
+
+    try {
+      const localPreview = URL.createObjectURL(file)
+      setPreviewUrl(localPreview)
+      setMediaType(getMediaType(file.type))
+    } catch (error) {
+      console.error('[MediaUploadField] Failed to create preview:', error)
+      toast.error('Failed to preview media')
+      return
+    }
+
+    upload([file])
+  }
+
+  const handleRemove = () => {
+    setPreviewUrl(null)
+    setMediaType('unknown')
+    onChange('')
+    mutation.reset()
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const isUploading = mutation.isPending
+  const uploadProgress = progress[0]?.progress || 0
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {label && (
+        <label htmlFor="media-input" className="text-sm font-medium">
+          {label}
+        </label>
+      )}
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+      <div className="space-y-4">
+        <input
+          id="media-input"
+          ref={fileInputRef}
+          type="file"
+          accept={accept}
+          onChange={handleFileSelect}
+          onBlur={onBlur}
+          disabled={disabled || isUploading}
+          className="hidden"
+        />
+
+        {/* Preview or Upload Area */}
+        {previewUrl ? (
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50 group">
+            {mediaType === 'video' ? (
+              <video
+                src={previewUrl}
+                controls
+                className="w-full h-auto max-h-60 object-contain rounded-lg corner-squircle"
+              >
+                <track kind="captions" />
+              </video>
+            ) : (
+              <img
+                src={previewUrl}
+                alt="Preview"
+                className="w-full h-auto max-h-40 object-contain"
+              />
+            )}
+
+            {/* Upload Progress Overlay */}
+            {isUploading && (
+              <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-2 rounded-lg corner-squircle">
+                <Loader2 className="size-8 text-white animate-spin" />
+                <Progress value={uploadProgress} className="w-3/4" />
+                <span className="text-white text-sm">{uploadProgress}%</span>
+              </div>
+            )}
+
+            {/* Remove Button */}
+            {!isUploading && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon"
+                className="absolute top-2 right-2 hidden group-hover:flex"
+                onClick={handleRemove}
+                disabled={disabled}
+              >
+                <X className="size-4" />
+              </Button>
+            )}
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={handleClick}
+            disabled={disabled || isUploading}
+            className={cn(
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50',
+              'hover:border-primary/50 transition-colors',
+              'flex flex-col items-center justify-center gap-2 p-8',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isUploading ? (
+              <>
+                <Loader2 className="size-10 text-muted-foreground animate-spin" />
+                <Progress value={uploadProgress} className="w-3/4" />
+                <span className="text-sm text-muted-foreground">{uploadProgress}%</span>
+              </>
+            ) : (
+              <>
+                <div className="rounded-full corner-squircle bg-primary/10 p-3">
+                  <Upload className="size-6 text-primary" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">Click to upload image or video</p>
+                  <p className="text-xs text-muted-foreground mt-1">Max size: {maxSizeInMB}MB</p>
+                </div>
+              </>
+            )}
+          </button>
+        )}
+
+        {/* Error Message */}
+        {mutation.isError && (
+          <div className="text-sm text-destructive">Upload failed: {mutation.error.message}</div>
+        )}
+
+        {mutation.data && !mutation.data.success && (
+          <div className="text-sm text-destructive">{mutation.data.error}</div>
+        )}
+      </div>
+    </div>
+  )
+}