@tessera-editor/core 0.1.0 → 0.2.0

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tessera-editor/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Tessera framework-agnostic editor core",
   "license": "MIT",
   "type": "module",

package/src/__tests__/host-config.test.ts

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest'
+import {
+  createTesseraSchema,
+  filterSlashItems,
+  defaultSlashItems,
+  createTesseraT,
+} from '../index'
+import { docToMarkdown, markdownToDoc } from '../markdown'
+
+/**
+ * Host configuration surface (block policy + headless schema factory):
+ * excludeBlocks must remove the node from the schema entirely — the editor
+ * can neither create nor parse it — while conversion helpers stay consistent
+ * with the mounted editor's schema.
+ */
+
+const RESTRICTED = ['hint', 'collapsible', 'embedBlock', 'tocBlock', 'horizontalRule']
+
+describe('createTesseraSchema / excludeBlocks', () => {
+  it('excluded block types are absent from the schema; kept types remain', () => {
+    const schema = createTesseraSchema({ locale: 'zh-CN', excludeBlocks: RESTRICTED })
+    for (const name of RESTRICTED) {
+      expect(schema.nodes[name], `${name} 应被剔除`).toBeUndefined()
+    }
+    for (const name of [
+      'paragraph',
+      'heading',
+      'bulletList',
+      'orderedList',
+      'taskList',
+      'blockquote',
+      'codeBlock',
+      'imageBlock',
+      'table',
+    ]) {
+      expect(schema.nodes[name], `${name} 应保留`).toBeDefined()
+    }
+  })
+
+  it('default preset keeps every block type', () => {
+    const schema = createTesseraSchema()
+    for (const name of RESTRICTED) {
+      expect(schema.nodes[name]).toBeDefined()
+    }
+  })
+
+  it('markdown roundtrip works on the restricted schema', () => {
+    const schema = createTesseraSchema({ excludeBlocks: RESTRICTED })
+    const md = [
+      '# 背景',
+      '',
+      '正文段落。',
+      '',
+      '- 甲',
+      '- 乙',
+      '',
+      '1. 一',
+      '2. 二',
+      '',
+      '- [x] 已办',
+      '- [ ] 待办',
+      '',
+      '> 引用',
+      '',
+      '```ts',
+      'const a = 1',
+      '```',
+      '',
+      '![图](https://example.com/a.png)',
+    ].join('\n')
+    const doc = markdownToDoc(md, schema)
+    const out = docToMarkdown(doc, schema)
+    expect(out).toContain('# 背景')
+    expect(out).toContain('正文段落。')
+    expect(out).toContain('甲')
+    expect(out).toContain('1. 一')
+    expect(out).toContain('[x] 已办')
+    expect(out).toContain('> 引用')
+    expect(out).toContain('```ts')
+    expect(out).toContain('a.png')
+  })
+})
+
+describe('filterSlashItems', () => {
+  const t = createTesseraT('zh-CN')
+
+  it('drops items whose node type is excluded (id → node aliasing)', () => {
+    const filtered = filterSlashItems(defaultSlashItems(t), RESTRICTED)
+    const ids = new Set(filtered.map(item => item.id))
+    for (const gone of ['hint', 'collapsible', 'embed', 'toc', 'divider']) {
+      expect(ids.has(gone), `${gone} 应从斜杠菜单剔除`).toBe(false)
+    }
+    for (const kept of [
+      'text',
+      'h1',
+      'h4',
+      'bulletList',
+      'orderedList',
+      'taskList',
+      'quote',
+      'codeBlock',
+      'image',
+      'table',
+    ]) {
+      expect(ids.has(kept), `${kept} 应保留`).toBe(true)
+    }
+  })
+
+  it('no exclusion → list unchanged', () => {
+    const items = defaultSlashItems(t)
+    expect(filterSlashItems(items)).toEqual(items)
+    expect(filterSlashItems(items, [])).toEqual(items)
+  })
+})

