Nuxt CodeMirror

Codemirror 作为 Nuxt 模块。演示可在下方 playground 中找到

功能

🚀 使用几乎每个 API 轻松将 codemirror 配置为符合自身需求
🚠 使用 Typescript 构建
🌲 自定义 useNuxtCodeMirror composable，用于创建你自己的编辑器
专为 CodeMirror 6 及以上版本构建

文档

本模块包含一个 Component、一个 Composable 以及若干类型供您使用。阅读 CodeMirror Reference 指南以获取更详细的信息：CodeMirror docs

NuxtCodeMirror.vue

此组件为自动导入，是 CodeMirror 的封装组件。

组件属性：

interface NuxtCodeMirrorProps
  extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
  /** value of the auto created model in the editor. Works as underlying logic of a V-Model */
  modelValue?: string
  /** The height value of the editor. */
  height?: string
  /** The minimum height value of the editor. */
  minHeight?: string
  /** The maximum height value of the editor. */
  maxHeight?: string
  /** The width value of the editor. */
  width?: string
  /** The minimum width value of the editor. */
  minWidth?: string
  /** The maximum width value of the editor. */
  maxWidth?: string
  /** focus on the editor. */
  autoFocus?: boolean
  /** Enables a placeholder—a piece of example content to show when the editor is empty. */
  placeholder?: string | HTMLElement
  /**
   * `light` / `dark` / `Extension` Defaults to `light`.
   * @default light
   */
  theme?: 'light' | 'dark' | 'none' | Extension
  /**
   * Whether to optional basicSetup by default
   * @default true
   */
  basicSetup?: boolean | BasicSetupOptions
  /**
   * This disables editing of the editor content by the user.
   * @default true
   */
  editable?: boolean
  /**
   * This disables editing of the editor content by the user.
   * @default false
   */
  readOnly?: boolean
  /**
   * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`)
   * or behaves according to the browser's default behavior (`false`).
   * @default true
   */
  indentWithTab?: boolean
  /** Fired whenever a change occurs to the document. */
  onChange?(value: string, viewUpdate: ViewUpdate): void
  /** Some data on the statistics editor. */
  onStatistics?(data: Statistics): void
  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
  onUpdate?(viewUpdate: ViewUpdate): void
  /** The first time the editor executes the event. */
  onCreateEditor?(view: EditorView, state: EditorState): void
  /** Fired whenever the editor is focused. */
  onFocus?(view: ViewUpdate): void
  /** Fired whenever the editor is blurred. */
  onBlur?(view: ViewUpdate): void
  /**
   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.
   * They can either be built-in extension-providing objects,
   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),
   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
   */
  extensions?: Extension[]
  /**
   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.
   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
   */
  root?: ShadowRoot | Document
  /**
   * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
   */
  initialState?: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    json: any
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    fields?: Record<string, StateField<any>>
  }
}

NuxtCodeMirror 组件接受一个 Template ref，并暴露 CodeMirror div 元素、Editor view 和 Editor State

interface CodeMirrorRef {
  /** Container element of the CodeMirror instance */
  container: HTMLDivElement | null
  /** The EditorView of the CodeMirror instance */
  view: EditorView | undefined
  /** The EditorState of the CodeMirror instance */
  state: EditorState | undefined
  /** Editor element of the CodeMirror instance */
  editor: HTMLDivElement | null
}

如果你需要访问底层的 CodeMirror 实例，你可以通过添加一个与你的 Template ref 同名的 ref 来实现。关于如何操作的示例可以在这里找到：🏀 Online playground

如果出于某种原因你想编写自己的 CodeMirror 组件，你也可以这样做 :)

UseNuxtCodeMirror.ts

这个 composable 是 NuxtCodeMirror 组件的底层核心，并且也是自动导入的。

它至少需要 3 个 Refs，一个用于 CodeMirror 将连接的 div 元素，一个用于 CodeMirror 视图，一个用于 CodeMirror 状态

请确保你在 onMounted 中执行该 composable，否则你会遇到错误，因为 codemirror 无法链接到 DOM。

const editor = ref<HTMLDivElement | null>(null)
const container = ref<HTMLDivElement | null>(null)
const view = ref<EditorView>()
const state = ref<EditorState>()

onMounted(() => {
  useNuxtCodeMirror({
    ...props,
    container: editor.value,
    viewRef: view,
    stateRef: state,
    containerRef: container,
  })
})

有关此实现的更多信息，请参阅 source，以获取您自己版本的灵感

致谢

如果没有以下项目，这个 Nuxt 模块将无法实现：

@uiw/react-codemirror: https://github.com/uiwjs/react-codemirror
@surmon-china/vue-codemirror: https://github.com/surmon-china/vue-codemirror

快速设置

使用一条命令将模块安装到您的 Nuxt 应用程序中：

npx nuxi module add nuxt-codemirror

就是这样！你现在可以在你的 Nuxt 应用中使用 Nuxt-codemirror 了 ✨

已测试的扩展

以下是截至 @codemirror/view 版本 6.29.1 和 @codemirror/state 版本 6.4.1 可使用的已测试扩展列表

以及更多...

贡献

如果你有想法或发现 bug，请随时通过提交 issue 开始。对于想法，请发起一个 Discussion。

我欢迎任何形式的贡献，提前感谢！！

本地开发

# Install dependencies
pnpm i

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release

常见问题

问题

使用您的模块启动开发服务器时出现错误：Pre-transform error: Failed to resolve import "@codemirror/view"、Pre-transform error: Failed to resolve import "@codemirror/state"。

解决方案

假设您使用 pnpm 配合 shamefully-hoist=false install @codemirror/state 和 @codemirror/view，这些错误应该会消失