mogh_ui 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
20
21
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
22
  // If the importer is in node compatibility mode or this is not an ESM
22
23
  // file that has been converted to a CommonJS file using a Babel-
@@ -29,216 +30,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
29
30
  var monaco_exports = {};
30
31
  __export(monaco_exports, {
31
32
  MonacoDiffEditor: () => MonacoDiffEditor,
32
- MonacoEditor: () => MonacoEditor,
33
- languageFromPath: () => languageFromPath
33
+ MonacoEditor: () => MonacoEditor
34
34
  });
35
35
  module.exports = __toCommonJS(monaco_exports);
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
- var import_init = require("./init");
38
37
  var import_react = require("react");
39
- var import_react2 = require("@monaco-editor/react");
40
- var monaco = __toESM(require("monaco-editor"), 1);
41
- var prettier = __toESM(require("prettier/standalone"), 1);
42
- var pluginTypescript = __toESM(require("prettier/plugins/typescript"), 1);
43
- var pluginEsTree = __toESM(require("prettier/plugins/estree"), 1);
44
- var pluginYaml = __toESM(require("prettier/plugins/yaml"), 1);
45
- var import_hooks = require("@mantine/hooks");
46
- var import_core = require("@mantine/core");
47
- const MIN_EDITOR_HEIGHT = 56;
48
- const LANGUAGE_EXTENSIONS = {
49
- yaml: [".yaml", ".yml"],
50
- toml: [".toml"],
51
- fancy_toml: [],
52
- json: [".json"],
53
- key_value: [".env", ".conf"],
54
- ini: [".ini"],
55
- string_list: [],
56
- shell: [".sh", ".bash", ".zsh"],
57
- dockerfile: ["Dockerfile"],
58
- rust: [".rs"],
59
- javascript: [".js", ".jsx", ".mjs", ".cjs"],
60
- typescript: [".ts", ".tsx"]
61
- };
62
- function languageFromPath(path) {
63
- for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
64
- for (const extension of extensions) {
65
- if (path.endsWith(extension)) {
66
- return lang;
67
- }
68
- }
69
- }
70
- return void 0;
71
- }
72
- function MonacoEditor({
73
- value,
74
- onValueChange,
75
- language: _language,
76
- enableFancyToml,
77
- readOnly,
78
- filename,
79
- minHeight,
80
- maxHeightProportion,
81
- maxHeight,
82
- id,
83
- ...boxProps
84
- }) {
85
- const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
86
- const dimensions = (0, import_hooks.useViewportSize)();
87
- const [editor, setEditor] = (0, import_react.useState)(null);
88
- (0, import_react.useEffect)(() => {
89
- if (!editor) return;
90
- let node = editor.getDomNode();
91
- if (!node) return;
92
- const callback = (e) => {
93
- if (e.key === "Escape") {
94
- document.activeElement?.blur?.();
95
- }
96
- };
97
- node.addEventListener("keydown", callback);
98
- return () => node.removeEventListener("keydown", callback);
99
- }, [editor]);
100
- (0, import_react.useEffect)(() => {
101
- if (language !== "typescript" && language !== "javascript" && language !== "yaml")
102
- return;
103
- if (!editor) return;
104
- editor.addCommand(
105
- monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
106
- async () => {
107
- if (!editor) return;
108
- const model = editor.getModel();
109
- if (!model) return;
110
- const position = editor.getPosition();
111
- let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
112
- const curr = editor.getValue();
113
- const { formatted, cursorOffset } = await prettier.formatWithCursor(
114
- curr,
115
- {
116
- cursorOffset: beforeOffset,
117
- parser: language === "yaml" ? "yaml" : "typescript",
118
- plugins: language === "yaml" ? [pluginYaml] : [pluginTypescript, pluginEsTree],
119
- printWidth: 80
120
- // Set the desired max line length
121
- }
122
- );
123
- editor.setValue(formatted);
124
- editor.setPosition(model.getPositionAt(cursorOffset));
125
- }
126
- );
127
- }, [editor]);
128
- const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
129
- (0, import_react.useEffect)(() => {
130
- if (!editor) return;
131
- const contentHeight = line_count * 18 + 30;
132
- const containerNode = editor.getContainerDomNode();
133
- containerNode.style.height = `${Math.max(
134
- Math.min(
135
- contentHeight,
136
- Math.floor(dimensions.height * 0.75),
137
- maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
138
- maxHeight ?? 1e4
139
- ),
140
- minHeight ?? MIN_EDITOR_HEIGHT
141
- )}px`;
142
- }, [dimensions.height, editor, line_count]);
143
- const currentTheme = (0, import_core.useComputedColorScheme)();
144
- const options = {
145
- minimap: { enabled: false },
146
- // scrollbar: { alwaysConsumeMouseWheel: false },
147
- scrollBeyondLastLine: false,
148
- folding: false,
149
- automaticLayout: true,
150
- renderValidationDecorations: "on",
151
- renderLineHighlightOnlyWhenFocus: true,
152
- readOnly,
153
- tabSize: 2,
154
- detectIndentation: true,
155
- quickSuggestions: true,
156
- padding: {
157
- top: 15
158
- }
159
- };
160
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
161
- import_react2.Editor,
162
- {
163
- language,
164
- value,
165
- theme: currentTheme,
166
- defaultPath: defaultPath(filename),
167
- options,
168
- onChange: (v) => onValueChange?.(v ?? ""),
169
- onMount: (editor2) => setEditor(editor2)
170
- }
171
- ) });
172
- }
173
- function defaultPath(filename) {
174
- if (!filename) return void 0;
175
- const split = filename.split("/");
176
- return split[split.length - 1];
38
+ __reExport(monaco_exports, require("./common"), module.exports);
39
+ const MonacoEditorInner = (0, import_react.lazy)(
40
+ () => import("./editor").then((m) => ({ default: m.MonacoEditorImpl }))
41
+ );
42
+ const MonacoDiffEditorInner = (0, import_react.lazy)(
43
+ () => import("./editor").then((m) => ({ default: m.MonacoDiffEditorImpl }))
44
+ );
45
+ function MonacoEditor(props) {
46
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonacoEditorInner, { ...props }) });
177
47
  }
