Adding the monaco editor element

Author: tnylea

data.json

@@ -18,6 +18,7 @@
         "image-gallery" : "Image Gallery",
         "menubar" : "Menu Bar",
         "modal" : "Modal",
+        "monaco-editor" : "Monaco Editor",
         "navigation-menu" : "Navigation Menu",
         "pagination" : "Pagination",
         "popover" : "Popover",
@@ -56,6 +57,7 @@
         "hover-card" : "A hover element card preview.",
         "image-gallery" : "A simple image gallery element for showing images.",
         "modal" : "A simple modal element that can be used to show and hide content.",
+        "monaco-editor" : "A simple code editor using the Monaco editor library.",
         "menubar" : "A visually persistent menu common in desktop applications, offering convenient access to a consistent set of commands.",
         "navigation-menu" : "A simple navigation menu element",
         "pagination" : "A pagination element that can be used to navigate through pages of content.",
@@ -95,6 +97,7 @@
         "hover-card" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
         "image-gallery" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
         "modal" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
+        "monaco-editor" : "w-full h-full box-border flex overflow-hidden items-stretch justify-center",
         "menubar" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
         "navigation-menu" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
         "pagination" : "w-full flex items-end justify-center",

elements/monaco-editor.html

@@ -0,0 +1,86 @@
+<div x-data="{
+        monacoContent: '',
+        monacoLanguage: 'html',
+        monacoPlaceholder: true,
+        monacoPlaceholderText: 'Start typing here',
+        monacoLoader: true,
+        monacoFontSize: '15px',
+        monacoId: $id('monaco-editor'),
+        monacoEditor(editor){
+            editor.onDidChangeModelContent((e) => {
+                this.monacoContent = editor.getValue();
+                this.updatePlaceholder(editor.getValue());
+            });
+
+            editor.onDidBlurEditorWidget(() => {
+                this.updatePlaceholder(editor.getValue());
+            });
+
+            editor.onDidFocusEditorWidget(() => {
+                this.updatePlaceholder(editor.getValue());
+            });
+        },
+        updatePlaceholder: function(value) {
+            if (value == '') {
+                this.monacoPlaceholder = true;
+                return;
+            }
+            this.monacoPlaceholder = false;
+        },
+        monacoEditorFocus(){
+            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { monacoId: this.monacoId }));
+        },
+        monacoEditorAddLoaderScriptToHead() {
+            script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.min.js';
+            document.head.appendChild(script);
+        }
+    }"
+    x-init="
+            
+        if(typeof _amdLoaderGlobal == 'undefined'){
+            monacoEditorAddLoaderScriptToHead();
+        }
+
+        monacoLoaderInterval = setInterval(function(){
+            if(typeof _amdLoaderGlobal !== 'undefined'){
+
+                // Based on https://jsfiddle.net/developit/bwgkr6uq/ which works without needing service worker. Provided by loader.min.js.
+                require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
+                let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
+                window.MonacoEnvironment = { getWorkerUrl: () => proxy };
+
+                require(['vs/editor/editor.main'], function() {
+                    
+                    monacoTheme = {'base':'vs-dark','inherit':true,'rules':[{'background':'0C1021','token':''},{'foreground':'aeaeae','token':'comment'},{'foreground':'d8fa3c','token':'constant'},{'foreground':'ff6400','token':'entity'},{'foreground':'fbde2d','token':'keyword'},{'foreground':'fbde2d','token':'storage'},{'foreground':'61ce3c','token':'string'},{'foreground':'61ce3c','token':'meta.verbatim'},{'foreground':'8da6ce','token':'support'},{'foreground':'ab2a1d','fontStyle':'italic','token':'invalid.deprecated'},{'foreground':'f8f8f8','background':'9d1e15','token':'invalid.illegal'},{'foreground':'ff6400','fontStyle':'italic','token':'entity.other.inherited-class'},{'foreground':'ff6400','token':'string constant.other.placeholder'},{'foreground':'becde6','token':'meta.function-call.py'},{'foreground':'7f90aa','token':'meta.tag'},{'foreground':'7f90aa','token':'meta.tag entity'},{'foreground':'ffffff','token':'entity.name.section'},{'foreground':'d5e0f3','token':'keyword.type.variant'},{'foreground':'f8f8f8','token':'source.ocaml keyword.operator.symbol'},{'foreground':'8da6ce','token':'source.ocaml keyword.operator.symbol.infix'},{'foreground':'8da6ce','token':'source.ocaml keyword.operator.symbol.prefix'},{'fontStyle':'underline','token':'source.ocaml keyword.operator.symbol.infix.floating-point'},{'fontStyle':'underline','token':'source.ocaml keyword.operator.symbol.prefix.floating-point'},{'fontStyle':'underline','token':'source.ocaml constant.numeric.floating-point'},{'background':'ffffff08','token':'text.tex.latex meta.function.environment'},{'background':'7a96fa08','token':'text.tex.latex meta.function.environment meta.function.environment'},{'foreground':'fbde2d','token':'text.tex.latex support.function'},{'foreground':'ffffff','token':'source.plist string.unquoted'},{'foreground':'ffffff','token':'source.plist keyword.operator'}],'colors':{'editor.foreground':'#F8F8F8','editor.background':'#0C1021','editor.selectionBackground':'#253B76','editor.lineHighlightBackground':'#FFFFFF0F','editorCursor.foreground':'#FFFFFFA6','editorWhitespace.foreground':'#FFFFFF40'}};
+                    monaco.editor.defineTheme('blackboard', monacoTheme);
+                    document.getElementById(monacoId).editor = monaco.editor.create($refs.monacoEditorElement, {
+                        value: monacoContent,
+                        theme: 'blackboard',
+                        fontSize: monacoFontSize,
+                        lineNumbersMinChars: 3,
+                        automaticLayout: true,
+                        language: monacoLanguage
+                    });
+                    monacoEditor(document.getElementById(monacoId).editor);
+                    document.getElementById(monacoId).addEventListener('monaco-editor-focused', function(event){
+                        document.getElementById(monacoId).editor.focus();
+                    });
+                    updatePlaceholder(document.getElementById(monacoId).editor.getValue());
+                    
+                });
+
+                clearInterval(monacoLoaderInterval);
+                monacoLoader = false;
+            }
+        }, 5);
+    " :id="monacoId" class="flex flex-col items-center relative justify-start w-full bg-[#0C1021] min-h-[250px] pt-3 h-100">
+    <div x-show="monacoLoader" class="absolute inset-0 z-20 flex items-center justify-center w-full h-full duration-1000 ease-out">
+        <svg class="w-4 h-4 text-gray-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+    </div>
+
+    <div x-show="!monacoLoader" class="relative z-10 w-full h-full">
+        <div x-ref="monacoEditorElement" class="w-full h-full text-lg"></div>
+        <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()" :style="'font-size: ' + monacoFontSize" class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0" x-text="monacoPlaceholderText"></div>
+    </div>
+</div>

elements/monaco-editor.json

@@ -0,0 +1,22 @@
+{
+    "data" : {
+        "monacoContent" : "The initial value inside of the editor",
+        "monacoLanguage" : "The language that should be used for syntax highlighting",
+        "monacoPlaceholder" : "Sepcify whether or not you want a placeholder in the editor when there is not code in the editor",
+        "monacoPlaceholderText" : "The placeholder text to be used inside of the editor when no code is present",
+        "monacoLoader" : "This is used to show a loading indicator before the editor has been initialized and ready",
+        "monacoFontSize" : "The font size to be used inside of the editor (may need to adjust the placeholder when changing this)",
+        "monacoId" : "Used to add a unique ID to this element, allowing you to have multiple editors on the same page",
+        "monacoEditor(editor)" : "This is the method that you can use to add your Monaco Events (learn more below)",
+        "updatePlaceholder(value)" : "This method is used to update the placeholder text inside of the editor",
+        "monacoEditorFocus" : "This method is used to focus the editor",
+        "monacoEditorAddLoaderScriptToHead" : "This method is used to add the monaco editor loader script to the head of the document"
+    },
+    "alert_notification" : {
+        "title" : "Monaco Editor Library",
+        "description" : "This element uses the <a href=\"https://microsoft.github.io/monaco-editor/\" target=\"_blank\" class=\"underline\">Monaco Editor</a>, You can add events and listeners for <a href=\"https://microsoft.github.io/monaco-editor/docs.html#modules/editor.html\" target=\"_blank\" class=\"underline\">the editor</a> object inside of the <strong>monacoEditor(editor)</strong> method."
+    },
+    "additional" : {
+        "description" : "<p>Inside of the <strong>x-init</strong> method, after the editor is loaded, you'll find a variable definition like so: <strong>monacoTheme = {}</strong>, you can change the theme by adding your own or including it from the <a href=\"https://github.com/brijeshb42/monaco-themes\" target=\"_blank\" class=\"underline\">monaco themes repo here</a>. View a <a href=\"https://editor.bitwiser.in\" target=\"_blank\" class=\"underline\">demo of all the available themes here</a>.</p>"
+    }
+}