@fsegurai/ngx-codemirror

@fsegurai/ngx-codemirror 带来 代码 6 改为 角质 作为三个 独立、基于信号的组件:

• ngx-code-editor - 一个代码编辑器.
• ngx-code-diff-editor - 边行编辑器(MergeView) (中文(简体) ).
• ngx-code-unified-diff-editor - 一个统一的diff编辑器 (单位:千美元)unifiedMergeView) (中文(简体) ).

它们与信号形式、反应形式和 ngModel,并且是无区和SSR安全。 主题和扩展可以是: 注册一次 provideCodeEditor() 懒惰地装满了子弹.

目录

• 安装
• 兼容性
• 快开始
• 配置
• 主题
• 扩展
• 方便投入
• 错误
• 程序化 API
• 组件 API
• 从21.x移走
• 解析应用程序
• 许可证

安装

以 CodeMiror 端端依赖性安装库 :

npm install @fsegurai/ngx-codemirror codemirror @codemirror/autocomplete @codemirror/commands @codemirror/language @codemirror/lint @codemirror/merge @codemirror/search @codemirror/state @codemirror/view

@angular/common, (中文(简体) ), @angular/core 财务报告和审定财务报表 @angular/forms (单位:千美元)^22)也是同伴的依赖关系. 对于语法强调, 添加您需要的语言描述, 例如所有语言描述 :

npm install @codemirror/language-data

兼容性

自21.x起,图书馆为无区(provideZonelessChangeDetection()),不需要Zone.j.s. (中文(简体) ).

快开始

导入独立组件并将其值与您使用的 API 表格绑定 :

import { Component, signal } from '@angular/core';
import { FormField, form } from '@angular/forms/signals';
import { languages } from '@codemirror/language-data';
import { CodeEditorComponent } from '@fsegurai/ngx-codemirror';

@Component({
  selector: 'app-root',
  imports: [CodeEditorComponent, FormField],
  template: `
    <ngx-code-editor
      [formField]="editorForm.code"
      language="javascript"
      [languages]="languages"
      theme="dark"
      [lineWrapping]="true" />
  `,
})
export class AppComponent {
  protected readonly languages = languages;
  protected readonly model = signal({ code: 'const answer = 42;' });
  protected readonly editorForm = form(this.model);
}

相同的组件与每个表格 API 工作:

language 按名称或别名在 languages: 通过两者或设定 languages 一次进入 provideCodeEditor()无 languages,编辑器发出一个 language-not-found 错误.

配置

provideCodeEditor(options, ...features) 设置注射器每个编辑器的默认输入。 用在那个 应用程序提供者,一个路由 providers 或组件的 providers;一个被窝起的叫声在它的祖先之上融合.

import { ApplicationConfig } from '@angular/core';
import { languages } from '@codemirror/language-data';
import { provideCodeEditor, withExtensionPresets, withExtensions, withThemes } from '@fsegurai/ngx-codemirror';

export const appConfig: ApplicationConfig = {
  providers: [
    provideCodeEditor(
      { theme: 'auto', setup: 'basic', lineWrapping: true, languages },
      withThemes(
        { nord: () => import('@fsegurai/codemirror-theme-bundle').then((m) => m.nord) },
        { light: 'light', dark: 'nord' },
      ),
      withExtensions([myExtension]),
      withExtensionPresets({ vim: () => import('@replit/codemirror-vim').then((m) => m.vim()) }),
    ),
  ],
};

优先,最低第一:内置默认,提供方(一个巢于其母),实例输入. 一个 undefined 值从不覆盖。 备选办法是投入的备选办法(第2段)theme, (中文(简体) ), setup, (中文(简体) ), placeholder, (中文(简体) ), indentWithTab, (中文(简体) ), indentUnit, (中文(简体) ), lineWrapping, (中文(简体) ), highlightWhitespace, (中文(简体) ), languages,方便输入和 presets页:1 extensions。 。 。 .

主题

这个 theme 输入(和 theme 选项)接受:

一次切换每个编辑器( 例如从一个应用轻/ 暗切换), 使用 CodeEditorThemeService编辑器 他们自己的 theme 输入保留它.

inject(CodeEditorThemeService).set('nord'); // undefined goes back to the provider's theme

优先,最高第一:实例 theme 输入, CodeEditorThemeService,则 theme 联 合 国 provideCodeEditor(), (中文(简体) ), 'light'。未知名称发出 invalid-theme 并保留当前主题.

扩展

扩展可能很迫切( :Extension)或懒惰(() => Promise<Extension>,装入一次并由每个编辑共享).

withExtensions([
  EditorView.lineWrapping,
  () => import('@replit/codemirror-indentation-markers').then((m) => m.indentationMarkers()),
]);

一个失败的懒惰负载释放 extension-load-failed 并保留已应用的扩展.

方便投入

常见的CodeMiror特性有自己的输入,因此不需要扩展代码. 与 setup="basic" 布尔 默认关闭; 默认关闭 。 明确的价值总是赢.