178
- const MIN_DIFF_HEIGHT = 100;
179
- const MAX_DIFF_HEIGHT = 600;
180
- function MonacoDiffEditor({
181
- original,
182
- modified,
183
- onModifiedValueChange,
184
- language: _language,
185
- enableFancyToml,
186
- readOnly,
187
- id,
188
- hideUnchangedRegions = true,
189
- ...boxProps
190
- }) {
191
- const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
192
- const [editor, setEditor] = (0, import_react.useState)(null);
193
- const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
194
- const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
195
- const line_count = Math.max(original_line_count, modified_line_count);
196
- (0, import_react.useEffect)(() => {
197
- if (!editor) return;
198
- const contentHeight = line_count * 18 + 30;
199
- const node = editor.getContainerDomNode();
200
- node.style.height = `${Math.max(
201
- Math.min(contentHeight, MAX_DIFF_HEIGHT),
202
- MIN_DIFF_HEIGHT
203
- )}px`;
204
- }, [editor, line_count]);
205
- const currentTheme = (0, import_core.useComputedColorScheme)();
206
- const options = {
207
- minimap: { enabled: true },
208
- scrollbar: { alwaysConsumeMouseWheel: false },
209
- scrollBeyondLastLine: false,
210
- hideUnchangedRegions: { enabled: hideUnchangedRegions },
211
- folding: false,
212
- automaticLayout: true,
213
- renderValidationDecorations: "on",
214
- renderLineHighlightOnlyWhenFocus: true,
215
- readOnly,
216
- padding: {
217
- top: 15
218
- }
219
- };
220
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
221
- import_react2.DiffEditor,
222
- {
223
- language,
224
- original,
225
- modified,
226
- theme: currentTheme,
227
- options,
228
- onMount: (editor2) => {
229
- const modifiedEditor = editor2.getModifiedEditor();
230
- modifiedEditor.onDidChangeModelContent((_) => {
231
- onModifiedValueChange?.(modifiedEditor.getValue());
232
- });
233
- setEditor(editor2);
234
- }
235
- }
236
- ) });
48
+ function MonacoDiffEditor(props) {
49
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonacoDiffEditorInner, { ...props }) });
237
50
  }
238
51
  // Annotate the CommonJS export names for ESM import in node:
239
52
  0 && (module.exports = {
240
53
  MonacoDiffEditor,
241
54
  MonacoEditor,
242
- languageFromPath
55
+ ...require("./common")
243
56
  });
