@puredesktop/platform-editor 1.0.0-beta.1

package/src/toolbar/groups/HeadingGroup.tsx

@@ -0,0 +1,153 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+} from 'react'
+import { useCurrentEditor, useEditorState } from '@tiptap/react'
+import { styled } from 'styled-components'
+import { DownOutlined } from '@ant-design/icons'
+import { ToolBtn } from '../ToolBtn.js'
+import { CollapsePanel } from '../../CollapsePanel.js'
+
+interface HeadingOption {
+  label: string
+  level: 0 | 1 | 2 | 3
+  style?: CSSProperties
+}
+
+const OPTIONS: HeadingOption[] = [
+  { label: 'Normal text', level: 0, style: { fontSize: 13 } },
+  { label: 'Title', level: 1, style: { fontSize: 22, fontWeight: 500 } },
+  { label: 'Heading', level: 2, style: { fontSize: 18, fontWeight: 500 } },
+  { label: 'Subheading', level: 3, style: { fontSize: 15, fontWeight: 500 } },
+]
+
+export function HeadingGroup(): ReactElement {
+  const { editor } = useCurrentEditor()
+  const isH1 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 1 }) ?? false,
+  })
+  const isH2 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 2 }) ?? false,
+  })
+  const isH3 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 3 }) ?? false,
+  })
+
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const activeLevel = (isH1 && 1) || (isH2 && 2) || (isH3 && 3) || 0
+  const current = OPTIONS.find(o => o.level === activeLevel) ?? OPTIONS[0]
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [open])
+
+  const apply = (level: 0 | 1 | 2 | 3) => {
+    setOpen(false)
+    if (!editor) return
+    if (level === 0) editor.chain().focus().setParagraph().run()
+    else editor.chain().focus().toggleHeading({ level }).run()
+  }
+
+  return (
+    <Wrapper ref={wrapperRef}>
+      <Trigger
+        $active={activeLevel !== 0}
+        onClick={() => setOpen(o => !o)}
+        title="Text style"
+        type="button"
+      >
+        <span>{current.label}</span>
+        <DownOutlined />
+      </Trigger>
+
+      <Panel open={open}>
+        {OPTIONS.map(opt => (
+          <Option
+            key={opt.level}
+            $active={opt.level === activeLevel}
+            style={opt.style}
+            onClick={() => apply(opt.level)}
+            type="button"
+          >
+            {opt.label}
+          </Option>
+        ))}
+      </Panel>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  position: relative;
+`
+
+const Trigger = styled(ToolBtn)`
+  gap: 6px;
+  min-width: 128px;
+  padding: 0 8px 0 10px;
+
+  > span:first-child {
+    flex: 1;
+    text-align: left;
+  }
+
+  .anticon {
+    font-size: 10px;
+    opacity: 0.6;
+  }
+`
+
+const Panel = styled(CollapsePanel)`
+  background: var(--platform-colors-surface);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 6px;
+  box-shadow: 0 6px 18px rgb(from var(--platform-colors-text) r g b / 12%);
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 20;
+
+  &[data-open='false'] {
+    border: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+`
+
+const Option = styled.button<{ $active?: boolean }>`
+  align-items: center;
+  background: ${({ $active }) =>
+    $active
+      ? 'rgb(from var(--platform-colors-accent) r g b / 12%)'
+      : 'transparent'};
+  border: none;
+  border-radius: 4px;
+  color: ${({ $active }) =>
+    $active ? 'var(--platform-colors-accent)' : 'var(--platform-colors-text)'};
+  cursor: pointer;
+  display: flex;
+  font-family: var(--platform-typography-font-family);
+  padding: 6px 10px;
+  text-align: left;
+  transition: background 0.12s ease;
+  width: 100%;
+
+  &:hover {
+    background: rgb(from var(--platform-colors-text) r g b / 8%);
+  }
+`

package/src/toolbar/overlayTypes.ts

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'react'
+import type { CommentType } from '../commentUtils.js'
+
+export interface EditorLinkPromptProps {
+  open: boolean
+  value: string
+  onChange: (value: string) => void
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export interface EditorCommentPromptProps {
+  open: boolean
+  value: string
+  commentType: CommentType
+  commentTypeOptions: Array<{ value: CommentType; label: string }>
+  onChange: (value: string) => void
+  onCommentTypeChange: (value: CommentType) => void
+  onConfirm: () => void
+  onCancel: () => void
+  confirmDisabled?: boolean
+}
+
+/** Host-provided dialogs for toolbar prompts (use platform-ui overlays in apps). */
+export interface EditorToolbarOverlays {
+  LinkPrompt: ComponentType<EditorLinkPromptProps>
+  CommentPrompt: ComponentType<EditorCommentPromptProps>
+}

package/src/useEditorExtensions.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import {
+  buildExtensions,
+  type BuildExtensionsOptions,
+  type EditorFeatures,
+} from './editorExtensions.js'
+import type { Extensions } from '@tiptap/react'
+
+export function useEditorExtensions(
+  opts: {
+    placeholder?: string
+    features?: EditorFeatures
+  } = {},
+): Extensions {
+  const { placeholder, features } = opts
+  return useMemo(
+    () => buildExtensions({ placeholder, features }),
+    [placeholder, features],
+  )
+}
+
+export type { BuildExtensionsOptions, EditorFeatures }

package/src/utils/markdownUtils.ts

@@ -0,0 +1,331 @@
+import { marked } from 'marked'
+import TurndownService from 'turndown'
+
+const turndownService = new TurndownService({
+  headingStyle: 'atx',
+  codeBlockStyle: 'fenced',
+  emDelimiter: '*',
+  strongDelimiter: '**',
+  bulletListMarker: '-',
+  hr: '---',
+})
+
+// Clean up whitespace in paragraphs and divs
+turndownService.addRule('cleanWhitespace', {
+  filter: (node): boolean => node.nodeName === 'P' || node.nodeName === 'DIV',
+  replacement: (content: string): string => `${content.trim()}\n\n`,
+})
+
+turndownService.addRule('taskCheckbox', {
+  filter: (node): boolean =>
+    node.nodeName === 'INPUT' && (node as HTMLInputElement).type === 'checkbox',
+  replacement: (_content: string, node): string =>
+    (node as HTMLInputElement).checked ? '[x] ' : '[ ] ',
+})
+
+turndownService.addRule('taskItem', {
+  filter: (node): boolean =>
+    node.nodeName === 'LI' &&
+    (node as HTMLElement).dataset?.type === 'taskItem',
+  replacement: (content: string, node): string => {
+    const element = node as HTMLElement
+    const checked =
+      element.getAttribute('data-checked') === 'true' ||
+      (
+        element.querySelector(
+          'input[type="checkbox"]',
+        ) as HTMLInputElement | null
+      )?.checked === true
+    const prefix = checked ? '- [x] ' : '- [ ] '
+    const body = content.replace(/^\s*\[(x| )\]\s*/i, '').trim()
+    if (!body) return `${prefix}\n`
+
+    if (looksLikeMarkdownTable(body)) {
+      return `${prefix}\n${indentMarkdown(body)}\n`
+    }
+
+    const [firstBlock, ...restBlocks] = body.split(/\n{2,}/)
+    const head = `${prefix}${firstBlock.trim()}`
+    if (restBlocks.length === 0) return `${head}\n`
+    return `${head}\n\n${indentMarkdown(restBlocks.join('\n\n').trim())}\n`
+  },
+})
+
+turndownService.addRule('table', {
+  filter: (node): boolean => node.nodeName === 'TABLE',
+  replacement: (_content: string, node): string => {
+    const table = node as HTMLTableElement
+    const rows = Array.from(table.querySelectorAll('tr')).map(row =>
+      Array.from(row.children).map(cell =>
+        normalizeCell(cell.textContent ?? ''),
+      ),
+    )
+    if (rows.length === 0) return ''
+
+    const header = rows[0]
+    const body = rows.slice(1)
+    const separator = header.map(() => '---')
+    const lines = [
+      `| ${header.join(' | ')} |`,
+      `| ${separator.join(' | ')} |`,
+      ...body.map(row => `| ${padRow(row, header.length).join(' | ')} |`),
+    ]
+
+    return `\n\n${lines.join('\n')}\n\n`
+  },
+})
+
+// Index markers (#172): <a class="ix" data-term="X">term</a> serializes
+// back as raw HTML so the round-trip is lossless. CommonMark passes
+// inline HTML through unchanged.
+turndownService.keep(
+  node =>
+    node.nodeName === 'A' &&
+    (node as HTMLElement).classList?.contains('ix') === true,
+)
+
+turndownService.keep(
+  node =>
+    node.nodeName === 'SPAN' &&
+    (node as HTMLElement).hasAttribute?.('data-comment-id') === true,
+)
+
+turndownService.keep(node => node.nodeName === 'SUB' || node.nodeName === 'SUP')
+
+turndownService.addRule('inlineMath', {
+  filter: (node): boolean =>
+    node.nodeName === 'SPAN' &&
+    (node as HTMLElement).dataset?.type === 'inline-math',
+  replacement: (_content: string, node): string => {
+    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
+    return latex ? `$${latex}$` : ''
+  },
+})
+
+turndownService.addRule('blockMath', {
+  filter: (node): boolean =>
+    node.nodeName === 'DIV' &&
+    (node as HTMLElement).dataset?.type === 'block-math',
+  replacement: (_content: string, node): string => {
+    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
+    return latex ? `\n\n$$\n${latex}\n$$\n\n` : ''
+  },
+})
+
+// <figure><img/><figcaption>caption</figcaption></figure> → ![caption](src)
+// The render pipeline already wraps caption-bearing markdown images in
+// a real <figure>, so this lossy serialization round-trips cleanly for
+// PDF output. The alt attribute is used as the markdown alt text only
+// when the figure has no caption.
+turndownService.addRule('figure', {
+  filter: (node): boolean => node.nodeName === 'FIGURE',
+  replacement: (_content: string, node): string => {
+    const el = node as HTMLElement
+    const img = el.querySelector('img')
+    const captionEl = el.querySelector('figcaption')
+    if (!img) return ''
+    const src = img.getAttribute('src') ?? ''
+    const alt = img.getAttribute('alt') ?? ''
+    const caption = (captionEl?.textContent ?? '').trim()
+    const text = caption || alt
+    return `\n\n![${text}](${src})\n\n`
+  },
+})
+
+/** Convert markdown string to HTML. Returns empty string for falsy input. */
+export const toHtml = (text: string): string =>
+  text ? renderMarkdownWithTaskLists(text) : ''
+
+/** Convert HTML string to markdown. Returns empty string for falsy input. */
+export const toMd = (html: string): string =>
+  html ? normalizeMarkdown(turndownService.turndown(html)) : ''
+
+/** Batch-convert [key, markdown] entries to [key, html]. */
+export const toHtmlEntries = (
+  entries: Array<[string, string]>,
+): Array<[string, string]> =>
+  entries.map(([key, value]) => [key, toHtml(value)])
+
+/** Batch-convert [key, html] entries to [key, markdown]. */
+export const toMdEntries = (
+  entries: Array<[string, string]>,
+  keyTransform?: (key: string) => string,
+): Array<[string, string]> =>
+  entries.map(([key, value]) => [
+    keyTransform ? keyTransform(key) : key,
+    toMd(value),
+  ])
+
+function normalizeCell(value: string): string {
+  return value.replace(/\|/g, '\\|').replace(/\s+/g, ' ').trim()
+}
+
+function padRow(row: string[], length: number): string[] {
+  if (row.length >= length) return row
+  return [...row, ...Array.from({ length: length - row.length }, () => '')]
+}
+
+function normalizeMarkdown(markdown: string): string {
+  return markdown
+    .replace(/^- {2,}/gm, '- ')
+    .replace(/^(\s*[-*])\s+\[(x| )\]\s+/gim, '$1 [$2] ')
+    .replace(/\n{3,}/g, '\n\n')
+    .trimEnd()
+}
+
+function renderMarkdownWithTaskLists(markdown: string): string {
+  const normalized = markdown.replace(/\r\n?/g, '\n')
+  const lines = normalized.split('\n')
+  const parts: string[] = []
+  let buffer: string[] = []
+  let index = 0
+
+  const flushBuffer = (): void => {
+    if (buffer.length === 0) return
+    const chunk = buffer.join('\n')
+    if (chunk.trim()) {
+      parts.push(marked.parse(chunk) as string)
+    }
+    buffer = []
+  }
+
+  while (index < lines.length) {
+    const taskMatch = matchTaskLine(lines[index])
+    if (!taskMatch || taskMatch.indent !== 0) {
+      buffer.push(lines[index])
+      index += 1
+      continue
+    }
+
+    flushBuffer()
+    const rendered = renderTaskListBlock(lines, index, taskMatch.indent)
+    parts.push(rendered.html)
+    index = rendered.nextIndex
+  }
+
+  flushBuffer()
+  return parts.join('')
+}
+
+function renderTaskListBlock(
+  lines: string[],
+  startIndex: number,
+  baseIndent: number,
+): { html: string; nextIndex: number } {
+  const items: string[] = []
+  let index = startIndex
+
+  while (index < lines.length) {
+    while (
+      index < lines.length &&
+      lines[index].trim() === '' &&
+      matchTaskLine(lines[index + 1] ?? '')?.indent === baseIndent
+    ) {
+      index += 1
+    }
+
+    const taskMatch = matchTaskLine(lines[index] ?? '')
+    if (!taskMatch || taskMatch.indent !== baseIndent) break
+
+    const nestedLines: string[] = []
+    index += 1
+
+    while (index < lines.length) {
+      const line = lines[index]
+      const nextTask = matchTaskLine(line)
+      if (nextTask && nextTask.indent === baseIndent) break
+
+      if (line.trim() === '') {
+        nestedLines.push('')
+        index += 1
+        continue
+      }
+
+      const indent = countIndent(line)
+      if (indent <= baseIndent) break
+
+      nestedLines.push(stripNestedIndent(line, baseIndent))
+      index += 1
+    }
+
+    const itemBody = buildTaskItemBody(taskMatch.text, nestedLines)
+    items.push(
+      `<li data-type="taskItem" data-checked="${
+        taskMatch.checked
+      }"><label><input type="checkbox"${
+        taskMatch.checked ? ' checked="checked"' : ''
+      }><span></span></label><div>${itemBody}</div></li>`,
+    )
+  }
+
+  return {
+    html: `<ul data-type="taskList">${items.join('')}</ul>`,
+    nextIndex: index,
+  }
+}
+
+function buildTaskItemBody(mainText: string, nestedLines: string[]): string {
+  const nestedMarkdown = nestedLines.join('\n').trim()
+  const tableCandidate = [mainText, nestedMarkdown]
+    .filter(Boolean)
+    .join('\n')
+    .trim()
+
+  if (looksLikeMarkdownTable(tableCandidate)) {
+    return (marked.parse(tableCandidate) as string).trim()
+  }
+
+  const body: string[] = []
+  if (mainText.trim()) {
+    body.push(`<p>${marked.parseInline(mainText.trim()) as string}</p>`)
+  }
+  if (nestedMarkdown) {
+    body.push(renderMarkdownWithTaskLists(nestedMarkdown).trim())
+  }
+  if (body.length === 0) {
+    body.push('<p></p>')
+  }
+  return body.join('')
+}
+
+function looksLikeMarkdownTable(markdown: string): boolean {
+  const lines = markdown
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean)
+  if (lines.length < 2) return false
+  return (
+    /^\|.*\|$/.test(lines[0]) &&
+    /^\|?(?:\s*:?-+:?\s*\|)+\s*:?-+:?\s*\|?$/.test(lines[1])
+  )
+}
+
+function matchTaskLine(
+  line: string,
+): { indent: number; checked: boolean; text: string } | null {
+  const match = line.match(/^(\s*)[-+*]\s+\[([ xX])\]\s*(.*)$/)
+  if (!match) return null
+  return {
+    indent: match[1].length,
+    checked: match[2].toLowerCase() === 'x',
+    text: match[3] ?? '',
+  }
+}
+
+function countIndent(line: string): number {
+  const match = line.match(/^(\s*)/)
+  return match?.[1].length ?? 0
+}
+
+function stripNestedIndent(line: string, baseIndent: number): string {
+  const preferred = ' '.repeat(baseIndent + 4)
+  if (line.startsWith(preferred)) return line.slice(preferred.length)
+  return line.slice(Math.min(line.length, baseIndent + 2))
+}
+
+function indentMarkdown(markdown: string): string {
+  return markdown
+    .split('\n')
+    .map(line => (line.trim() ? `    ${line}` : ''))
+    .join('\n')
+}