@sv-print/plugin-view-code-edit

给 sv-print 提供导出 代码编辑 插件。 这个插件包含 UI 组件，所以需要引入样式文件。

安装

npm install @sv-print/plugin-view-code-edit

import "@sv-print/plugin-view-code-edit/dist/style.css";
import pluginViewCodeEdit from "@sv-print/plugin-view-code-edit";
const plugins = [pluginViewCodeEdit({})];

功能特性

• 基于 CodeMirror 6 的代码编辑器，支持 javascript / typescript / json / html / css 语法高亮
• 搜索面板（Ctrl/Mod + F）已汉化：查找、替换、区分大小写、正则、全字匹配等均为中文
• javascript / typescript 语言下内置 hiprint 全局 API 代码补全（hiprint.*、hinnn.*、模板实例方法等）
• 支持通过 editorConfig 传入自定义配置：每行最大宽度、搜索面板默认配置、自定义补全项、额外 CodeMirror 扩展等

配置项

插件通过 plugin(config) 接收配置，config.editorConfig 会作为编辑器的默认配置：

interface CodeEditPluginConfig {
  editorConfig?: EditorConfig;
}

interface EditorConfig {
  /** 每行最大字符宽度，超出后横向滚动 */
  lineMaxLength?: number;
  /** 搜索面板默认配置 */
  searchConfig?: SearchPanelConfig;
  /** 自定义自动补全项（javascript/typescript 会自动合并 hiprint 全局 API 补全） */
  autocompletion?: AutocompleteOption[];
  /** 额外的 CodeMirror 扩展 */
  extensions?: Extension[];
  /** 是否启用 Tab 缩进，默认 true */
  useTab?: boolean;
  /** Tab 缩进空格数，默认 2 */
  tabSize?: number;
  /** 是否自动换行，默认 false */
  lineWrapping?: boolean;
  /**
   * 编辑器就绪回调，在 CodeMirror EditorView 创建完成后触发，
   * 暴露 view/state/类 等核心对象，可用于动态添加扩展、监听事件等
   */
  onReady?: (payload: CodeMirrorReadyPayload) => void;
}

/**
 * onReady 回调参数
 */
interface CodeMirrorReadyPayload {
  /** EditorView 实例，可用于 dispatch / 获取 state 等 */
  view: EditorView;
  /** 当前 EditorState */
  state: EditorState;
  /** 追加扩展到当前配置 (不会覆盖已有扩展如 lang/basicSetup) */
  appendExtension: (extensions: Extension | Extension[]) => void;
  /** EditorView 类 */
  EditorView: typeof EditorView;
  /** EditorState 类 */
  EditorState: typeof EditorState;
  /** StateEffect 类 */
  StateEffect: typeof StateEffect;
}

interface SearchPanelConfig {
  /** 字面量匹配 */
  literal?: boolean;
  /** 全字匹配 */
  wholeWord?: boolean;
  /** 区分大小写 */
  caseSensitive?: boolean;
  /** 正则表达式 */
  regexp?: boolean;
}

interface AutocompleteOption {
  /** 补全显示文本 */
  label: string;
  /** 类型 */
  type?: "variable" | "function" | "keyword" | "property" | "namespace" | "class";
  /** 补全说明 */
  info?: string;
  /** 实际插入文本（默认同 label） */
  apply?: string;
}

使用示例

基础用法

import "@sv-print/plugin-view-code-edit/dist/style.css";
import pluginViewCodeEdit from "@sv-print/plugin-view-code-edit";

const plugins = [pluginViewCodeEdit()];

配置编辑器

import "@sv-print/plugin-view-code-edit/dist/style.css";
import pluginViewCodeEdit from "@sv-print/plugin-view-code-edit";

const plugins = [
  pluginViewCodeEdit({
    editorConfig: {
      // 每行最大 120 字符宽度
      lineMaxLength: 120,
      // 搜索面板默认开启区分大小写
      searchConfig: {
        caseSensitive: true,
        regexp: true,
      },
      // Tab 缩进 4 个空格
      tabSize: 4,
      // 开启自动换行
      lineWrapping: true,
      // 自定义补全项（会与内置 hinnn API 补全合并）
      autocompletion: [
        {
          label: "myFunc",
          type: "function",
          info: "自定义函数",
        },
      ],
    },
  }),
];

内置 hinnn 代码补全

在编辑 javascript / typescript 时，输入 hinnn. 即可触发代码补全，包含：

• hinnn.event / hinnn.mm / hinnn.pt / hinnn.px 等工具对象
• hinnn.dateFormat / hinnn.throttle / hinnn.debounce 等工具函数

也可以从包中直接导出 HIPRINT_AUTOCOMPLETION 查看或扩展内置补全列表：

import { HIPRINT_AUTOCOMPLETION } from "@sv-print/plugin-view-code-edit";

通过 onReady 回调扩展编辑器

onReady 在 CodeMirror EditorView 创建完成后触发，回调参数会暴露 view、state、appendExtension 以及 EditorView / EditorState / StateEffect 等核心类，可用于追加扩展、监听文档变化、自定义快捷键等：

import pluginViewCodeEdit from "@sv-print/plugin-view-code-edit";
import { EditorView, keymap } from "@codemirror/view";

const plugins = [
  pluginViewCodeEdit({
    editorConfig: {
      onReady: ({ view, state, appendExtension, EditorView, EditorState, StateEffect }) => {
        // 1. 监听文档变化 (追加 updateListener 扩展，不会覆盖原有 lang 等配置)
        appendExtension(
          EditorView.updateListener.of((update) => {
            if (update.docChanged) {
              console.log("内容变化:", update.state.doc.toString());
            }
          })
        );
        // 2. 追加快捷键扩展
        appendExtension(
          keymap.of([
            {
              key: "Ctrl-s",
              run: () => {
                console.log("保存:", view.state.doc.toString());
                return true;
              },
            },
          ])
        );
        // 3. 获取当前编辑器内容
        console.log("当前内容:", state.doc.toString());
      },
    },
  }),
];

License

LGPL

开源使用须知

1.请自觉遵守 LGPL 协议，其他用途可联系作者；

2.允许用于个人学习、毕业设计、教学案例、公益事业、商业使用；

3.如果商用必须保留版权信息，请自觉遵守；

4.禁止将本开源的代码和资源进行任何形式任何名义的出售，否则产生的一切任何后果责任由侵权者自负；

5.商用请仔细审查代码和漏洞，不得用于任一国家许可范围之外的商业应用，产生的一切任何后果责任自负；