betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/utils/editor/markdown.ts

@@ -0,0 +1,542 @@
+import type { EditorView } from '@codemirror/view'
+
+interface InsertResult {
+  newValue: string
+  newCursorPos: number
+}
+
+interface MarkdownLinkRange {
+  start: number
+  end: number
+  text: string
+  url: string
+}
+
+export type ContentEditorMathKind = 'inline' | 'display'
+export type ContentEditorInlineMathDelimiter = '$' | '\\('
+
+export interface ContentEditorMathValue {
+  delimiter?: ContentEditorInlineMathDelimiter
+  kind: ContentEditorMathKind
+  markdown: string
+  raw: string
+}
+
+const HIGHLIGHT_SPAN_PATTERN =
+  /<span\s+data-highlight-color="(?:gray|brown|orange|yellow|green|blue|purple|pink|red)">([\s\S]*?)<\/span>/g
+const MARKDOWN_LINK_PATTERN = /\[([^\]\n]*)\]\(([^)\n]*)\)/g
+const BLOCK_MATH_ENVIRONMENT_NAMES = new Set([
+  'align',
+  'align*',
+  'aligned',
+  'alignedat',
+  'alignedat*',
+  'array',
+  'bmatrix',
+  'cases',
+  'equation',
+  'equation*',
+  'gather',
+  'gather*',
+  'gathered',
+  'matrix',
+  'multline',
+  'multline*',
+  'pmatrix',
+  'smallmatrix',
+  'split',
+  'vmatrix'
+])
+
+export type MarkdownHeadingLevel = 2 | 3 | 4 | 5 | 6
+export type MarkdownListType = 'bullet' | 'ordered' | 'task'
+
+export interface MarkdownHeadingOption {
+  level: MarkdownHeadingLevel
+  label: string
+}
+
+export interface MarkdownListOption {
+  type: MarkdownListType
+  label: string
+}
+
+export interface MarkdownImageUploadResult {
+  url: string
+  filename: string
+}
+
+export const MARKDOWN_HEADING_OPTIONS: MarkdownHeadingOption[] = [
+  { level: 2, label: 'Heading 2' },
+  { level: 3, label: 'Heading 3' },
+  { level: 4, label: 'Heading 4' },
+  { level: 5, label: 'Heading 5' },
+  { level: 6, label: 'Heading 6' }
+]
+
+export const MARKDOWN_LIST_OPTIONS: MarkdownListOption[] = [
+  { type: 'bullet', label: 'Bullet list' },
+  { type: 'ordered', label: 'Ordered list' },
+  { type: 'task', label: 'Task list' }
+]
+
+export function createMarkdownTableText(rows: number, cols: number): string {
+  const rowCount = Math.max(2, Math.floor(rows))
+  const colCount = Math.max(1, Math.floor(cols))
+  const headerCells = Array.from({ length: colCount }, (_, index) => `Header ${index + 1}`)
+  const dividerCells = Array.from({ length: colCount }, () => '---')
+  const bodyRows = Array.from({ length: rowCount - 1 }, () =>
+    Array.from({ length: colCount }, () => '').join(' | ')
+  )
+
+  return [
+    `| ${headerCells.join(' | ')} |`,
+    `| ${dividerCells.join(' | ')} |`,
+    ...bodyRows.map((row) => `| ${row} |`)
+  ].join('\n')
+}
+
+export function parseContentEditorMathInput(
+  input: string,
+  preferredKind?: ContentEditorMathKind
+): ContentEditorMathValue | null {
+  const value = input.trim()
+
+  if (!value) return null
+
+  const inlineParen = /^\\\(([\s\S]*?)\\\)$/.exec(value)
+  const inlineDollar = /^\$([^\n]*?)\$$/.exec(value)
+  const displayBracket = /^\\\[([\s\S]*?)\\\]$/.exec(value)
+  const displayDollar = /^\$\$([\s\S]*?)\$\$$/.exec(value)
+  const environment = /^\\begin\{([^}]+)\}[\s\S]*\\end\{\1\}$/.exec(value)
+  const isSupportedEnvironment = Boolean(
+    environment && BLOCK_MATH_ENVIRONMENT_NAMES.has(environment[1])
+  )
+  const displayRaw =
+    displayBracket || displayDollar || isSupportedEnvironment || value.includes('\n')
+
+  if (preferredKind === 'inline') {
+    const raw = (
+      inlineParen?.[1] ??
+      inlineDollar?.[1] ??
+      displayBracket?.[1] ??
+      displayDollar?.[1] ??
+      value
+    ).trim()
+
+    if (!raw) return null
+
+    const delimiter: ContentEditorInlineMathDelimiter = inlineParen ? '\\(' : '$'
+
+    return {
+      delimiter,
+      kind: 'inline',
+      markdown: delimiter === '\\(' ? `\\(${raw}\\)` : `$${raw}$`,
+      raw
+    }
+  }
+
+  if (preferredKind === 'display' || displayRaw) {
+    if (displayBracket || displayDollar || isSupportedEnvironment) {
+      return {
+        kind: 'display',
+        markdown: value,
+        raw: value
+      }
+    }
+
+    const raw = inlineParen?.[1] ?? inlineDollar?.[1] ?? value
+    const markdown = raw.includes('\n') ? `$$\n${raw.trim()}\n$$` : `$$${raw.trim()}$$`
+
+    return {
+      kind: 'display',
+      markdown,
+      raw: markdown
+    }
+  }
+
+  const raw = inlineParen?.[1] ?? inlineDollar?.[1] ?? value
+  const delimiter: ContentEditorInlineMathDelimiter = inlineParen ? '\\(' : '$'
+
+  if (!raw.trim()) return null
+
+  return {
+    delimiter,
+    kind: 'inline',
+    markdown: delimiter === '\\(' ? `\\(${raw.trim()}\\)` : `$${raw.trim()}$`,
+    raw: raw.trim()
+  }
+}
+
+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 removeHighlightSpanAtCursor(
+  view: EditorView | null,
+  currentValue: string
+): InsertResult {
+  if (!view) {
+    return {
+      newValue: currentValue,
+      newCursorPos: currentValue.length
+    }
+  }
+
+  const markdown = view.state.doc.toString()
+  const { from, to } = view.state.selection.main
+  const selected = markdown.slice(from, to)
+  HIGHLIGHT_SPAN_PATTERN.lastIndex = 0
+  const unwrappedSelected = selected.replace(HIGHLIGHT_SPAN_PATTERN, '$1')
+
+  if (selected && selected !== unwrappedSelected) {
+    view.dispatch({
+      changes: { from, to, insert: unwrappedSelected },
+      selection: { anchor: from + unwrappedSelected.length }
+    })
+
+    return {
+      newValue: markdown.slice(0, from) + unwrappedSelected + markdown.slice(to),
+      newCursorPos: from + unwrappedSelected.length
+    }
+  }
+
+  const highlightRange = findHighlightSpanRange(markdown, from, to)
+  if (!highlightRange) {
+    return {
+      newValue: markdown,
+      newCursorPos: to
+    }
+  }
+
+  view.dispatch({
+    changes: {
+      from: highlightRange.start,
+      to: highlightRange.end,
+      insert: highlightRange.text
+    },
+    selection: { anchor: highlightRange.start + highlightRange.text.length }
+  })
+
+  return {
+    newValue:
+      markdown.slice(0, highlightRange.start) +
+      highlightRange.text +
+      markdown.slice(highlightRange.end),
+    newCursorPos: highlightRange.start + highlightRange.text.length
+  }
+}
+
+function findHighlightSpanRange(
+  markdown: string,
+  from: number,
+  to: number
+): { start: number; end: number; text: string } | null {
+  HIGHLIGHT_SPAN_PATTERN.lastIndex = 0
+
+  for (const match of markdown.matchAll(HIGHLIGHT_SPAN_PATTERN)) {
+    const start = match.index
+    const end = start + match[0].length
+    const textStart = start + match[0].indexOf('>') + 1
+    const textEnd = textStart + match[1].length
+    const cursorInside = from === to && from >= start && from <= end
+    const selectionInside = from >= textStart && to <= textEnd
+    const selectionCovers = from <= start && to >= end
+
+    if (cursorInside || selectionInside || selectionCovers) {
+      return { start, end, text: match[1] }
+    }
+  }
+
+  return null
+}
+
+export function findMarkdownLinkRange(
+  markdown: string,
+  from: number,
+  to: number
+): MarkdownLinkRange | null {
+  MARKDOWN_LINK_PATTERN.lastIndex = 0
+
+  for (const match of markdown.matchAll(MARKDOWN_LINK_PATTERN)) {
+    const start = match.index
+    if (start > 0 && markdown[start - 1] === '!') continue
+
+    const fullMatch = match[0]
+    const text = match[1]
+    const url = match[2]
+    const textStart = start + 1
+    const textEnd = textStart + text.length
+    const urlStart = textEnd + 2
+    const urlEnd = urlStart + url.length
+    const end = start + fullMatch.length
+    const cursorInside = from === to && from >= start && from <= end
+    const selectionInsideText = from >= textStart && to <= textEnd
+    const selectionInsideUrl = from >= urlStart && to <= urlEnd
+    const selectionCoversLink = from <= start && to >= end
+
+    if (cursorInside || selectionInsideText || selectionInsideUrl || selectionCoversLink) {
+      return { start, end, text, url }
+    }
+  }
+
+  return null
+}
+
+export function setMarkdownLinkAtCursor(
+  view: EditorView | null,
+  currentValue: string,
+  url: string
+): InsertResult {
+  const href = url.trim()
+  if (!href) {
+    return {
+      newValue: currentValue,
+      newCursorPos: currentValue.length
+    }
+  }
+
+  if (!view) {
+    const linkText = href
+    const markdownLink = `[${linkText}](${href})`
+
+    return {
+      newValue: currentValue + markdownLink,
+      newCursorPos: currentValue.length + 1 + linkText.length
+    }
+  }
+
+  const markdown = view.state.doc.toString()
+  const { from, to } = view.state.selection.main
+  const selected = view.state.sliceDoc(from, to)
+  const existingLink = findMarkdownLinkRange(markdown, from, to)
+  const linkText = existingLink?.text || selected || href
+  const markdownLink = `[${linkText}](${href})`
+  const replaceFrom = existingLink?.start ?? from
+  const replaceTo = existingLink?.end ?? to
+  const nextCursorPos = replaceFrom + 1 + linkText.length
+
+  view.dispatch({
+    changes: { from: replaceFrom, to: replaceTo, insert: markdownLink },
+    selection: {
+      anchor: replaceFrom + 1,
+      head: nextCursorPos
+    }
+  })
+
+  return {
+    newValue: markdown.slice(0, replaceFrom) + markdownLink + markdown.slice(replaceTo),
+    newCursorPos: nextCursorPos
+  }
+}
+
+export function removeMarkdownLinkAtCursor(
+  view: EditorView | null,
+  currentValue: string
+): InsertResult {
+  if (!view) {
+    return {
+      newValue: currentValue,
+      newCursorPos: currentValue.length
+    }
+  }
+
+  const markdown = view.state.doc.toString()
+  const { from, to } = view.state.selection.main
+  const existingLink = findMarkdownLinkRange(markdown, from, to)
+
+  if (!existingLink) {
+    return {
+      newValue: markdown,
+      newCursorPos: to
+    }
+  }
+
+  const nextCursorPos = existingLink.start + existingLink.text.length
+
+  view.dispatch({
+    changes: {
+      from: existingLink.start,
+      to: existingLink.end,
+      insert: existingLink.text
+    },
+    selection: { anchor: nextCursorPos }
+  })
+
+  return {
+    newValue:
+      markdown.slice(0, existingLink.start) + existingLink.text + markdown.slice(existingLink.end),
+    newCursorPos: nextCursorPos
+  }
+}
+
+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 applyCursorChangeIfAvailable(view: EditorView | null, cursorPos: number): void {
+  if (view) {
+    applyCursorChange(view, cursorPos)
+  }
+}
+
+export function stripMarkdownBlockPrefix(line: string): string {
+  return line
+    .replace(/^\s{0,3}#{1,6}\s+/, '')
+    .replace(/^\s{0,3}>\s?/, '')
+    .replace(/^\s{0,3}(?:[-*+]\s+|\d+\.\s+|- \[[ xX]\]\s+)/, '')
+}
+
+export function transformSelectedMarkdownLines(
+  view: EditorView | null,
+  currentValue: string,
+  transformLine: (line: string, index: number) => string,
+  fallbackLine: string
+): InsertResult {
+  if (!view) {
+    return {
+      newValue: `${currentValue}${currentValue ? '\n' : ''}${fallbackLine}`,
+      newCursorPos: currentValue.length + fallbackLine.length
+    }
+  }
+
+  const { from, to } = view.state.selection.main
+  const startLine = view.state.doc.lineAt(from)
+  const endLine = view.state.doc.lineAt(to)
+  const effectiveEndLine =
+    to > from && to === endLine.from ? view.state.doc.lineAt(to - 1) : endLine
+  const start = startLine.from
+  const end = effectiveEndLine.to
+  const selected = view.state.doc.sliceString(start, end)
+  const selectedLines = selected.length > 0 ? selected.split('\n') : ['']
+  const nextLines = selectedLines.map((line, index) => transformLine(line || fallbackLine, index))
+  const nextText = nextLines.join('\n')
+
+  view.dispatch({
+    changes: { from: start, to: end, insert: nextText },
+    selection: { anchor: start + nextText.length }
+  })
+
+  return {
+    newValue: currentValue.slice(0, start) + nextText + currentValue.slice(end),
+    newCursorPos: start + nextText.length
+  }
+}
+
+export function formatMarkdownHeadingLine(line: string, level: MarkdownHeadingLevel): string {
+  const prefix = `${'#'.repeat(level)} `
+  return `${prefix}${stripMarkdownBlockPrefix(line) || 'Heading'}`
+}
+
+export function getMarkdownHeadingFallback(level: MarkdownHeadingLevel): string {
+  return `${'#'.repeat(level)} Heading`
+}
+
+export function formatMarkdownListLine(
+  line: string,
+  index: number,
+  type: MarkdownListType
+): string {
+  const content = stripMarkdownBlockPrefix(line) || 'List item'
+
+  if (type === 'ordered') return `${index + 1}. ${content}`
+  if (type === 'task') return `- [ ] ${content}`
+  return `- ${content}`
+}
+
+export function getMarkdownListFallback(type: MarkdownListType): string {
+  if (type === 'ordered') return '1. List item'
+  if (type === 'task') return '- [ ] List item'
+  return '- List item'
+}
+
+export function formatMarkdownBlockquoteLine(line: string): string {
+  return `> ${stripMarkdownBlockPrefix(line) || 'Quote'}`
+}
+
+export function createMarkdownImageText(images: MarkdownImageUploadResult[]): string {
+  return images.map((img) => `![${img.filename}](${img.url})`).join('\n')
+}
+
+export function insertMarkdownTextAtPosition(
+  currentValue: string,
+  text: string,
+  requestedPos: number
+): InsertResult {
+  const insertPos = Math.min(requestedPos, currentValue.length)
+
+  return {
+    newValue: currentValue.slice(0, insertPos) + text + currentValue.slice(insertPos),
+    newCursorPos: insertPos + text.length
+  }
+}
+
+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/dist/assets/adapters/next/templates/init/utils/editor/node-attrs.ts

@@ -0,0 +1,25 @@
+export function getStringAttr(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+export function getNumberAttr(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null
+}
+
+export function setElementAttribute(element: HTMLElement, key: string, value: unknown): void {
+  if (value === null || value === undefined || value === false) {
+    element.removeAttribute(key)
+    return
+  }
+
+  if (value === true) {
+    element.setAttribute(key, '')
+    return
+  }
+
+  element.setAttribute(key, String(value))
+}
+
+export function hasOwnAttribute(attributes: Record<string, unknown>, key: string): boolean {
+  return Object.hasOwn(attributes, key)
+}

package/dist/assets/adapters/next/templates/init/utils/editor/slash-commands.ts

@@ -0,0 +1,148 @@
+import { insertContentEditorMath, insertContentEditorTable } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/react'
+import {
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  ImagePlus,
+  List,
+  ListOrdered,
+  ListTodo,
+  Minus,
+  Pilcrow,
+  Quote,
+  Sigma,
+  Table
+} from 'lucide-react'
+import type * as React from 'react'
+
+export interface ContentEditorSlashCommand {
+  id: string
+  title: string
+  description: string
+  keywords: string[]
+  Icon: React.ElementType<{ className?: string }>
+  run: (editor: Editor) => boolean
+}
+
+const SLASH_COMMANDS: ContentEditorSlashCommand[] = [
+  {
+    id: 'paragraph',
+    title: 'Text',
+    description: 'Start with plain paragraph text.',
+    keywords: ['paragraph', 'plain'],
+    Icon: Pilcrow,
+    run: (editor) => editor.chain().focus().setParagraph().run()
+  },
+  {
+    id: 'heading-1',
+    title: 'Heading 1',
+    description: 'Large section heading.',
+    keywords: ['h1', 'title'],
+    Icon: Heading1,
+    run: (editor) => editor.chain().focus().setHeading({ level: 1 }).run()
+  },
+  {
+    id: 'heading-2',
+    title: 'Heading 2',
+    description: 'Medium section heading.',
+    keywords: ['h2', 'subtitle'],
+    Icon: Heading2,
+    run: (editor) => editor.chain().focus().setHeading({ level: 2 }).run()
+  },
+  {
+    id: 'heading-3',
+    title: 'Heading 3',
+    description: 'Small section heading.',
+    keywords: ['h3'],
+    Icon: Heading3,
+    run: (editor) => editor.chain().focus().setHeading({ level: 3 }).run()
+  },
+  {
+    id: 'bullet-list',
+    title: 'Bullet list',
+    description: 'Create a simple unordered list.',
+    keywords: ['ul', 'unordered'],
+    Icon: List,
+    run: (editor) => editor.chain().focus().toggleBulletList().run()
+  },
+  {
+    id: 'ordered-list',
+    title: 'Numbered list',
+    description: 'Create an ordered list.',
+    keywords: ['ol', 'numbered'],
+    Icon: ListOrdered,
+    run: (editor) => editor.chain().focus().toggleOrderedList().run()
+  },
+  {
+    id: 'task-list',
+    title: 'To-do list',
+    description: 'Track tasks with checkboxes.',
+    keywords: ['todo', 'task', 'checkbox'],
+    Icon: ListTodo,
+    run: (editor) => editor.chain().focus().toggleTaskList().run()
+  },
+  {
+    id: 'blockquote',
+    title: 'Quote',
+    description: 'Capture a callout or quoted section.',
+    keywords: ['blockquote', 'callout'],
+    Icon: Quote,
+    run: (editor) => editor.chain().focus().toggleBlockquote().run()
+  },
+  {
+    id: 'code-block',
+    title: 'Code block',
+    description: 'Insert a formatted code block.',
+    keywords: ['pre', 'snippet'],
+    Icon: Code,
+    run: (editor) => editor.chain().focus().toggleCodeBlock().run()
+  },
+  {
+    id: 'media',
+    title: 'Media',
+    description: 'Select an image from the media library.',
+    keywords: ['image', 'photo', 'picture', 'media'],
+    Icon: ImagePlus,
+    run: (editor) => editor.chain().focus().insertContent({ type: 'mediaGalleryPlaceholder' }).run()
+  },
+  {
+    id: 'table',
+    title: 'Table',
+    description: 'Insert a table with a header row.',
+    keywords: ['grid', 'rows', 'columns'],
+    Icon: Table,
+    run: (editor) => insertContentEditorTable(editor)
+  },
+  {
+    id: 'math',
+    title: 'Math',
+    description: 'Insert inline LaTeX math.',
+    keywords: ['latex', 'katex', 'equation'],
+    Icon: Sigma,
+    run: (editor) => insertContentEditorMath(editor, 'x')
+  },
+  {
+    id: 'divider',
+    title: 'Divider',
+    description: 'Separate sections with a horizontal rule.',
+    keywords: ['horizontal', 'rule', 'separator', 'hr'],
+    Icon: Minus,
+    run: (editor) => editor.chain().focus().setHorizontalRule().run()
+  }
+]
+
+export function getFilteredSlashCommands(query: string): ContentEditorSlashCommand[] {
+  const normalizedQuery = query.trim().toLowerCase()
+
+  if (!normalizedQuery) return SLASH_COMMANDS
+
+  return SLASH_COMMANDS.filter((command) => {
+    const searchableText = [command.title, command.description, ...command.keywords]
+      .join(' ')
+      .toLowerCase()
+
+    return searchableText.includes(normalizedQuery)
+  })
+}