@tessera-editor/core 0.1.0

package/src/nodes/collapsible.ts

@@ -0,0 +1,171 @@
+import { Node, mergeAttributes, InputRule } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface CollapsibleOptions {
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    collapsible: {
+      /** Replace the current empty paragraph with a collapsible block (input rule: `>>` + space). */
+      insertCollapsible: () => ReturnType
+    }
+  }
+}
+
+function collapsibleJSON(): Record<string, unknown> {
+  return {
+    type: 'collapsible',
+    attrs: { open: true },
+    content: [
+      { type: 'collapsibleSummary' },
+      {
+        type: 'collapsibleContent',
+        content: [{ type: 'paragraph' }],
+      },
+    ],
+  }
+}
+
+/**
+ * Slite-style Collapsible block: always-visible summary line + collapsible content,
+ * nested blocks allowed. Trigger: type `>>` followed by a space on an empty line.
+ */
+export const Collapsible = Node.create<CollapsibleOptions>({
+  name: 'collapsible',
+  group: 'block',
+  content: 'collapsibleSummary collapsibleContent',
+  defining: true,
+  isolating: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addAttributes() {
+    return {
+      open: {
+        default: true,
+        parseHTML: element => element.getAttribute('data-open') !== 'false',
+        renderHTML: attributes => ({ 'data-open': String(attributes.open) }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="collapsible"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes({ 'data-type': 'collapsible' }, this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      insertCollapsible: () => ({ state, chain }) => {
+        const { $from } = state.selection
+        if ($from.parent.type.name !== 'paragraph') {
+          return false
+        }
+        const from = $from.before()
+        const to = $from.after()
+        return chain()
+          .insertContentAt({ from, to }, collapsibleJSON())
+          .command(({ tr, dispatch }) => {
+            if (dispatch) {
+              tr.setSelection(TextSelection.near(tr.doc.resolve(from + 2)))
+            }
+            return true
+          })
+          .run()
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^(>{2}) $/,
+        handler: ({ state, range, chain }) => {
+          const $from = state.doc.resolve(range.from)
+          if ($from.parent.type.name !== 'paragraph') {
+            return
+          }
+          const from = $from.before()
+          const to = $from.after()
+          chain()
+            .insertContentAt({ from, to }, collapsibleJSON())
+            .command(({ tr, dispatch }) => {
+              if (dispatch) {
+                tr.setSelection(TextSelection.near(tr.doc.resolve(from + 2)))
+              }
+              return true
+            })
+            .run()
+        },
+      }),
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    const nodeName = this.name
+    return [
+      new Plugin({
+        key: new PluginKey('tesseraCollapsibleToggle'),
+        props: {
+          // Click on the summary toggles open/closed; collapsed state survives reload
+          // because it is a node attribute, not CSS state.
+          handleClickOn: (view, _pos, node, nodePos, event) => {
+            if (node.type.name !== nodeName) {
+              return false
+            }
+            const target = event.target as HTMLElement | null
+            if (!target?.closest('[data-type="collapsible-summary"]')) {
+              return false
+            }
+            view.dispatch(
+              view.state.tr.setNodeMarkup(nodePos, undefined, {
+                ...node.attrs,
+                open: !node.attrs.open,
+              }),
+            )
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})
+
+export const CollapsibleSummary = Node.create({
+  name: 'collapsibleSummary',
+  group: '',
+  content: 'inline*',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="collapsible-summary"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes({ 'data-type': 'collapsible-summary' }, HTMLAttributes), 0]
+  },
+})
+
+export const CollapsibleContent = Node.create({
+  name: 'collapsibleContent',
+  group: '',
+  content: 'block+',
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="collapsible-content"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes({ 'data-type': 'collapsible-content' }, HTMLAttributes), 0]
+  },
+})

package/src/nodes/embed.ts

@@ -0,0 +1,55 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+/**
+ * Sandboxed iframe embed (v1.1): default sandbox="" — NO scripts, NO
+ * same-origin. Hosts may opt into `allowScripts` per instance for app-like
+ * embeds; allow-same-origin is never combined with allow-scripts.
+ */
+export const EmbedBlock = Node.create({
+  name: 'embedBlock',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      title: { default: null },
+      height: { default: 360 },
+      allowScripts: { default: false },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="tessera-embed"]' }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, {
+        'data-type': 'tessera-embed',
+        'data-src': String(node.attrs.src ?? ''),
+        'data-height': String(node.attrs.height),
+        'data-allow-scripts': String(node.attrs.allowScripts),
+      }),
+    ]
+  },
+
+  addCommands() {
+    return {
+      insertEmbed:
+        (attrs: { src: string; height?: number; allowScripts?: boolean }) =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs }),
+    }
+  },
+})
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    embedBlock: {
+      insertEmbed: (attrs: { src: string; height?: number; allowScripts?: boolean }) => ReturnType
+    }
+  }
+}

