Skip to content

配置

插件选项

通过以下选项控制补全的触发节奏、展示形式以及回调。

ts
interface CompletionOptions {
  /** 补全请求的防抖时间,默认 300ms */
  debounceMs?: number;
  /** 触发补全的最小字符数,默认 3 */
  minTriggerLength?: number;
  /** 实际补全函数(必填) */
  callCompletion: (
    context: CompletionContext
  ) => Promise<CompletionResult> | CompletionResult;
  /** 根据上下文推断 prompt 类型 */
  getPromptType?: (context: CompletionContext) => PromptType;
  /** 用户输入变化时回调 */
  onChange?: (context: CompletionContext, view: EditorView) => void;
  /** 取消补全时回调 */
  onExit?: (view: EditorView) => void;
  /** 接受补全时回调 */
  onApply?: (result: CompletionResult, view: EditorView) => void;
  /** Ghost text 的自定义 class,默认 "prosemirror-ghost-text" */
  ghostClassName?: string;
  /** 是否展示 ghost text,默认 true */
  showGhost?: boolean;
}

补全上下文

callCompletion 会收到完整上下文,便于按位置与节点类型定制逻辑:

ts
interface CompletionContext {
  abortController: AbortController;  // 取消请求
  parent: Node;                      // 光标所在父节点
  pos: number;                       // 文档内绝对位置
  beforeText: string;                // 光标前文本
  afterText: string;                 // 光标后文本
  promptType: PromptType;            // 推断的 prompt 类型
  state: EditorState;                // 当前 EditorState
}

返回结果

补全函数可以返回以下形态:

ts
// 纯文本
return "plain text";

// 同时返回纯文本与 HTML
return {
  plain: "plain text",
  html: "<strong>formatted</strong> text"
};

// 仅返回 HTML
return {
  html: "<p>formatted paragraph</p>"
};

// 返回 ProseMirror Node
return { prosemirror: someNode };

示例配置

快速响应

ts
completion({
  debounceMs: 100,
  minTriggerLength: 2,
  callCompletion: myCompletionFn,
});

保守策略

ts
completion({
  debounceMs: 800,
  minTriggerLength: 10,
  callCompletion: myCompletionFn,
});

代码补全

ts
completion({
  debounceMs: 500,
  getPromptType: (ctx) => {
    if (ctx.parent.type.name === "code_block") {
      return "code";
    }
    return "common";
  },
  callCompletion: myCompletionFn,
});