Joseph Doherty
688a003d1d
v2-ci / build (push) Failing after 43s
v2-ci / unit-tests (tests/Core/ZB.MOM.WW.OtOpcUa.Cluster.Tests) (push) Has been skipped
v2-ci / unit-tests (tests/Server/ZB.MOM.WW.OtOpcUa.ControlPlane.Tests) (push) Has been skipped
v2-ci / unit-tests (tests/Server/ZB.MOM.WW.OtOpcUa.OpcUaServer.Tests) (push) Has been skipped
v2-ci / unit-tests (tests/Server/ZB.MOM.WW.OtOpcUa.Runtime.Tests) (push) Has been skipped
v2-ci / unit-tests (tests/Server/ZB.MOM.WW.OtOpcUa.Security.Tests) (push) Has been skipped
v2-ci / integration (tests/Server/ZB.MOM.WW.OtOpcUa.Host.IntegrationTests) (push) Has been skipped
v2-ci / integration (tests/Server/ZB.MOM.WW.OtOpcUa.OpcUaServer.IntegrationTests) (push) Has been skipped
Monaco's word definition splits on '.', so accepting a full tag path while a partial path was typed (e.g. "X.Protected") duplicated the prefix (-> "X.X.ProtectedValue"). Tag-path items now replace the whole literal content from the opening quote to the caret.
230 lines
12 KiB
JavaScript
230 lines
12 KiB
JavaScript
(function () {
|
|
const VS_BASE = "/_content/ZB.MOM.WW.OtOpcUa.AdminUI/lib/monaco/vs";
|
|
const editors = {};
|
|
let readyPromise = null;
|
|
|
|
function ensureLoaded() {
|
|
if (readyPromise) return readyPromise;
|
|
readyPromise = new Promise(function (resolve, reject) {
|
|
const loader = document.createElement("script");
|
|
loader.src = VS_BASE + "/loader.js";
|
|
loader.onload = function () {
|
|
require.config({ paths: { vs: VS_BASE } });
|
|
require(["vs/editor/editor.main"], function () {
|
|
registerCSharpProviders();
|
|
resolve();
|
|
});
|
|
};
|
|
loader.onerror = function (e) { reject(e); };
|
|
document.head.appendChild(loader);
|
|
});
|
|
return readyPromise;
|
|
}
|
|
|
|
const KIND_MAP = { Method: 0, Field: 3, Property: 9, Event: 10, Class: 5, Module: 8, Variable: 4, Text: 18 };
|
|
|
|
function registerCSharpProviders() {
|
|
monaco.languages.registerCompletionItemProvider("csharp", {
|
|
triggerCharacters: [".", "(", "\""],
|
|
provideCompletionItems: async function (model, position) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/completions", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ codeText: model.getValue(), line: position.lineNumber, column: position.column })
|
|
});
|
|
if (!resp.ok) return { suggestions: [] };
|
|
const data = await resp.json();
|
|
const word = model.getWordUntilPosition(position);
|
|
const wordRange = {
|
|
startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
|
|
startColumn: word.startColumn, endColumn: word.endColumn
|
|
};
|
|
// Tag-path items (detail "tag path") are full dotted paths inside a string literal.
|
|
// Monaco's word definition splits on '.', so the word range would cover only the last
|
|
// segment and accepting the full path would duplicate the prefix
|
|
// (e.g. "X.Protected" + insert "X.ProtectedValue" -> "X.X.ProtectedValue").
|
|
// Replace the whole partial path instead: from just after the opening quote to the caret.
|
|
const lineText = model.getLineContent(position.lineNumber);
|
|
const beforeCaret = lineText.substring(0, position.column - 1);
|
|
const quoteIdx = Math.max(beforeCaret.lastIndexOf('"'), beforeCaret.lastIndexOf("'"));
|
|
const literalRange = {
|
|
startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
|
|
startColumn: quoteIdx >= 0 ? quoteIdx + 2 : position.column,
|
|
endColumn: position.column
|
|
};
|
|
return {
|
|
suggestions: (data.items || []).map(function (it) {
|
|
return {
|
|
label: it.label, insertText: it.insertText, detail: it.detail,
|
|
kind: KIND_MAP[it.kind] != null ? KIND_MAP[it.kind] : 18,
|
|
insertTextRules: it.insertTextRules || 0,
|
|
range: it.detail === "tag path" ? literalRange : wordRange
|
|
};
|
|
})
|
|
};
|
|
} catch (e) { return { suggestions: [] }; }
|
|
}
|
|
});
|
|
monaco.languages.registerHoverProvider("csharp", {
|
|
provideHover: async function (model, position) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/hover", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ codeText: model.getValue(), line: position.lineNumber, column: position.column })
|
|
});
|
|
if (!resp.ok) return null;
|
|
const data = await resp.json();
|
|
if (!data.markdown) return null;
|
|
return { contents: [{ value: data.markdown }] };
|
|
} catch (e) { return null; }
|
|
}
|
|
});
|
|
monaco.languages.registerDocumentFormattingEditProvider("csharp", {
|
|
provideDocumentFormattingEdits: async function (model) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/format", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code: model.getValue() })
|
|
});
|
|
if (!resp.ok) return [];
|
|
const data = await resp.json();
|
|
if (typeof data.code !== "string" || data.code === model.getValue()) return [];
|
|
return [{ range: model.getFullModelRange(), text: data.code }];
|
|
} catch (e) { return []; }
|
|
}
|
|
});
|
|
monaco.languages.registerInlayHintsProvider("csharp", {
|
|
provideInlayHints: async function (model) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/inlay-hints", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code: model.getValue() })
|
|
});
|
|
if (!resp.ok) return { hints: [], dispose: function () {} };
|
|
const data = await resp.json();
|
|
return {
|
|
hints: (data.hints || []).map(function (h) {
|
|
return { position: { lineNumber: h.line, column: h.column }, label: h.label, kind: 2, paddingRight: true };
|
|
}),
|
|
dispose: function () {}
|
|
};
|
|
} catch (e) { return { hints: [], dispose: function () {} }; }
|
|
}
|
|
});
|
|
monaco.languages.registerSignatureHelpProvider("csharp", {
|
|
signatureHelpTriggerCharacters: ["(", ","],
|
|
signatureHelpRetriggerCharacters: [","],
|
|
provideSignatureHelp: async function (model, position) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/signature-help", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ codeText: model.getValue(), line: position.lineNumber, column: position.column })
|
|
});
|
|
if (!resp.ok) return null;
|
|
const data = await resp.json();
|
|
if (!data.label) return null;
|
|
return {
|
|
value: {
|
|
signatures: [{
|
|
label: data.label,
|
|
parameters: (data.parameters || []).map(function (p) { return { label: p.label, documentation: p.documentation }; })
|
|
}],
|
|
activeSignature: 0,
|
|
activeParameter: data.activeParameter ?? 0
|
|
},
|
|
dispose: function () {}
|
|
};
|
|
} catch (e) { return null; }
|
|
}
|
|
});
|
|
}
|
|
|
|
async function fetchDiagnostics(model) {
|
|
try {
|
|
const resp = await fetch("/api/script-analysis/diagnostics", {
|
|
method: "POST", credentials: "same-origin",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code: model.getValue() })
|
|
});
|
|
if (!resp.ok) return [];
|
|
const data = await resp.json();
|
|
return data.markers || [];
|
|
} catch (e) { return []; }
|
|
}
|
|
|
|
// A single body-level node for Monaco's overflow widgets (suggest / hover / parameter hints).
|
|
// Rendering them here — outside any ancestor with a CSS transform (e.g. the theme's `.rise`
|
|
// entrance animation) — keeps the position:fixed widgets viewport-correct. Without it, the
|
|
// transformed ancestor becomes the containing block and the popup is offset far from the caret.
|
|
function overflowWidgetsNode() {
|
|
let node = document.getElementById("otopcua-monaco-overflow");
|
|
if (!node) {
|
|
node = document.createElement("div");
|
|
node.id = "otopcua-monaco-overflow";
|
|
node.className = "monaco-editor"; // so the suggest/hover widget CSS applies
|
|
node.style.position = "absolute";
|
|
node.style.top = "0";
|
|
node.style.left = "0";
|
|
node.style.zIndex = "2000";
|
|
document.body.appendChild(node);
|
|
}
|
|
return node;
|
|
}
|
|
|
|
async function createEditor(id, host, options, dotNetRef) {
|
|
await ensureLoaded();
|
|
if (!host) return;
|
|
const editor = monaco.editor.create(host, {
|
|
value: options.value || "", language: options.language || "csharp",
|
|
theme: "vs", minimap: { enabled: false }, scrollBeyondLastLine: false,
|
|
automaticLayout: true, fontSize: 13, lineNumbers: "on",
|
|
renderLineHighlight: "line", readOnly: !!options.readOnly,
|
|
tabSize: 4, insertSpaces: true, wordWrap: "off",
|
|
// Render overflow widgets (suggest/hover) in a body-level node so an ancestor CSS
|
|
// transform doesn't mis-position them; requires fixedOverflowWidgets.
|
|
fixedOverflowWidgets: true, overflowWidgetsDomNode: overflowWidgetsNode(),
|
|
// Auto-suggest inside string literals too, so tag-path completion surfaces while typing
|
|
// inside ctx.GetTag("…") / ctx.SetVirtualTag("…") without requiring an explicit Ctrl+Space.
|
|
quickSuggestions: { other: true, comments: false, strings: true }
|
|
});
|
|
let diagTimer = null;
|
|
const scheduleDiagnostics = function () {
|
|
if (diagTimer) clearTimeout(diagTimer);
|
|
diagTimer = setTimeout(async function () {
|
|
const model = editor.getModel(); if (!model) return;
|
|
const markers = await fetchDiagnostics(model);
|
|
monaco.editor.setModelMarkers(model, "otopcua", markers);
|
|
dotNetRef.invokeMethodAsync("OnMarkersChanged", markers).catch(function () {});
|
|
}, 500);
|
|
};
|
|
editor.onDidChangeModelContent(function () {
|
|
dotNetRef.invokeMethodAsync("OnValueChanged", editor.getValue()).catch(function () {});
|
|
if (options.language === "csharp") scheduleDiagnostics();
|
|
});
|
|
editors[id] = { editor: editor, dotNetRef: dotNetRef };
|
|
if (options.language === "csharp") scheduleDiagnostics();
|
|
}
|
|
function setEditorOption(id, name, value) {
|
|
const e = editors[id]; if (!e) return;
|
|
// Note: monaco.editor.setTheme is global — it re-themes every editor on the page, not just this id.
|
|
if (name === "theme") { monaco.editor.setTheme(value); return; }
|
|
const u = {}; u[name] = value; e.editor.updateOptions(u);
|
|
}
|
|
function format(id) { editors[id]?.editor.getAction("editor.action.formatDocument")?.run(); }
|
|
function revealLine(id, line, col) {
|
|
const e = editors[id]; if (!e) return;
|
|
e.editor.revealLineInCenter(line); e.editor.setPosition({ lineNumber: line, column: col || 1 }); e.editor.focus();
|
|
}
|
|
function setValue(id, v) { const e = editors[id]; if (e && e.editor.getValue() !== v) e.editor.setValue(v || ""); }
|
|
function getValue(id) { const e = editors[id]; return e ? e.editor.getValue() : null; }
|
|
function setMarkers(id, m) { const e = editors[id]; const model = e && e.editor.getModel(); if (model) monaco.editor.setModelMarkers(model, "otopcua", m || []); }
|
|
function dispose(id) { const e = editors[id]; if (!e) return; try { e.editor.dispose(); } catch (x) {} delete editors[id]; }
|
|
|
|
window.MonacoBlazor = { createEditor, setValue, getValue, setMarkers, setEditorOption, format, revealLine, dispose };
|
|
})();
|