244
57
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport * as prettier from \"prettier/standalone\";\nimport * as pluginTypescript from \"prettier/plugins/typescript\";\nimport * as pluginEsTree from \"prettier/plugins/estree\";\nimport * as pluginYaml from \"prettier/plugins/yaml\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, BoxProps, useComputedColorScheme } from \"@mantine/core\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\nexport type MonacoLanguage =\n | \"yaml\"\n | \"toml\"\n | \"fancy_toml\"\n | \"json\"\n | \"key_value\"\n | \"ini\"\n | \"string_list\"\n | \"shell\"\n | \"dockerfile\"\n | \"rust\"\n | \"javascript\"\n | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n yaml: [\".yaml\", \".yml\"],\n toml: [\".toml\"],\n fancy_toml: [],\n json: [\".json\"],\n key_value: [\".env\", \".conf\"],\n ini: [\".ini\"],\n string_list: [],\n shell: [\".sh\", \".bash\", \".zsh\"],\n dockerfile: [\"Dockerfile\"],\n rust: [\".rs\"],\n javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n for (const extension of extensions) {\n if (path.endsWith(extension)) {\n return lang as MonacoLanguage;\n }\n }\n }\n return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n value: string | undefined;\n onValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n filename?: string;\n readOnly?: boolean;\n minHeight?: number;\n /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n maxHeightProportion?: number;\n maxHeight?: number;\n id?: string;\n}\n\nexport function MonacoEditor({\n value,\n onValueChange,\n language: _language,\n enableFancyToml,\n readOnly,\n filename,\n minHeight,\n maxHeightProportion,\n maxHeight,\n id,\n ...boxProps\n}: MonacoEditorProps) {\n const language = (\n _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n ) as MonacoLanguage;\n\n const dimensions = useViewportSize();\n const [editor, setEditor] =\n useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n useEffect(() => {\n if (!editor) return;\n\n let node = editor.getDomNode();\n if (!node) return;\n\n const callback = (e: any) => {\n if (e.key === \"Escape\") {\n (document.activeElement as any)?.blur?.();\n }\n };\n\n node.addEventListener(\"keydown\", callback);\n return () => node.removeEventListener(\"keydown\", callback);\n }, [editor]);\n\n useEffect(() => {\n if (\n language !== \"typescript\" &&\n language !== \"javascript\" &&\n language !== \"yaml\"\n )\n return;\n if (!editor) return;\n editor.addCommand(\n monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n async () => {\n if (!editor) return;\n const model = editor.getModel();\n if (!model) return;\n const position = editor.getPosition();\n let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n const curr = editor.getValue();\n const { formatted, cursorOffset } = await prettier.formatWithCursor(\n curr,\n {\n cursorOffset: beforeOffset,\n parser: language === \"yaml\" ? \"yaml\" : \"typescript\",\n plugins:\n language === \"yaml\"\n ? [pluginYaml]\n : [pluginTypescript, pluginEsTree as any],\n printWidth: 80, // Set the desired max line length\n },\n );\n editor.setValue(formatted);\n editor.setPosition(model.getPositionAt(cursorOffset));\n },\n );\n }, [editor]);\n\n const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n useEffect(() => {\n if (!editor) return;\n const contentHeight = line_count * 18 + 30;\n const containerNode = editor.getContainerDomNode();\n\n containerNode.style.height = `${Math.max(\n Math.min(\n contentHeight,\n Math.floor(dimensions.height * 0.75),\n maxHeightProportion\n ? Math.floor(maxHeightProportion * dimensions.height)\n : 10_000,\n maxHeight ?? 10_000,\n ),\n minHeight ?? MIN_EDITOR_HEIGHT,\n )}px`;\n }, [dimensions.height, editor, line_count]);\n\n const currentTheme = useComputedColorScheme();\n\n const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n minimap: { enabled: false },\n // scrollbar: { alwaysConsumeMouseWheel: false },\n scrollBeyondLastLine: false,\n folding: false,\n automaticLayout: true,\n renderValidationDecorations: \"on\",\n renderLineHighlightOnlyWhenFocus: true,\n readOnly,\n tabSize: 2,\n detectIndentation: true,\n quickSuggestions: true,\n padding: {\n top: 15,\n },\n };\n\n return (\n <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n <Editor\n language={language}\n value={value}\n theme={currentTheme}\n defaultPath={defaultPath(filename)}\n options={options}\n onChange={(v) => onValueChange?.(v ?? \"\")}\n onMount={(editor) => setEditor(editor)}\n />\n </Box>\n );\n}\n\nfunction defaultPath(filename?: string) {\n if (!filename) return undefined;\n // Extract only the filename part of path,\n // avoiding critical issue when path starts with '/'\n const split = filename.split(\"/\");\n return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n original: string | undefined;\n modified: string | undefined;\n onModifiedValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n readOnly?: boolean;\n id?: string;\n hideUnchangedRegions?: boolean;\n}\n\nexport function MonacoDiffEditor({\n original,\n modified,\n onModifiedValueChange,\n language: _language,\n enableFancyToml,\n readOnly,\n id,\n hideUnchangedRegions = true,\n ...boxProps\n}: MonacoDiffEditorProps) {\n const language = (\n _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n ) as MonacoLanguage;\n\n const [editor, setEditor] =\n useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n const line_count = Math.max(original_line_count, modified_line_count);\n\n useEffect(() => {\n if (!editor) return;\n const contentHeight = line_count * 18 + 30;\n const node = editor.getContainerDomNode();\n\n node.style.height = `${Math.max(\n Math.min(contentHeight, MAX_DIFF_HEIGHT),\n MIN_DIFF_HEIGHT,\n )}px`;\n }, [editor, line_count]);\n\n const currentTheme = useComputedColorScheme();\n\n const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n minimap: { enabled: true },\n scrollbar: { alwaysConsumeMouseWheel: false },\n scrollBeyondLastLine: false,\n hideUnchangedRegions: { enabled: hideUnchangedRegions },\n folding: false,\n automaticLayout: true,\n renderValidationDecorations: \"on\",\n renderLineHighlightOnlyWhenFocus: true,\n readOnly,\n padding: {\n top: 15,\n },\n };\n\n return (\n <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n <DiffEditor\n language={language}\n original={original}\n modified={modified}\n theme={currentTheme}\n options={options}\n onMount={(editor) => {\n const modifiedEditor = editor.getModifiedEditor();\n modifiedEditor.onDidChangeModelContent((_) => {\n onModifiedValueChange?.(modifiedEditor.getValue());\n });\n setEditor(editor);\n }}\n />\n </Box>\n );\n}\n"],"mappings":"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","names":["import_react","editor"]}
1
+ {"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport { MonacoDiffEditorProps, MonacoEditorProps } from \"./common\";\n\nexport * from \"./common\";\n\n// The editor implementation pulls in monaco-editor / @monaco-editor/react,\n// so it is loaded lazily to keep it out of consumers' entry chunks.\nconst MonacoEditorInner = lazy(() =>\n import(\"./editor\").then((m) => ({ default: m.MonacoEditorImpl })),\n);\nconst MonacoDiffEditorInner = lazy(() =>\n import(\"./editor\").then((m) => ({ default: m.MonacoDiffEditorImpl })),\n);\n\nexport function MonacoEditor(props: MonacoEditorProps) {\n return (\n <Suspense fallback={null}>\n <MonacoEditorInner {...props} />\n </Suspense>\n );\n}\n\nexport function MonacoDiffEditor(props: MonacoDiffEditorProps) {\n return (\n <Suspense fallback={null}>\n <MonacoDiffEditorInner {...props} />\n </Suspense>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBM;AAjBN,mBAA+B;AAG/B,2BAAc,qBAHd;AAOA,MAAM,wBAAoB;AAAA,EAAK,MAC7B,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAClE;AACA,MAAM,4BAAwB;AAAA,EAAK,MACjC,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;AACtE;AAEO,SAAS,aAAa,OAA0B;AACrD,SACE,4CAAC,yBAAS,UAAU,MAClB,sDAAC,qBAAmB,GAAG,OAAO,GAChC;AAEJ;AAEO,SAAS,iBAAiB,OAA8B;AAC7D,SACE,4CAAC,yBAAS,UAAU,MAClB,sDAAC,yBAAuB,GAAG,OAAO,GACpC;AAEJ;","names":[]}
@@ -1,30 +1,5 @@
1
- import "./init";
2
- import { BoxProps } from "@mantine/core";
3
- export type MonacoLanguage = "yaml" | "toml" | "fancy_toml" | "json" | "key_value" | "ini" | "string_list" | "shell" | "dockerfile" | "rust" | "javascript" | "typescript";
4
- export declare function languageFromPath(path: string): MonacoLanguage | undefined;
5
- export interface MonacoEditorProps extends BoxProps {
6
- value: string | undefined;
7
- onValueChange?: (value: string) => void;
8
- language: MonacoLanguage | undefined;
9
- enableFancyToml?: boolean;
10
- filename?: string;
11
- readOnly?: boolean;
12
- minHeight?: number;
13
- /** Define max height as proportion of dimension height. Should be between 0 and 1. */
14
- maxHeightProportion?: number;
15
- maxHeight?: number;
16
- id?: string;
17
- }
18
- export declare function MonacoEditor({ value, onValueChange, language: _language, enableFancyToml, readOnly, filename, minHeight, maxHeightProportion, maxHeight, id, ...boxProps }: MonacoEditorProps): import("react").JSX.Element;
19
- export interface MonacoDiffEditorProps extends BoxProps {
20
- original: string | undefined;
21
- modified: string | undefined;
22
- onModifiedValueChange?: (value: string) => void;
23
- language: MonacoLanguage | undefined;
24
- enableFancyToml?: boolean;
25
- readOnly?: boolean;
26
- id?: string;
27
- hideUnchangedRegions?: boolean;
28
- }
29
- export declare function MonacoDiffEditor({ original, modified, onModifiedValueChange, language: _language, enableFancyToml, readOnly, id, hideUnchangedRegions, ...boxProps }: MonacoDiffEditorProps): import("react").JSX.Element;
1
+ import { MonacoDiffEditorProps, MonacoEditorProps } from "./common";
2
+ export * from "./common";
3
+ export declare function MonacoEditor(props: MonacoEditorProps): import("react").JSX.Element;
4
+ export declare function MonacoDiffEditor(props: MonacoDiffEditorProps): import("react").JSX.Element;
30
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAUhB,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAItE,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,GACZ,MAAM,GACN,WAAW,GACX,KAAK,GACL,aAAa,GACb,OAAO,GACP,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;AAiBjB,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,8BAS5C;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,iBAAiB,+BAgHnB;AAaD,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,QAAQ,EAAE,SAAS,EACnB,eAAe,EACf,QAAQ,EACR,EAAE,EACF,oBAA2B,EAC3B,GAAG,QAAQ,EACZ,EAAE,qBAAqB,+BA0DvB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEpE,cAAc,UAAU,CAAC;AAWzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAM5D"}
@@ -1,208 +1,20 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import "./init";
3
- import { useEffect, useState } from "react";
4
- import { DiffEditor, Editor } from "@monaco-editor/react";
5
- import * as monaco from "monaco-editor";
6
- import * as prettier from "prettier/standalone";
7
- import * as pluginTypescript from "prettier/plugins/typescript";
8
- import * as pluginEsTree from "prettier/plugins/estree";
9
- import * as pluginYaml from "prettier/plugins/yaml";
10
- import { useViewportSize } from "@mantine/hooks";
11
- import { Box, useComputedColorScheme } from "@mantine/core";
12
- const MIN_EDITOR_HEIGHT = 56;
13
- const LANGUAGE_EXTENSIONS = {
14
- yaml: [".yaml", ".yml"],
15
- toml: [".toml"],
16
- fancy_toml: [],
17
- json: [".json"],
18
- key_value: [".env", ".conf"],
19
- ini: [".ini"],
20
- string_list: [],
21
- shell: [".sh", ".bash", ".zsh"],
22
- dockerfile: ["Dockerfile"],
23
- rust: [".rs"],
24
- javascript: [".js", ".jsx", ".mjs", ".cjs"],
25
- typescript: [".ts", ".tsx"]
26
- };
27
- function languageFromPath(path) {
28
- for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
29
- for (const extension of extensions) {
30
- if (path.endsWith(extension)) {
31
- return lang;
32
- }
33
- }
34
- }
35
- return void 0;
36
- }
37
- function MonacoEditor({
38
- value,
39
- onValueChange,
40
- language: _language,
41
- enableFancyToml,
42
- readOnly,
43
- filename,
44
- minHeight,
45
- maxHeightProportion,
46
- maxHeight,
47
- id,
48
- ...boxProps
49
- }) {
50
- const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
51
- const dimensions = useViewportSize();
52
- const [editor, setEditor] = useState(null);
53
- useEffect(() => {
54
- if (!editor) return;
55
- let node = editor.getDomNode();
56
- if (!node) return;
57
- const callback = (e) => {
58
- if (e.key === "Escape") {
59
- document.activeElement?.blur?.();
60
- }
61
- };
62
- node.addEventListener("keydown", callback);
63
- return () => node.removeEventListener("keydown", callback);
64
- }, [editor]);
65
- useEffect(() => {
66
- if (language !== "typescript" && language !== "javascript" && language !== "yaml")
67
- return;
68
- if (!editor) return;
69
- editor.addCommand(
70
- monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
71
- async () => {
72
- if (!editor) return;
73
- const model = editor.getModel();
74
- if (!model) return;
75
- const position = editor.getPosition();
76
- let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
77
- const curr = editor.getValue();
78
- const { formatted, cursorOffset } = await prettier.formatWithCursor(
79
- curr,
80
- {
81
- cursorOffset: beforeOffset,
82
- parser: language === "yaml" ? "yaml" : "typescript",
83
- plugins: language === "yaml" ? [pluginYaml] : [pluginTypescript, pluginEsTree],
84
- printWidth: 80
85
- // Set the desired max line length
86
- }
87
- );
88
- editor.setValue(formatted);
89
- editor.setPosition(model.getPositionAt(cursorOffset));
90
- }
91
- );
92
- }, [editor]);
93
- const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
94
- useEffect(() => {
95
- if (!editor) return;
96
- const contentHeight = line_count * 18 + 30;
97
- const containerNode = editor.getContainerDomNode();
98
- containerNode.style.height = `${Math.max(
99
- Math.min(
100
- contentHeight,
101
- Math.floor(dimensions.height * 0.75),
102
- maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
103
- maxHeight ?? 1e4
104
- ),
105
- minHeight ?? MIN_EDITOR_HEIGHT
106
- )}px`;
107
- }, [dimensions.height, editor, line_count]);
108
- const currentTheme = useComputedColorScheme();
109
- const options = {
110
- minimap: { enabled: false },
111
- // scrollbar: { alwaysConsumeMouseWheel: false },
112
- scrollBeyondLastLine: false,
113
- folding: false,
114
- automaticLayout: true,
115
- renderValidationDecorations: "on",
116
- renderLineHighlightOnlyWhenFocus: true,
117
- readOnly,
118
- tabSize: 2,
119
- detectIndentation: true,
120
- quickSuggestions: true,
121
- padding: {
122
- top: 15
123
- }
124
- };
125
- return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
126
- Editor,
127
- {
128
- language,
129
- value,
130
- theme: currentTheme,
131
- defaultPath: defaultPath(filename),
132
- options,
133
- onChange: (v) => onValueChange?.(v ?? ""),
134
- onMount: (editor2) => setEditor(editor2)
135
- }
136
- ) });
137
- }
138
- function defaultPath(filename) {
139
- if (!filename) return void 0;
140
- const split = filename.split("/");
141
- return split[split.length - 1];
2
+ import { lazy, Suspense } from "react";
3
+ export * from "./common";
4
+ const MonacoEditorInner = lazy(
5
+ () => import("./editor").then((m) => ({ default: m.MonacoEditorImpl }))
6
+ );
7
+ const MonacoDiffEditorInner = lazy(
8
+ () => import("./editor").then((m) => ({ default: m.MonacoDiffEditorImpl }))
9
+ );
10
+ function MonacoEditor(props) {
11
+ return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MonacoEditorInner, { ...props }) });
142
12
  }
