@puredesktop/platform-editor 1.0.0-beta.1

package/src/extensions/smartTypography.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { SmartTypographyRules } from './smartTypography.js'
+
+describe('SmartTypographyRules', () => {
+  describe('emDash', () => {
+    it('replaces -- at end of input with em-dash', () => {
+      expect(SmartTypographyRules.emDash('she said--')).toBe('she said—')
+    })
+    it('does not touch a single dash', () => {
+      expect(SmartTypographyRules.emDash('she said-')).toBe('she said-')
+    })
+  })
+
+  describe('ellipsis', () => {
+    it('replaces ... with …', () => {
+      expect(SmartTypographyRules.ellipsis('then...')).toBe('then…')
+    })
+    it('does not touch two dots', () => {
+      expect(SmartTypographyRules.ellipsis('then..')).toBe('then..')
+    })
+  })
+
+  describe('curly double quotes', () => {
+    it('opens left double quote at start of input', () => {
+      expect(SmartTypographyRules.leftDouble('"')).toBe('“')
+    })
+    it('opens left double quote after whitespace', () => {
+      expect(SmartTypographyRules.leftDouble('he said "')).toBe('he said “')
+    })
+    it('closes right double quote after a non-space char', () => {
+      expect(SmartTypographyRules.rightDouble('done"')).toBe('done”')
+    })
+  })
+
+  describe('apostrophe', () => {
+    it("replaces straight apostrophe between letters (don't)", () => {
+      expect(SmartTypographyRules.apostrophe("don'")).toBe('don’')
+    })
+    it("preserves contractions like it's, can't, you're", () => {
+      expect(SmartTypographyRules.apostrophe("it'")).toBe('it’')
+      expect(SmartTypographyRules.apostrophe("can'")).toBe('can’')
+      expect(SmartTypographyRules.apostrophe("you'")).toBe('you’')
+    })
+  })
+
+  describe('curly single quotes', () => {
+    it('opens left single after whitespace', () => {
+      expect(SmartTypographyRules.leftSingle("she said '")).toBe('she said ‘')
+    })
+    it('opens left single at start', () => {
+      expect(SmartTypographyRules.leftSingle("'")).toBe('‘')
+    })
+    it('closes right single after sentence punctuation', () => {
+      expect(SmartTypographyRules.rightSingle("done.'")).toBe('done.’')
+    })
+  })
+
+  describe('collapseDoubleSpace', () => {
+    it('collapses double space after period', () => {
+      expect(SmartTypographyRules.collapseDoubleSpace('done.  ')).toBe('done. ')
+    })
+    it('collapses double space after question mark', () => {
+      expect(SmartTypographyRules.collapseDoubleSpace('really?  ')).toBe(
+        'really? ',
+      )
+    })
+    it('collapses double space after exclamation', () => {
+      expect(SmartTypographyRules.collapseDoubleSpace('wow!  ')).toBe('wow! ')
+    })
+    it('does not collapse double space after a non-sentence char', () => {
+      expect(SmartTypographyRules.collapseDoubleSpace('foo,  ')).toBe('foo,  ')
+    })
+  })
+})

package/src/extensions/smartTypography.ts

