@puredesktop/platform-editor 1.0.0-beta.1

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@puredesktop/platform-editor",
+  "version": "1.0.0-beta.1",
+  "description": "TipTap editor package for PureScience plugin apps",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nikau-Dev/ps-suite.git",
+    "directory": "packages/editor"
+  },
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@tiptap/extension-character-count": "^3.23.6",
+    "@tiptap/extension-code-block-lowlight": "^3.23.6",
+    "@tiptap/extension-highlight": "^3.0.0",
+    "@tiptap/extension-image": "^3.23.1",
+    "@tiptap/extension-mathematics": "^3.23.6",
+    "@tiptap/extension-placeholder": "^3.0.0",
+    "@tiptap/extension-subscript": "^3.23.6",
+    "@tiptap/extension-superscript": "^3.23.6",
+    "@tiptap/extension-table": "^3.0.0",
+    "@tiptap/extension-task-item": "^3.0.0",
+    "@tiptap/extension-task-list": "^3.0.0",
+    "@tiptap/extension-text-align": "^3.0.0",
+    "@tiptap/pm": "^3.0.0",
+    "@tiptap/react": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
+    "katex": "^0.16.22",
+    "lowlight": "^3.3.0",
+    "marked": "^17.0.0",
+    "diff": "^7.0.0",
+    "mermaid": "^11.15.0",
+    "styled-components": "^6.1.18",
+    "turndown": "^7.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "@types/diff": "^7.0.0",
+    "@types/turndown": "^5.0.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vitest": "^3.2.4"
+  }
+}

package/src/CollapsePanel.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface CollapsePanelProps {
+  open: boolean
+  children: ReactNode
+  className?: string
+}
+
+export function CollapsePanel({
+  open,
+  children,
+  className,
+}: CollapsePanelProps): React.ReactElement {
+  return (
+    <StyledPanel data-open={open} className={className}>
+      <StyledInner>{children}</StyledInner>
+    </StyledPanel>
+  )
+}
+
+const StyledPanel = styled.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+  overflow: hidden;
+
+  &[data-open='true'] {
+    grid-template-rows: 1fr;
+  }
+`
+
+const StyledInner = styled.div`
+  min-height: 0;
+`

package/src/DocumentDiffView.tsx

@@ -0,0 +1,130 @@
+import { useMemo, type ReactElement } from 'react'
+import { styled } from 'styled-components'
+import {
+  buildAlignedLineDiff,
+  type AlignedDiffLine,
+  type AlignedDiffLineKind,
+} from './alignedLineDiff.js'
+
+export interface DocumentDiffViewProps {
+  left: string
+  right: string
+  leftLabel?: string
+  rightLabel?: string
+}
+
+export function DocumentDiffView({
+  left,
+  right,
+  leftLabel = 'Yours',
+  rightLabel = 'On disk',
+}: DocumentDiffViewProps): ReactElement {
+  const { leftLines, rightLines } = useMemo(
+    () => buildAlignedLineDiff(left, right),
+    [left, right],
+  )
+
+  return (
+    <StyledRoot>
+      <StyledHeader>
+        <StyledColumnHeader $tone="left">{leftLabel}</StyledColumnHeader>
+        <StyledColumnHeader $tone="right">{rightLabel}</StyledColumnHeader>
+      </StyledHeader>
+      <StyledGrid>
+        <StyledColumn>
+          {leftLines.map((line, index) => (
+            <DiffLineRow key={`left-${index}`} line={line} />
+          ))}
+        </StyledColumn>
+        <StyledColumn>
+          {rightLines.map((line, index) => (
+            <DiffLineRow key={`right-${index}`} line={line} />
+          ))}
+        </StyledColumn>
+      </StyledGrid>
+    </StyledRoot>
+  )
+}
+
+function DiffLineRow({ line }: { line: AlignedDiffLine }): ReactElement {
+  return (
+    <StyledLine $kind={line.kind}>
+      <StyledLineNo>{line.lineNumber ?? ''}</StyledLineNo>
+      <StyledLineText>{line.text || '\u00a0'}</StyledLineText>
+    </StyledLine>
+  )
+}
+
+//#region styled-components
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`
+
+const StyledHeader = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--platform-spacing-sm);
+  margin-bottom: var(--platform-spacing-sm);
+`
+
+const StyledColumnHeader = styled.div<{ $tone: 'left' | 'right' }>`
+  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  color: ${({ $tone }) =>
+    $tone === 'left'
+      ? 'var(--platform-colors-accent)'
+      : 'var(--platform-colors-text-secondary)'};
+`
+
+const StyledGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--platform-spacing-sm);
+  max-height: 60vh;
+  overflow: auto;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  background: var(--platform-colors-bg);
+`
+
+const StyledColumn = styled.div`
+  font-family: var(--platform-typography-font-family-mono);
+  font-size: 12px;
+  line-height: 1.45;
+  padding: var(--platform-spacing-xs) 0;
+`
+
+const StyledLine = styled.div<{ $kind: AlignedDiffLineKind }>`
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  background: ${({ $kind }) =>
+    $kind === 'added'
+      ? 'rgb(from var(--platform-colors-success) r g b / 14%)'
+      : $kind === 'removed'
+      ? 'rgb(from var(--platform-colors-danger) r g b / 14%)'
+      : 'transparent'};
+  color: ${({ $kind }) =>
+    $kind === 'pad'
+      ? 'var(--platform-colors-text-disabled)'
+      : 'var(--platform-colors-text)'};
+  min-height: 17px;
+`
+
+const StyledLineNo = styled.div`
+  color: var(--platform-colors-text-disabled);
+  text-align: right;
+  padding-right: 8px;
+  user-select: none;
+`
+
+const StyledLineText = styled.div`
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding-right: var(--platform-spacing-sm);
+`
+
+//#endregion

