betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-source-mode.tsx

@@ -0,0 +1,638 @@
+'use client'
+
+import { MediaGalleryField } from '@admin/components/custom/media-gallery-field'
+import { useTheme } from '@admin/hooks/use-admin-theme'
+import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor'
+import {
+  applyCursorChange,
+  applyCursorChangeIfAvailable,
+  createMarkdownTableText,
+  findMarkdownLinkRange,
+  formatMarkdownBlockquoteLine,
+  formatMarkdownHeadingLine,
+  formatMarkdownListLine,
+  getMarkdownHeadingFallback,
+  getMarkdownListFallback,
+  insertComponentAtCursor,
+  insertMarkdownTextAtPosition,
+  insertTextAtCursor,
+  type MarkdownHeadingLevel,
+  type MarkdownListType,
+  parseContentEditorMathInput,
+  removeHighlightSpanAtCursor,
+  removeMarkdownLinkAtCursor,
+  setMarkdownLinkAtCursor,
+  transformSelectedMarkdownLines
+} from '@admin/utils/editor/markdown'
+import { createMarkdownTextFromUrl } from '@admin/utils/editor/source-media'
+import { sanitizeUrl } from '@admin/utils/editor/tiptap'
+import { redo, undo } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
+import { Decoration, EditorView, type ViewUpdate, WidgetType } from '@codemirror/view'
+import { type QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query'
+import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
+import type { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import * as React from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+
+const ADMIN_MONO_FONT_FAMILY = 'var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace'
+
+type MarkdownMediaGalleryWidgetProps = {
+  widgetId: number
+  disabled: boolean
+  queryClient: QueryClient
+  onChange: (url: string) => void
+  onRemove: () => void
+}
+
+const markdownMediaGalleryRoots = new WeakMap<HTMLElement, Root>()
+
+class MarkdownMediaGalleryWidget extends WidgetType {
+  constructor(private readonly props: MarkdownMediaGalleryWidgetProps) {
+    super()
+  }
+
+  eq(other: WidgetType) {
+    if (!(other instanceof MarkdownMediaGalleryWidget)) return false
+
+    return (
+      this.props.widgetId === other.props.widgetId &&
+      this.props.disabled === other.props.disabled &&
+      this.props.queryClient === other.props.queryClient &&
+      this.props.onChange === other.props.onChange &&
+      this.props.onRemove === other.props.onRemove
+    )
+  }
+
+  toDOM() {
+    const container = document.createElement('div')
+    container.className = 'cm-markdown-media-gallery'
+    const root = createRoot(container)
+    markdownMediaGalleryRoots.set(container, root)
+    root.render(
+      <QueryClientProvider client={this.props.queryClient}>
+        <NuqsAdapter>
+          <MediaGalleryField
+            value=""
+            valueMode="url"
+            accept="image/*"
+            disabled={this.props.disabled}
+            isRemovable
+            onChange={this.props.onChange}
+            onRemove={this.props.onRemove}
+          />
+        </NuqsAdapter>
+      </QueryClientProvider>
+    )
+    return container
+  }
+
+  updateDOM(container: HTMLElement) {
+    const root = markdownMediaGalleryRoots.get(container)
+    if (!root) return false
+
+    root.render(
+      <QueryClientProvider client={this.props.queryClient}>
+        <NuqsAdapter>
+          <MediaGalleryField
+            value=""
+            valueMode="url"
+            accept="image/*"
+            disabled={this.props.disabled}
+            isRemovable
+            onChange={this.props.onChange}
+            onRemove={this.props.onRemove}
+          />
+        </NuqsAdapter>
+      </QueryClientProvider>
+    )
+    return true
+  }
+
+  destroy(container: HTMLElement) {
+    const root = markdownMediaGalleryRoots.get(container)
+    markdownMediaGalleryRoots.delete(container)
+    if (root) {
+      queueMicrotask(() => root.unmount())
+    }
+  }
+
+  ignoreEvent() {
+    return false
+  }
+}
+
+export interface UseContentEditorSourceModeOptions {
+  value: string
+  onChange?: (value: string) => void
+  disabled: boolean
+  selectionRequest?: ContentEditorSelectionRequest | null
+  onSelectionChange?: (offset: number) => void
+}
+
+export function useContentEditorSourceMode({
+  value,
+  onChange,
+  disabled,
+  selectionRequest,
+  onSelectionChange
+}: UseContentEditorSourceModeOptions) {
+  const editorRef = React.useRef<ReactCodeMirrorRef>(null)
+  const queryClient = useQueryClient()
+  const mediaGalleryAnchorRef = React.useRef<number | null>(null)
+  const [mediaGalleryAnchor, setMediaGalleryAnchor] = React.useState<{
+    id: number
+    pos: number
+  } | null>(null)
+  const [markdownLinkUrl, setMarkdownLinkUrl] = React.useState<string | null>(null)
+  const [isMarkdownLinkActive, setIsMarkdownLinkActive] = React.useState(false)
+  const { resolvedTheme } = useTheme()
+  const editorTheme = React.useMemo(
+    () =>
+      resolvedTheme === 'dark'
+        ? githubDarkInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } })
+        : githubLightInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } }),
+    [resolvedTheme]
+  )
+
+  const valueRef = React.useRef(value)
+  valueRef.current = value
+  const onChangeRef = React.useRef(onChange)
+  onChangeRef.current = onChange
+
+  const handleMediaSelected = React.useCallback(
+    (url: string) => {
+      if (disabled || !url) return
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = view?.state.doc.toString() ?? valueRef.current ?? ''
+      const markdownImages = createMarkdownTextFromUrl(url)
+      const requestedPos =
+        mediaGalleryAnchorRef.current ?? view?.state.selection.main.from ?? currentValue.length
+      const { newValue, newCursorPos } = insertMarkdownTextAtPosition(
+        currentValue,
+        markdownImages,
+        requestedPos
+      )
+
+      if (view) {
+        view.dispatch({
+          changes: {
+            from: newCursorPos - markdownImages.length,
+            insert: markdownImages
+          },
+          selection: { anchor: newCursorPos }
+        })
+      }
+
+      onChangeRef.current?.(newValue)
+      mediaGalleryAnchorRef.current = null
+      setMediaGalleryAnchor(null)
+      if (view) {
+        applyCursorChange(view, newCursorPos)
+      }
+    },
+    [disabled]
+  )
+
+  const handleMediaGalleryRemove = React.useCallback(() => {
+    const view = editorRef.current?.view ?? null
+    const cursorPos = mediaGalleryAnchorRef.current ?? view?.state.selection.main.from ?? 0
+
+    mediaGalleryAnchorRef.current = null
+    setMediaGalleryAnchor(null)
+    if (view) {
+      applyCursorChange(view, cursorPos)
+    }
+  }, [])
+
+  const getCurrentMarkdownLink = React.useCallback(() => {
+    const view = editorRef.current?.view ?? null
+    if (!view) return null
+
+    const markdown = view.state.doc.toString()
+    const { from, to } = view.state.selection.main
+
+    return findMarkdownLinkRange(markdown, from, to)
+  }, [])
+
+  const syncMarkdownLinkState = React.useCallback((view: EditorView | null) => {
+    if (!view) {
+      setIsMarkdownLinkActive(false)
+      return
+    }
+
+    const markdown = view.state.doc.toString()
+    const { from, to } = view.state.selection.main
+    const activeLink = findMarkdownLinkRange(markdown, from, to)
+
+    setIsMarkdownLinkActive(Boolean(activeLink))
+    if (activeLink) {
+      setMarkdownLinkUrl(activeLink.url)
+    }
+  }, [])
+
+  const undoMarkdownChange = React.useCallback(() => {
+    const view = editorRef.current?.view
+    if (view) undo(view)
+  }, [])
+
+  const redoMarkdownChange = React.useCallback(() => {
+    const view = editorRef.current?.view
+    if (view) redo(view)
+  }, [])
+
+  const focusSourceSelection = React.useCallback(
+    (view: EditorView, offset: number) => {
+      const selectionOffset = Math.max(0, Math.min(offset, view.state.doc.length))
+
+      view.focus()
+      view.dispatch({
+        selection: { anchor: selectionOffset },
+        effects: EditorView.scrollIntoView(selectionOffset, {
+          y: 'center',
+          yMargin: 48
+        })
+      })
+      onSelectionChange?.(selectionOffset)
+    },
+    [onSelectionChange]
+  )
+
+  const handleCreateEditor = React.useCallback(
+    (view: EditorView) => {
+      if (!selectionRequest) return
+      focusSourceSelection(view, selectionRequest.offset)
+    },
+    [focusSourceSelection, selectionRequest]
+  )
+
+  React.useEffect(() => {
+    const view = editorRef.current?.view
+    if (!view || !selectionRequest) return
+    focusSourceSelection(view, selectionRequest.offset)
+  }, [focusSourceSelection, selectionRequest])
+
+  const openMediaGalleryAtCursor = React.useCallback(() => {
+    if (disabled) return
+
+    const view = editorRef.current?.view ?? null
+    const pos = view?.state.selection.main.from ?? (value || '').length
+    mediaGalleryAnchorRef.current = pos
+    setMediaGalleryAnchor((current) => ({
+      id: (current?.id ?? 0) + 1,
+      pos
+    }))
+  }, [disabled, value])
+
+  const handleMarkdownLinkPopoverOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen) return
+
+      const activeLink = getCurrentMarkdownLink()
+      setMarkdownLinkUrl(activeLink?.url ?? '')
+      setIsMarkdownLinkActive(Boolean(activeLink))
+    },
+    [getCurrentMarkdownLink]
+  )
+
+  const handleEditorChange = React.useCallback(
+    (nextValue: string, viewUpdate: ViewUpdate) => {
+      const anchor = mediaGalleryAnchorRef.current
+
+      if (anchor !== null && viewUpdate.docChanged) {
+        const mappedAnchor = viewUpdate.changes.mapPos(anchor)
+        mediaGalleryAnchorRef.current = mappedAnchor
+        setMediaGalleryAnchor((current) => (current ? { ...current, pos: mappedAnchor } : current))
+      }
+
+      onSelectionChange?.(viewUpdate.state.selection.main.from)
+      onChange?.(nextValue)
+    },
+    [onChange, onSelectionChange]
+  )
+
+  const handleSelectionUpdate = React.useCallback(
+    (viewUpdate: ViewUpdate) => {
+      if (!viewUpdate.selectionSet) return
+      syncMarkdownLinkState(viewUpdate.view)
+      onSelectionChange?.(viewUpdate.state.selection.main.from)
+    },
+    [onSelectionChange, syncMarkdownLinkState]
+  )
+
+  const mediaGalleryExtensions = React.useMemo(() => {
+    if (!mediaGalleryAnchor) return []
+
+    return [
+      EditorView.decorations.of(
+        Decoration.set([
+          Decoration.widget({
+            widget: new MarkdownMediaGalleryWidget({
+              widgetId: mediaGalleryAnchor.id,
+              disabled,
+              queryClient,
+              onChange: handleMediaSelected,
+              onRemove: handleMediaGalleryRemove
+            }),
+            block: true,
+            side: 1
+          }).range(mediaGalleryAnchor.pos)
+        ])
+      )
+    ]
+  }, [disabled, handleMediaGalleryRemove, handleMediaSelected, mediaGalleryAnchor, queryClient])
+
+  const codeMirrorExtensions = React.useMemo(
+    () => [
+      markdown(),
+      EditorView.lineWrapping,
+      EditorView.updateListener.of(handleSelectionUpdate),
+      EditorView.theme({
+        '&': {
+          backgroundColor: 'var(--background)',
+          color: 'var(--foreground)',
+          display: 'flex',
+          flex: '1',
+          fontFamily: ADMIN_MONO_FONT_FAMILY,
+          fontSize: '0.875rem',
+          fontWeight: '400',
+          lineHeight: '1.6',
+          minHeight: '0',
+          overflow: 'hidden'
+        },
+        '& .cm-content': {
+          backgroundColor: 'transparent',
+          caretColor: 'var(--foreground)',
+          color: 'var(--foreground)',
+          fontFamily: ADMIN_MONO_FONT_FAMILY,
+          minHeight: '100%',
+          padding: '1.5rem'
+        },
+        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground':
+          {
+            background: 'color-mix(in oklab, var(--primary) 20%, transparent) !important'
+          },
+        '& .cm-line': {
+          padding: '0'
+        },
+        '& .cm-placeholder': {
+          color: 'var(--muted-foreground)'
+        },
+        '& .cm-gutters': {
+          backgroundColor: 'var(--background)',
+          borderColor: 'var(--border)',
+          color: 'var(--muted-foreground)',
+          fontFamily: ADMIN_MONO_FONT_FAMILY
+        },
+        '& .cm-scroller': {
+          backgroundColor: 'var(--background)',
+          flex: '1',
+          fontFamily: ADMIN_MONO_FONT_FAMILY,
+          lineHeight: '1.6',
+          minHeight: '0',
+          overflow: 'auto'
+        }
+      }),
+      ...mediaGalleryExtensions
+    ],
+    [handleSelectionUpdate, mediaGalleryExtensions]
+  )
+
+  const insertInline = 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)
+      applyCursorChangeIfAvailable(view, newCursorPos)
+    },
+    [disabled, value, onChange]
+  )
+
+  const insertBlock = React.useCallback(
+    (block: string) => {
+      if (disabled) return
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = value || ''
+      const { newValue, newCursorPos } = insertComponentAtCursor(view, currentValue, block)
+
+      onChange?.(newValue)
+      applyCursorChangeIfAvailable(view, newCursorPos)
+    },
+    [disabled, value, onChange]
+  )
+
+  const insertCodeBlock = React.useCallback(() => {
+    insertInline('```\n', '\n```', 'code')
+  }, [insertInline])
+
+  const insertDivider = React.useCallback(() => {
+    insertBlock('---')
+  }, [insertBlock])
+
+  const insertTable = React.useCallback(
+    ({ cols, rows }: { cols: number; rows: number }) => {
+      if (disabled) return
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = view?.state.doc.toString() ?? valueRef.current ?? ''
+      const table = createMarkdownTableText(rows, cols)
+      const { newValue, newCursorPos } = insertComponentAtCursor(view, currentValue, table)
+
+      onChangeRef.current?.(newValue)
+      applyCursorChangeIfAvailable(view, newCursorPos)
+    },
+    [disabled]
+  )
+
+  const insertMath = React.useCallback(
+    (input: string) => {
+      if (disabled) return false
+
+      const math = parseContentEditorMathInput(input)
+      if (!math) return false
+
+      const view = editorRef.current?.view ?? null
+      const currentValue = view?.state.doc.toString() ?? valueRef.current ?? ''
+      const insertValue = math.kind === 'display' ? `\n${math.markdown}\n` : math.markdown
+
+      if (view) {
+        const { from, to } = view.state.selection.main
+
+        view.dispatch({
+          changes: { from, to, insert: insertValue },
+          selection: { anchor: from + insertValue.length }
+        })
+
+        onChangeRef.current?.(currentValue.slice(0, from) + insertValue + currentValue.slice(to))
+        applyCursorChangeIfAvailable(view, from + insertValue.length)
+        return true
+      }
+
+      onChangeRef.current?.(currentValue + insertValue)
+      return true
+    },
+    [disabled]
+  )
+
+  const applyBold = React.useCallback(() => {
+    insertInline('**', '**', 'bold text')
+  }, [insertInline])
+
+  const applyItalic = React.useCallback(() => {
+    insertInline('_', '_', 'italic text')
+  }, [insertInline])
+
+  const applyStrike = React.useCallback(() => {
+    insertInline('~~', '~~', 'strikethrough')
+  }, [insertInline])
+
+  const applyCode = React.useCallback(() => {
+    insertInline('`', '`', 'code')
+  }, [insertInline])
+
+  const setMarkdownLink = React.useCallback(() => {
+    if (disabled || !markdownLinkUrl) return
+
+    const view = editorRef.current?.view ?? null
+    const currentValue = view?.state.doc.toString() ?? valueRef.current ?? ''
+    const { newValue, newCursorPos } = setMarkdownLinkAtCursor(view, currentValue, markdownLinkUrl)
+
+    onChangeRef.current?.(newValue)
+    setMarkdownLinkUrl('')
+    setIsMarkdownLinkActive(true)
+    applyCursorChangeIfAvailable(view, newCursorPos)
+  }, [disabled, markdownLinkUrl])
+
+  const removeMarkdownLink = React.useCallback(() => {
+    if (disabled) return
+
+    const view = editorRef.current?.view ?? null
+    const currentValue = view?.state.doc.toString() ?? valueRef.current ?? ''
+    const { newValue, newCursorPos } = removeMarkdownLinkAtCursor(view, currentValue)
+
+    onChangeRef.current?.(newValue)
+    setMarkdownLinkUrl('')
+    setIsMarkdownLinkActive(false)
+    applyCursorChangeIfAvailable(view, newCursorPos)
+  }, [disabled])
+
+  const openMarkdownLink = React.useCallback(
+    (target: string = '_blank', features: string = 'noopener,noreferrer') => {
+      const url = markdownLinkUrl || getCurrentMarkdownLink()?.url
+      if (!url) return
+
+      const safeUrl = sanitizeUrl(url, window.location.href)
+      if (safeUrl !== '#') {
+        window.open(safeUrl, target, features)
+      }
+    },
+    [getCurrentMarkdownLink, markdownLinkUrl]
+  )
+
+  const applyUnderline = React.useCallback(() => {
+    insertInline('<u>', '</u>', 'underlined text')
+  }, [insertInline])
+
+  const applyHighlight = React.useCallback(
+    (color: string) => {
+      insertInline(`<span data-highlight-color="${color}">`, '</span>', 'highlighted text')
+    },
+    [insertInline]
+  )
+
+  const removeHighlight = React.useCallback(() => {
+    if (disabled) return
+
+    const view = editorRef.current?.view ?? null
+    const currentValue = value || ''
+    const { newValue, newCursorPos } = removeHighlightSpanAtCursor(view, currentValue)
+
+    onChange?.(newValue)
+    applyCursorChangeIfAvailable(view, newCursorPos)
+  }, [disabled, value, onChange])
+
+  const transformLines = React.useCallback(
+    (transformLine: (line: string, index: number) => string, fallbackLine: string) => {
+      if (disabled) return
+
+      const view = editorRef.current?.view ?? null
+      const { newValue, newCursorPos } = transformSelectedMarkdownLines(
+        view,
+        value || '',
+        transformLine,
+        fallbackLine
+      )
+
+      onChange?.(newValue)
+      applyCursorChangeIfAvailable(view, newCursorPos)
+    },
+    [disabled, value, onChange]
+  )
+
+  const applyHeading = React.useCallback(
+    (level: MarkdownHeadingLevel) => {
+      transformLines(
+        (line) => formatMarkdownHeadingLine(line, level),
+        getMarkdownHeadingFallback(level)
+      )
+    },
+    [transformLines]
+  )
+
+  const applyList = React.useCallback(
+    (type: MarkdownListType) => {
+      transformLines(
+        (line, index) => formatMarkdownListLine(line, index, type),
+        getMarkdownListFallback(type)
+      )
+    },
+    [transformLines]
+  )
+
+  const applyBlockquote = React.useCallback(() => {
+    transformLines(formatMarkdownBlockquoteLine, '> Quote')
+  }, [transformLines])
+
+  return {
+    applyBlockquote,
+    applyBold,
+    applyCode,
+    applyHeading,
+    applyItalic,
+    applyList,
+    applyHighlight,
+    applyStrike,
+    applyUnderline,
+    codeMirrorExtensions,
+    editorRef,
+    editorTheme,
+    handleCreateEditor,
+    handleEditorChange,
+    handleMarkdownLinkPopoverOpenChange,
+    isMarkdownLinkActive,
+    insertCodeBlock,
+    insertDivider,
+    insertMath,
+    insertTable,
+    markdownLinkUrl: markdownLinkUrl || '',
+    openMediaGalleryAtCursor,
+    openMarkdownLink,
+    redoMarkdownChange,
+    removeHighlight,
+    removeMarkdownLink,
+    setMarkdownLink,
+    setMarkdownLinkUrl,
+    undoMarkdownChange
+  }
+}