package/src/__tests__/linkedit.test.ts

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { createTesseraExtensions } from '../preset'
+import { findLinkRange, saveLinkRange, removeLinkRange } from '../linkedit'
+
+function makeEditor() {
+  return new Editor({ extensions: createTesseraExtensions({ locale: 'zh-CN' }) })
+}
+
+const docWithLink = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'see ' },
+        {
+          type: 'text',
+          text: 'Tessera docs',
+          marks: [{ type: 'link', attrs: { href: 'https://example.com' } }],
+        },
+        { type: 'text', text: ' now' },
+      ],
+    },
+  ],
+}
+
+// 'see ' occupies doc positions 1..5, the link text 5..17
+const LINK_START = 5
+const LINK_END = 17
+
+describe('link click-to-edit helpers', () => {
+  it('finds the link range from a caret inside the link', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_START + 3)
+    expect(range).not.toBeNull()
+    expect(range!.from).toBe(LINK_START)
+    expect(range!.to).toBe(LINK_END)
+    expect(range!.text).toBe('Tessera docs')
+    expect(range!.href).toBe('https://example.com')
+  })
+
+  it('resolves a caret parked at the link end via the pos-1 fallback', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_END)
+    expect(range).not.toBeNull()
+    expect(range!.text).toBe('Tessera docs')
+  })
+
+  it('returns null in plain text', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    expect(findLinkRange(ed, 2)).toBeNull()
+  })
+
+  it('save keeps the text and updates only the href', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_START + 1)!
+    saveLinkRange(ed, range, { text: range.text, href: 'https://new.example.com' })
+    const after = findLinkRange(ed, LINK_START + 1)!
+    expect(after.href).toBe('https://new.example.com')
+    expect(after.text).toBe('Tessera docs')
+    expect(ed.state.doc.textBetween(1, ed.state.doc.content.size, '\n')).toBe('see Tessera docs now')
+  })
+
+  it('save replaces the display text while keeping the link', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_START + 1)!
+    saveLinkRange(ed, range, { text: '官方文档', href: range.href })
+    const after = findLinkRange(ed, LINK_START + 1)!
+    expect(after.text).toBe('官方文档')
+    expect(after.href).toBe('https://example.com')
+    expect(ed.state.doc.textBetween(1, ed.state.doc.content.size, '\n')).toBe('see 官方文档 now')
+  })
+
+  it('remove strips the link mark but keeps the text', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_START + 1)!
+    removeLinkRange(ed, range)
+    expect(findLinkRange(ed, LINK_START + 1)).toBeNull()
+    expect(ed.state.doc.textBetween(1, ed.state.doc.content.size, '\n')).toBe('see Tessera docs now')
+  })
+
+  it('saving an empty href degrades to plain text', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithLink)
+    const range = findLinkRange(ed, LINK_START + 1)!
+    saveLinkRange(ed, range, { text: range.text, href: '   ' })
+    expect(findLinkRange(ed, LINK_START + 1)).toBeNull()
+    expect(ed.state.doc.textBetween(1, ed.state.doc.content.size, '\n')).toBe('see Tessera docs now')
+  })
+})

package/src/__tests__/table-guard.test.ts