package/src/nodes/hint.ts

@@ -0,0 +1,70 @@
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
+
+export type HintVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+
+export interface HintOptions {
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    hint: {
+      /** Wrap the current block into a hint container (input rule: `!! ` + space). */
+      setHint: (variant?: HintVariant) => ReturnType
+      toggleHint: () => ReturnType
+    }
+  }
+}
+
+/**
+ * Slite-style Hint block: a callout container that holds any block content.
+ * Trigger: type `!!` followed by a space at the start of a line.
+ */
+export const Hint = Node.create<HintOptions>({
+  name: 'hint',
+  group: 'block',
+  content: 'block+',
+  defining: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addAttributes() {
+    return {
+      variant: {
+        default: 'info' as HintVariant,
+        parseHTML: element => (element.getAttribute('data-variant') as HintVariant) || 'info',
+        renderHTML: attributes => ({ 'data-variant': String(attributes.variant) }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="hint"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes({ 'data-type': 'hint' }, this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      setHint: (variant: HintVariant = 'info') => ({ commands }) => commands.wrapIn(this.name, { variant }),
+      toggleHint: () => ({ commands }) => commands.toggleWrap(this.name),
+    }
+  },
+
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: /^(!{2}) $/,
+        type: this.type,
+        keepMarks: true,
+        keepAttributes: true,
+      }),
+    ]
+  },
+})

package/src/nodes/image.ts

@@ -0,0 +1,77 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export type ImageAlign = 'left' | 'center' | 'full'
+
+export interface ImageBlockOptions {
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    imageBlock: {
+      setImage: (options: {
+        src: string
+        alt?: string
+        title?: string
+        width?: number
+        align?: ImageAlign
+      }) => ReturnType
+    }
+  }
+}
+
+/**
+ * Block-level image with width + alignment attributes. Binary data goes
+ * through the injected UploadService; this node only stores the resulting URL.
+ */
+export const ImageBlock = Node.create<ImageBlockOptions>({
+  name: 'imageBlock',
+  inline: false,
+  group: 'block',
+  draggable: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    }
+  },
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      alt: { default: null },
+      title: { default: null },
+      width: { default: null },
+      align: { default: 'center' as ImageAlign },
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'img[data-type="tessera-image"]' },
+      // plain <img> pasted from outside becomes a block image
+      { tag: 'img[src]:not([data-type])' },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const style = node.attrs.width ? `width: ${Number(node.attrs.width)}px` : undefined
+    return [
+      'img',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': 'tessera-image',
+        'data-align': String(node.attrs.align),
+        style,
+      }),
+    ]
+  },
+
+  addCommands() {
+    return {
+      setImage:
+        options =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: options }),
+    }
+  },
+})

package/src/nodes/table.ts

