betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/utils/editor/content-editor-rich-extensions.ts

@@ -0,0 +1,824 @@
+'use client'
+
+import {
+  getContentEditorHighlightColorName,
+  getContentEditorHighlightColorValue,
+  isContentEditorHighlightColor
+} from '@admin/utils/editor/content-editor'
+import { Mark, mergeAttributes, Node as TiptapNode } from '@tiptap/core'
+import { Highlight } from '@tiptap/extension-highlight'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { EditorView } from '@tiptap/pm/view'
+import katex from 'katex'
+
+type RawContentKind = 'html' | 'math'
+type InlineMathDelimiter = '$' | '\\('
+
+interface RawContentMatch {
+  kind: RawContentKind
+  raw: string
+}
+
+interface InlineMathMatch {
+  raw: string
+  text: string
+  delimiter: InlineMathDelimiter
+}
+
+interface RawContentToken {
+  raw?: string
+  text?: string
+  delimiter?: string
+  kind?: string
+}
+
+interface RawContentBlockNodeViewOptions {
+  getPos: () => number | undefined
+  node: ProseMirrorNode
+  view: EditorView
+}
+
+const rawHtmlBlockTags = [
+  'article',
+  'aside',
+  'audio',
+  'details',
+  'div',
+  'figure',
+  'iframe',
+  'section',
+  'table',
+  'video'
+].join('|')
+
+const selfClosingHtmlBlockTags = ['br', 'hr', 'img'].join('|')
+
+const mathBlockEnvironmentNames = new Set([
+  'align',
+  'align*',
+  'aligned',
+  'alignedat',
+  'alignedat*',
+  'array',
+  'bmatrix',
+  'cases',
+  'equation',
+  'equation*',
+  'gather',
+  'gather*',
+  'gathered',
+  'matrix',
+  'multline',
+  'multline*',
+  'pmatrix',
+  'smallmatrix',
+  'split',
+  'vmatrix'
+])
+
+const blockedHtmlPreviewTags = new Set(['embed', 'link', 'meta', 'object', 'script', 'style'])
+
+const urlAttributes = new Set(['href', 'src'])
+
+export const ContentEditorUnderline = Mark.create({
+  name: 'underline',
+
+  parseHTML() {
+    return [{ tag: 'u' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['u', mergeAttributes(HTMLAttributes), 0]
+  },
+
+  markdownOptions: {
+    htmlReopen: {
+      open: '<u>',
+      close: '</u>'
+    }
+  },
+
+  renderMarkdown: (node, helpers) => {
+    return `<u>${helpers.renderChildren(node)}</u>`
+  }
+})
+
+export const ContentEditorHighlight = Highlight.extend({
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-highlight-color]',
+        getAttrs: (element) => {
+          if (!(element instanceof HTMLElement)) return false
+
+          const color = element.getAttribute('data-highlight-color')
+          if (!color || !isContentEditorHighlightColor(color)) return false
+
+          return {
+            color: getContentEditorHighlightColorValue(color)
+          }
+        }
+      }
+    ]
+  },
+
+  renderMarkdown: (node, helpers) => {
+    const color = getContentEditorHighlightColorName(node.attrs?.color)
+    return `<span data-highlight-color="${color}">${helpers.renderChildren(node)}</span>`
+  },
+  parseMarkdown: null as never,
+  markdownTokenizer: null as never
+})
+
+export const ContentEditorSubscript = createHtmlMark('subscript', 'sub')
+export const ContentEditorSuperscript = createHtmlMark('superscript', 'sup')
+export const ContentEditorKeyboard = createHtmlMark('keyboard', 'kbd')
+
+export const ContentEditorInlineMath = TiptapNode.create({
+  name: 'inlineMath',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      raw: {
+        default: ''
+      },
+      delimiter: {
+        default: '$'
+      }
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-content-editor-inline-math]',
+        getAttrs: (element) => {
+          if (!(element instanceof HTMLElement)) return false
+
+          return {
+            raw: element.dataset.raw ?? element.textContent ?? '',
+            delimiter: element.dataset.delimiter === '\\(' ? '\\(' : '$'
+          }
+        }
+      }
+    ]
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const raw = getStringAttr(node.attrs.raw)
+    const delimiter = getInlineMathDelimiter(node.attrs.delimiter)
+
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, {
+        'data-content-editor-inline-math': '',
+        'data-raw': raw,
+        'data-delimiter': delimiter
+      }),
+      raw
+    ]
+  },
+
+  parseMarkdown: (token) => {
+    const mathToken = getRawContentToken(token)
+
+    return {
+      type: 'inlineMath',
+      attrs: {
+        raw: mathToken.text ?? mathToken.raw ?? '',
+        delimiter: getInlineMathDelimiter(mathToken.delimiter)
+      }
+    }
+  },
+
+  renderMarkdown: (node) => {
+    const raw = getStringAttr(node.attrs?.raw)
+    const delimiter = getInlineMathDelimiter(node.attrs?.delimiter)
+
+    if (delimiter === '\\(') {
+      return `\\(${raw}\\)`
+    }
+
+    return `$${raw}$`
+  },
+
+  markdownTokenizer: {
+    name: 'inlineMath',
+    level: 'inline',
+    start: findInlineMathStart,
+    tokenize(src) {
+      const match = matchInlineMath(src)
+      if (!match) return undefined
+
+      return {
+        type: 'inlineMath',
+        raw: match.raw,
+        text: match.text,
+        delimiter: match.delimiter
+      }
+    }
+  },
+
+  addNodeView() {
+    return ({ node }) => {
+      return new InlineMathNodeView(node)
+    }
+  }
+})
+
+export const ContentEditorRawContentBlock = TiptapNode.create({
+  name: 'rawContentBlock',
+  group: 'block',
+  atom: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      kind: {
+        default: 'html'
+      },
+      raw: {
+        default: ''
+      }
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-content-editor-raw-block]',
+        getAttrs: (element) => {
+          if (!(element instanceof HTMLElement)) return false
+
+          return {
+            kind: getRawContentKind(element.dataset.contentEditorRawBlock),
+            raw: element.dataset.raw ?? ''
+          }
+        }
+      }
+    ]
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const raw = getStringAttr(node.attrs.raw)
+    const kind = getRawContentKind(node.attrs.kind)
+
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, {
+        'data-content-editor-raw-block': kind,
+        'data-raw': raw
+      })
+    ]
+  },
+
+  parseMarkdown: (token) => {
+    const rawToken = getRawContentToken(token)
+
+    return {
+      type: 'rawContentBlock',
+      attrs: {
+        kind: getRawContentKind(rawToken.kind),
+        raw: rawToken.raw ?? rawToken.text ?? ''
+      }
+    }
+  },
+
+  renderMarkdown: (node) => {
+    return getStringAttr(node.attrs?.raw)
+  },
+
+  markdownTokenizer: {
+    name: 'rawContentBlock',
+    level: 'block',
+    start: findRawContentStart,
+    tokenize(src) {
+      const match = matchRawContentBlock(src)
+      if (!match) return undefined
+
+      return {
+        type: 'rawContentBlock',
+        raw: match.raw,
+        text: match.raw,
+        kind: match.kind
+      }
+    }
+  },
+
+  addNodeView() {
+    return ({ getPos, node, view }) => {
+      return new RawContentBlockNodeView({ getPos, node, view })
+    }
+  }
+})
+
+class RawContentBlockNodeView {
+  readonly dom: HTMLElement
+  private readonly preview: HTMLElement
+  private readonly abortController = new AbortController()
+  private currentRaw: string
+  private node: ProseMirrorNode
+
+  constructor(private readonly options: RawContentBlockNodeViewOptions) {
+    this.node = options.node
+    this.currentRaw = getStringAttr(options.node.attrs.raw)
+
+    const kind = getRawContentKind(options.node.attrs.kind)
+    this.dom = document.createElement('div')
+    this.dom.dataset.contentEditorRawBlock = kind
+    this.dom.dataset.raw = this.currentRaw
+    this.dom.contentEditable = 'false'
+    this.dom.className =
+      'content-editor-raw-block not-prose my-4 overflow-hidden rounded-md border bg-muted/20'
+
+    this.preview = document.createElement('div')
+    this.preview.contentEditable = 'true'
+    this.preview.dataset.contentEditorRawEditable = 'true'
+    this.preview.setAttribute('role', 'textbox')
+    this.preview.setAttribute('aria-label', 'Editable rendered HTML')
+    this.preview.spellcheck = true
+    this.preview.className =
+      'content-editor-raw-block-preview overflow-auto p-4 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50'
+    this.render(this.currentRaw, kind)
+
+    this.preview.addEventListener('input', this.handleInput, {
+      signal: this.abortController.signal
+    })
+    this.preview.addEventListener('blur', this.handleInput, {
+      signal: this.abortController.signal
+    })
+    this.dom.append(this.preview)
+  }
+
+  update(node: ProseMirrorNode) {
+    if (node.type !== this.node.type) return false
+
+    this.node = node
+    const nextKind = getRawContentKind(node.attrs.kind)
+    const nextRaw = getStringAttr(node.attrs.raw)
+    this.dom.dataset.contentEditorRawBlock = nextKind
+    this.dom.dataset.raw = nextRaw
+
+    if (nextRaw !== this.currentRaw) {
+      this.currentRaw = nextRaw
+      this.render(nextRaw, nextKind)
+    }
+
+    return true
+  }
+
+  stopEvent(event: Event) {
+    const kind = getRawContentKind(this.node.attrs.kind)
+
+    return (
+      kind !== 'math' &&
+      event.target instanceof globalThis.Node &&
+      this.preview.contains(event.target)
+    )
+  }
+
+  ignoreMutation() {
+    return true
+  }
+
+  destroy() {
+    this.abortController.abort()
+  }
+
+  private readonly handleInput = () => {
+    const kind = getRawContentKind(this.node.attrs.kind)
+    if (kind === 'math') return
+
+    const nextRaw = serializeRawContentPreview(this.preview, kind)
+
+    if (nextRaw === this.currentRaw) return
+
+    this.currentRaw = nextRaw
+    this.dom.dataset.raw = nextRaw
+
+    const position = this.options.getPos()
+    if (typeof position !== 'number') return
+
+    this.options.view.dispatch(
+      this.options.view.state.tr.setNodeMarkup(position, undefined, {
+        ...this.node.attrs,
+        raw: nextRaw
+      })
+    )
+  }
+
+  private render(raw: string, kind: RawContentKind) {
+    this.preview.contentEditable = kind === 'math' ? 'false' : 'true'
+    this.preview.setAttribute(
+      'aria-label',
+      kind === 'math' ? 'Rendered LaTeX' : 'Editable rendered HTML'
+    )
+    this.preview.innerHTML = renderRawContentPreview(raw, kind)
+  }
+}
+
+class InlineMathNodeView {
+  readonly dom: HTMLElement
+  private currentRaw: string
+  private currentDelimiter: InlineMathDelimiter
+  private node: ProseMirrorNode
+
+  constructor(node: ProseMirrorNode) {
+    this.node = node
+    this.currentRaw = getStringAttr(node.attrs.raw)
+    this.currentDelimiter = getInlineMathDelimiter(node.attrs.delimiter)
+    this.dom = document.createElement('span')
+    this.dom.dataset.contentEditorInlineMath = ''
+    this.dom.contentEditable = 'false'
+    this.dom.className = 'content-editor-inline-math rounded-[3px] px-0.5'
+    this.render()
+  }
+
+  update(node: ProseMirrorNode) {
+    if (node.type !== this.node.type) return false
+
+    this.node = node
+    const nextRaw = getStringAttr(node.attrs.raw)
+    const nextDelimiter = getInlineMathDelimiter(node.attrs.delimiter)
+
+    if (nextRaw !== this.currentRaw || nextDelimiter !== this.currentDelimiter) {
+      this.currentRaw = nextRaw
+      this.currentDelimiter = nextDelimiter
+      this.render()
+    }
+
+    return true
+  }
+
+  ignoreMutation() {
+    return true
+  }
+
+  private render() {
+    this.dom.dataset.raw = this.currentRaw
+    this.dom.dataset.delimiter = this.currentDelimiter
+    this.dom.innerHTML = renderLatex(this.currentRaw, false)
+  }
+}
+
+function createHtmlMark(name: string, tag: 'kbd' | 'sub' | 'sup') {
+  return Mark.create({
+    name,
+
+    parseHTML() {
+      return [{ tag }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return [tag, mergeAttributes(HTMLAttributes), 0]
+    },
+
+    markdownOptions: {
+      htmlReopen: {
+        open: `<${tag}>`,
+        close: `</${tag}>`
+      }
+    },
+
+    renderMarkdown: (node, helpers) => {
+      return `<${tag}>${helpers.renderChildren(node)}</${tag}>`
+    }
+  })
+}
+
+function findRawContentStart(src: string) {
+  const indexes = [
+    src.search(/^\\\[/m),
+    src.search(/^\$\$/m),
+    src.search(/^\\begin\{/m),
+    src.search(new RegExp(`^<(${rawHtmlBlockTags})\\b`, 'im')),
+    src.search(new RegExp(`^<(${selfClosingHtmlBlockTags})\\b`, 'im'))
+  ].filter((index) => index >= 0)
+
+  return indexes.length > 0 ? Math.min(...indexes) : -1
+}
+
+function matchRawContentBlock(src: string): RawContentMatch | null {
+  return matchBlockMath(src) ?? matchHtmlBlock(src) ?? null
+}
+
+function matchBlockMath(src: string): RawContentMatch | null {
+  const bracketMatch = /^\\\[[\s\S]*?\\\][ \t]*(?:\n|$)/.exec(src)
+  if (bracketMatch) {
+    return {
+      kind: 'math',
+      raw: bracketMatch[0].trimEnd()
+    }
+  }
+
+  const dollarMatch = /^\$\$[\s\S]*?\$\$[ \t]*(?:\n|$)/.exec(src)
+  if (dollarMatch) {
+    return {
+      kind: 'math',
+      raw: dollarMatch[0].trimEnd()
+    }
+  }
+
+  const environmentMatch = /^\\begin\{([^}]+)\}[\s\S]*?\\end\{\1\}[ \t]*(?:\n|$)/.exec(src)
+  if (environmentMatch && mathBlockEnvironmentNames.has(environmentMatch[1])) {
+    return {
+      kind: 'math',
+      raw: environmentMatch[0].trimEnd()
+    }
+  }
+
+  return null
+}
+
+function matchHtmlBlock(src: string): RawContentMatch | null {
+  const pairedTagMatch = new RegExp(
+    `^<(${rawHtmlBlockTags})\\b[\\s\\S]*?<\\/\\1>[ \\t]*(?:\\n|$)`,
+    'i'
+  ).exec(src)
+
+  if (pairedTagMatch) {
+    return {
+      kind: 'html',
+      raw: pairedTagMatch[0].trimEnd()
+    }
+  }
+
+  const selfClosingMatch = new RegExp(
+    `^<(${selfClosingHtmlBlockTags})\\b[^>]*(?:\\/?>)[ \\t]*(?:\\n|$)`,
+    'i'
+  ).exec(src)
+
+  if (!selfClosingMatch) return null
+
+  return {
+    kind: 'html',
+    raw: selfClosingMatch[0].trimEnd()
+  }
+}
+
+function renderRawContentPreview(raw: string, kind: RawContentKind) {
+  if (kind === 'math') {
+    return renderLatex(getBlockMathExpression(raw), true)
+  }
+
+  if (/^<details\b/i.test(raw.trim())) {
+    return renderDetailsPreview(raw)
+  }
+
+  return sanitizeHtmlPreview(raw)
+}
+
+function serializeRawContentPreview(preview: HTMLElement, kind: RawContentKind) {
+  if (kind === 'math') {
+    return ''
+  }
+
+  return sanitizeHtmlPreview(preview.innerHTML).trim()
+}
+
+function findInlineMathStart(src: string) {
+  const dollarIndex = findUnescapedCharacter(src, '$', 0)
+  const parenIndex = findUnescapedSequence(src, '\\(', 0)
+  const indexes = [dollarIndex, parenIndex].filter((index) => index >= 0)
+
+  return indexes.length > 0 ? Math.min(...indexes) : -1
+}
+
+function matchInlineMath(src: string): InlineMathMatch | null {
+  if (src.startsWith('\\(')) {
+    const closingIndex = findUnescapedSequence(src, '\\)', 2)
+    if (closingIndex === -1) return null
+
+    return {
+      raw: src.slice(0, closingIndex + 2),
+      text: src.slice(2, closingIndex),
+      delimiter: '\\('
+    }
+  }
+
+  if (!src.startsWith('$') || src.startsWith('$$')) return null
+
+  if (src[1] && /\s/u.test(src[1])) return null
+
+  let closingIndex = 1
+
+  while (closingIndex < src.length) {
+    closingIndex = findUnescapedCharacter(src, '$', closingIndex)
+    if (closingIndex === -1) return null
+
+    const text = src.slice(1, closingIndex)
+    if (isValidDollarInlineMath(src, text, closingIndex)) {
+      return {
+        raw: src.slice(0, closingIndex + 1),
+        text,
+        delimiter: '$'
+      }
+    }
+
+    closingIndex++
+  }
+
+  return null
+}
+
+function isValidDollarInlineMath(src: string, text: string, closingIndex: number) {
+  if (!text.trim() || text.includes('\n')) return false
+  if (/^\s|\s$/u.test(text)) return false
+
+  const nextCharacter = src[closingIndex + 1]
+  if (nextCharacter && nextCharacter.trim() !== '' && !Number.isNaN(Number(nextCharacter))) {
+    return false
+  }
+
+  return true
+}
+
+function findUnescapedCharacter(value: string, character: string, start: number) {
+  for (let index = start; index < value.length; index++) {
+    if (value[index] !== character) continue
+    if (isEscaped(value, index)) continue
+    return index
+  }
+
+  return -1
+}
+
+function findUnescapedSequence(value: string, sequence: string, start: number) {
+  let index = value.indexOf(sequence, start)
+
+  while (index !== -1) {
+    if (!isEscaped(value, index)) return index
+    index = value.indexOf(sequence, index + sequence.length)
+  }
+
+  return -1
+}
+
+function isEscaped(value: string, index: number) {
+  let slashCount = 0
+
+  for (let offset = index - 1; offset >= 0 && value[offset] === '\\'; offset--) {
+    slashCount++
+  }
+
+  return slashCount % 2 === 1
+}
+
+function getBlockMathExpression(raw: string) {
+  const value = raw.trim()
+
+  if (value.startsWith('\\[') && value.endsWith('\\]')) {
+    return value.slice(2, -2).trim()
+  }
+
+  if (value.startsWith('$$') && value.endsWith('$$')) {
+    return value.slice(2, -2).trim()
+  }
+
+  return value
+}
+
+function renderLatex(expression: string, displayMode: boolean) {
+  if (!expression.trim()) return ''
+
+  try {
+    return katex.renderToString(expression, {
+      displayMode,
+      output: 'htmlAndMathml',
+      strict: 'ignore',
+      throwOnError: false,
+      trust: false
+    })
+  } catch {
+    return `<span class="text-destructive">${escapeHtml(expression)}</span>`
+  }
+}
+
+function renderDetailsPreview(raw: string) {
+  const match =
+    /^<details\b[^>]*>\s*<summary\b[^>]*>([\s\S]*?)<\/summary>([\s\S]*?)<\/details>$/i.exec(
+      raw.trim()
+    )
+
+  if (!match) {
+    return sanitizeHtmlPreview(raw)
+  }
+
+  const summary = escapeHtml(stripHtml(match[1]).trim())
+  const body = renderSimpleMarkdownBody(match[2])
+
+  return sanitizeHtmlPreview(`<details><summary>${summary}</summary>${body}</details>`)
+}
+
+function renderSimpleMarkdownBody(markdown: string) {
+  const lines = markdown.trim().split('\n')
+  const blocks: string[] = []
+  let paragraph: string[] = []
+  let listItems: string[] = []
+
+  const flushParagraph = () => {
+    if (paragraph.length === 0) return
+    blocks.push(`<p>${escapeHtml(paragraph.join(' ').trim())}</p>`)
+    paragraph = []
+  }
+
+  const flushList = () => {
+    if (listItems.length === 0) return
+    blocks.push(`<ul>${listItems.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ul>`)
+    listItems = []
+  }
+
+  for (const line of lines) {
+    const trimmedLine = line.trim()
+    if (!trimmedLine) {
+      flushParagraph()
+      flushList()
+      continue
+    }
+
+    const listMatch = /^[-*]\s+(.+)$/.exec(trimmedLine)
+    if (listMatch) {
+      flushParagraph()
+      listItems.push(listMatch[1])
+      continue
+    }
+
+    flushList()
+    paragraph.push(trimmedLine)
+  }
+
+  flushParagraph()
+  flushList()
+
+  return blocks.join('')
+}
+
+function sanitizeHtmlPreview(html: string) {
+  const template = document.createElement('template')
+  template.innerHTML = html
+  const elementsToRemove: Element[] = []
+  const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT)
+
+  while (walker.nextNode()) {
+    const element = walker.currentNode as HTMLElement
+    const tagName = element.tagName.toLowerCase()
+
+    if (blockedHtmlPreviewTags.has(tagName)) {
+      elementsToRemove.push(element)
+      continue
+    }
+
+    for (const attr of Array.from(element.attributes)) {
+      const attrName = attr.name.toLowerCase()
+      const attrValue = attr.value.trim().toLowerCase()
+
+      if (
+        attrName.startsWith('on') ||
+        attrName === 'srcdoc' ||
+        (urlAttributes.has(attrName) && attrValue.startsWith('javascript:'))
+      ) {
+        element.removeAttribute(attr.name)
+      }
+    }
+  }
+
+  for (const element of elementsToRemove) {
+    element.remove()
+  }
+
+  return template.innerHTML
+}
+
+function stripHtml(value: string) {
+  return value.replace(/<[^>]+>/g, '')
+}
+
+function getRawContentToken(token: unknown): RawContentToken {
+  if (!token || typeof token !== 'object') return {}
+  return token as RawContentToken
+}
+
+function getInlineMathDelimiter(value: unknown): InlineMathDelimiter {
+  return value === '\\(' ? '\\(' : '$'
+}
+
+function getRawContentKind(value: unknown): RawContentKind {
+  return value === 'math' ? value : 'html'
+}
+
+function getStringAttr(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}