@tessera-editor/core 0.1.0 → 0.2.0

package/src/preset.ts

@@ -1,4 +1,6 @@
+import { getSchema } from '@tiptap/core'
 import type { Extensions } from '@tiptap/core'
+import type { Schema } from '@tiptap/pm/model'
 import StarterKit from '@tiptap/starter-kit'
 import { TaskList, TaskItem } from '@tiptap/extension-list'
 import { TextStyle } from '@tiptap/extension-text-style'
@@ -14,24 +16,33 @@ import { EmbedBlock } from './nodes/embed'
 import { TocBlock } from './nodes/toc'
 import { AiAttribution } from './marks/ai'
 import { CommentMark, CommentCommands } from './marks/comment'
-import { PlaceholderMark, PlaceholderCommands } from './marks/placeholder'
 import { TesseraInputRules } from './extensions/input-rules'
 import { TesseraShortcuts } from './extensions/shortcuts'
 import { TesseraFindReplace } from './extensions/find-replace'
 import { SlashMenu } from './extensions/slash'
 import { EmojiMenu } from './extensions/emoji'
-import { TesseraHistory } from './extensions/history'
 import { BlockContextMenu } from './extensions/context-menu'
 import { TesseraGallery } from './extensions/gallery'
 import { TesseraMetrics } from './extensions/metrics'
 import { TesseraWordPaste } from './extensions/word-paste'
 import { TesseraServices } from './services'
-import { createTesseraT, type TesseraLocale } from './i18n'
+import { createTesseraT, type TesseraLocale, type TesseraMessageOverrides } from './i18n'
 
 export interface TesseraPresetOptions {
   locale?: TesseraLocale
-  /** v1.1 history auto-capture idle window (playground uses a short one) */
-  historyIdleMs?: number
+  /** Empty-paragraph placeholder text (default: the i18n `placeholderEmpty` string). */
+  placeholder?: string
+  /** Per-key overrides of the built-in UI dictionary (slash items, tooltips…). */
+  messages?: TesseraMessageOverrides
+  /**
+   * Host block policy: top-level block types to exclude entirely. An excluded
+   * node is dropped from the extension preset, the slash menu, UniqueID's id
+   * list and the keyboard shortcuts that produce it — the editor cannot create
+   * it and rejects its JSON on parse. Recognized names: `hint`, `collapsible`,
+   * `embedBlock`, `tocBlock`, `horizontalRule`, `table`, `taskList`,
+   * `imageBlock`.
+   */
+  excludeBlocks?: string[]
 }
 
 /** Node types that receive stable block IDs (write-back protocol basis). */
@@ -55,12 +66,38 @@ export const ID_BLOCK_TYPES = [
   'tocBlock',
 ]
 