143
- const MIN_DIFF_HEIGHT = 100;
144
- const MAX_DIFF_HEIGHT = 600;
145
- function MonacoDiffEditor({
146
- original,
147
- modified,
148
- onModifiedValueChange,
149
- language: _language,
150
- enableFancyToml,
151
- readOnly,
152
- id,
153
- hideUnchangedRegions = true,
154
- ...boxProps
155
- }) {
156
- const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
157
- const [editor, setEditor] = useState(null);
158
- const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
159
- const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
160
- const line_count = Math.max(original_line_count, modified_line_count);
161
- useEffect(() => {
162
- if (!editor) return;
163
- const contentHeight = line_count * 18 + 30;
164
- const node = editor.getContainerDomNode();
165
- node.style.height = `${Math.max(
166
- Math.min(contentHeight, MAX_DIFF_HEIGHT),
167
- MIN_DIFF_HEIGHT
168
- )}px`;
169
- }, [editor, line_count]);
170
- const currentTheme = useComputedColorScheme();
171
- const options = {
172
- minimap: { enabled: true },
173
- scrollbar: { alwaysConsumeMouseWheel: false },
174
- scrollBeyondLastLine: false,
175
- hideUnchangedRegions: { enabled: hideUnchangedRegions },
176
- folding: false,
177
- automaticLayout: true,
178
- renderValidationDecorations: "on",
179
- renderLineHighlightOnlyWhenFocus: true,
180
- readOnly,
181
- padding: {
182
- top: 15
183
- }
184
- };
185
- return /* @__PURE__ */ jsx(Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ jsx(
186
- DiffEditor,
187
- {
188
- language,
189
- original,
190
- modified,
191
- theme: currentTheme,
192
- options,
193
- onMount: (editor2) => {
194
- const modifiedEditor = editor2.getModifiedEditor();
195
- modifiedEditor.onDidChangeModelContent((_) => {
196
- onModifiedValueChange?.(modifiedEditor.getValue());
197
- });
198
- setEditor(editor2);
199
- }
200
- }
201
- ) });
13
+ function MonacoDiffEditor(props) {
14
+ return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(MonacoDiffEditorInner, { ...props }) });
202
15
  }
