mirror of
https://github.com/pelican-dev/panel.git
synced 2025-05-20 02:54:45 +02:00
Revert Monaco Changes... (#1062)
Reintroduced the ever expanding editor. Co-authored-by: notCharles <charles@pelican.dev>
This commit is contained in:
MartinOscar
GitHub
parent
6caa741798
commit
98ddb65509
@ -65,7 +65,7 @@
|
||||
|
||||
monacoEditorAddLoaderScriptToHead() {
|
||||
script = document.createElement('script');
|
||||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.js';
|
||||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs/loader.min.js';
|
||||
document.head.appendChild(script);
|
||||
},
|
||||
|
||||
@ -78,11 +78,6 @@
|
||||
`</body>`;
|
||||
},
|
||||
|
||||
showCodePreview(){
|
||||
this.previewContent = this.wrapPreview(this.monacoContent);
|
||||
this.showPreview = true;
|
||||
},
|
||||
|
||||
}" x-init="
|
||||
previewContent = wrapPreview(monacoContent);
|
||||
$el.style.height = '500px';
|
||||
@ -101,9 +96,9 @@
|
||||
monacoLoaderInterval = setInterval(() => {
|
||||
if(typeof _amdLoaderGlobal !== 'undefined'){
|
||||
|
||||
// Based on https://jsfiddle.net/developit/bwgkr6uq/ which works without needing service worker. Provided by loader.js.
|
||||
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' }});
|
||||
let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/base/worker/workerMain.js');`], { type: 'text/javascript' }));
|
||||
// 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.49.0/min/vs' }});
|
||||
let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
|
||||
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
|
||||
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
@ -139,55 +134,47 @@
|
||||
}, 5); " :id="monacoId"
|
||||
class="fme-wrapper"
|
||||
:class="{ 'fme-full-screen': fullScreenModeEnabled }" x-cloak>
|
||||
<div class="fme-control-section">
|
||||
@if($getEnablePreview())
|
||||
<div x-data="{
|
||||
repositionTabMarker(el){
|
||||
this.$refs.marker.classList.remove('p-1');
|
||||
this.$refs.marker.style.width = el.offsetWidth + 'px';
|
||||
this.$refs.marker.style.height = el.offsetHeight + 'px';
|
||||
this.$refs.marker.style.left = el.offsetLeft + 'px';
|
||||
}
|
||||
}" x-cloak class="fme-code-preview-tab" wire:ignore>
|
||||
<button type="button" @click="repositionTabMarker($el); showPreview = false;" class="fme-code-preview-tab-item">
|
||||
{{ __("Code") }}
|
||||
</button>
|
||||
<button type="button" @click="repositionTabMarker($el); showCodePreview();" class="fme-code-preview-tab-item">
|
||||
{{ __("Preview") }}
|
||||
</button>
|
||||
<div x-ref="marker" class="fme-code-preview-tab-marker-container p-1">
|
||||
<div class="fme-code-preview-tab-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center ml-auto">
|
||||
@if($getShowFullScreenToggle())
|
||||
<button type="button" aria-label="{{ __("full_screen_btn_label") }}" class="fme-full-screen-btn"
|
||||
@click="toggleFullScreenMode()">
|
||||
<svg class="fme-full-screen-btn-icon" x-show="!fullScreenModeEnabled"
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M16 4l4 0l0 4" />
|
||||
<path d="M14 10l6 -6" />
|
||||
<path d="M8 20l-4 0l0 -4" />
|
||||
<path d="M4 20l6 -6" />
|
||||
<path d="M16 20l4 0l0 -4" />
|
||||
<path d="M14 14l6 6" />
|
||||
<path d="M8 4l-4 0l0 4" />
|
||||
<path d="M4 4l6 6" />
|
||||
</svg>
|
||||
<svg class="fme-full-screen-btn-icon" x-show="fullScreenModeEnabled"
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M5 9l4 0l0 -4" />
|
||||
<path d="M3 3l6 6" />
|
||||
<path d="M5 15l4 0l0 4" />
|
||||
<path d="M3 21l6 -6" />
|
||||
<path d="M19 9l-4 0l0 -4" />
|
||||
<path d="M15 9l6 -6" />
|
||||
<path d="M19 15l-4 0l0 4" />
|
||||
<path d="M15 15l6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
<div class="flex items-center ml-auto">
|
||||
@if($getShowFullScreenToggle())
|
||||
<button type="button" aria-label="{{ __("full_screen_btn_label") }}" class="fme-full-screen-btn" @click="toggleFullScreenMode()">
|
||||
<svg class="fme-full-screen-btn-icon" x-show="!fullScreenModeEnabled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 4l4 0l0 4" /><path d="M14 10l6 -6" /><path d="M8 20l-4 0l0 -4" /><path d="M4 20l6 -6" /><path d="M16 20l4 0l0 -4" /><path d="M14 14l6 6" /><path d="M8 4l-4 0l0 4" /><path d="M4 4l6 6" /></svg>
|
||||
<svg class="fme-full-screen-btn-icon" x-show="fullScreenModeEnabled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 9l4 0l0 -4" /><path d="M3 3l6 6" /><path d="M5 15l4 0l0 4" /><path d="M3 21l6 -6" /><path d="M19 9l-4 0l0 -4" /><path d="M15 9l6 -6" /><path d="M19 15l-4 0l0 4" /><path d="M15 15l6 6" /></svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
<div class="fme-container" x-show="!showPreview">
|
||||
<!-- Editor -->
|
||||
<div x-show="!monacoLoader" class="fme-element-wrapper">
|
||||
<div x-ref="monacoEditorElement" class="fme-element" wire:ignore style="height: 100%"></div>
|
||||
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
|
||||
:style="'font-size: ' + monacoFontSize" class="fme-placeholder"
|
||||
x-text="monacoPlaceholderText"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full">
|
||||
<div class="fme-container" x-show="!showPreview">
|
||||
<!-- Loader -->
|
||||
<div x-show="monacoLoader" class="fme-loader">
|
||||
<svg class="fme-loader-icon" 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>
|
||||
|
||||
<!-- Editor -->
|
||||
<div x-show="!monacoLoader" class="fme-element-wrapper">
|
||||
<div x-ref="monacoEditorElement" class="fme-element" wire:ignore style="height: 100%"></div>
|
||||
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()" :style="'font-size: ' + monacoFontSize" class="fme-placeholder" x-text="monacoPlaceholderText"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fme-preview-wrapper">
|
||||
<!-- Preview -->
|
||||
<iframe class="fme-preview" :srcdoc="previewContent" x-show="showPreview" wire:ignore></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-dynamic-component>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user