+/**
+ * Every top-level block type the FULL preset can emit into the canonical JSON.
+ * Hosts gating saves server-side (a block whitelist) should align their list
+ * with this one; `excludeBlocks` trims the editor to match a narrower policy.
+ * (Nested containers — listItem/taskItem/tableRow — are not listed: they only
+ * appear inside their parents.)
+ */
+export const SUPPORTED_BLOCK_TYPES = [
+  'paragraph',
+  'heading',
+  'bulletList',
+  'orderedList',
+  'taskList',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  'imageBlock',
+  'table',
+  'hint',
+  'collapsible',
+  'embedBlock',
+  'tocBlock',
+] as const
+
 /**
  * The Tessera extension preset: framework-agnostic, UI-free. The binding layers
  * rendering (slash menu renderer, node views) on top of this.
  */
 export function createTesseraExtensions(options: TesseraPresetOptions = {}): Extensions {
-  const t = createTesseraT(options.locale ?? 'zh-CN')
+  const t = createTesseraT(options.locale ?? 'zh-CN', options.messages)
+  const excluded = new Set(options.excludeBlocks ?? [])
+  const keep = (name: string): boolean => !excluded.has(name)
 
   return [
     StarterKit.configure({
@@ -72,46 +109,48 @@ export function createTesseraExtensions(options: TesseraPresetOptions = {}): Ext
       },
       // undoRedo keeps defaults (newGroupDelay 500ms): streaming AI chunks
       // arriving faster than that already merge into one undo step.
+      horizontalRule: keep('horizontalRule') ? undefined : false,
     }),
     TextStyle,
     Color,
     Highlight.configure({ multicolor: true }),
-    TaskList,
-    TaskItem.configure({ nested: true }),
-    Hint,
-    Collapsible,
-    CollapsibleSummary,
-    CollapsibleContent,
-    ImageBlock,
-    AiTable,
-    AiTableRow,
-    AiTableCell,
-    AiTableHeader,
-    EmbedBlock,
-    TocBlock,
+    ...(keep('taskList') ? [TaskList, TaskItem.configure({ nested: true })] : []),
+    ...(keep('hint') ? [Hint] : []),
+    ...(keep('collapsible') ? [Collapsible, CollapsibleSummary, CollapsibleContent] : []),
+    ...(keep('imageBlock') ? [ImageBlock] : []),
+    ...(keep('table') ? [AiTable, AiTableRow, AiTableCell, AiTableHeader] : []),
+    ...(keep('embedBlock') ? [EmbedBlock] : []),
+    ...(keep('tocBlock') ? [TocBlock] : []),
     AiAttribution,
     CommentMark,
     CommentCommands,
-    PlaceholderMark,
-    PlaceholderCommands,
     UniqueID.configure({
-      types: ID_BLOCK_TYPES,
+      types: ID_BLOCK_TYPES.filter(keep),
       attributeName: 'id',
     }),
     Placeholder.configure({
-      placeholder: ({ node }) => (node.type.name === 'paragraph' ? t('placeholderEmpty') : ''),
+      placeholder: ({ node }) =>
+        node.type.name === 'paragraph' ? (options.placeholder ?? t('placeholderEmpty')) : '',
       showOnlyWhenEditable: true,
     }),
     TesseraInputRules,
     TesseraShortcuts,
     TesseraFindReplace,
-    TesseraHistory.configure({ idleMs: options.historyIdleMs }),
     BlockContextMenu,
-    SlashMenu.configure({ locale: options.locale ?? 'zh-CN' }),
+    SlashMenu.configure({ locale: options.locale ?? 'zh-CN', excludeItems: options.excludeBlocks }),
     EmojiMenu,
-    TesseraGallery,
+    ...(keep('imageBlock') ? [TesseraGallery] : []),
     TesseraMetrics,
     TesseraWordPaste,
     TesseraServices,
   ]
 }
+
+/**
+ * ProseMirror schema for the preset without instantiating an editor — the
+ * headless entry for hosts that only need format conversion (markdown ⇄ JSON).
+ * Honors `excludeBlocks` so conversion always agrees with the mounted editor.
+ */
+export function createTesseraSchema(options: TesseraPresetOptions = {}): Schema {
+  return getSchema(createTesseraExtensions(options))
+}

package/src/services.ts

@@ -1,5 +1,4 @@
 import { Extension } from '@tiptap/core'
