-
-
-
-
-
-
-
-
-
- HTML Preview
- 
+
+
+
diff --git a/src/index.js b/src/index.js
index 2dd279e..36b6df6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,280 +1,31 @@
-import Alpine from 'alpinejs';
-import * as monaco from 'monaco-editor';
-import { MarkerSeverity } from 'monaco-editor';
-import { configureMonacoYaml } from 'monaco-yaml';
-import Split from 'split.js';
-
-import { getExample, getMinimal } from "./examples.js";
-import ParserWorker from './parser.worker.js';
-import { renderDataContract } from "./render.js";
-import { isFirstLoadOfDataContractEditor, loadDataContractYaml, storeDataContractYaml } from "./storage.js";
-
-// init alpine
-window.Alpine = Alpine
-Alpine.start()
-
-// Setup Workers for the Monaco Editor
-window.MonacoEnvironment = {
- getWorker(_, label) {
- switch (label) {
- case 'editorWorkerService':
- return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
- case 'yaml':
- return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url))
- default:
- throw new Error(`Unknown label ${label}`)
- }
- }
-}
-
-// Configure YAML Schemas to be used for files to enable completion and highlighting
-configureMonacoYaml(monaco, {
- enableSchemaRequest: true,
- schemas: [
- {
- // If a YAML file is opened matching this glob
- fileMatch: ['**/datacontract.yaml'],
- // the following URI will be linked to as the source.
- uri: 'https://datacontract.com/datacontract.schema.json'
- },
- {
- // If a YAML file is opened matching this glob
- fileMatch: ['**/definition.yaml'],
- // the following URI will be linked to as the source.
- uri: 'https://datacontract.com/definition.schema.json'
- },
- {
- // If a YAML file is opened matching this glob
- fileMatch: ['**/dataproduct.yaml'],
- // the following URI will be linked to as the source.
- uri: 'https://dataproduct-specification.com/dataproduct.schema.json'
- }
- ]
+import Split from 'split-grid';
+
+// Setup Editor Infrastructure
+import './monaco/configure-yaml.js';
+import './workers/monaco.workers.js';
+
+// Init the movable split
+Split({
+ snapOffset: 0,
+ columnGutters: [{
+ track: 1,
+ element: document.querySelector('.gutter-col'),
+ }],
})
-// the container in the webpage we want to run the editor in
-const containerMonacoEditor = "editor";
-
-// see if we've got a serialized datacontract to start from (through a Share-URL)
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-// and store that shared contract if necessary
-if (urlParams.has("dc")) {
- const value = window.atob(urlParams.get("dc"));
- storeDataContractYaml(value);
- window.location.search = "";
-}
-
-// initialize with an example contract, if this is our first run
-if (isFirstLoadOfDataContractEditor()) {
- storeDataContractYaml(getExample());
-}
+// Wire Editor Events to the other elements
+const editor = document.querySelector('dce-editor');
+const errorList = document.querySelector('dce-error-list');
+const previewPane = document.querySelector('dce-preview-pane');
-// start loading the content we have
-const valueFromLocalStorage = loadDataContractYaml();
-const value = valueFromLocalStorage;
-const uri = "file:///datacontract.yaml";
-const model = monaco.editor.createModel(value, undefined, monaco.Uri.parse(uri));
-// Set up the editor
-const editor = monaco.editor.create(document.getElementById(containerMonacoEditor), {
- model,
- language: "yaml",
- automaticLayout: true,
- minimap: {
- enabled: false
- },
- fixedOverflowWidgets: true,
- scrollBeyondLastLine: false
+// wire error list to error events
+editor.addEventListener('editor-errors', (e) => {
+ const errors = e.detail.validationErrors;
+ errorList.errors = errors;
});
-// get a reference to our preview window
-const preview = document.getElementById("preview");
-// and set up the Split screen
-Split(['#split-0', '#split-1'])
-
-// handle the Buttons in the menu bar
-document.getElementById("menu-item-clear").addEventListener("click", function () {
- editor.setValue("");
-
- document.getElementById("menu-file").click();
+// wire preview pane to editor content changes
+editor.addEventListener('editor-content-changed', (e) => {
+ const document = e.detail.content;
+ previewPane.document = document;
});
-
-document.getElementById("menu-item-open-file").addEventListener("click", function () {
-
- document.getElementById("menu-file").click();
-
- // Returns a Promise of a single File object
- async function askUserToSelectFile() {
- const [fileHandle] = await window.showOpenFilePicker();
- return await fileHandle.getFile();
- }
-
- askUserToSelectFile()
- .then(file => file.text())
- .then(text => editor.setValue(text))
- .catch(console.error);
-});
-
-document.getElementById("menu-item-save").addEventListener("click", function () {
- document.getElementById("menu-file").click();
-
- const fileContent = editor.getValue()
- const bb = new Blob([fileContent], { type: 'text/plain' });
- const a = document.createElement('a');
- a.download = 'datacontract.yaml';
- a.href = window.URL.createObjectURL(bb);
- a.click();
- a.remove();
-});
-
-
-
-document.getElementById("menu-item-share").addEventListener("click", function () {
- document.getElementById("menu-file").click();
-
- let yamlCode = editor.getValue().toString();
- const shareUrl = location.protocol + "//" + location.host + "/?dc=" + window.btoa(yamlCode);
- console.log("Share URL: " + shareUrl);
- navigator.clipboard.writeText(shareUrl);
-
- alert("Copied share URL to clipboard")
-});
-
-document.getElementById("menu-item-load-minimal").addEventListener("click", function () {
- editor.setValue(getMinimal());
- document.getElementById("menu-file").click();
-});
-
-document.getElementById("menu-item-load-example").addEventListener("click", function () {
- editor.setValue(getExample());
- document.getElementById("menu-file").click();
-});
-
-// handle parsing data and showing errors
-const worker = new ParserWorker();
-worker.onmessage = function (message) {
- if (message.data.status === "error") {
- console.log(message.data.error);
- document.getElementById("parsing").innerHTML = `
- ${this.notificationTitle}
${this.notificationText}