@@ -0,0 +1,286 @@
+import type { Node as PMNode } from '@tiptap/pm/model'
+import type { EditorState } from '@tiptap/pm/state'
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table'
+
+/**
+ * Typed-column table (v1.1 quality focus — Slite's worst-reviewed feature is
+ * our opportunity). Column kinds live on the table node (`types`, indexed by
+ * column position); cell values for non-text kinds live on the cell attr
+ * `value`. Text columns keep rich inline content in the cell itself.
+ *
+ * Deliberately NOT supported (per Slite teardown §3.6): cell merging and
+ * in-cell calculations.
+ */
+
+export type TableColumnKind =
+  | 'text'
+  | 'checkbox'
+  | 'select'
+  | 'multiSelect'
+  | 'number'
+  | 'date'
+  | 'link'
+
+export const TABLE_COLUMN_KINDS: TableColumnKind[] = [
+  'text',
+  'checkbox',
+  'select',
+  'multiSelect',
+  'number',
+  'date',
+  'link',
+]
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tesseraTable: {
+      /** Insert a typed table. Kinds default to `text` for every column. */
+      insertTableTyped: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType
+      /** Change the kind of column `index` (0-based). */
+      setColumnType: (index: number, kind: TableColumnKind) => ReturnType
+      /** Stable-sort body rows by column `index`. */
+      sortTableByColumn: (index: number, direction: 'asc' | 'desc') => ReturnType
+    }
+  }
+}
+
+/** CSV of the table containing the caret (utility, not a command). */
+export function tableToCsvAt(editor: import('@tiptap/core').Editor): string | null {
+  const table = locateTable(editor.state)
+  return table ? tableNodeToCsv(table.node) : null
+}
+
+function locateTable(state: EditorState): { pos: number; node: PMNode } | null {
+  const { $from } = state.selection
+  for (let depth = $from.depth; depth > 0; depth--) {
+    const node = $from.node(depth)
+    if (node.type.name === 'table') {
+      return { pos: $from.before(depth), node }
+    }
+  }
+  return null
+}
+
+function columnCount(table: PMNode): number {
+  const firstRow = table.content.firstChild
+  return firstRow ? firstRow.childCount : 0
+}
+
+export function normalizeTypes(types: unknown, cols: number): TableColumnKind[] {
+  const list = Array.isArray(types) ? ([...types] as TableColumnKind[]) : []
+  while (list.length < cols) {
+    list.push('text')
+  }
+  return list.slice(0, cols)
+}
+
+function cellSortValue(row: PMNode, index: number, kind: TableColumnKind): string | number | boolean | null {
+  const cell = row.maybeChild(index)
+  if (!cell) {
+    return null
+  }
+  const value = cell.attrs.value as unknown
+  switch (kind) {
+    case 'checkbox':
+      return value === true || value === 'true'
+    case 'number': {
+      if (typeof value === 'number') {
+        return value
+      }
+      const parsed = Number(String(value ?? cell.textContent).trim())
+      return Number.isFinite(parsed) ? parsed : null
+    }
+    case 'date':
+      return typeof value === 'string' && value ? value : null
+    case 'select':
+      return Array.isArray(value) ? ((value as string[])[0] ?? null) : ((value as string) ?? null)
+    case 'multiSelect':
+      return Array.isArray(value) ? [...(value as string[])].sort().join(' ‧ ') : null
+    default:
+      return cell.textContent.trim() || null
+  }
+}
+
+function csvEscape(text: string): string {
+  if (/[",\n]/.test(text)) {
+    return `"${text.replace(/"/g, '""')}"`
+  }
+  return text
+}
+
+/** Serialize a table node to CSV (text form of typed values). */
+export function tableNodeToCsv(table: PMNode): string {
+  const types = normalizeTypes(table.attrs.types, columnCount(table))
+  const lines: string[] = []
+  table.forEach(row => {
+    const isHeaderRow = row.content.firstChild?.type.name === 'tableHeader'
+    const cells: string[] = []
+    row.forEach((cell, _offset, index) => {
+      // header cells are labels — always plain text regardless of column kind
+      const kind = isHeaderRow ? 'text' : (types[index] ?? 'text')
+      const value = cell.attrs.value as unknown
+      let text: string
+      switch (kind) {
+        case 'checkbox':
+          text = value === true || value === 'true' ? '✔' : ''
+          break
+        case 'select':
+        case 'multiSelect':
+          text = Array.isArray(value) ? (value as string[]).join(' / ') : String(value ?? '')
+          break
+        case 'date':
+          text = String(value ?? '')
+          break
+        case 'number':
+        case 'link':
+          text = value === null || value === undefined ? cell.textContent : String(value)
+          break
+        default:
+          text = cell.textContent
+      }
+      cells.push(csvEscape(text.trim()))
+    })
+    lines.push(cells.join(','))
+  })
+  return lines.join('\n')
+}
+
+export const AiTable = Table.extend({
+  name: 'table',
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      types: {
+        default: [] as TableColumnKind[],
+        parseHTML: element => {
+          try {
+            const raw = element.getAttribute('data-types')
+            return raw ? (JSON.parse(raw) as TableColumnKind[]) : []
+          } catch {
+            return []
+          }
+        },
+        renderHTML: attributes => ({
+          'data-types': JSON.stringify(attributes.types ?? []),
+        }),
+      },
+      freezeFirstCol: {
+        default: true,
+        parseHTML: element => element.getAttribute('data-freeze-first') !== 'false',
+        renderHTML: attributes => ({ 'data-freeze-first': String(attributes.freezeFirstCol) }),
+      },
+    }
+  },
+
+  addCommands() {
+    const parent = this.parent?.() ?? {}
+    return {
+      ...parent,
+      insertTableTyped:
+        (options = {}) =>
+        ({ commands }) =>
+          commands.insertTable({
+            rows: options.rows ?? 3,
+            cols: options.cols ?? 3,
+            withHeaderRow: options.withHeaderRow ?? true,
+          }),
+      setColumnType:
+        (index: number, kind: TableColumnKind) =>
+        ({ state, dispatch, tr }) => {
+          const table = locateTable(state)
+          if (!table || index < 0 || index >= columnCount(table.node)) {
+            return false
+          }
+          const types = normalizeTypes(table.node.attrs.types, columnCount(table.node))
+          types[index] = kind
+          if (dispatch) {
+            tr.setNodeMarkup(table.pos, undefined, { ...table.node.attrs, types })
+            dispatch(tr)
+          }
+          return true
+        },
+      sortTableByColumn:
+        (index: number, direction: 'asc' | 'desc') =>
+        ({ state, dispatch, tr }) => {
+          const table = locateTable(state)
+          if (!table) {
+            return false
+          }
+          const rows: PMNode[] = []
+          table.node.forEach(row => rows.push(row))
+          const hasHeader = rows.length > 0 && rows[0]!.content.firstChild?.type.name === 'tableHeader'
+          const header = hasHeader ? rows[0]! : null
+          const body = hasHeader ? rows.slice(1) : rows.slice()
+          if (body.length === 0 || index >= columnCount(table.node)) {
+            return false
+          }
+          const types = normalizeTypes(table.node.attrs.types, columnCount(table.node))
+          const kind = types[index] ?? 'text'
+          const dir = direction === 'asc' ? 1 : -1
+          const sorted = [...body].sort((a, b) => {
+            const va = cellSortValue(a, index, kind)
+            const vb = cellSortValue(b, index, kind)
+            if (va === vb) {
+              return 0
+            }
+            if (va === null) {
+              return 1
+            }
+            if (vb === null) {
+              return -1
+            }
+            return va < vb ? -dir : dir
+          })
+          const start = table.pos + 1 + (header ? header.nodeSize : 0)
+          const end = table.pos + table.node.nodeSize - 1
+          if (dispatch) {
+            tr.replaceWith(start, end, sorted)
+            dispatch(tr)
+          }
+          return true
+        },
+    }
+  },
+})
+
+export { TableRow as AiTableRow }
+
+function valueAttr() {
+  return {
+    default: null,
+    parseHTML: (element: HTMLElement) => {
+      const raw = element.getAttribute('data-value')
+      if (raw === null || raw === '') {
+        return null
+      }
+      try {
+        return JSON.parse(raw)
+      } catch {
+        return raw
+      }
+    },
+    renderHTML: (attributes: Record<string, unknown>) => ({
+      'data-value':
+        attributes.value === null || attributes.value === undefined ? '' : JSON.stringify(attributes.value),
+    }),
+  }
+}
+
+export const AiTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      value: valueAttr(),
+    }
+  },
+})
+
+export const AiTableHeader = TableHeader.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      value: valueAttr(),
+    }
+  },
+})

package/src/nodes/toc.ts

@@ -0,0 +1,38 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+/**
+ * Table-of-contents block (v1.1, Slite /outline): renders the document
+ * outline (H1–H4) with anchor jumps. The list itself is derived state — the
+ * node stores nothing, so it can never go stale in the canonical JSON.
+ */
+export const TocBlock = Node.create({
+  name: 'tocBlock',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="tessera-toc"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'tessera-toc' })]
+  },
+
+  addCommands() {
+    return {
+      insertToc:
+        () =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name }),
+    }
+  },
+})
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tocBlock: {
+      insertToc: () => ReturnType
+    }
+  }
+}