@puredesktop/platform-editor 1.0.0-beta.1

package/src/editorExtensions.ts

@@ -0,0 +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
+}

package/src/extensions/appliedChangeMark.ts

@@ -0,0 +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),
+    }
+  },
+})