forked from thedevdojo/pines
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
111 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>" | ||
| } | ||
| } |