203
16
  export {
204
17
  MonacoDiffEditor,
205
- MonacoEditor,
206
- languageFromPath
18
+ MonacoEditor
207
19
  };
208
20
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import \"./init\";\n\nimport { useEffect, useState } from \"react\";\nimport { DiffEditor, Editor } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport * as prettier from \"prettier/standalone\";\nimport * as pluginTypescript from \"prettier/plugins/typescript\";\nimport * as pluginEsTree from \"prettier/plugins/estree\";\nimport * as pluginYaml from \"prettier/plugins/yaml\";\nimport { useViewportSize } from \"@mantine/hooks\";\nimport { Box, BoxProps, useComputedColorScheme } from \"@mantine/core\";\n\nconst MIN_EDITOR_HEIGHT = 56;\n\nexport type MonacoLanguage =\n | \"yaml\"\n | \"toml\"\n | \"fancy_toml\"\n | \"json\"\n | \"key_value\"\n | \"ini\"\n | \"string_list\"\n | \"shell\"\n | \"dockerfile\"\n | \"rust\"\n | \"javascript\"\n | \"typescript\";\n\nconst LANGUAGE_EXTENSIONS: Record<MonacoLanguage, string[]> = {\n yaml: [\".yaml\", \".yml\"],\n toml: [\".toml\"],\n fancy_toml: [],\n json: [\".json\"],\n key_value: [\".env\", \".conf\"],\n ini: [\".ini\"],\n string_list: [],\n shell: [\".sh\", \".bash\", \".zsh\"],\n dockerfile: [\"Dockerfile\"],\n rust: [\".rs\"],\n javascript: [\".js\", \".jsx\", \".mjs\", \".cjs\"],\n typescript: [\".ts\", \".tsx\"],\n};\n\nexport function languageFromPath(path: string) {\n for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {\n for (const extension of extensions) {\n if (path.endsWith(extension)) {\n return lang as MonacoLanguage;\n }\n }\n }\n return undefined;\n}\n\nexport interface MonacoEditorProps extends BoxProps {\n value: string | undefined;\n onValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n filename?: string;\n readOnly?: boolean;\n minHeight?: number;\n /** Define max height as proportion of dimension height. Should be between 0 and 1. */\n maxHeightProportion?: number;\n maxHeight?: number;\n id?: string;\n}\n\nexport function MonacoEditor({\n value,\n onValueChange,\n language: _language,\n enableFancyToml,\n readOnly,\n filename,\n minHeight,\n maxHeightProportion,\n maxHeight,\n id,\n ...boxProps\n}: MonacoEditorProps) {\n const language = (\n _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n ) as MonacoLanguage;\n\n const dimensions = useViewportSize();\n const [editor, setEditor] =\n useState<monaco.editor.IStandaloneCodeEditor | null>(null);\n\n useEffect(() => {\n if (!editor) return;\n\n let node = editor.getDomNode();\n if (!node) return;\n\n const callback = (e: any) => {\n if (e.key === \"Escape\") {\n (document.activeElement as any)?.blur?.();\n }\n };\n\n node.addEventListener(\"keydown\", callback);\n return () => node.removeEventListener(\"keydown\", callback);\n }, [editor]);\n\n useEffect(() => {\n if (\n language !== \"typescript\" &&\n language !== \"javascript\" &&\n language !== \"yaml\"\n )\n return;\n if (!editor) return;\n editor.addCommand(\n monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n async () => {\n if (!editor) return;\n const model = editor.getModel();\n if (!model) return;\n const position = editor.getPosition();\n let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;\n const curr = editor.getValue();\n const { formatted, cursorOffset } = await prettier.formatWithCursor(\n curr,\n {\n cursorOffset: beforeOffset,\n parser: language === \"yaml\" ? \"yaml\" : \"typescript\",\n plugins:\n language === \"yaml\"\n ? [pluginYaml]\n : [pluginTypescript, pluginEsTree as any],\n printWidth: 80, // Set the desired max line length\n },\n );\n editor.setValue(formatted);\n editor.setPosition(model.getPositionAt(cursorOffset));\n },\n );\n }, [editor]);\n\n const line_count = value?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n\n useEffect(() => {\n if (!editor) return;\n const contentHeight = line_count * 18 + 30;\n const containerNode = editor.getContainerDomNode();\n\n containerNode.style.height = `${Math.max(\n Math.min(\n contentHeight,\n Math.floor(dimensions.height * 0.75),\n maxHeightProportion\n ? Math.floor(maxHeightProportion * dimensions.height)\n : 10_000,\n maxHeight ?? 10_000,\n ),\n minHeight ?? MIN_EDITOR_HEIGHT,\n )}px`;\n }, [dimensions.height, editor, line_count]);\n\n const currentTheme = useComputedColorScheme();\n\n const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n minimap: { enabled: false },\n // scrollbar: { alwaysConsumeMouseWheel: false },\n scrollBeyondLastLine: false,\n folding: false,\n automaticLayout: true,\n renderValidationDecorations: \"on\",\n renderLineHighlightOnlyWhenFocus: true,\n readOnly,\n tabSize: 2,\n detectIndentation: true,\n quickSuggestions: true,\n padding: {\n top: 15,\n },\n };\n\n return (\n <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n <Editor\n language={language}\n value={value}\n theme={currentTheme}\n defaultPath={defaultPath(filename)}\n options={options}\n onChange={(v) => onValueChange?.(v ?? \"\")}\n onMount={(editor) => setEditor(editor)}\n />\n </Box>\n );\n}\n\nfunction defaultPath(filename?: string) {\n if (!filename) return undefined;\n // Extract only the filename part of path,\n // avoiding critical issue when path starts with '/'\n const split = filename.split(\"/\");\n return split[split.length - 1];\n}\n\nconst MIN_DIFF_HEIGHT = 100;\nconst MAX_DIFF_HEIGHT = 600;\n\nexport interface MonacoDiffEditorProps extends BoxProps {\n original: string | undefined;\n modified: string | undefined;\n onModifiedValueChange?: (value: string) => void;\n language: MonacoLanguage | undefined;\n enableFancyToml?: boolean;\n readOnly?: boolean;\n id?: string;\n hideUnchangedRegions?: boolean;\n}\n\nexport function MonacoDiffEditor({\n original,\n modified,\n onModifiedValueChange,\n language: _language,\n enableFancyToml,\n readOnly,\n id,\n hideUnchangedRegions = true,\n ...boxProps\n}: MonacoDiffEditorProps) {\n const language = (\n _language === \"fancy_toml\" && !enableFancyToml ? \"toml\" : _language\n ) as MonacoLanguage;\n\n const [editor, setEditor] =\n useState<monaco.editor.IStandaloneDiffEditor | null>(null);\n\n const original_line_count = original?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n const modified_line_count = modified?.split(/\\r\\n|\\r|\\n/).length ?? 0;\n const line_count = Math.max(original_line_count, modified_line_count);\n\n useEffect(() => {\n if (!editor) return;\n const contentHeight = line_count * 18 + 30;\n const node = editor.getContainerDomNode();\n\n node.style.height = `${Math.max(\n Math.min(contentHeight, MAX_DIFF_HEIGHT),\n MIN_DIFF_HEIGHT,\n )}px`;\n }, [editor, line_count]);\n\n const currentTheme = useComputedColorScheme();\n\n const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {\n minimap: { enabled: true },\n scrollbar: { alwaysConsumeMouseWheel: false },\n scrollBeyondLastLine: false,\n hideUnchangedRegions: { enabled: hideUnchangedRegions },\n folding: false,\n automaticLayout: true,\n renderValidationDecorations: \"on\",\n renderLineHighlightOnlyWhenFocus: true,\n readOnly,\n padding: {\n top: 15,\n },\n };\n\n return (\n <Box id={id} onKeyDown={(e) => e.stopPropagation()} {...boxProps}>\n <DiffEditor\n language={language}\n original={original}\n modified={modified}\n theme={currentTheme}\n options={options}\n onMount={(editor) => {\n const modifiedEditor = editor.getModifiedEditor();\n modifiedEditor.onDidChangeModelContent((_) => {\n onModifiedValueChange?.(modifiedEditor.getValue());\n });\n setEditor(editor);\n }}\n />\n </Box>\n );\n}\n"],"mappings":"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","names":["editor"]}
1
+ {"version":3,"sources":["../../../src/components/monaco/index.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport { MonacoDiffEditorProps, MonacoEditorProps } from \"./common\";\n\nexport * from \"./common\";\n\n// The editor implementation pulls in monaco-editor / @monaco-editor/react,\n// so it is loaded lazily to keep it out of consumers' entry chunks.\nconst MonacoEditorInner = lazy(() =>\n import(\"./editor\").then((m) => ({ default: m.MonacoEditorImpl })),\n);\nconst MonacoDiffEditorInner = lazy(() =>\n import(\"./editor\").then((m) => ({ default: m.MonacoDiffEditorImpl })),\n);\n\nexport function MonacoEditor(props: MonacoEditorProps) {\n return (\n <Suspense fallback={null}>\n <MonacoEditorInner {...props} />\n </Suspense>\n );\n}\n\nexport function MonacoDiffEditor(props: MonacoDiffEditorProps) {\n return (\n <Suspense fallback={null}>\n <MonacoDiffEditorInner {...props} />\n </Suspense>\n );\n}\n"],"mappings":"AAiBM;AAjBN,SAAS,MAAM,gBAAgB;AAG/B,cAAc;AAId,MAAM,oBAAoB;AAAA,EAAK,MAC7B,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AAClE;AACA,MAAM,wBAAwB;AAAA,EAAK,MACjC,OAAO,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;AACtE;AAEO,SAAS,aAAa,OAA0B;AACrD,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,qBAAmB,GAAG,OAAO,GAChC;AAEJ;AAEO,SAAS,iBAAiB,OAA8B;AAC7D,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,yBAAuB,GAAG,OAAO,GACpC;AAEJ;","names":[]}
@@ -56,5 +56,23 @@ self.MonacoEnvironment = {
56
56
  return new import_editor_worker.default();
57
57
  }