@@ -0,0 +1,120 @@
+import { Extension } from '@tiptap/core'
+import { InputRule } from '@tiptap/core'
+
+/**
+ * Smart typography (#245).
+ *
+ * On-type transforms via TipTap InputRules:
+ * - `--`            → em-dash
+ * - `...`           → ellipsis
+ * - `"X` after a boundary → left double curly quote
+ * - `X"`            → right double curly quote
+ * - `'` between letters → typographic apostrophe (right single curly)
+ * - ` 'X`           → left single curly
+ * - `X'`            → right single curly
+ * - `.  `, `!  `, `?  ` → collapse double space after sentence punct
+ *
+ * InputRules are TipTap-native and are skipped automatically inside
+ * code marks and code blocks. Pasted text and existing content are
+ * not touched — only typed input.
+ */
+
+const emDashRule = new InputRule({
+  find: /--$/,
+  handler: ({ state, range }) => {
+    state.tr.replaceWith(range.from, range.to, state.schema.text('—'))
+  },
+})
+
+const ellipsisRule = new InputRule({
+  find: /\.\.\.$/,
+  handler: ({ state, range }) => {
+    state.tr.replaceWith(range.from, range.to, state.schema.text('…'))
+  },
+})
+
+// Left double quote: a `"` after start-of-input or whitespace.
+const leftDoubleRule = new InputRule({
+  find: /(^|[\s([{<])"$/,
+  handler: ({ state, range, match }) => {
+    const before = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(before + '“'))
+  },
+})
+
+// Right double quote: a `"` directly after a non-space.
+const rightDoubleRule = new InputRule({
+  find: /(\S)"$/,
+  handler: ({ state, range, match }) => {
+    const before = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(before + '”'))
+  },
+})
+
+// Apostrophe inside a word (don't, can't, it's).
+const apostropheRule = new InputRule({
+  find: /([A-Za-z])'$/,
+  handler: ({ state, range, match }) => {
+    const before = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(before + '’'))
+  },
+})
+
+// Left single quote: a `'` after start-of-input or whitespace.
+const leftSingleRule = new InputRule({
+  find: /(^|[\s([{<])'$/,
+  handler: ({ state, range, match }) => {
+    const before = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(before + '‘'))
+  },
+})
+
+// Right single quote / apostrophe after non-letter non-space (e.g. `?').
+const rightSingleRule = new InputRule({
+  find: /([!?.,;:)])'$/,
+  handler: ({ state, range, match }) => {
+    const before = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(before + '’'))
+  },
+})
+
+// Double space after sentence punctuation → single.
+const collapseDoubleSpaceRule = new InputRule({
+  find: /([.!?])  $/,
+  handler: ({ state, range, match }) => {
+    const punct = match[1]
+    state.tr.replaceWith(range.from, range.to, state.schema.text(punct + ' '))
+  },
+})
+
+export const SmartTypography = Extension.create({
+  name: 'smartTypography',
+  addInputRules() {
+    return [
+      emDashRule,
+      ellipsisRule,
+      leftDoubleRule,
+      rightDoubleRule,
+      apostropheRule,
+      leftSingleRule,
+      rightSingleRule,
+      collapseDoubleSpaceRule,
+    ]
+  },
+})
+
+/**
+ * Pure transformations exposed for unit-testing the rules without a
+ * TipTap editor instance. The functions apply the same regexes as the
+ * input rules to a string suffix and return the transformed suffix.
+ */
+export const SmartTypographyRules = {
+  emDash: (s: string): string => s.replace(/--$/, '—'),
+  ellipsis: (s: string): string => s.replace(/\.\.\.$/, '…'),
+  leftDouble: (s: string): string => s.replace(/(^|[\s([{<])"$/, '$1“'),
+  rightDouble: (s: string): string => s.replace(/(\S)"$/, '$1”'),
+  apostrophe: (s: string): string => s.replace(/([A-Za-z])'$/, '$1’'),
+  leftSingle: (s: string): string => s.replace(/(^|[\s([{<])'$/, '$1‘'),
+  rightSingle: (s: string): string => s.replace(/([!?.,;:)])'$/, '$1’'),
+  collapseDoubleSpace: (s: string): string => s.replace(/([.!?])  $/, '$1 '),
+}

package/src/index.ts

@@ -0,0 +1,137 @@
+export {
+  DocumentEditor,
+  type DocumentEditorHandle,
+  type DocumentEditorProps,
+} from './DocumentEditor.js'
+export {
+  buildAlignedLineDiff,
+  type AlignedDiffLine,
+  type AlignedDiffLineKind,
+  type AlignedLineDiffResult,
+} from './alignedLineDiff.js'
+export {
+  DocumentDiffView,
+  type DocumentDiffViewProps,
+} from './DocumentDiffView.js'
+export {
+  buildExtensions,
+  type BuildExtensionsOptions,
+  type EditorFeatures,
+} from './editorExtensions.js'
+export { useEditorExtensions } from './useEditorExtensions.js'
+export {
+  resolveEditorContent,
+  type EditorInputFormat,
+} from './contentFormat.js'
+export { toHtml, toMd } from './utils/markdownUtils.js'
+export {
+  insertInlineAssetKind,
+  type InlineAssetInsertKind,
+} from './insertInlineAssetKind.js'
+export {
+  MathEditing,
+  openMathEditor,
+  insertEditableInlineMath,
+  insertEditableBlockMath,
+} from './extensions/mathEditing.js'
+export { COLLECTION_ASSET_SRC_ATTR } from './collectionAssetSrc.js'
+export { CollectionImage } from './extensions/collectionImage.js'
+export {
+  createCollectionImagePasteExtension,
+  type CollectionImagePasteExtensionOptions,
+  type CollectionImagePastePayload,
+} from './extensions/collectionImagePaste.js'
+export {
+  insertCollectionImage,
+  insertCollectionImageFromBinaryResult,
+  type InsertCollectionImageOptions,
+  uint8ArrayToBase64,
+} from './insertCollectionImage.js'
+export type {
+  EditorCommentPromptProps,
+  EditorLinkPromptProps,
+  EditorToolbarOverlays,
+} from './toolbar/overlayTypes.js'
+
+export { CommentMark } from './extensions/commentMark.js'
+export { AppliedChangeMark } from './extensions/appliedChangeMark.js'
+export {
+  AutoReviewPrompts,
+  AUTO_CLAIM_REVIEW_PROMPT,
+  AUTO_FACT_CHECK_REVIEW_PROMPT,
+  EDITORIAL_FRAMEWORK,
+  applyAutoReviewFindings,
+  buildAutoReviewPromptBundle,
+  buildAutoReviewPrompt,
+  collectAutoReviewParagraphs,
+  collectScopedAutoReviewParagraphs,
+  copyAutoReviewPromptsToClipboard,
+  enabledEditorialTypesForProcess,
+  parseAutoReviewFindingResponse,
+  runAutoReview,
+  validateAutoReviewFindings,
+  type AppliedAutoReviewFinding,
+  type ApplyAutoReviewFindingsOptions,
+  type AutoReviewFindingInput,
+  type AutoReviewFindingsProvider,
+  type AutoReviewFindingsProviderRequest,
+  type AutoReviewFindingResponse,
+  type AutoReviewFindingSeverity,
+  type AutoReviewParagraph,
+  type AutoReviewPromptKind,
+  type CopyAutoReviewPromptsResult,
+  type EditorialAnnotationType,
+  type EditorialDensity,
+  type EditorialFrameworkEntry,
+  type EditorialGenreMode,
+  type EditorialProcess,
+  type EditorialScope,
+  type EditorialStrictness,
+  type RunAutoReviewOptions,
+  type RunAutoReviewResult,
+  type ValidatedAutoReviewFinding,
+} from './extensions/autoReviewPrompts.js'
+export {
+  applyCommentReplacementById,
+  COMMENT_TYPES,
+  COMMENT_REVIEW_STATUSES,
+  COMMENT_SEVERITIES,
+  COMMENT_STATUS_LABELS,
+  COMMENT_TYPE_DEFINITIONS,
+  COMMENT_TYPE_LABELS,
+  defaultCommentReviewStatusForType,
+  defaultCommentSeverityForType,
+  normalizeCommentReviewStatus,
+  normalizeCommentSeverity,
+  normalizeCommentType,
+  type CommentMarkAttrPatch,
+  parseCommentReplies,
+  removeCommentMarksById,
+  updateCommentMarksById,
+  serializeCommentReplies,
+  type CommentReply,
+  type CommentReviewStatus,
+  type CommentSeverity,
+  type CommentType,
+} from './commentUtils.js'
+export { DocumentAssetIdentity } from './extensions/documentAssetIdentity.js'
+export { Figure } from './extensions/figure.js'
+export { Footnote } from './extensions/footnote.js'
+export { IndexMarker } from './extensions/indexMarker.js'
+export { MermaidBlock } from './extensions/mermaidBlock.js'
+export {
+  expandMermaidBlocksForPrint,
+  extractMermaidSourceFromHtml,
+  renderMermaidPreviewSvg,
+  type ExpandMermaidBlocksOptions,
+  type MermaidPreviewTheme,
+  type RenderMermaidPreviewSvgOptions,
+} from './mermaidPreview.js'
+export { SmartTypography } from './extensions/smartTypography.js'
+export {
+  SlashCommands,
+  createDefaultSlashCommands,
+  type SlashCommandItem,
+  type SlashCommandRange,
+  type SlashCommandRunOptions,
+} from './extensions/slashCommands.js'

package/src/insertCollectionImage.test.ts

@@ -0,0 +1,60 @@
+import type { Editor } from '@tiptap/core'
+import { describe, expect, it, vi } from 'vitest'
+import { insertCollectionImage } from './insertCollectionImage.js'
+
+function createMockEditor(): {
+  editor: Editor
+  insertContent: ReturnType<typeof vi.fn>
+  run: ReturnType<typeof vi.fn>
+} {
+  const run = vi.fn()
+  const insertContent = vi.fn().mockReturnThis()
+  const chain = {
+    focus: vi.fn().mockReturnThis(),
+    insertContent,
+    run,
+  }
+
+  const editor = {
+    isDestroyed: false,
+    chain: vi.fn(() => chain),
+    schema: { nodes: { image: {} } },
+  } as unknown as Editor
+
+  return { editor, insertContent, run }
+}
+
+describe('insertCollectionImage', () => {
+  it('inserts image node with data URL and collectionAssetSrc', () => {
+    const { editor, insertContent, run } = createMockEditor()
+    const bytes = Uint8Array.from([0x89, 0x50, 0x4e, 0x47])
+
+    insertCollectionImage(editor, {
+      relativePath: 'assets/figures/chart.png',
+      alt: 'Chart',
+      bytes,
+      mimeType: 'image/png',
+    })
+
+    expect(insertContent).toHaveBeenCalledWith({
+      type: 'image',
+      attrs: {
+        src: expect.stringMatching(/^data:image\/png;base64,/),
+        alt: 'Chart',
+        collectionAssetSrc: 'assets/figures/chart.png',
+      },
+    })
+    expect(run).toHaveBeenCalled()
+  })
+
+  it('returns false when editor is missing', () => {
+    expect(
+      insertCollectionImage(null, {
+        relativePath: 'assets/a.png',
+        alt: 'A',
+        bytes: new Uint8Array([1]),
+        mimeType: 'image/png',
+      }),
+    ).toBe(false)
+  })
+})

package/src/insertCollectionImage.ts

@@ -0,0 +1,63 @@
+import type { Editor } from '@tiptap/core'
+
+export function uint8ArrayToBase64(bytes: Uint8Array): string {
+  let binary = ''
+  const chunk = 0x8000
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk))
+  }
+  return btoa(binary)
+}
+
+export interface InsertCollectionImageOptions {
+  relativePath: string
+  alt: string
+  bytes: Uint8Array
+  mimeType: string
+}
+
+/** Insert a file collection asset — data URL display + relative path for storage normalize. */
+export function insertCollectionImage(
+  editor: Editor | null | undefined,
+  options: InsertCollectionImageOptions,
+): boolean {
+  if (!editor || editor.isDestroyed) return false
+  const imageNode = editor.schema.nodes.image
+  if (!imageNode) return false
+
+  const dataUrl = `data:${options.mimeType};base64,${uint8ArrayToBase64(
+    options.bytes,
+  )}`
+  editor
+    .chain()
+    .focus()
+    .insertContent({
+      type: 'image',
+      attrs: {
+        src: dataUrl,
+        alt: options.alt,
+        collectionAssetSrc: options.relativePath,
+      },
+    })
+    .run()
+  return true
+}
+
+export function insertCollectionImageFromBinaryResult(
+  editor: Editor | null | undefined,
+  options: {
+    relativePath: string
+    alt: string
+    mimeType: string
+    base64: string
+  },
+): boolean {
+  const binary = atob(options.base64)
+  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0))
+  return insertCollectionImage(editor, {
+    relativePath: options.relativePath,
+    alt: options.alt,
+    bytes,
+    mimeType: options.mimeType,
+  })
+}

package/src/insertInlineAssetKind.test.ts

@@ -0,0 +1,67 @@
+import type { Editor } from '@tiptap/core'
+import { describe, expect, it, vi } from 'vitest'
+import { insertInlineAssetKind } from './insertInlineAssetKind.js'
+
+function createMockEditor(
+  overrides: {
+    insertMermaidBlock?: ReturnType<typeof vi.fn>
+    insertContent?: ReturnType<typeof vi.fn>
+    insertBlockMath?: ReturnType<typeof vi.fn>
+  } = {},
+): Editor {
+  const run = vi.fn()
+  const chain = {
+    focus: vi.fn().mockReturnThis(),
+    insertMermaidBlock:
+      overrides.insertMermaidBlock ?? vi.fn().mockReturnThis(),
+    insertContent: overrides.insertContent ?? vi.fn().mockReturnThis(),
+    insertBlockMath: overrides.insertBlockMath ?? vi.fn().mockReturnThis(),
+    run,
+  }
+
+  return {
+    isDestroyed: false,
+    chain: vi.fn(() => chain),
+  } as unknown as Editor
+}
+
+describe('insertInlineAssetKind', () => {
+  it('inserts mermaid from sourceCode', () => {
+    const insertMermaidBlock = vi.fn().mockReturnThis()
+    const editor = createMockEditor({ insertMermaidBlock })
+
+    insertInlineAssetKind(editor, 'mermaid', 'flowchart LR\n  A --> B')
+
+    expect(insertMermaidBlock).toHaveBeenCalledWith('flowchart LR\n  A --> B')
+  })
+
+  it('inserts table HTML from sourceCode', () => {
+    const insertContent = vi.fn().mockReturnThis()
+    const editor = createMockEditor({ insertContent })
+    const table = '<table><tbody><tr><td>Cell</td></tr></tbody></table>'
+
+    insertInlineAssetKind(editor, 'table', table)
+
+    expect(insertContent).toHaveBeenCalledWith(table)
+  })
+
+  it('inserts block math via insertBlockMath when available', () => {
+    const insertBlockMath = vi.fn().mockReturnThis()
+    const editor = createMockEditor({ insertBlockMath })
+
+    insertInlineAssetKind(editor, 'math', '\\alpha + \\beta')
+
+    expect(insertBlockMath).toHaveBeenCalledWith({
+      latex: '\\alpha + \\beta',
+    })
+  })
+
+  it('no-ops when editor is destroyed', () => {
+    const editor = createMockEditor()
+    Object.defineProperty(editor, 'isDestroyed', { value: true })
+
+    insertInlineAssetKind(editor, 'mermaid', 'flowchart TD\n  A --> B')
+
+    expect(editor.chain).not.toHaveBeenCalled()
+  })
+})

package/src/insertInlineAssetKind.ts

@@ -0,0 +1,49 @@
+import type { Editor } from '@tiptap/core'
+
+export type InlineAssetInsertKind = 'mermaid' | 'table' | 'math'
+
+const DEFAULT_MERMAID = `flowchart TD
+  A[Start] --> B[End]`
+
+const DEFAULT_TABLE = '<table><tbody><tr><td></td></tr></tbody></table>'
+
+const DEFAULT_MATH = 'E = mc^2'
+
+/** TipTap commands for inline collection assets — no paths, no IO. */
+export function insertInlineAssetKind(
+  editor: Editor | null | undefined,
+  kind: InlineAssetInsertKind,
+  sourceCode?: string,
+): void {
+  if (!editor || editor.isDestroyed) return
+
+  switch (kind) {
+    case 'mermaid':
+      editor
+        .chain()
+        .focus()
+        .insertMermaidBlock(sourceCode?.trim() || DEFAULT_MERMAID)
+        .run()
+      return
+    case 'table':
+      editor
+        .chain()
+        .focus()
+        .insertContent(sourceCode?.trim() || DEFAULT_TABLE)
+        .run()
+      return
+    case 'math': {
+      const latex = sourceCode?.trim() || DEFAULT_MATH
+      const commands = editor.chain().focus() as ReturnType<Editor['chain']> & {
+        insertBlockMath?: (opts: {
+          latex: string
+        }) => ReturnType<Editor['chain']>
+      }
+      if (typeof commands.insertBlockMath === 'function') {
+        commands.insertBlockMath({ latex }).run()
+        return
+      }
+      editor.chain().focus().insertContent(`$$${latex}$$`).run()
+    }
+  }
+}

package/src/mermaidPreview.test.ts

@@ -0,0 +1,54 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mermaidRender = vi.hoisted(() => vi.fn())
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    render: mermaidRender,
+  },
+}))
+
+import {
+  expandMermaidBlocksForPrint,
+  extractMermaidSourceFromHtml,
+  renderMermaidPreviewSvg,
+} from './mermaidPreview.js'
+
+describe('mermaidPreview', () => {
+  beforeEach(() => {
+    mermaidRender.mockReset()
+    mermaidRender.mockResolvedValue({
+      svg: '<svg data-testid="mermaid"></svg>',
+    })
+  })
+
+  it('extractMermaidSourceFromHtml preserves arrow syntax', () => {
+    const html =
+      '<figure data-type="mermaid"><pre><code class="language-mermaid">flowchart TD\n  A --> B</code></pre></figure>'
+
+    expect(extractMermaidSourceFromHtml(html)).toBe('flowchart TD\n  A --> B')
+  })
+
+  it('renderMermaidPreviewSvg returns svg from mermaid.render', async () => {
+    const svg = await renderMermaidPreviewSvg('flowchart TD\n  A --> B', {
+      theme: 'default',
+    })
+    expect(mermaidRender).toHaveBeenCalled()
+    expect(svg).toContain('data-testid="mermaid"')
+  })
+
+  it('expandMermaidBlocksForPrint replaces blocks with SVG wrapper', async () => {
+    const html =
+      '<figure data-type="mermaid"><pre><code class="language-mermaid">flowchart TD\n  A --> B</code></pre></figure>'
+
+    const expanded = await expandMermaidBlocksForPrint(html, {
+      theme: 'default',
+    })
+
+    expect(mermaidRender).toHaveBeenCalled()
+    expect(expanded).toContain('platform-print-mermaid')
+    expect(expanded).toContain('<svg data-testid="mermaid"></svg>')
+    expect(expanded).not.toContain('language-mermaid')
+  })
+})