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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puredesktop/platform-editor",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "TipTap editor package for PureScience plugin apps",
   "type": "module",
   "repository": {

package/src/CollapsePanel.tsx

@@ -1,35 +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;
-`
+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

@@ -1,130 +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
+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

@@ -1,118 +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])
-  })
-})
+// @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])
+  })
+})