快速开始

安装

npm install prosemirror-completion
# 或
yarn add prosemirror-completion
# 或
pnpm add prosemirror-completion

基础用法

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { keymap } from "prosemirror-keymap";
import { schema } from "prosemirror-schema-basic";
import { exampleSetup } from "prosemirror-example-setup";
import {
  completion,
  approveCompletion,
  exitCompletion,
} from "prosemirror-completion";

// 创建补全插件
const completionPlugin = completion({
  debounceMs: 300,
  minTriggerLength: 3,
  callCompletion: async (context) => {
    // 简单示例补全
    return ` completion for: ${context.beforeText.slice(-20)}`;
  },
});

// 绑定 Tab/Esc 到命令
const completionKeymap = keymap({
  Tab: approveCompletion,
  Escape: exitCompletion,
});

// 创建 EditorState
const state = EditorState.create({
  schema,
  plugins: [completionPlugin, completionKeymap, ...exampleSetup({ schema })],
});

// 创建 EditorView
const view = new EditorView(document.querySelector("#editor"), {
  state,
});

运行逻辑

1. 输入即触发：当输入字符数大于 minTriggerLength 时触发防抖请求。
2. 幽灵文本展示：建议以灰色文本显示在光标之后。
3. 接受或取消：按 Tab 接受，Esc 或点击空白处取消。

下一步

• 查看 配置项说明
• 尝试 WebLLM 集成