@nx-lang /摩纳哥

一个摩纳哥集成的NX，由每个NX网络编辑共享： nx 语言及其影响因素 配置从 @nx-lang/language，突出显示 志贵 与 包的TextMate语法，悬停和完成 NxLanguageService的映射 协议诊断到编辑器标记。无框架-主机与之组合 monaco.editor.create 或者 @monaco-editor/react 随它的便。

import * as monaco from "monaco-editor";
import { registerNxLanguage } from "@nx-lang/monaco";
import { createHttpLanguageService } from "@nx-lang/language-client";

const registration = registerNxLanguage(monaco, {
  service: createHttpLanguageService({ baseUrl: "/api/language" }),
});

const editor = monaco.editor.create(container, {
  value: source,
  language: "nx",
  theme: "github-dark",
});

同行依赖性

主机安装 monaco-editor， shiki， @shikijs/monaco, @nx-lang/language，所以有 一个摩纳哥在页面上，主机控制版本。支持Monaco 0.52.0及更高版本：every 包调用的API存在于那里，并且包是根据0.52的声明编译的。直到 @nx-lang/language 在注册表上，使用此存储库的主机通过路径链接它，对吗 这个存储库的工作空间("@nx-lang/language": "file:../../src/vscode"）。

包永远不会导入 monaco-editor 本身;它只使用交给它的名称空间。那 namespace可以是一个ES模块导入，什么 @monaco-editor/react 传递给 beforeMount，或 monaco 全球一个amd装载摩纳哥离开 window - BlazorMonaco是这样加载的-所以 拥有自己的摩纳哥的主机永远不会在页面上留下第二份副本。

// An AMD-loaded Monaco: the global is the namespace.
registerNxLanguage(window.monaco, { service });

registerNxLanguage(monaco, options?)

用给定的Monaco名称空间注册NX，并返回一个句柄 dispose() 和一个 ready 保证在高亮笔加载后解析。

医生的评论。 每个加载的主题都有Markdown的规则 /// Doc注释，所以是这样的 在其他编辑器中使用文档的方式，而不是Markdown文件的方式： **bold** 和 *italic* 保留注释的颜色并只更改字体，代码跨度采用主题的颜色 代码跨度颜色，以及文档链接，如 [Name] 使用带有下划线的颜色(注释的 颜色（下划线，在没有代码跨度颜色的主题中）。 withNxDocCommentStyles(theme) 应用 对于以其他方式定义主题的主机，主题对象也适用相同的规则。

幂等。 对同一个Monaco名称空间的重复调用将返回现有名称空间的句柄 注册而不是再次注册，所以 @monaco-editor/react的 beforeMount 和 onMount pair和React严格模式的双挂载，注册一组提供商和每个完成 出现一次。没有服务的调用只注册高亮显示；第一个后来叫那个 将悬停和完成提供程序添加到现有的注册中，因此是一个宿主 在它的服务准备好之前设置高亮仍然得到他们。当 处置最后一个句柄；语言，它的结构和荧光笔都保留了下来，因为 摩纳哥没有办法取消一种语言的注册，而在此之后进行的注册则会重新使用它们 然后再装上荧光笔。一个React效果，在mount时注册，在cleanup时销毁 因此，无论它运行的频率有多高，都需要一个高光笔负载。

主题。 荧光笔加载后 registerNxLanguage 的回报。之前选择的主题 ready 解决,通过 monaco.editor.setTheme 或者是编辑的 theme 选择权，一旦有了就保留，所以 上面的例子都不需要等待 ready 让它的主题保持不变。一个不属于 themes 保持编辑器的主题，但高亮笔无法为其重新上色，并保持在其第一个。

的位置。 摩纳哥的一基行和一列成为协议的零基行和UTF-16 字符和答案范围以另一种方式返回。模型的文本在的时刻被读取 编辑后立即悬停的查询询问已编辑的文本。摩纳哥 取消令牌终止服务调用。

悬停代码块 由摩纳哥自己的着色器通过代币提供商Shiki突出显示 使用与缓冲区相同的语法进行安装。

与 @monaco-editor/react

import Editor, { type BeforeMount, type OnMount } from "@monaco-editor/react";
import { registerNxLanguage, setNxMarkers } from "@nx-lang/monaco";
import { createHttpLanguageService } from "@nx-lang/language-client";

const service = createHttpLanguageService({
  baseUrl: "/api/language",
  headers: async () => ({ authorization: `Bearer ${await getToken()}` }),
});

// A multi-file configuration: the model being edited plus its siblings, with unsaved text.
const beforeMount: BeforeMount = (monaco) => {
  registerNxLanguage(monaco, {
    service,
    workspace: (model) => [
      { uri: model.uri.toString(), source: model.getValue(), version: model.getVersionId() },
      ...otherFiles.map((file) => ({ uri: file.uri, source: file.draftText })),
    ],
    onError: (error) => console.warn("nx language", error),
  });
};

const onMount: OnMount = (editor, monaco) => {
  const model = editor.getModel();
  if (model) {
    setNxMarkers(monaco, model, diagnosticsForThisFile);
  }
};

<Editor language="nx" theme="github-dark" beforeMount={beforeMount} onMount={onMount} value={text} />;

标记

toMonacoMarkers(diagnostics) 转换协议诊断-或任何与 severity， message， code 和一个 range 这可能是 null - IMarkerData[]：严重性映射到 摩纳哥的，以列为基础，零宽度范围扩大了一列，因此插入点 诊断(expected } here)保持可见，并且省略了无范围的诊断。 setNxMarkers(monaco, model, diagnostics, owner = "nx") 将它们设置在一个模型上。

出口

registerNxLanguage， NX_LANGUAGE_ID， NX_DEFAULT_LIGHT_THEME， NX_DEFAULT_DARK_THEME， NX_COMPLETION_TRIGGER_CHARACTERS， defaultWorkspace， toMonacoLanguageConfiguration， nxShikiLanguage， toProtocolPosition， toMonacoRange， toMonacoCompletionKind， toMonacoMarkers， setNxMarkers，以及类型 MonacoNamespace， RegisterNxLanguageOptions， NxLanguageRegistration， NxMonacoTheme， MarkerDiagnostic， NxLanguageService.