betterstart-cli 0.0.100 → 0.0.102

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

@@ -1,824 +0,0 @@
-'use client'
-
-import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import type { EditorView } from '@tiptap/pm/view'
-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 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;')
-}