From f6b4f1924334a09ccf93a39cf1947e4ce4662e69 Mon Sep 17 00:00:00 2001
From: Joachim Praetorius <joachim.praetorius@innoq.com>
Date: Wed, 26 Jun 2024 22:33:34 +0200
Subject: [PATCH 1/2] Support Definition References in the render

---
 scripts/load_templates.js  | 1 +
 src/templates/templates.js | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/load_templates.js b/scripts/load_templates.js
index 44a5ec1..daaf310 100644
--- a/scripts/load_templates.js
+++ b/scripts/load_templates.js
@@ -8,6 +8,7 @@ function updateTemplateCode(template) {
     .replace(/\.items\(\)/gm, '')
     .replace(/True/gm, 'true')
     .replace(/False/gm, 'false')
+    .replace(/\.ref/gm, '.$ref')
     .replace(/cli\.datacontract\.com/gm, 'editor.datacontract.com')
     .replace(/Data Contract CLI/gm, 'Data Contract Editor');
 	return updated_template;
diff --git a/src/templates/templates.js b/src/templates/templates.js
index 45fb6f6..fa722a9 100644
--- a/src/templates/templates.js
+++ b/src/templates/templates.js
@@ -1180,9 +1180,9 @@ output += "</span><br>\n      ";
 }
 output += "\n      <span class=\"font-mono flex\">";
 output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "field_name"), env.opts.autoescape);
-if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "field")),"ref")) {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "field")),"$ref")) {
 output += " <a href=\"";
-output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "field")),"ref"), env.opts.autoescape);
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "field")),"$ref"), env.opts.autoescape);
 output += "\">\n        <svg title=\"Definition\" class=\"mr-1.5 h-5 w-5 flex-shrink-0\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-0.75 -0.75 24 24\"><defs></defs><path d=\"M3.046875 5.15625h16.40625s0.9375 0 0.9375 0.9375v10.3125s0 0.9375 -0.9375 0.9375H3.046875s-0.9375 0 -0.9375 -0.9375v-10.3125s0 -0.9375 0.9375 -0.9375\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path><path d=\"m12.568125 10.3125 4.6875 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path><path d=\"m12.568125 13.125 4.6875 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path><path d=\"M5.068124999999999 8.4375h4.6875v4.6875h-4.6875Z\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"></path></svg>\n      </a>";
 ;
 }

From 48e0326d5d681eaadd4ba8e27c971abf6a5c5b8c Mon Sep 17 00:00:00 2001
From: Joachim Praetorius <joachim.praetorius@innoq.com>
Date: Wed, 26 Jun 2024 22:33:51 +0200
Subject: [PATCH 2/2] make sure preview renders on initial load

---
 src/index.js                      |  2 ++
 src/ui/elements/editor-element.js | 11 ++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index 36b6df6..d2955b0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,3 +29,5 @@ editor.addEventListener('editor-content-changed', (e) => {
 	const document = e.detail.content;
 	previewPane.document = document;
 });
+// now that everything is wired up make the editor spit put the content for a first render
+document.dispatchEvent(new CustomEvent('request-document'));
diff --git a/src/ui/elements/editor-element.js b/src/ui/elements/editor-element.js
index 5e4294e..3e8947c 100644
--- a/src/ui/elements/editor-element.js
+++ b/src/ui/elements/editor-element.js
@@ -44,9 +44,13 @@ export class EditorElement extends LitElement {
 		editor.onDidChangeModelContent(() => {
 			const content = editor.getValue();
 			storeDataContractYaml(content);
-			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail:  { content } }));
+			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail: { content } }));
 		});
 
+		document.addEventListener('request-document', () => {
+			this.dispatchEvent(new CustomEvent('editor-content-changed', { detail: { content: editor.getValue() }}));
+		})
+
 		// set up to detect editor errors and emit them
 		monaco.editor.onDidChangeMarkers((resource) => {
 			const markers = monaco.editor.getModelMarkers({resource});
@@ -59,7 +63,7 @@ export class EditorElement extends LitElement {
             column: marker.startColumn
         }))
 
-			this.dispatchEvent(new CustomEvent('editor-errors', { detail:  { validationErrors } }));
+			this.dispatchEvent(new CustomEvent('editor-errors', { detail: { validationErrors } }));
     });
 
 
@@ -68,9 +72,6 @@ export class EditorElement extends LitElement {
 			editor.layout();
 		});
 		resizeObserver.observe(this.editor);
-
-		// emit current content for a first render
-		this.dispatchEvent(new CustomEvent('editor-content-changed', { detail:  { content: editor.getValue() } }));
 	}
 }
 customElements.define("dce-editor", EditorElement);