58
58
  };
59
+ const nativeCreateWebWorker = monaco.editor.createWebWorker;
60
+ monaco.editor.createWebWorker = (opts) => {
61
+ if (!("worker" in opts)) {
62
+ const { createData, host, keepIdleModels, label } = opts;
63
+ const worker = Promise.resolve(
64
+ self.MonacoEnvironment.getWorker(
65
+ "workerMain.js",
66
+ label ?? "monaco-editor-worker"
67
+ )
68
+ ).then((w) => {
69
+ w.postMessage("ignore");
70
+ w.postMessage(createData);
71
+ return w;
72
+ });
73
+ opts = { worker, host, keepIdleModels };
74
+ }
75
+ return nativeCreateWebWorker(opts);
76
+ };
59
77
  import_react.loader.config({ monaco });
60
78
  //# sourceMappingURL=init.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/monaco/init.ts"],"sourcesContent":["import * as monaco from \"monaco-editor\";\n\n// The `?worker` import pattern is Vite's officially supported way to load\n// workers from dependencies. The previous `new URL(\"monaco-editor/...\", import.meta.url)`\n// pattern breaks under rolldown-based Vite, which resolves the bare specifier\n// relative to this file instead of through node module resolution.\n//\n// Paths must NOT include the `esm/vs` prefix: monaco-editor's exports map is\n// `\"./*.js\": \"./esm/vs/*.js\"`, so legacy `monaco-editor/esm/vs/...` specifiers\n// no longer resolve.\nimport EditorWorker from \"monaco-editor/editor/editor.worker.js?worker\";\nimport JsonWorker from \"monaco-editor/language/json/json.worker.js?worker\";\nimport CssWorker from \"monaco-editor/language/css/css.worker.js?worker\";\nimport HtmlWorker from \"monaco-editor/language/html/html.worker.js?worker\";\nimport TsWorker from \"monaco-editor/language/typescript/ts.worker.js?worker\";\nimport YamlWorker from \"monaco-yaml/yaml.worker.js?worker\";\n\nself.MonacoEnvironment = {\n getWorker(_, label) {\n if (label === \"json\") {\n return new JsonWorker();\n }\n if (label === \"css\" || label === \"scss\" || label === \"less\") {\n return new CssWorker();\n }\n if (label === \"html\" || label === \"handlebars\" || label === \"razor\") {\n return new HtmlWorker();\n }\n if (label === \"typescript\" || label === \"javascript\") {\n return new TsWorker();\n }\n if (label === \"yaml\") {\n return new YamlWorker();\n }\n return new EditorWorker();\n },\n};\n\nimport { loader } from \"@monaco-editor/react\";\nloader.config({ monaco });\n\n// Load the themes\nimport \"./theme\";\n// Load the parsers\nimport \"./syntax/yaml\";\nimport \"./syntax/toml\";\nimport \"./syntax/fancy_toml\";\nimport \"./syntax/shell\";\nimport \"./syntax/key_value\";\nimport \"./syntax/string_list\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,aAAwB;AAUxB,2BAAyB;AACzB,yBAAuB;AACvB,wBAAsB;AACtB,yBAAuB;AACvB,uBAAqB;AACrB,yBAAuB;AAuBvB,mBAAuB;AAIvB,mBAAO;AAEP,kBAAO;AACP,kBAAO;AACP,wBAAO;AACP,mBAAO;AACP,uBAAO;AACP,yBAAO;AAhCP,KAAK,oBAAoB;AAAA,EACvB,UAAU,GAAG,OAAO;AAClB,QAAI,UAAU,QAAQ;AACpB,aAAO,IAAI,mBAAAA,QAAW;AAAA,IACxB;AACA,QAAI,UAAU,SAAS,UAAU,UAAU,UAAU,QAAQ;AAC3D,aAAO,IAAI,kBAAAC,QAAU;AAAA,IACvB;AACA,QAAI,UAAU,UAAU,UAAU,gBAAgB,UAAU,SAAS;AACnE,aAAO,IAAI,mBAAAC,QAAW;AAAA,IACxB;AACA,QAAI,UAAU,gBAAgB,UAAU,cAAc;AACpD,aAAO,IAAI,iBAAAC,QAAS;AAAA,IACtB;AACA,QAAI,UAAU,QAAQ;AACpB,aAAO,IAAI,mBAAAC,QAAW;AAAA,IACxB;AACA,WAAO,IAAI,qBAAAC,QAAa;AAAA,EAC1B;AACF;AAGA,oBAAO,OAAO,EAAE,OAAO,CAAC;","names":["JsonWorker","CssWorker","HtmlWorker","TsWorker","YamlWorker","EditorWorker"]}
