113 lines
4.0 KiB
JavaScript
113 lines
4.0 KiB
JavaScript
/************
|
|
* Editor JS *
|
|
*************/
|
|
|
|
const { setEditorValue, initEditor } = (function() {
|
|
function setEditorValue(
|
|
editor,
|
|
text,
|
|
{ suppressEditorChangedMessage=false, forceMoveMarkers=undefined } = {}
|
|
) {
|
|
if (suppressEditorChangedMessage && editor === document.editor) {
|
|
suppressNextMessage("editor");
|
|
}
|
|
// replace editor value but preserve undo stack
|
|
editor.executeEdits("", [{ range: editor.getModel().getFullModelRange(), text, forceMoveMarkers }]);
|
|
}
|
|
|
|
async function initEditor(view) {
|
|
function loadMonacoCodeEditorAsync() {
|
|
return new Promise((resolve, _reject) => {
|
|
require.config({ paths: { vs: "webjars/monaco-editor/0.36.1/min/vs" } });
|
|
require(["vs/editor/editor.main"], resolve);
|
|
});
|
|
}
|
|
function createEditorModel() {
|
|
let plantumlFeatures;
|
|
function onPlantumlEditorContentChanged(code, sender=undefined, broadcastChanges=true) {
|
|
function broadcastCodeEditorChanges() {
|
|
document.appConfig.autoRefreshState = "started";
|
|
const numberOfDiagramPages = getNumberOfDiagramPagesFromCode(code);
|
|
let index = document.appData.index;
|
|
if (index === undefined || numberOfDiagramPages === 1) {
|
|
index = undefined;
|
|
} else if (index >= numberOfDiagramPages) {
|
|
index = numberOfDiagramPages - 1;
|
|
}
|
|
makeRequest("POST", "coder", { data: code }).then((encodedDiagram) => {
|
|
sendMessage({
|
|
sender,
|
|
data: { encodedDiagram, numberOfDiagramPages, index },
|
|
synchronize: true,
|
|
});
|
|
});
|
|
}
|
|
const updatePlantumlLanguageMarkers = (function() {
|
|
return function() {
|
|
const model = document.editor.getModel();
|
|
plantumlFeatures = plantumlFeatures || new PlantUmlLanguageFeatures();
|
|
plantumlFeatures.validateCode(model)
|
|
.then(markers => monaco.editor.setModelMarkers(model, "plantuml", markers));
|
|
}
|
|
})();
|
|
if (sender && broadcastChanges) broadcastCodeEditorChanges();
|
|
updatePlantumlLanguageMarkers();
|
|
}
|
|
function getInitPlantumlCodeAndRemoveElement() {
|
|
const initCodeEl = document.getElementById("initCode");
|
|
const initCode = initCodeEl.value;
|
|
initCodeEl.remove();
|
|
return initCode;
|
|
}
|
|
// create editor model
|
|
const model = monaco.editor.createModel(
|
|
getInitPlantumlCodeAndRemoveElement(),
|
|
"apex",
|
|
monaco.Uri.parse("inmemory://plantuml")
|
|
);
|
|
// create editor model watcher
|
|
let timer = 0;
|
|
model.onDidChangeContent(() => {
|
|
clearTimeout(timer);
|
|
document.appConfig.autoRefreshState = "waiting";
|
|
timer = setTimeout(
|
|
() => onPlantumlEditorContentChanged(model.getValue(), "editor"),
|
|
document.appConfig.editorWatcherTimeout
|
|
);
|
|
});
|
|
return model;
|
|
}
|
|
function getDefaultStorageService() {
|
|
// create own storage service to expand suggestion documentation by default
|
|
return {
|
|
get() {},
|
|
getBoolean(key) { return key === "expandSuggestionDocs"; },
|
|
getNumber() { return 0; },
|
|
remove() {},
|
|
store() {},
|
|
onWillSaveState() {},
|
|
onDidChangeStorage() {},
|
|
onDidChangeValue() {},
|
|
};
|
|
}
|
|
|
|
// load monaco editor requirements
|
|
await loadMonacoCodeEditorAsync();
|
|
if (view !== "previewer") {
|
|
// create editor
|
|
const model = createEditorModel();
|
|
const storageService = getDefaultStorageService();
|
|
document.editor = monaco.editor.create(document.getElementById("monaco-editor"), {
|
|
model, ...document.appConfig.editorCreateOptions
|
|
}, { storageService });
|
|
// sometimes the monaco editor has resize problems
|
|
document.addEventListener("resize", () => document.editor.layout());
|
|
// init editor components
|
|
initEditorUrlInput();
|
|
initEditorMenu();
|
|
}
|
|
}
|
|
|
|
return { setEditorValue, initEditor };
|
|
})();
|