<ngx-code-editor [formField]="f.code" [lineNumbers]="false" [tabSize]="2" [lint]="{ source: myLinter, gutter: true }" />

错误

每个组件都发出 error 带有 CodeEditorError (歧视 code而不是扔, 并保持它的 目前状态。 在开发模式中,错误也被记录为 [ngx-codemirror] 警告 警告他们.

onError(error: CodeEditorError): void {
  if (error.code === ERROR_LANGUAGE_NOT_FOUND) console.warn(error.message, error.available);
}

程序化 API

获取组件与 viewChild() 并使用其信号和方法:

private readonly editor = viewChild.required(CodeEditorComponent);

format(): void {
  const code = this.editor().getValue();
  this.editor().setValue(prettify(code)); // emits valueChange once
  this.editor().focus();
}

视图是在第一次提交之后创建的(afterNextRender),这样 view() 实值 undefined 在服务器上及之前 ready 发射.

组件 API

共享投入

所有三个组成部分都采用了这些投入,加上: 便利投入。 。 。 .

共享产出: touch (在模糊上,标出一个被接入的束缚地)和 error (单位:千美元)CodeEditorError) (中文(简体) ).

ngx-code-editor

ngx-code-diff-editor

ngx-code-unified-diff-editor

它需要投入和产出 ngx-code-editor (单位:千美元)value 是已修改的文档,加上:

<ngx-code-unified-diff-editor [(original)]="original" [(value)]="modified" language="typescript" [languages]="languages" />

从21.x移走

22.0.0包含断裂变化。 检查每个项目 变化 全部列出.

1. 最低版本 : 角质 ^22 (包括 @angular/forms),类型脚本 6.0,节点.js >=24.15 联 合 国 工作空间工具.

2. 新的同伴依赖性 : 安装 @codemirror/autocomplete, (中文(简体) ), @codemirror/commands, (中文(简体) ), @codemirror/language, (中文(简体) ), @codemirror/lint, (中文(简体) ), @codemirror/merge, (中文(简体) ), @codemirror/search, (中文(简体) ), @codemirror/state, (中文(简体) ), @codemirror/view 财务报告和审定财务报表 codemirror (见 安装) (中文(简体) ). @codemirror/language-data 不再由图书馆安装.

3. CodeEditorModule 删除 : 导入 CodeEditorComponent, (中文(简体) ), CodeDiffEditorComponent 或者说 CodeUnifiedDiffEditorComponent 直接说.

4. 表单 : 组件执行信号表 FormValueControl 改为 ControlValueAccessor (单位:千美元)NG_VALUE_ACCESSOR 已经走了. [formField], (中文(简体) ), formControlName, (中文(简体) ), [formControl] 财务报告和审定财务报表 [(ngModel)] 继续工作. 代码调用 writeValue(), (中文(简体) ), registerOnChange(), (中文(简体) ), registerOnTouched() 或者说 setDisabledState() 必须设置 value 或者说 disabled 换句话说.

5. 重命名的产出 (他们与本地DOM事件相冲突):

   构成部分	21.x (中文(简体) )	22.x 电话
   编辑器	(change)	(valueChange)
   编辑器	(focus) 编号 : (blur)	(focused) 编号 : (blurred)
   diff 编辑器	(originalFocus) 编号 : (originalBlur)	(originalFocused) 编号 : (originalBlurred)
   diff 编辑器	(modifiedFocus) 编号 : (modifiedBlur)	(modifiedFocused) 编号 : (modifiedBlurred)

6. value 是一个 model() 只有用户编辑发送 valueChange。 。 。 . disabled 是输入数字 : [(disabled)] 财务报告和审定财务报表 (disabledChange) ,而一个被禁用的编辑器也只读. focus 现在是一种方法.

7. 出错, 不登录 : 处理新 error 输出。 一个未知 language,语言负载失败, 未知的主题名称和无效 indentUnit 发射 error 保存当前状态;控制台输出为 a 仅限dev-mode警告.

8. 输入默认为 undefined 这样 provideCodeEditor() ;有效默认值不变. 现在直接看到输入信号的代码 undefined 当未设定时.

9. setup="basic" 不再包括行号,折叠地沟,活行行,搜索和自动补全: 他们是 便利投入,默认时使用 'basic'编辑器 等同; 设置输入到 false 要删除这部分.

10. Theme 接受 'dark', (中文(简体) ), 'auto' 和注册名称; 未知的字符串输出 invalid-theme 改为 被传给了CodeMirror. indentUnit 实值 number | string。 。 。 .

解析应用程序

要看到组件在行动,检查 演示。 。 。 .

本地设置演示:

git clone https://github.com/fsegurai/ngx-codemirror.git
cd ngx-codemirror
bun install
bun start

这为应用程序服务于 http://localhost:4200 (英语)。 。 。 .

许可证

许可证根据 麻省理工学院。 。 。 .