@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/constants/toolKeys.ts

@@ -1,14 +1,14 @@
-export const TOOL_KEYS = {
-  LINK: 'link',
-  BULLET_LIST: 'bulletList',
-  ORDERED_LIST: 'orderedList',
-  CODE: 'code',
-  BOLD: 'bold',
-  ITALIC: 'italic',
-  UNDERLINE: 'underline',
-  TASK_LIST: 'taskList',
-  BLOCKQUOTE: 'blockquote',
-  CODE_BLOCK: 'codeBlock',
-  INDEX_MARKER: 'indexMarker',
-  TABLE: 'table',
-} as const
+export const TOOL_KEYS = {
+  LINK: 'link',
+  BULLET_LIST: 'bulletList',
+  ORDERED_LIST: 'orderedList',
+  CODE: 'code',
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  UNDERLINE: 'underline',
+  TASK_LIST: 'taskList',
+  BLOCKQUOTE: 'blockquote',
+  CODE_BLOCK: 'codeBlock',
+  INDEX_MARKER: 'indexMarker',
+  TABLE: 'table',
+} as const

package/src/contentFormat.test.ts

@@ -1,27 +1,27 @@
-import { describe, expect, it } from 'vitest'
-import { resolveEditorContent } from './contentFormat.js'
-
-describe('resolveEditorContent', () => {
-  it('parses markdown with inline index-marker HTML when source is markdown', () => {
-    const input = `# The Permissions Question
-
-Every product eventually faces a <a class="ix" data-term="permissions">permissions</a> question.
-
-## A test that doesn't exist`
-
-    const resolved = resolveEditorContent(input, 'markdown')
-
-    expect(resolved).toContain('<h1>The Permissions Question</h1>')
-    expect(resolved).toContain('<h2>A test that doesn&#39;t exist</h2>')
-    expect(resolved).toContain(
-      '<p>Every product eventually faces a <a class="ix" data-term="permissions">permissions</a> question.</p>',
-    )
-    expect(resolved).not.toContain('# The Permissions Question')
-    expect(resolved).not.toContain("## A test that doesn't exist")
-  })
-
-  it('keeps real html fragments untouched when source is html', () => {
-    const input = '<h1>Introduction</h1><p>Already html</p>'
-    expect(resolveEditorContent(input, 'html')).toBe(input)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { resolveEditorContent } from './contentFormat.js'
+
+describe('resolveEditorContent', () => {
+  it('parses markdown with inline index-marker HTML when source is markdown', () => {
+    const input = `# The Permissions Question
+
+Every product eventually faces a <a class="ix" data-term="permissions">permissions</a> question.
+
+## A test that doesn't exist`
+
+    const resolved = resolveEditorContent(input, 'markdown')
+
+    expect(resolved).toContain('<h1>The Permissions Question</h1>')
+    expect(resolved).toContain('<h2>A test that doesn&#39;t exist</h2>')
+    expect(resolved).toContain(
+      '<p>Every product eventually faces a <a class="ix" data-term="permissions">permissions</a> question.</p>',
+    )
+    expect(resolved).not.toContain('# The Permissions Question')
+    expect(resolved).not.toContain("## A test that doesn't exist")
+  })
+
+  it('keeps real html fragments untouched when source is html', () => {
+    const input = '<h1>Introduction</h1><p>Already html</p>'
+    expect(resolveEditorContent(input, 'html')).toBe(input)
+  })
+})

package/src/contentFormat.ts

@@ -1,18 +1,18 @@
-import { toHtml } from './utils/markdownUtils.js'
-
-export type EditorInputFormat = 'auto' | 'markdown' | 'html'
-
-const looksLikeHtmlDocument = (str: string): boolean =>
-  /^\s*<(?:!doctype|html|body|article|section|main|div|p|h[1-6]|ul|ol|li|blockquote|table|figure)\b/i.test(
-    str,
-  )
-
-export function resolveEditorContent(
-  value: string,
-  inputFormat: EditorInputFormat = 'auto',
-): string {
-  if (!value) return value
-  if (inputFormat === 'markdown') return toHtml(value)
-  if (inputFormat === 'html') return value
-  return looksLikeHtmlDocument(value) ? value : toHtml(value)
-}
+import { toHtml } from './utils/markdownUtils.js'
+
+export type EditorInputFormat = 'auto' | 'markdown' | 'html'
+
+const looksLikeHtmlDocument = (str: string): boolean =>
+  /^\s*<(?:!doctype|html|body|article|section|main|div|p|h[1-6]|ul|ol|li|blockquote|table|figure)\b/i.test(
+    str,
+  )
+
+export function resolveEditorContent(
+  value: string,
+  inputFormat: EditorInputFormat = 'auto',
+): string {
+  if (!value) return value
+  if (inputFormat === 'markdown') return toHtml(value)
+  if (inputFormat === 'html') return value
+  return looksLikeHtmlDocument(value) ? value : toHtml(value)
+}

package/src/editorExtensions.ts

@@ -1,155 +1,155 @@
-import StarterKit from '@tiptap/starter-kit'
-import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
-import { CharacterCount } from '@tiptap/extension-character-count'
-import Placeholder from '@tiptap/extension-placeholder'
-import { Mathematics } from '@tiptap/extension-mathematics'
-import {
-  Table,
-  TableCell,
-  TableHeader,
-  TableRow,
-} from '@tiptap/extension-table'
-import { Subscript } from '@tiptap/extension-subscript'
-import { Superscript } from '@tiptap/extension-superscript'
-import { TaskList } from '@tiptap/extension-task-list'
-import { TaskItem } from '@tiptap/extension-task-item'
-import { TextAlign } from '@tiptap/extension-text-align'
-import { Highlight } from '@tiptap/extension-highlight'
-import { Image } from '@tiptap/extension-image'
-import type { Extensions } from '@tiptap/react'
-import { common, createLowlight } from 'lowlight'
-import 'katex/dist/katex.min.css'
-import { Figure } from './extensions/figure.js'
-import { IndexMarker } from './extensions/indexMarker.js'
-import { Footnote } from './extensions/footnote.js'
-import { MathEditing } from './extensions/mathEditing.js'
-import { MermaidBlock } from './extensions/mermaidBlock.js'
-import { DocumentAssetIdentity } from './extensions/documentAssetIdentity.js'
-import { SmartTypography } from './extensions/smartTypography.js'
-import { CommentMark } from './extensions/commentMark.js'
-import { AppliedChangeMark } from './extensions/appliedChangeMark.js'
-import { AutoReviewPrompts } from './extensions/autoReviewPrompts.js'
-
-const lowlight = createLowlight(common)
-
-/** Optional markup capabilities — enable per app; no host or filesystem behavior. */
-export interface EditorFeatures {
-  tables?: boolean
-  taskList?: boolean
-  highlight?: boolean
-  math?: boolean
-  figures?: boolean
-  mermaid?: boolean
-  footnotes?: boolean
-  smartTypography?: boolean
-  /** In-document review marks (toolbar must pass `enableComments` on DocumentEditor). */
-  comments?: boolean
-  /** Prompt batching and validated auto editorial mark application. */
-  autoReviewPrompts?: boolean
-  /** Book-style index markers (`a.ix`). */
-  indexMarkers?: boolean
-  /** `data-asset-id` on math/table nodes for external asset indexes. */
-  documentAssetIdentity?: boolean
-}
-
-const DEFAULT_FEATURES: Required<EditorFeatures> = {
-  tables: true,
-  taskList: true,
-  highlight: true,
-  math: true,
-  figures: true,
-  mermaid: true,
-  footnotes: true,
-  smartTypography: true,
-  comments: false,
-  autoReviewPrompts: false,
-  indexMarkers: false,
-  documentAssetIdentity: false,
-}
-
-export interface BuildExtensionsOptions {
-  placeholder?: string
-  features?: EditorFeatures
-}
-
-/**
- * Build the shared TipTap extension set. Apps may concat further extensions
- * (e.g. custom image paste) or pass the result to DocumentEditor.
- */
-export function buildExtensions(opts: BuildExtensionsOptions = {}): Extensions {
-  const features = { ...DEFAULT_FEATURES, ...opts.features }
-  const extensions: Extensions = [
-    StarterKit.configure({
-      link: { openOnClick: false },
-      heading: { levels: [1, 2, 3] },
-      codeBlock: false,
-    }),
-    CodeBlockLowlight.configure({
-      lowlight,
-      defaultLanguage: 'plaintext',
-    }),
-    CharacterCount,
-    Subscript,
-    Superscript,
-    TextAlign.configure({ types: ['heading', 'paragraph'] }),
-  ]
-
-  if (features.documentAssetIdentity) {
-    extensions.push(DocumentAssetIdentity)
-  }
-  if (features.tables) {
-    extensions.push(
-      Table.configure({ resizable: true }),
-      TableCell,
-      TableHeader,
-      TableRow,
-    )
-  }
-  if (features.taskList) {
-    extensions.push(TaskList, TaskItem.configure({ nested: true }))
-  }
-  if (features.highlight) {
-    extensions.push(Highlight)
-  }
-  if (features.math) {
-    extensions.push(
-      Mathematics.configure({
-        katexOptions: { throwOnError: false },
-      }),
-      MathEditing,
-    )
-  }
-  if (features.figures) {
-    extensions.push(
-      Image.configure({ inline: false, allowBase64: false }),
-      Figure,
-    )
-  }
-  if (features.mermaid) {
-    extensions.push(MermaidBlock)
-  }
-  if (features.indexMarkers) {
-    extensions.push(IndexMarker)
-  }
-  if (features.comments) {
-    extensions.push(CommentMark)
-    extensions.push(AppliedChangeMark)
-  }
-  if (features.autoReviewPrompts) {
-    extensions.push(AutoReviewPrompts)
-  }
-  if (features.footnotes) {
-    extensions.push(Footnote)
-  }
-  if (features.smartTypography) {
-    extensions.push(SmartTypography)
-  }
-
-  extensions.push(
-    Placeholder.configure({
-      placeholder: opts.placeholder ?? 'Start writing…',
-    }),
-  )
-
-  return extensions
-}
+import StarterKit from '@tiptap/starter-kit'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+import { CharacterCount } from '@tiptap/extension-character-count'
+import Placeholder from '@tiptap/extension-placeholder'
+import { Mathematics } from '@tiptap/extension-mathematics'
+import {
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+} from '@tiptap/extension-table'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
+import { TaskList } from '@tiptap/extension-task-list'
+import { TaskItem } from '@tiptap/extension-task-item'
+import { TextAlign } from '@tiptap/extension-text-align'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Image } from '@tiptap/extension-image'
+import type { Extensions } from '@tiptap/react'
+import { common, createLowlight } from 'lowlight'
+import 'katex/dist/katex.min.css'
+import { Figure } from './extensions/figure.js'
+import { IndexMarker } from './extensions/indexMarker.js'
+import { Footnote } from './extensions/footnote.js'
+import { MathEditing } from './extensions/mathEditing.js'
+import { MermaidBlock } from './extensions/mermaidBlock.js'
+import { DocumentAssetIdentity } from './extensions/documentAssetIdentity.js'
+import { SmartTypography } from './extensions/smartTypography.js'
+import { CommentMark } from './extensions/commentMark.js'
+import { AppliedChangeMark } from './extensions/appliedChangeMark.js'
+import { AutoReviewPrompts } from './extensions/autoReviewPrompts.js'
+
+const lowlight = createLowlight(common)
+
+/** Optional markup capabilities — enable per app; no host or filesystem behavior. */
+export interface EditorFeatures {
+  tables?: boolean
+  taskList?: boolean
+  highlight?: boolean
+  math?: boolean
+  figures?: boolean
+  mermaid?: boolean
+  footnotes?: boolean
+  smartTypography?: boolean
+  /** In-document review marks (toolbar must pass `enableComments` on DocumentEditor). */
+  comments?: boolean
+  /** Prompt batching and validated auto editorial mark application. */
+  autoReviewPrompts?: boolean
+  /** Book-style index markers (`a.ix`). */
+  indexMarkers?: boolean
+  /** `data-asset-id` on math/table nodes for external asset indexes. */
+  documentAssetIdentity?: boolean
+}
+
+const DEFAULT_FEATURES: Required<EditorFeatures> = {
+  tables: true,
+  taskList: true,
+  highlight: true,
+  math: true,
+  figures: true,
+  mermaid: true,
+  footnotes: true,
+  smartTypography: true,
+  comments: false,
+  autoReviewPrompts: false,
+  indexMarkers: false,
+  documentAssetIdentity: false,
+}
+
+export interface BuildExtensionsOptions {
+  placeholder?: string
+  features?: EditorFeatures
+}
+
+/**
+ * Build the shared TipTap extension set. Apps may concat further extensions
+ * (e.g. custom image paste) or pass the result to DocumentEditor.
+ */
+export function buildExtensions(opts: BuildExtensionsOptions = {}): Extensions {
+  const features = { ...DEFAULT_FEATURES, ...opts.features }
+  const extensions: Extensions = [
+    StarterKit.configure({
+      link: { openOnClick: false },
+      heading: { levels: [1, 2, 3] },
+      codeBlock: false,
+    }),
+    CodeBlockLowlight.configure({
+      lowlight,
+      defaultLanguage: 'plaintext',
+    }),
+    CharacterCount,
+    Subscript,
+    Superscript,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  ]
+
+  if (features.documentAssetIdentity) {
+    extensions.push(DocumentAssetIdentity)
+  }
+  if (features.tables) {
+    extensions.push(
+      Table.configure({ resizable: true }),
+      TableCell,
+      TableHeader,
+      TableRow,
+    )
+  }
+  if (features.taskList) {
+    extensions.push(TaskList, TaskItem.configure({ nested: true }))
+  }
+  if (features.highlight) {
+    extensions.push(Highlight)
+  }
+  if (features.math) {
+    extensions.push(
+      Mathematics.configure({
+        katexOptions: { throwOnError: false },
+      }),
+      MathEditing,
+    )
+  }
+  if (features.figures) {
+    extensions.push(
+      Image.configure({ inline: false, allowBase64: false }),
+      Figure,
+    )
+  }
+  if (features.mermaid) {
+    extensions.push(MermaidBlock)
+  }
+  if (features.indexMarkers) {
+    extensions.push(IndexMarker)
+  }
+  if (features.comments) {
+    extensions.push(CommentMark)
+    extensions.push(AppliedChangeMark)
+  }
+  if (features.autoReviewPrompts) {
+    extensions.push(AutoReviewPrompts)
+  }
+  if (features.footnotes) {
+    extensions.push(Footnote)
+  }
+  if (features.smartTypography) {
+    extensions.push(SmartTypography)
+  }
+
+  extensions.push(
+    Placeholder.configure({
+      placeholder: opts.placeholder ?? 'Start writing…',
+    }),
+  )
+
+  return extensions
+}

package/src/extensions/appliedChangeMark.ts

@@ -1,115 +1,115 @@
-import { Mark, mergeAttributes } from '@tiptap/core'
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    appliedChangeMark: {
-      setAppliedChangeMark: (attrs: {
-        originalText: string
-        replacementText: string
-        sourceCommentId?: string
-        sourceType?: string
-        actor?: string
-        createdAt?: string
-      }) => ReturnType
-      unsetAppliedChangeMark: () => ReturnType
-    }
-  }
-}
-
-export const AppliedChangeMark = Mark.create({
-  name: 'appliedChangeMark',
-  inclusive: false,
-
-  addAttributes() {
-    return {
-      originalText: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-original'),
-        renderHTML: (attrs: { originalText?: string }) =>
-          attrs.originalText
-            ? { 'data-pm-applied-original': attrs.originalText }
-            : {},
-      },
-      replacementText: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-replacement'),
-        renderHTML: (attrs: { replacementText?: string }) =>
-          attrs.replacementText
-            ? { 'data-pm-applied-replacement': attrs.replacementText }
-            : {},
-      },
-      sourceCommentId: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-source-comment-id'),
-        renderHTML: (attrs: { sourceCommentId?: string }) =>
-          attrs.sourceCommentId
-            ? { 'data-pm-applied-source-comment-id': attrs.sourceCommentId }
-            : {},
-      },
-      sourceType: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-source-type'),
-        renderHTML: (attrs: { sourceType?: string }) =>
-          attrs.sourceType ? { 'data-pm-applied-source-type': attrs.sourceType } : {},
-      },
-      actor: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-actor'),
-        renderHTML: (attrs: { actor?: string }) =>
-          attrs.actor ? { 'data-pm-applied-actor': attrs.actor } : {},
-      },
-      createdAt: {
-        default: null,
-        parseHTML: el => el.getAttribute('data-pm-applied-created-at'),
-        renderHTML: (attrs: { createdAt?: string }) =>
-          attrs.createdAt ? { 'data-pm-applied-created-at': attrs.createdAt } : {},
-      },
-    }
-  },
-
-  parseHTML() {
-    return [{ tag: 'span[data-pm-applied-change="true"]' }]
-  },
-
-  renderHTML({ HTMLAttributes, mark }) {
-    const attrs = mark.attrs as {
-      originalText?: string
-      replacementText?: string
-      actor?: string
-      createdAt?: string
-    }
-    const title = [
-      attrs.actor ? `${attrs.actor} applied edit` : 'Applied edit',
-      attrs.originalText ? `Original: ${attrs.originalText}` : null,
-      attrs.replacementText ? `Replacement: ${attrs.replacementText}` : null,
-      attrs.createdAt ?? null,
-    ]
-      .filter(Boolean)
-      .join('\n')
-    return [
-      'span',
-      mergeAttributes(HTMLAttributes, {
-        'data-pm-applied-change': 'true',
-        class: 'applied-change-mark',
-        title,
-      }),
-      0,
-    ]
-  },
-
-  addCommands() {
-    return {
-      setAppliedChangeMark:
-        attrs =>
-        ({ commands, state }) => {
-          const { from, to } = state.selection
-          if (from === to) return false
-          return commands.setMark(this.name, attrs)
-        },
-      unsetAppliedChangeMark:
-        () =>
-        ({ commands }) =>
-          commands.unsetMark(this.name),
-    }
-  },
-})
+import { Mark, mergeAttributes } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    appliedChangeMark: {
+      setAppliedChangeMark: (attrs: {
+        originalText: string
+        replacementText: string
+        sourceCommentId?: string
+        sourceType?: string
+        actor?: string
+        createdAt?: string
+      }) => ReturnType
+      unsetAppliedChangeMark: () => ReturnType
+    }
+  }
+}
+
+export const AppliedChangeMark = Mark.create({
+  name: 'appliedChangeMark',
+  inclusive: false,
+
+  addAttributes() {
+    return {
+      originalText: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-original'),
+        renderHTML: (attrs: { originalText?: string }) =>
+          attrs.originalText
+            ? { 'data-pm-applied-original': attrs.originalText }
+            : {},
+      },
+      replacementText: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-replacement'),
+        renderHTML: (attrs: { replacementText?: string }) =>
+          attrs.replacementText
+            ? { 'data-pm-applied-replacement': attrs.replacementText }
+            : {},
+      },
+      sourceCommentId: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-source-comment-id'),
+        renderHTML: (attrs: { sourceCommentId?: string }) =>
+          attrs.sourceCommentId
+            ? { 'data-pm-applied-source-comment-id': attrs.sourceCommentId }
+            : {},
+      },
+      sourceType: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-source-type'),
+        renderHTML: (attrs: { sourceType?: string }) =>
+          attrs.sourceType ? { 'data-pm-applied-source-type': attrs.sourceType } : {},
+      },
+      actor: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-actor'),
+        renderHTML: (attrs: { actor?: string }) =>
+          attrs.actor ? { 'data-pm-applied-actor': attrs.actor } : {},
+      },
+      createdAt: {
+        default: null,
+        parseHTML: el => el.getAttribute('data-pm-applied-created-at'),
+        renderHTML: (attrs: { createdAt?: string }) =>
+          attrs.createdAt ? { 'data-pm-applied-created-at': attrs.createdAt } : {},
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-pm-applied-change="true"]' }]
+  },
+
+  renderHTML({ HTMLAttributes, mark }) {
+    const attrs = mark.attrs as {
+      originalText?: string
+      replacementText?: string
+      actor?: string
+      createdAt?: string
+    }
+    const title = [
+      attrs.actor ? `${attrs.actor} applied edit` : 'Applied edit',
+      attrs.originalText ? `Original: ${attrs.originalText}` : null,
+      attrs.replacementText ? `Replacement: ${attrs.replacementText}` : null,
+      attrs.createdAt ?? null,
+    ]
+      .filter(Boolean)
+      .join('\n')
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, {
+        'data-pm-applied-change': 'true',
+        class: 'applied-change-mark',
+        title,
+      }),
+      0,
+    ]
+  },
+
+  addCommands() {
+    return {
+      setAppliedChangeMark:
+        attrs =>
+        ({ commands, state }) => {
+          const { from, to } = state.selection
+          if (from === to) return false
+          return commands.setMark(this.name, attrs)
+        },
+      unsetAppliedChangeMark:
+        () =>
+        ({ commands }) =>
+          commands.unsetMark(this.name),
+    }
+  },
+})