-import type { JSONContent } from '@tiptap/core'
 
 /**
  * Injected services (ADR-0001 family): the component family never performs
@@ -18,20 +17,6 @@ export interface UploadService {
   uploadFile?(file: File | Blob): Promise<UploadedAsset>
 }
 
-/** v1.1: persistent version history storage (snapshots keyed by time). */
-export interface DocSnapshot {
-  id: string
-  ts: number
-  doc: JSONContent
-  label?: string
-}
-
-export interface StorageService {
-  saveSnapshot(snapshot: DocSnapshot): Promise<void>
-  listSnapshots(): Promise<DocSnapshot[]>
-  deleteSnapshot?(id: string): Promise<void>
-}
-
 /** v1.1: inline comments. */
 export interface CommentEntry {
   id: string
@@ -55,14 +40,13 @@ export interface CommentStore {
   remove(id: string): Promise<void>
 }
 
-/** v1.1: who is editing (author of comments / history labels). */
+/** v1.1: who is editing (comment authorship). */
 export interface IdentityService {
   getCurrentUser(): { id: string; name: string } | null
 }
 
 export interface TesseraServicesStorage {
   upload?: UploadService
-  storage?: StorageService
   comments?: CommentStore
   identity?: IdentityService
 }
@@ -73,7 +57,6 @@ export const TesseraServices = Extension.create({
   addStorage() {
     return {
       upload: undefined,
-      storage: undefined,
       comments: undefined,
       identity: undefined,
     } satisfies TesseraServicesStorage
@@ -90,10 +73,6 @@ export function getUploadService(editor: ServicesEditor): UploadService | undefi
   return servicesBag(editor)?.upload
 }
 
-export function getStorageService(editor: ServicesEditor): StorageService | undefined {
-  return servicesBag(editor)?.storage
-}
-
 export function getCommentStore(editor: ServicesEditor): CommentStore | undefined {
   return servicesBag(editor)?.comments
 }

package/src/styles/tessera.css

@@ -466,6 +466,58 @@
   align-items: center;
   gap: 6px;
 }
+/* click-to-edit link panel: opens anchored to a clicked link, column layout */
+.tessera-link-editor {
+  position: fixed;
+  width: 320px;
+  z-index: 85;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  background: var(--te-bg);
+  border: 1px solid var(--te-border);
+  border-radius: 10px;
+  box-shadow: var(--te-shadow-pop);
+  font-family: var(--te-font);
+}
+.tessera-link-editor input {
+  width: 100%;
+  height: 30px;
+  border: 1px solid var(--te-border);
+  border-radius: 6px;
+  padding: 0 8px;
+  font-size: 13px;
+  font-family: var(--te-font);
+  background: var(--te-bg);
+  color: var(--te-text);
+  outline: none;
+}
+.tessera-link-editor input:focus {
+  border-color: var(--te-accent);
+}
+.tessera-link-editor-row {
+  display: flex;
+  gap: 6px;
+}
+.tessera-link-editor-row button {
+  border: 1px solid var(--te-border);
+  background: var(--te-bg);
+  color: var(--te-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--te-font);
+  padding: 5px 12px;
+  border-radius: 6px;
+}
+.tessera-link-editor-row button:hover:not(:disabled) {
+  border-color: var(--te-accent);
+  color: var(--te-accent);
+}
+.tessera-link-editor-row button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .tessera-link-popover input {
   width: 220px;
   height: 30px;
@@ -648,8 +700,10 @@
   position: absolute;
   top: 48px;
   right: 8px;
-  bottom: 8px;
   width: 300px;
+  /* hug content by default; only stretch toward a viewport-ish cap when the
+     conversation grows (body scrolls past the cap via flex + overflow) */
+  max-height: min(520px, calc(100% - 56px));
   z-index: 55;
   display: flex;
   flex-direction: column;
@@ -802,6 +856,46 @@
   max-height: 90vh;
   border-radius: 8px;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  transition: transform 0.15s ease;
+}
+.tessera-lightbox-bar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(24, 26, 34, 0.78);
+  color: #e8eaf0;
+  font-size: 12px;
+  font-family: var(--te-font);
+  user-select: none;
+  cursor: default;
+}
+.tessera-lightbox-bar button {
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+.tessera-lightbox-bar button:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+.tessera-lightbox-scale {
+  min-width: 46px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.tessera-lightbox-hint {
+  margin-left: 8px;
+  opacity: 0.55;
 }
 
 /* ---------- v1.1 additions: gallery / emoji picker ---------- */
@@ -909,16 +1003,18 @@
   display: table-cell;
 }
 
-/* freeze first column (Slite behavior) */
-.tessera-doc table[data-freeze-first='true'] td:first-child,
-.tessera-doc table[data-freeze-first='true'] th:first-child {
+/* freeze first column (Slite behavior). NOT :first-child — every cell sits
+   inside its own .react-renderer wrapper, so each one IS a :first-child
+   there; select by the column index the node views render instead. */
+.tessera-doc table[data-freeze-first='true'] td[data-index='0'],
+.tessera-doc table[data-freeze-first='true'] th[data-index='0'] {
   position: sticky;
   left: 0;
   background: #fff;
   z-index: 2;
   box-shadow: 1px 0 0 var(--te-border);
 }
-.tessera-doc table[data-freeze-first='true'] th:first-child {
+.tessera-doc table[data-freeze-first='true'] th[data-index='0'] {
   background: #fafbfc;
 }
 
@@ -954,18 +1050,25 @@
 
 .tessera-col-menu {
   flex-direction: column;
+  flex-wrap: nowrap; /* .tessera-popover wraps; wrapped columns would spill sideways */
   align-items: stretch;
-  width: 190px;
+  width: 210px;
   max-height: 320px;
-  overflow-y: auto;
-  top: calc(100% + 6px);
+  /* the menu is fixed-positioned and portaled out of the table; the old
+     top: calc(100%+6px) anchor only made sense for the inline variant */
+  top: auto;
+  overflow: hidden auto;
 }
 
 .tessera-menu-section {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2px;
 }
+.tessera-menu-section button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .tessera-menu-sep {
   height: 1px;
@@ -1087,8 +1190,7 @@
   border-bottom: 2px dotted #e0c96b;
 }
 
-.tessera-comment-panel,
-.tessera-history-panel {
+.tessera-comment-panel {
   position: absolute;
   top: 48px;
   right: 8px;
@@ -1105,106 +1207,6 @@
   overflow: hidden;
 }
 
-.tessera-history-body {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 168px 1fr;
-  overflow: hidden;
-}
-
-.tessera-history-list {
-  border-right: 1px solid var(--te-border);
-  overflow-y: auto;
-  padding: 6px;
-}
-
-.tessera-history-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  width: 100%;
-  border: none;
-  background: none;
-  text-align: left;
-  padding: 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.tessera-history-item[data-selected='true'],
-.tessera-history-item:hover {
-  background: var(--te-bg-hover);
-}
-
-.tessera-history-time {
-  color: var(--te-text-soft);
-  font-variant-numeric: tabular-nums;
-}
-
-.tessera-history-label {
-  color: var(--te-text);
-  font-weight: 600;
-}
-
-.tessera-history-action {
-  color: var(--te-accent);
-  font-size: 12px;
-}
-
-.tessera-history-diff {
-  overflow-y: auto;
-  padding: 10px;
-  font-size: 12.5px;
-}
-
-.tessera-diff-summary {
-  color: var(--te-text-faint);
-  padding-bottom: 8px;
-  border-bottom: 1px dashed var(--te-border);
-  margin-bottom: 8px;
-}
-
-.tessera-diff-block {
-  padding: 6px 8px;
-  border-radius: 6px;
-  margin-bottom: 6px;
-  border: 1px solid var(--te-border);
-}
-
-.tessera-diff-badge {
-  display: inline-block;
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  margin-right: 6px;
-  text-transform: uppercase;
-  color: #fff;
-}
-
-.tessera-diff-block--added .tessera-diff-badge { background: #31a56f; }
-.tessera-diff-block--removed .tessera-diff-badge { background: #d9414f; }
-.tessera-diff-block--changed .tessera-diff-badge { background: #e8912d; }
-
-.tessera-diff-part--add { background: #e3f7ec; text-decoration: none; }
-.tessera-diff-part--del { background: #fde7e9; text-decoration: line-through; }
-
-.tessera-history-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.tessera-history-actions button {
-  border: none;
-  background: var(--te-bg-soft);
-  border-radius: 6px;
-  height: 24px;
-  padding: 0 10px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--te-text);
-}
-
 /* comments */
 .tessera-thread {
   border: 1px solid var(--te-border);
@@ -1311,15 +1313,7 @@
   opacity: 0.5;
 }
 
-/* ---------- v1.1: placeholder mark / embed / toc ---------- */
-
-.tessera-doc [data-type='tessera-placeholder'] {
-  border-bottom: 2px dashed #b6bcc4;
-  background: #f6f7f9;
-  border-radius: 3px;
-  padding: 0 3px;
-  color: var(--te-text-soft);
-}
+/* ---------- v1.1: embed / toc ---------- */
 
 .tessera-embed {
   margin: 0.6em 0;
@@ -1489,3 +1483,21 @@
   user-select: none;
   padding: 2px;
 }
+
+/* ---------- read-only mode (host passes `editable={false}`) ---------- */
+
+/* the doc can't be focused, so toolbars/menus never trigger; hide what would
+   still render. The drag handle floats outside .tessera-root (body-appended),
+   hence the :has() form. */
+.tessera-root[data-readonly='true'] .tessera-doc {
+  cursor: default;
+}
+.tessera-root[data-readonly='true'] .tessera-doc a {
+  cursor: pointer;
+}
+.tessera-root[data-readonly='true'] .tessera-col-menu-btn {
+  display: none;
+}
+body:has(.tessera-root[data-readonly='true']) .drag-handle {
+  display: none !important;
+}

package/src/diff.ts

@@ -1,150 +0,0 @@
-import type { JSONContent } from '@tiptap/core'
-
-/**
- * Document diff (v1.1 history panel): block-level via stable ids (LCS on the
- * id sequence) + word-level inside changed text blocks. Pure utility — the
- * panel renders it.
- */
-
-export interface WordDiffPart {
-  text: string
-  type: 'same' | 'add' | 'del'
-}
-
-export interface BlockDiffEntry {
-  kind: 'added' | 'removed' | 'changed' | 'unchanged'
-  id?: string
-  before?: JSONContent
-  after?: JSONContent
-  wordDiff?: WordDiffPart[]
-}
-
-function topLevel(doc: JSONContent): JSONContent[] {
-  return doc.content ?? []
-}
-
-function blockId(block: JSONContent): string | null {
-  const id = block.attrs?.id
-  return typeof id === 'string' ? id : null
-}
-
-function collectText(node: JSONContent): string {
-  let text = ''
-  if (node.text) {
-    text += node.text
-  }
-  for (const child of node.content ?? []) {
-    text += collectText(child)
-  }
-  return text
-}
-
-function tokenize(text: string): string[] {
-  return text.match(/[\u4e00-\u9fa5]|[a-zA-Z0-9]+|\s+|[^\sa-zA-Z0-9\u4e00-\u9fa5]/g) ?? []
-}
-
-/** Classic LCS word diff with a size guard. */
-export function wordDiff(beforeText: string, afterText: string): WordDiffPart[] {
-  const a = tokenize(beforeText)
-  const b = tokenize(afterText)
-  if (a.length * b.length > 4_000_000) {
-    return [
-      { text: beforeText, type: 'del' },
-      { text: afterText, type: 'add' },
-    ]
-  }
-  // dp[i][j] = LCS length of a[i:], b[j:]
-  const dp: Uint32Array[] = Array.from({ length: a.length + 1 }, () => new Uint32Array(b.length + 1))
-  for (let i = a.length - 1; i >= 0; i--) {
-    for (let j = b.length - 1; j >= 0; j--) {
-      dp[i]![j] = a[i] === b[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!)
-    }
-  }
-  const parts: WordDiffPart[] = []
-  const push = (text: string, type: WordDiffPart['type']) => {
-    const last = parts[parts.length - 1]
-    if (last && last.type === type) {
-      last.text += text
-    } else {
-      parts.push({ text, type })
-    }
-  }
-  let i = 0
-  let j = 0
-  while (i < a.length && j < b.length) {
-    if (a[i] === b[j]) {
-      push(a[i]!, 'same')
-      i++
-      j++
-    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
-      push(a[i]!, 'del')
-      i++
-    } else {
-      push(b[j]!, 'add')
-      j++
-    }
-  }
-  while (i < a.length) {
-    push(a[i++]!, 'del')
-  }
-  while (j < b.length) {
-    push(b[j++]!, 'add')
-  }
-  return parts
-}
-
-function sameBlock(a: JSONContent, b: JSONContent): boolean {
-  return JSON.stringify(a) === JSON.stringify(b)
-}
-
-export function diffDocs(before: JSONContent, after: JSONContent): BlockDiffEntry[] {
-  const beforeBlocks = topLevel(before)
-  const afterBlocks = topLevel(after)
-  const afterById = new Map<string, JSONContent>()
-  for (const block of afterBlocks) {
-    const id = blockId(block)
-    if (id) {
-      afterById.set(id, block)
-    }
-  }
-  const seen = new Set<string>()
-  const entries: BlockDiffEntry[] = []
-
-  for (const block of beforeBlocks) {
-    const id = blockId(block)
-    if (id && afterById.has(id)) {
-      seen.add(id)
-      const next = afterById.get(id)!
-      if (sameBlock(block, next)) {
-        entries.push({ kind: 'unchanged', id, before: block, after: next })
-      } else {
-        entries.push({ kind: 'changed', id, before: block, after: next, wordDiff: wordDiff(collectText(block), collectText(next)) })
-      }
-    } else {
-      entries.push({ kind: 'removed', id: id ?? undefined, before: block })
-    }
-  }
-  for (const block of afterBlocks) {
-    const id = blockId(block)
-    if (id && seen.has(id)) {
-      continue
-    }
-    if (!id || !beforeBlocks.some(b => blockId(b) === id)) {
-      entries.push({ kind: 'added', id: id ?? undefined, after: block })
-    }
-  }
-  return entries
-}
-
-/** Compact summary for the panel header. */
-export function diffSummary(entries: BlockDiffEntry[]): { added: number; removed: number; changed: number } {
-  let added = 0
-  let removed = 0
-  let changed = 0
-  for (const entry of entries) {
-    if (entry.kind === 'added') added++
-    else if (entry.kind === 'removed') removed++
-    else if (entry.kind === 'changed') changed++
-  }
-  return { added, removed, changed }
-}