package/src/DocumentEditor.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment happy-dom
+import type { Editor } from '@tiptap/core'
+import { describe, expect, it, vi } from 'vitest'
+import {
+  isReviewRailCommentType,
+  isSelectionAnnotatable,
+  progressiveAutoReviewBatches,
+} from './DocumentEditor.js'
+
+function mockEditorForNodes(
+  startNode: Node,
+  endNode: Node,
+  options: { editable?: boolean; destroyed?: boolean } = {},
+): Editor {
+  return {
+    isDestroyed: options.destroyed ?? false,
+    isEditable: options.editable ?? true,
+    view: {
+      domAtPos: vi.fn((pos: number) => ({
+        node: pos <= 1 ? startNode : endNode,
+      })),
+    },
+  } as unknown as Editor
+}
+
+describe('DocumentEditor annotation selection rules', () => {
+  it('shows rail badges for editorial review objects', () => {
+    expect(isReviewRailCommentType('copyedit')).toBe(true)
+    expect(isReviewRailCommentType('voice')).toBe(true)
+    expect(isReviewRailCommentType('claim')).toBe(true)
+    expect(isReviewRailCommentType('fact-check')).toBe(true)
+    expect(isReviewRailCommentType('general')).toBe(false)
+  })
+
+  it('allows non-empty selections in editable manuscript content', () => {
+    const paragraph = document.createElement('p')
+    const start = document.createTextNode('Selected')
+    const end = document.createTextNode(' text')
+    paragraph.append(start, end)
+    const editor = mockEditorForNodes(start, end)
+
+    expect(isSelectionAnnotatable(editor, 1, 4)).toBe(true)
+  })
+
+  it('does not offer annotation creation inside protected generated content', () => {
+    const referenceEntry = document.createElement('li')
+    referenceEntry.setAttribute('data-pm-reference-entry', 'true')
+    referenceEntry.setAttribute('contenteditable', 'false')
+    const start = document.createTextNode('Generated')
+    const end = document.createTextNode(' reference')
+    referenceEntry.append(start, end)
+    const editor = mockEditorForNodes(start, end)
+
+    expect(isSelectionAnnotatable(editor, 1, 4)).toBe(false)
+  })
+
+  it('does not offer annotation creation inside citation atoms', () => {
+    const citation = document.createElement('cite')
+    citation.className = 'ps-citation'
+    const start = document.createTextNode('[1')
+    const end = document.createTextNode(']')
+    citation.append(start, end)
+    const editor = mockEditorForNodes(start, end)
+
+    expect(isSelectionAnnotatable(editor, 1, 4)).toBe(false)
+  })
+
+  it('does not offer annotation creation for collapsed or read-only selections', () => {
+    const text = document.createTextNode('Text')
+
+    expect(isSelectionAnnotatable(mockEditorForNodes(text, text), 2, 2)).toBe(
+      false,
+    )
+    expect(
+      isSelectionAnnotatable(
+        mockEditorForNodes(text, text, { editable: false }),
+        1,
+        4,
+      ),
+    ).toBe(false)
+  })
+})
+
+describe('DocumentEditor progressive editorial review', () => {
+  it('front-loads small batches before larger background batches', () => {
+    const paragraphs = Array.from({ length: 31 }, (_, index) => ({
+      id: `p-${index + 1}`,
+      text: `Paragraph ${index + 1}`,
+      from: index + 1,
+      pos: index + 1,
+      to: index + 2,
+    }))
+
+    const batches = progressiveAutoReviewBatches(paragraphs)
+
+    expect(batches.map(batch => batch.length)).toEqual([3, 3, 3, 3, 12, 7])
+    expect(batches[0]?.map(paragraph => paragraph.id)).toEqual([
+      'p-1',
+      'p-2',
+      'p-3',
+    ])
+    expect(batches[4]?.[0]?.id).toBe('p-13')
+  })
+
+  it('keeps short documents in small startup batches only', () => {
+    const paragraphs = Array.from({ length: 5 }, (_, index) => ({
+      id: `p-${index + 1}`,
+      text: `Paragraph ${index + 1}`,
+      from: index + 1,
+      pos: index + 1,
+      to: index + 2,
+    }))
+
+    expect(
+      progressiveAutoReviewBatches(paragraphs).map(batch => batch.length),
+    ).toEqual([3, 2])
+  })
+})