From 1df5ea04d2bbe7a39fa85a7a168880a03b1fa938 Mon Sep 17 00:00:00 2001 From: blurymind Date: Sat, 10 Aug 2024 14:46:49 +0100 Subject: [PATCH] add support for light code editor theme --- src/public/plugins/ace-diff/ace-diff.min.css | 2 + src/public/plugins/plugin-editor.js | 41 +++++++++++++++----- 2 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 src/public/plugins/ace-diff/ace-diff.min.css diff --git a/src/public/plugins/ace-diff/ace-diff.min.css b/src/public/plugins/ace-diff/ace-diff.min.css new file mode 100644 index 00000000..196aa9bb --- /dev/null +++ b/src/public/plugins/ace-diff/ace-diff.min.css @@ -0,0 +1,2 @@ +/*! Ace-diff | github.com/ace-diff/ace-diff */ +.acediff__wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:absolute;bottom:0;top:0;left:0;height:100%;width:100%;overflow:auto}.acediff__gutter{-webkit-box-flex:0;-ms-flex:0 0 60px;flex:0 0 60px;border-left:1px solid #bcbcbc;border-right:1px solid #bcbcbc;overflow:hidden}.acediff__gutter,.acediff__gutter svg{background-color:#efefef}.acediff__left,.acediff__right{height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.acediff__diffLine{background-color:#d8f2ff;border-top:1px solid #a2d7f2;border-bottom:1px solid #a2d7f2;position:absolute;z-index:4}.acediff__diffLine.targetOnly{height:0!important;border-top:1px solid #a2d7f2;border-bottom:0;position:absolute}.acediff__connector{fill:#d8f2ff;stroke:#a2d7f2}.acediff__copy--left,.acediff__copy--right{position:relative}.acediff__copy--left div,.acediff__copy--right div{color:#000;text-shadow:1px 1px hsla(0,0%,100%,.7);position:absolute;margin:2px 3px;cursor:pointer}.acediff__copy--right div:hover{color:#004ea0}.acediff__copy--left{float:right}.acediff__copy--left div{right:0}.acediff__copy--left div:hover{color:#c98100} \ No newline at end of file diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js index bfb742b1..2a790768 100644 --- a/src/public/plugins/plugin-editor.js +++ b/src/public/plugins/plugin-editor.js @@ -1,5 +1,16 @@ import AceDiff from './ace-diff/ace-diff.min.js'; -import './ace-diff/ace-diff-dark.min.css'; + +const addStyleSheet = (path, root = document.head) => { + const styleEl = document.createElement("link") + styleEl.setAttribute("rel", "stylesheet") + styleEl.setAttribute("href", path) + styleEl.setAttribute("id", path) + root.appendChild(styleEl) +} +const removeStyleSheet = (path, root = document) => { + const el = root.getElementById(path); + if (el) root.getElementById(path).remove() +} const ExampleOutputFunction = ` // To render here, the script needs to be a function that returns modules, body and script @@ -20,7 +31,6 @@ const getPreviewHtml = (modules = [], html = "
...
", script = "") => ` ` const editorOptions = { - theme: 'ace/theme/monokai', mode: 'ace/mode/javascript', tabSize: 2, enableBasicAutocompletion: true, @@ -52,6 +62,7 @@ export var PluginEditor = function ({ this.volatilePlugins = {}; this.gistPluginFiles = {}; this.mode = 'edit'; + this.theme = app.settings.theme() === 'dracula' ? 'ace/theme/monokai' : undefined; this.onSetPluginEditMode = mode => { this.mode = mode; setPluginStore(self.name, 'pluginEditMode', mode); @@ -74,12 +85,9 @@ export var PluginEditor = function ({ // ace-editor require('ace-builds/src-min-noconflict/ext-beautify'); require('ace-builds/src-min-noconflict/mode-javascript'); - require('ace-builds/src-min-noconflict/theme-monokai'); + require('ace-builds/src-min-noconflict/theme-monokai') const beautify = ace.require('ace/ext/beautify'); - // ace-diff - require('ace-builds/src-min-noconflict/theme-twilight'); - this.onSetEditingFile = () => { const fileName = document.getElementById('edited-plugin-file').value; getVloatilePlugins().then(volatilePlugins => { @@ -111,7 +119,7 @@ export var PluginEditor = function ({ }); } if (this.mode === 'test') { - try{ + try { const extension = new Function("parameters", `return ${fileContents}`)(); console.log({ extensionData: extension(), fileContents }) if (typeof extension === 'function') { @@ -133,7 +141,7 @@ export var PluginEditor = function ({ return } document.getElementById('plugin-output-previewer').value = ExampleOutputFunction; - } catch(e) { + } catch (e) { document.getElementById('plugin-output-previewer').value = `${e.toString()} SEE CONSOLE LOGS ${ExampleOutputFunction} @@ -185,10 +193,19 @@ export var PluginEditor = function ({ focusConfirm: false, customClass: 'swal-wide', width: `${window.innerWidth - 20}px`, + onBeforeOpen: () => { + this.theme = app.settings.theme() === 'dracula' ? 'ace/theme/monokai' : undefined; + // ace-diff + if (app.settings.theme() === 'dracula') { + addStyleSheet('public/plugins/ace-diff/ace-diff-dark.min.css'); + } else { + addStyleSheet('public/plugins/ace-diff/ace-diff.min.css'); + } + }, onOpen: () => { // EDITOR this.editor = ace.edit('js-editor'); - this.editor.setOptions(editorOptions); + this.editor.setOptions({ ...editorOptions, theme: this.theme }); const onChangeDebounced = app.utils.debounce(() => { setVloatilePlugin(this.editingFile, { content: this.editor.getValue(), @@ -208,11 +225,13 @@ export var PluginEditor = function ({ element: document.querySelector('.diff-editor'), left: { ...editorOptions, + theme: this.theme, content: '', }, theme: 'ace/theme/monokai', right: { ...editorOptions, + theme: this.theme, content: '... no connection with gist', }, }); @@ -232,6 +251,10 @@ export var PluginEditor = function ({ // initialize data on both editor and differ this.onSetEditingFile(); }, + onAfterClose: () => { + removeStyleSheet('public/plugins/ace-diff/ace-diff-dark.min.css'); + removeStyleSheet('public/plugins/ace-diff/ace-diff.min.css'); + }, preConfirm: () => { setPluginStore(self.name, 'pluginEditorOpen', false); return this.editor.getValue();