@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { createTesseraExtensions } from '../preset'
+import { cellKindAt } from '../nodes/table'
+
+function makeEditor() {
+  return new Editor({ extensions: createTesseraExtensions({ locale: 'zh-CN' }) })
+}
+
+const docWithTypedTable = {
+  type: 'doc',
+  content: [
+    {
+      type: 'table',
+      attrs: { types: ['text', 'date'] },
+      content: [
+        {
+          type: 'tableRow',
+          content: [
+            { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: '任务' }] }] },
+            { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: '日期' }] }] },
+          ],
+        },
+        {
+          type: 'tableRow',
+          content: [
+            { type: 'tableCell', content: [{ type: 'paragraph', content: [{ type: 'text', text: '行A' }] }] },
+            {
+              type: 'tableCell',
+              attrs: { value: '2026-01-01' },
+              content: [{ type: 'paragraph', content: [{ type: 'text', text: '残留文本' }] }],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+function cellPositions(editor: Editor) {
+  const out = { text: -1, typed: -1, typedFrom: 0, typedTo: 0 }
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'tableCell') {
+      const text = node.textContent
+      if (text === '行A') out.text = pos + 1
+      if (text === '残留文本') {
+        out.typed = pos + 1
+        out.typedFrom = pos + 1
+        out.typedTo = pos + node.nodeSize - 1
+      }
+    }
+    return undefined as never
+  })
+  return out
+}
+
+describe('typed cell guard', () => {
+  it('cellKindAt resolves typed vs text vs non-cell positions', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithTypedTable)
+    const p = cellPositions(ed)
+    expect(cellKindAt(ed.state.doc, p.typed)).toBe('date')
+    expect(cellKindAt(ed.state.doc, p.text)).toBe('text')
+    expect(cellKindAt(ed.state.doc, 0)).toBeNull()
+  })
+
+  it('blocks text input and clicks in typed cells only', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithTypedTable)
+    const p = cellPositions(ed)
+    // someProp aggregates plugins; capture every handler's verdict instead
+    const results: unknown[] = []
+    const tryProp = (prop: string, run: (f: unknown) => unknown) => {
+      results.length = 0
+      ;(ed.view.someProp as (prop2: string, f: (x: unknown) => unknown) => unknown)(prop, f => {
+        results.push(run(f))
+        return undefined // keep aggregating every plugin's verdict
+      })
+      return results
+    }
+    const inputTyped = tryProp('handleTextInput', f =>
+      (f as (v: unknown, from: number, to: number, text: string) => boolean)(ed.view, p.typed, p.typed, 'x'),
+    )
+    expect(inputTyped.some(v => v === true)).toBe(true) // typed cell: input blocked
+    const inputText = tryProp('handleTextInput', f =>
+      (f as (v: unknown, from: number, to: number, text: string) => boolean)(ed.view, p.text, p.text, 'x'),
+    )
+    expect(inputText.every(v => v !== true)).toBe(true) // text cell: normal editing
+    const clickTyped = tryProp('handleClick', f =>
+      (f as (v: unknown, pos: number, e: unknown) => boolean)(ed.view, p.typed, {}),
+    )
+    expect(clickTyped.some(v => v === true)).toBe(true)
+  })
+
+  it('atomicRanges covers typed cell content so the caret skips it', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithTypedTable)
+    const p = cellPositions(ed)
+    const collected: { from: number; to: number }[][] = []
+    ;(ed.view.someProp as (prop: string, f: (x: unknown) => unknown) => unknown)('atomicRanges', f => {
+      collected.push((f as (s: unknown) => { from: number; to: number }[])(ed.state))
+      return undefined
+    })
+    const ranges = collected.flat()
+    expect(ranges.some(r => r.from <= p.typed && r.to >= p.typedTo)).toBe(true)
+  })
+
+  it('normalizeTypedCells strips stray text in typed cells only', () => {
+    const ed = makeEditor()
+    ed.commands.setContent(docWithTypedTable)
+    expect(ed.commands.normalizeTypedCells()).toBe(true)
+    const table = ed.state.doc.nodeAt(0)!
+    const bodyRow = table.child(1)
+    expect(bodyRow.child(0).textContent).toBe('行A') // text column untouched
+    expect(bodyRow.child(1).textContent).toBe('') // typed column cleaned
+    const header = table.child(0)
+    expect(header.child(1).textContent).toBe('日期') // header text untouched
+  })
+
+  it('setColumnType to a typed kind clears that column’s stray text', () => {
+    const ed = makeEditor()
+    const plain = {
+      type: 'doc',
+      content: [
+        {
+          type: 'table',
+          attrs: { types: ['text', 'text'] },
+          content: [
+            {
+              type: 'tableRow',
+              content: [
+                { type: 'tableHeader', content: [{ type: 'paragraph' }] },
+                { type: 'tableHeader', content: [{ type: 'paragraph' }] },
+              ],
+            },
+            {
+              type: 'tableRow',
+              content: [
+                { type: 'tableCell', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A1' }] }] },
+                { type: 'tableCell', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'B1' }] }] },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+    ed.commands.setContent(plain)
+    ed.commands.setColumnType(1, 'number')
+    const table = ed.state.doc.nodeAt(0)!
+    const bodyRow = table.child(1)
+    expect(bodyRow.child(0).textContent).toBe('A1')
+    expect(bodyRow.child(1).textContent).toBe('')
+  })
+})