From 268f388cfb1d5507e621da2f01b4a341e82dd1a1 Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <hdieterichs@microsoft.com>
Date: Fri, 24 Feb 2023 11:17:10 +0100
Subject: [PATCH] Fixes #3588

---
 .../web-component/sample.css                  |  0
 .../web-component/sample.html                 |  8 +++++
 .../web-component/sample.js                   | 33 +++++++++++++++++++
 .../web-component/sample.json                 |  4 +++
 4 files changed, 45 insertions(+)
 create mode 100644 website/src/website/data/playground-samples/creating-the-editor/web-component/sample.css
 create mode 100644 website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html
 create mode 100644 website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js
 create mode 100644 website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json

diff --git a/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.css b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.css
new file mode 100644
index 00000000..e69de29b
diff --git a/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html
new file mode 100644
index 00000000..6a145630
--- /dev/null
+++ b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.html
@@ -0,0 +1,8 @@
+<template id="editor-template">
+	<div
+		id="container"
+		style="overflow: hidden; width: 100%; height: 100%; position: absolute"
+	></div>
+</template>
+
+<code-view-monaco></code-view-monaco>
diff --git a/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js
new file mode 100644
index 00000000..07dc477f
--- /dev/null
+++ b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.js
@@ -0,0 +1,33 @@
+customElements.define(
+	"code-view-monaco",
+	class CodeViewMonaco extends HTMLElement {
+		_monacoEditor;
+		/** @type HTMLElement */
+		_editor;
+
+		constructor() {
+			super();
+
+			const shadowRoot = this.attachShadow({ mode: "open" });
+
+			// Copy over editor styles
+			const style = document.querySelector(
+				"link[rel='stylesheet'][data-name='vs/editor/editor.main']"
+			);
+			shadowRoot.appendChild(style.cloneNode(true));
+
+			const template = /** @type HTMLTemplateElement */ (
+				document.getElementById("editor-template")
+			);
+			shadowRoot.appendChild(template.content.cloneNode(true));
+
+			this._editor = shadowRoot.querySelector("#container");
+			this._monacoEditor = monaco.editor.create(this._editor, {
+				automaticLayout: true,
+				language: "html",
+
+				value: `<div>Hello World</div>`,
+			});
+		}
+	}
+);
diff --git a/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json
new file mode 100644
index 00000000..1bff9606
--- /dev/null
+++ b/website/src/website/data/playground-samples/creating-the-editor/web-component/sample.json
@@ -0,0 +1,4 @@
+{
+	"title": "Web Component",
+	"sortingKey": 10000
+}