Tiptap 编辑器接入

@slexkit/tiptap 适用于需要在编辑器中预览 slex 代码块的文档。Tiptap 仍负责编辑、选区和 Markdown 导入/导出；SlexKit 只接管语言为 slex 的 CodeBlock。

本地运行：

bun run build:core
bun run --filter @slexkit/tiptap build
bun examples/dev-server.mjs tiptap

源码位于 examples/tiptap。Tiptap 与 Streamdown 示例使用同一份 RC 低通滤波器内容，用于对照编辑器宿主和只读渲染宿主的差异。

打开集成指南 · 查看可运行源码

职责划分

Tiptap 负责文档编辑和 Markdown 导入/导出。只写状态的 slex fence 与后续预览块共享 artifact runtime；非 slex code block 保持 Tiptap 原生行为。

最小配置：

import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import { Markdown } from "@tiptap/markdown";
import { createSlexKitTiptapExtension } from "@slexkit/tiptap";
import "@slexkit/theme-shadcn/style.css";
import "@slexkit/tiptap/style.css";

const editor = new Editor({
  element: document.querySelector("#editor"),
  extensions: [
    StarterKit.configure({ codeBlock: false }),
    Markdown,
    createSlexKitTiptapExtension({ artifactId: "doc-1" })
  ],
  content: markdown,
  contentType: "markdown"
});

需要编辑器内预览时使用 @slexkit/tiptap。只读 Markdown 输出通常使用 Streamdown 或自定义 Markdown host API。