1
+ {"version":3,"sources":["../../../src/components/monaco/init.ts"],"sourcesContent":["import * as monaco from \"monaco-editor\";\n\n// The `?worker` import pattern is Vite's officially supported way to load\n// workers from dependencies. The previous `new URL(\"monaco-editor/...\", import.meta.url)`\n// pattern breaks under rolldown-based Vite, which resolves the bare specifier\n// relative to this file instead of through node module resolution.\n//\n// Paths must NOT include the `esm/vs` prefix: monaco-editor's exports map is\n// `\"./*.js\": \"./esm/vs/*.js\"`, so legacy `monaco-editor/esm/vs/...` specifiers\n// no longer resolve.\nimport EditorWorker from \"monaco-editor/editor/editor.worker.js?worker\";\nimport JsonWorker from \"monaco-editor/language/json/json.worker.js?worker\";\nimport CssWorker from \"monaco-editor/language/css/css.worker.js?worker\";\nimport HtmlWorker from \"monaco-editor/language/html/html.worker.js?worker\";\nimport TsWorker from \"monaco-editor/language/typescript/ts.worker.js?worker\";\nimport YamlWorker from \"monaco-yaml/yaml.worker.js?worker\";\n\nself.MonacoEnvironment = {\n getWorker(_, label) {\n if (label === \"json\") {\n return new JsonWorker();\n }\n if (label === \"css\" || label === \"scss\" || label === \"less\") {\n return new CssWorker();\n }\n if (label === \"html\" || label === \"handlebars\" || label === \"razor\") {\n return new HtmlWorker();\n }\n if (label === \"typescript\" || label === \"javascript\") {\n return new TsWorker();\n }\n if (label === \"yaml\") {\n return new YamlWorker();\n }\n return new EditorWorker();\n },\n};\n\n// monaco-yaml as of 5.5.1 (via monaco-worker-manager) still calls createWebWorker with the\n// pre monaco 0.53 `{ moduleId, label, createData }` options. monaco-editor >= 0.53\n// only reads `opts.worker`, so worker creation fails and monaco silently falls\n// back to a local worker with no request handler — every yaml feature then\n// rejects with \"Missing requestHandler or method: ...\". Translate legacy-shaped\n// calls the same way monaco's own languages do (esm/vs/internal/common/workers.js):\n// resolve the worker through MonacoEnvironment.getWorker and post createData\n// to it before handing it to the new API.\nconst nativeCreateWebWorker = monaco.editor.createWebWorker;\nmonaco.editor.createWebWorker = <T extends object>(opts: any) => {\n if (!(\"worker\" in opts)) {\n const { createData, host, keepIdleModels, label } = opts;\n const worker = Promise.resolve(\n self.MonacoEnvironment!.getWorker!(\n \"workerMain.js\",\n label ?? \"monaco-editor-worker\",\n ),\n ).then((w) => {\n w.postMessage(\"ignore\");\n w.postMessage(createData);\n return w;\n });\n opts = { worker, host, keepIdleModels };\n }\n return nativeCreateWebWorker<T>(opts);\n};\n\nimport { loader } from \"@monaco-editor/react\";\nloader.config({ monaco });\n\n// Load the themes\nimport \"./theme\";\n// Load the parsers\nimport \"./syntax/yaml\";\nimport \"./syntax/toml\";\nimport \"./syntax/fancy_toml\";\nimport \"./syntax/shell\";\nimport \"./syntax/key_value\";\nimport \"./syntax/string_list\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,aAAwB;AAUxB,2BAAyB;AACzB,yBAAuB;AACvB,wBAAsB;AACtB,yBAAuB;AACvB,uBAAqB;AACrB,yBAAuB;AAkDvB,mBAAuB;AAIvB,mBAAO;AAEP,kBAAO;AACP,kBAAO;AACP,wBAAO;AACP,mBAAO;AACP,uBAAO;AACP,yBAAO;AA3DP,KAAK,oBAAoB;AAAA,EACvB,UAAU,GAAG,OAAO;AAClB,QAAI,UAAU,QAAQ;AACpB,aAAO,IAAI,mBAAAA,QAAW;AAAA,IACxB;AACA,QAAI,UAAU,SAAS,UAAU,UAAU,UAAU,QAAQ;AAC3D,aAAO,IAAI,kBAAAC,QAAU;AAAA,IACvB;AACA,QAAI,UAAU,UAAU,UAAU,gBAAgB,UAAU,SAAS;AACnE,aAAO,IAAI,mBAAAC,QAAW;AAAA,IACxB;AACA,QAAI,UAAU,gBAAgB,UAAU,cAAc;AACpD,aAAO,IAAI,iBAAAC,QAAS;AAAA,IACtB;AACA,QAAI,UAAU,QAAQ;AACpB,aAAO,IAAI,mBAAAC,QAAW;AAAA,IACxB;AACA,WAAO,IAAI,qBAAAC,QAAa;AAAA,EAC1B;AACF;AAUA,MAAM,wBAAwB,OAAO,OAAO;AAC5C,OAAO,OAAO,kBAAkB,CAAmB,SAAc;AAC/D,MAAI,EAAE,YAAY,OAAO;AACvB,UAAM,EAAE,YAAY,MAAM,gBAAgB,MAAM,IAAI;AACpD,UAAM,SAAS,QAAQ;AAAA,MACrB,KAAK,kBAAmB;AAAA,QACtB;AAAA,QACA,SAAS;AAAA,MACX;AAAA,IACF,EAAE,KAAK,CAAC,MAAM;AACZ,QAAE,YAAY,QAAQ;AACtB,QAAE,YAAY,UAAU;AACxB,aAAO;AAAA,IACT,CAAC;AACD,WAAO,EAAE,QAAQ,MAAM,eAAe;AAAA,EACxC;AACA,SAAO,sBAAyB,IAAI;AACtC;AAGA,oBAAO,OAAO,EAAE,OAAO,CAAC;","names":["JsonWorker","CssWorker","HtmlWorker","TsWorker","YamlWorker","EditorWorker"]}
@@ -1 +1 @@
1
- {"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/init.ts"],"names":[],"mappings":"AA0CA,OAAO,SAAS,CAAC;AAEjB,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC"}
1
+ {"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../src/components/monaco/init.ts"],"names":[],"mappings":"AAqEA,OAAO,SAAS,CAAC;AAEjB,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC"}
@@ -25,6 +25,24 @@ self.MonacoEnvironment = {
25
25
  return new EditorWorker();
26
26
  }
27
27
  };
28
+ const nativeCreateWebWorker = monaco.editor.createWebWorker;
29
+ monaco.editor.createWebWorker = (opts) => {
30
+ if (!("worker" in opts)) {
31
+ const { createData, host, keepIdleModels, label } = opts;
32
+ const worker = Promise.resolve(
33
+ self.MonacoEnvironment.getWorker(
34
+ "workerMain.js",
35
+ label ?? "monaco-editor-worker"
36
+ )
37
+ ).then((w) => {
38
+ w.postMessage("ignore");
39
+ w.postMessage(createData);
40
+ return w;
41
+ });
42
+ opts = { worker, host, keepIdleModels };
43
+ }
44
+ return nativeCreateWebWorker(opts);
45
+ };
28
46
  import { loader } from "@monaco-editor/react";
29
47
  loader.config({ monaco });
30
48
  import "./theme";