@eyeauras/workbench-monaco
可选摩纳哥支持的编辑器提供者和高容量的输出查看器 @eyeauras/workbench。 。 。 .
安装
npm install @eyeauras/[email protected] @eyeauras/[email protected] monaco-editor@^0.52.2
编辑器快速启动
使用 CSS 意识浏览器捆绑器和大小主机. 此 Vite 示例配置了纯文本工作者 ; 当您的主机需要这些语言时, 添加 JSON, CSS, HTML 或 TypeScript 工人 .
import { createWorkbench } from "@eyeauras/workbench";
import { createMonacoEditorProvider } from "@eyeauras/workbench-monaco";
import * as monaco from "monaco-editor";
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
window.MonacoEnvironment = { getWorker: () => new EditorWorker() };
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host);
workbench.registerEditorProvider(createMonacoEditorProvider(monaco, { languageFromInput: () => "plaintext" }));
workbench.openEditor({ id: "notes", title: "Notes", editorType: "monaco", data: "Hello" });
export function dispose() { workbench.dispose(); host.remove(); }
Vite 类型脚本项目包括 vite/client 适用于工人的进口类型。 其他捆绑者自行供应
工人融入社会。 供应商拥有挂载编辑器/模型。 核心安装共享样式; 见
弹壳快速启动 和主题.
主机可以提供现有的摩纳哥取名空间或者使用懒惰的提供商. 见 EyeAuras UI Workbench 存储器 示例和 API 定向.
每个提供者也都项目 workbench.services.diagnostics 对于编辑器输入的精确性 resource
进入摩纳哥标记。 诊断所有者仍然通过摩纳哥标记所有者的名字空间被隔离,下落不明
区域倒回第一个字符,关闭编辑器后,只清除该字符预测的标记
编辑。 通过核心服务发布诊断;不需要摩纳哥特定的生产者API.
输出日志
createMonacoOutputView 挂载一个独立、只读的输出编辑器。 它需要现有的摩纳哥
命名空间和一个核心通道;它不需要Workbench shell或React. 配置摩纳哥工人
您的捆绑物和编辑器的提供者一样,并赋予容器一个明确的高度.
import { WorkbenchOutputService } from "@eyeauras/workbench";
import { createMonacoOutputView } from "@eyeauras/workbench-monaco";
import * as monaco from "monaco-editor";
const output = new WorkbenchOutputService();
const channel = output.registerChannel("runtime", "Runtime", {
maxEntries: 100_000,
maxCharacters: 16 * 1024 * 1024,
});
// The application supplies current translated presentation, including count formatting.
const presentation = resolveOutputPresentation(currentLocale);
const view = createMonacoOutputView(container, monaco, channel, { presentation });
// On a locale change: updates controls/ARIA/counts without replacing the model or filters.
view.setPresentation(resolveOutputPresentation(nextLocale));
channel.appendLines([
{ timestamp: new Date(), level: "info", source: "Combat", message: "Target acquired" },
{ timestamp: new Date(), level: "error", source: "Runtime", message: "Attack failed\n at attack()" },
]);
view.setFilter({ text: "attack,!cancelled", levels: ["warning", "error"] });
// On unmount: the view owns its editor/model; the service owns its channels.
view.dispose();
output.dispose();
所需数额 MonacoOutputPresentation 包含查看器标签、级别名称和计数前题。 主机拥有翻译;适配器没有默认目录或本地化依赖性.
工具栏支持独立的级别和类别(source) 选择,字面上包含/! 排除
术语、 跟踪、 包装、 清除和复制过滤 。 正逗号分隔术语使用 OR; 任何匹配
负词排除了整个记录,包括其多行续作. 匹配为
对消息和源不敏感。 引文将逗号保留在一个术语内 并保持文字,
匹配 VS 代码输出解析器。 这不是一个 regex 或 JavaScript 表达式评价器 。 失踪
levels编号 :sources 表示全部; 空数组表示无. 时间戳显示 UTC .
原始来源可以提供 timestamp: null 财务报告和审定财务报表 level: "unknown"; 这些显示为
[--:--:--.---] [UNKNOWN] 具有中性重度颜色,并保持可独立过滤.
标题使用共享的Workbench Toolbar和上下文菜单. 其过滤器在
左; 动作会随着容器的收缩而从右到左溢入更多动作,而不添加
页眉行或重设置过滤/切换状态 。 独立视图安装共享的 Workbench
样式每文档一次; 主机可以自定义相同 --vscode-* 主题符号作为其它控件.
过滤器,取景模式和操作是单独的菜单组;同样的分组仍然在溢出.
备选办法和寿命
| 选项 | 违约/合同 |
|---|---|
filter | 所有记录。 可选 text, (中文(简体) ), levels,以及 sources; 稍后更新为 setFilter。 。 。 . |
follow | true。跟随尾部;读取更早的记录会暂停. setFollow(true) 简历。 布局和环绕更改不禁用 . |
wordWrap | true。“环绕动作”改变演示文稿,而不是记录内容. |
theme | vs-dark摩纳哥主题为地名空间-全球,而不是每个观众孤立. |
writeClipboard | navigator.clipboard.writeText。当浏览器剪贴板无法访问时,提供同步/同步主机调用. |
返回的视图曝光 element摩纳哥公众 editor, (中文(简体) ), setFilter, (中文(简体) ), setFollow, (中文(简体) ), flush, (中文(简体) ),
getText,并具有同等能力 dispose。视图拥有它的编辑器、模型、工具栏和订阅,而不是它的
频道或服务。 重用主机拥有的频道,而不处理主机在视图卸载上的服务.
剪贴板失败出现在状态;当前 Copy 动作没有暂时的成功动画.
预测和限制
时标/重度装饰只覆盖可见的取景口并使用Workbench CSS颜色变量. 当另一个摩纳哥编辑器更改全空间主题时,它们会保持颜色;查看器不会 注册全局日志语言或主题.
只有匹配的记录输入摩纳哥模式,所以本地查找和选择副本运行在可见处
语句。 过滤器更改重建投影同步并重设其选择 。 批次附件和前缀
当Follow被关闭而所选记录得以存续时, 驱离保留读取位置 。 A 类
定期释放删除的摩纳哥文本缓冲器。 来源记录仍可在
被过滤器隐藏时的频道。 用户界面更新是每个动画框架的结合; flush() 应用
待立即更改 getText() 返回已过滤文本前的冲出 .
两种保留限制同时适用。 默认是10万张唱片和16个小米 UTF-16 代码
消息+源的单位而不是JavaScript的字节盖。 超大小的记录也被拆除;
状态报告自Clear以来被驱逐的人数. getEntries(afterId) 返回保留光标
尾巴没有复制早期的历史. 身份识别在Clear全线保持单调状态. onDidChange 宣布一个
完成附件批次或清除; onDidAppend 报告保留下来的新记录。 现有
append, (中文(简体) ), appendLine,以及 getLines 制片人电话继续工作.
默认剪贴板使用 navigator.clipboard; 嵌入式主机可以通过 writeClipboard。 。 。 .
处置取景者后再处置其服务. 在反应中,从效果中挂起而不是通过
每个日志批次通过组件状态 :
import { useEffect, useRef } from "react";
import type { OutputChannel } from "@eyeauras/workbench";
import { createMonacoOutputView, type MonacoNamespace } from "@eyeauras/workbench-monaco";
function Output({ channel, monaco }: { channel: OutputChannel; monaco: MonacoNamespace }) {
const host = useRef<HTMLDivElement>(null);
useEffect(() => {
const view = createMonacoOutputView(host.current!, monaco, channel);
return () => view.dispose();
}, [channel, monaco]);
return <div ref={host} style={{ height: "100%", minHeight: 0 }} />;
}
见演示 输出日志 页面用于100k/1M批量装载和活流. 长期档案和 工作室/维佐尔运输适配器仍然是东道方的责任。 制作人的决定和基准 限制记录在 问题26。 。 。 .