From 51f657d2c5353c8de6c70a4ffd09d40ef488ac11 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 12:22:06 +1200 Subject: [PATCH 01/17] Add CM Themes to build folder --- scripts/buildHomebrew.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index 96ce3fded..8646ab0ff 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -99,6 +99,10 @@ fs.emptyDirSync('./build'); await fs.copy('./themes/assets', './build/assets'); await fs.copy('./client/icons', './build/icons'); + //v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v// + + await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes'); + //v==----------------------------- BUNDLE PACKAGES --------------------------------==v// const bundles = await pack('./client/homebrew/homebrew.jsx', { From 7dd1368c09ec0339ab10004b7d2cee943414d812 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 12:53:26 +1200 Subject: [PATCH 02/17] Add editorTheme to editor.jsx and downstream --- client/homebrew/editor/editor.jsx | 23 +++++++++++-- .../homebrew/editor/snippetbar/snippetbar.jsx | 32 +++++++++++++------ shared/naturalcrit/codeEditor/codeEditor.jsx | 8 ++++- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 58e84e4fc..9cb8e0df9 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -34,12 +34,14 @@ const Editor = createClass({ onMetaChange : ()=>{}, reportError : ()=>{}, - renderer : 'legacy' + editorTheme : 'default', + renderer : 'legacy' }; }, getInitialState : function() { return { - view : 'text' //'text', 'style', 'meta' + editorTheme : this.props.editorTheme, + view : 'text' //'text', 'style', 'meta' }; }, @@ -255,25 +257,38 @@ const Editor = createClass({ this.refs.codeEditor?.updateSize(); }, + updateEditorTheme : function(newTheme){ + this.setState({ + editorTheme : newTheme + }); + }, + //Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory rerenderParent : function (){ this.forceUpdate(); }, + renderEditorCSSLink : function(){ + return ; + }, + renderEditor : function(){ if(this.isText()){ return <> + {this.renderEditorCSSLink()} ; } if(this.isStyle()){ return <> + {this.renderEditorCSSLink()} ; } @@ -323,7 +339,8 @@ const Editor = createClass({ theme={this.props.brew.theme} undo={this.undo} redo={this.redo} - historySize={this.historySize()} /> + historySize={this.historySize()} + updateEditorTheme={this.updateEditorTheme} /> {this.renderEditor()} diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index cfd2d5e91..b8a09b906 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -24,16 +24,17 @@ const Snippetbar = createClass({ displayName : 'SnippetBar', getDefaultProps : function() { return { - brew : {}, - view : 'text', - onViewChange : ()=>{}, - onInject : ()=>{}, - onToggle : ()=>{}, - showEditButtons : true, - renderer : 'legacy', - undo : ()=>{}, - redo : ()=>{}, - historySize : ()=>{} + brew : {}, + view : 'text', + onViewChange : ()=>{}, + onInject : ()=>{}, + onToggle : ()=>{}, + showEditButtons : true, + renderer : 'legacy', + undo : ()=>{}, + redo : ()=>{}, + historySize : ()=>{}, + updateEditorTheme : ()=>{} }; }, @@ -94,6 +95,13 @@ const Snippetbar = createClass({ this.props.onInject(injectedText); }, + selectTheme : function(){ + console.log('select theme'); + const editorTheme = window.prompt('Enter theme name:', 'default'); + if(!editorTheme) return; + this.props.updateEditorTheme(editorTheme); + }, + renderSnippetGroups : function(){ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); @@ -122,6 +130,10 @@ const Snippetbar = createClass({
+
+ +
this.props.onViewChange('text')}> diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 245317910..244784f8e 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -49,7 +49,8 @@ const CodeEditor = createClass({ value : '', wrap : true, onChange : ()=>{}, - enableFolding : true + enableFolding : true, + editorTheme : 'default' }; }, @@ -91,6 +92,10 @@ const CodeEditor = createClass({ } else { this.codeMirror.setOption('foldOptions', false); } + + if(prevProps.editorTheme !== this.props.editorTheme){ + this.codeMirror.setOption('theme', this.props.editorTheme); + } }, buildEditor : function() { @@ -156,6 +161,7 @@ const CodeEditor = createClass({ autoCloseTags : true, styleActiveLine : true, showTrailingSpace : false, + theme : this.props.editorTheme // specialChars : / /, // specialCharPlaceholder : function(char) { // const el = document.createElement('span'); From b2546d908ae6cafcd573e273b5664d74313c41f8 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 13:19:43 +1200 Subject: [PATCH 03/17] Shift CSS link to CodeEditor render --- client/homebrew/editor/editor.jsx | 6 ------ shared/naturalcrit/codeEditor/codeEditor.jsx | 5 ++++- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 9cb8e0df9..0e5676364 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -268,14 +268,9 @@ const Editor = createClass({ this.forceUpdate(); }, - renderEditorCSSLink : function(){ - return ; - }, - renderEditor : function(){ if(this.isText()){ return <> - {this.renderEditorCSSLink()} - {this.renderEditorCSSLink()} ; + return <> + +
+ ; } }); From da6fcb297a009d323a67ba5fbfb9dfb03a46ad43 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 15:17:30 +1200 Subject: [PATCH 04/17] Compile list of available themes during build --- scripts/buildHomebrew.js | 14 ++++++ themes/codeMirror/editorThemes.json | 68 +++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 themes/codeMirror/editorThemes.json diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index 8646ab0ff..2255ca69e 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -101,7 +101,21 @@ fs.emptyDirSync('./build'); //v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v// + editorThemeFiles = fs.readdirSync('./node_modules/codemirror/theme'); + + const editorThemeFile = './themes/codeMirror/editorThemes.json'; + if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile); + const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' }); + stream.write('[\n'); + + for (themeFile of editorThemeFiles) { + stream.write(`"${themeFile.slice(0, -4)}",\n`); + } + stream.write('"default"\n]\n'); + stream.end(); + await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes'); + // await fs.copy('./themes/codeMirror', './build/themes/codeMirror'); //v==----------------------------- BUNDLE PACKAGES --------------------------------==v// diff --git a/themes/codeMirror/editorThemes.json b/themes/codeMirror/editorThemes.json new file mode 100644 index 000000000..c94cd29cf --- /dev/null +++ b/themes/codeMirror/editorThemes.json @@ -0,0 +1,68 @@ +[ +"3024-day", +"3024-night", +"abbott", +"abcdef", +"ambiance-mobile", +"ambiance", +"ayu-dark", +"ayu-mirage", +"base16-dark", +"base16-light", +"bespin", +"blackboard", +"cobalt", +"colorforth", +"darcula", +"dracula", +"duotone-dark", +"duotone-light", +"eclipse", +"elegant", +"erlang-dark", +"gruvbox-dark", +"hopscotch", +"icecoder", +"idea", +"isotope", +"juejin", +"lesser-dark", +"liquibyte", +"lucario", +"material-darker", +"material-ocean", +"material-palenight", +"material", +"mbo", +"mdn-like", +"midnight", +"monokai", +"moxer", +"neat", +"neo", +"night", +"nord", +"oceanic-next", +"panda-syntax", +"paraiso-dark", +"paraiso-light", +"pastel-on-dark", +"railscasts", +"rubyblue", +"seti", +"shadowfox", +"solarized", +"ssms", +"the-matrix", +"tomorrow-night-bright", +"tomorrow-night-eighties", +"ttcn", +"twilight", +"vibrant-ink", +"xq-dark", +"xq-light", +"yeti", +"yonce", +"zenburn", +"default" +] From 977cbeed43de60adbd3d4ea25cb849ed030b6e9c Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 15:17:44 +1200 Subject: [PATCH 05/17] Load available CM themes to global config --- server/app.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/server/app.js b/server/app.js index 5b153d115..0f56ee52a 100644 --- a/server/app.js +++ b/server/app.js @@ -17,6 +17,8 @@ const asyncHandler = require('express-async-handler'); const { DEFAULT_BREW } = require('./brewDefaults.js'); +const codeMirrorThemes = require('../themes/codeMirror/editorThemes.json'); + const splitTextStyleAndMetadata = (brew)=>{ brew.text = brew.text.replaceAll('\r\n', '\n'); if(brew.text.startsWith('```metadata')) { @@ -419,9 +421,10 @@ app.use(asyncHandler(async (req, res, next)=>{ // Create configuration object const configuration = { - local : isLocalEnvironment, - publicUrl : config.get('publicUrl') ?? '', - environment : nodeEnv + local : isLocalEnvironment, + publicUrl : config.get('publicUrl') ?? '', + environment : nodeEnv, + codeMirrorThemes : codeMirrorThemes }; const props = { version : require('./../package.json').version, From 5e9b451e293cc5fa8ce1c16a5fa18983d47f192d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 16:17:50 +1200 Subject: [PATCH 06/17] Pass current editor theme to SnippetBar as prop --- client/homebrew/editor/editor.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 0e5676364..979e8f485 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -334,6 +334,7 @@ const Editor = createClass({ undo={this.undo} redo={this.redo} historySize={this.historySize()} + currentEditorTheme={this.state.editorTheme} updateEditorTheme={this.updateEditorTheme} /> {this.renderEditor()} From dc55880544dd9e3165727705127ecc1b2f43aa15 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 16:42:45 +1200 Subject: [PATCH 07/17] Initial theme selector functionality --- .../homebrew/editor/snippetbar/snippetbar.jsx | 36 ++++++++++++++++--- .../editor/snippetbar/snippetbar.less | 21 +++++++++++ 2 files changed, 53 insertions(+), 4 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index b8a09b906..7e866cd5b 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -40,8 +40,9 @@ const Snippetbar = createClass({ getInitialState : function() { return { - renderer : this.props.renderer, - snippets : [] + renderer : this.props.renderer, + themeSelector : false, + snippets : [] }; }, @@ -95,13 +96,38 @@ const Snippetbar = createClass({ this.props.onInject(injectedText); }, + toggleThemeSelector : function(){ + this.setState({ + themeSelector : !this.state.themeSelector + }); + }, + selectTheme : function(){ console.log('select theme'); + console.log(global.config); const editorTheme = window.prompt('Enter theme name:', 'default'); if(!editorTheme) return; this.props.updateEditorTheme(editorTheme); }, + changeTheme : function(e){ + this.props.updateEditorTheme(e.target.value); + + this.setState({ + showThemeSelector : false, + }); + }, + + renderThemeSelector : function(){ + return
+ +
; + }, + renderSnippetGroups : function(){ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); @@ -130,10 +156,12 @@ const Snippetbar = createClass({
-
+
+ {this.state.themeSelector && this.renderThemeSelector()} +
this.props.onViewChange('text')}> diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index cb24da105..4fd38fc67 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -46,6 +46,15 @@ color : black; } } + &.editorTheme{ + .tooltipLeft('Editor Themes'); + font-size : 0.75em; + color : black; + &.active{ + color : white; + background-color: black; + } + } &.divider { background: linear-gradient(#000, #000) no-repeat center/1px 100%; width: 5px; @@ -54,6 +63,18 @@ } } } + .themeSelector{ + position: absolute; + left: -65px; + top: 30px; + z-index: 999; + width: 170px; + background-color: black; + border-radius: 5px; + &>select{ + width: auto; + } + } } .snippetBarButton{ height : @menuHeight; From b28e183f95b0fbd17a0ddc155606fcfb6fab6eec Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 16:53:30 +1200 Subject: [PATCH 08/17] Remove obsolete dev function --- client/homebrew/editor/snippetbar/snippetbar.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 7e866cd5b..d5c2e8c7a 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -102,14 +102,6 @@ const Snippetbar = createClass({ }); }, - selectTheme : function(){ - console.log('select theme'); - console.log(global.config); - const editorTheme = window.prompt('Enter theme name:', 'default'); - if(!editorTheme) return; - this.props.updateEditorTheme(editorTheme); - }, - changeTheme : function(e){ this.props.updateEditorTheme(e.target.value); From a86c7287104114141bc2281e839c8bb695d25ccb Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 16:53:41 +1200 Subject: [PATCH 09/17] Remove obsolete styling --- client/homebrew/editor/snippetbar/snippetbar.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 4fd38fc67..ed2dcebce 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -71,9 +71,6 @@ width: 170px; background-color: black; border-radius: 5px; - &>select{ - width: auto; - } } } .snippetBarButton{ From c660f87dfff14af4d01fa9dafa9e0386ba43cc82 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 2 Apr 2023 17:57:11 +1200 Subject: [PATCH 10/17] Load from & save to local storage --- client/homebrew/editor/editor.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 979e8f485..f46b8f3ba 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -10,6 +10,8 @@ const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx'); const SnippetBar = require('./snippetbar/snippetbar.jsx'); const MetadataEditor = require('./metadataEditor/metadataEditor.jsx'); +const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME'; + const SNIPPETBAR_HEIGHT = 25; const DEFAULT_STYLE_TEXT = dedent` /*=======--- Example CSS styling ---=======*/ @@ -53,6 +55,13 @@ const Editor = createClass({ this.updateEditorSize(); this.highlightCustomMarkdown(); window.addEventListener('resize', this.updateEditorSize); + + const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); + if(editorTheme) { + this.setState({ + editorTheme : editorTheme + }); + } }, componentWillUnmount : function() { @@ -258,6 +267,7 @@ const Editor = createClass({ }, updateEditorTheme : function(newTheme){ + window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); this.setState({ editorTheme : newTheme }); From c8df449aac9ccd19818725d6aa516de4de28c3db Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 12 Jun 2023 19:52:13 +1200 Subject: [PATCH 11/17] Style custom blocks in editor on dark themes --- client/homebrew/editor/editor.less | 2 +- themes/codeMirror/customEditorStyles.less | 56 +++++++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 themes/codeMirror/customEditorStyles.less diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 86e523a13..db88b5b0f 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -1,4 +1,4 @@ - +@import 'themes/codeMirror/customEditorStyles.less'; .editor{ position : relative; width : 100%; diff --git a/themes/codeMirror/customEditorStyles.less b/themes/codeMirror/customEditorStyles.less new file mode 100644 index 000000000..39bad9504 --- /dev/null +++ b/themes/codeMirror/customEditorStyles.less @@ -0,0 +1,56 @@ +.codeEditor .CodeMirror { + // Themes with dark backgrounds + &.cm-s-3024-night, + &.cm-s-abbott, + &.cm-s-abcdef, + &.cm-s-ambiance, + &.cm-s-ayu-dark, + &.cm-s-ayu-mirage, + &.cm-s-base16-dark, + &.cm-s-bespin, + &.cm-s-blackboard, + &.cm-s-cobalt, + &.cm-s-colorforth, + &.cm-s-darcula, + &.cm-s-dracula, + &.cm-s-duotone-dark, + &.cm-s-erlang-dark, + &.cm-s-gruvbox-dark, + &.cm-s-hopscotch, + &.cm-s-icecoder, + &.cm-s-isotope, + &.cm-s-lesser-dark, + &.cm-s-liquibyte, + &.cm-s-lucario, + &.cm-s-material, + &.cm-s-material-darker, + &.cm-s-material-ocean, + &.cm-s-material-palenight, + &.cm-s-mbo, + &.cm-s-midnight, + &.cm-s-monokai, + &.cm-s-moxer, + &.cm-s-night, + &.cm-s-nord, + &.cm-s-oceanic-next, + &.cm-s-panda-syntax, + &.cm-s-paraiso-dark, + &.cm-s-pastel-on-dark, + &.cm-s-railscasts, + &.cm-s-rubyblue, + &.cm-s-seti, + &.cm-s-shadowfox, + &.cm-s-the-matrix, + &.cm-s-tomorrow-night-bright, + &.cm-s-tomorrow-night-eighties, + &.cm-s-twilight, + &.cm-s-vibrant-ink, + &.cm-s-xq-dark, + &.cm-s-yonce, + &.cm-s-zenburn + { + .CodeMirror-code .block:not(.cm-comment) { + color: magenta; + } + } +} \ No newline at end of file From 7e660aad4528a99382a4d44576b51c66c8e9f81a Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 12 Jun 2023 20:49:15 +1200 Subject: [PATCH 12/17] Add styling for columnSplite and pageLine --- themes/codeMirror/customEditorStyles.less | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/themes/codeMirror/customEditorStyles.less b/themes/codeMirror/customEditorStyles.less index 39bad9504..4db332c20 100644 --- a/themes/codeMirror/customEditorStyles.less +++ b/themes/codeMirror/customEditorStyles.less @@ -1,4 +1,4 @@ -.codeEditor .CodeMirror { +.editor .codeEditor .CodeMirror { // Themes with dark backgrounds &.cm-s-3024-night, &.cm-s-abbott, @@ -49,8 +49,20 @@ &.cm-s-yonce, &.cm-s-zenburn { - .CodeMirror-code .block:not(.cm-comment) { - color: magenta; + .CodeMirror-code { + .block:not(.cm-comment) { + color: magenta; + } + .columnSplit { + color: black; + background-color: rgba(35,153,153,0.5); + } + .pageLine { + background-color: rgba(255,255,255,0.75); + & ~ pre.CodeMirror-line { + color: black; + } + } } } } \ No newline at end of file From 1806854969b1e39575582efc5386cc5ab8ad280a Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 12 Jul 2023 20:16:36 +1200 Subject: [PATCH 13/17] Add onMouseDown handler for Firefox functionality --- client/homebrew/editor/snippetbar/snippetbar.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 5a32ffab3..c14c3e8a2 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -104,6 +104,7 @@ const Snippetbar = createClass({ }, changeTheme : function(e){ + if(e.target.value == this.props.currentEditorTheme) return; this.props.updateEditorTheme(e.target.value); this.setState({ @@ -113,7 +114,7 @@ const Snippetbar = createClass({ renderThemeSelector : function(){ return
- {global.config.codeMirrorThemes.map((theme, key)=>{ return ; })} From 3f828c8649565d22a3af56c9a655f46ac5896d00 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 7 Sep 2023 16:55:39 +1200 Subject: [PATCH 14/17] Make Default first option in built themes JSON --- scripts/buildHomebrew.js | 6 +++--- themes/codeMirror/editorThemes.json | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index cc624fc5c..701240f31 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -106,12 +106,12 @@ fs.emptyDirSync('./build'); const editorThemeFile = './themes/codeMirror/editorThemes.json'; if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile); const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' }); - stream.write('[\n'); + stream.write('[\n"default"'); for (themeFile of editorThemeFiles) { - stream.write(`"${themeFile.slice(0, -4)}",\n`); + stream.write(`,\n"${themeFile.slice(0, -4)}"`); } - stream.write('"default"\n]\n'); + stream.write('\n]\n'); stream.end(); await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes'); diff --git a/themes/codeMirror/editorThemes.json b/themes/codeMirror/editorThemes.json index c94cd29cf..a4dd74470 100644 --- a/themes/codeMirror/editorThemes.json +++ b/themes/codeMirror/editorThemes.json @@ -1,4 +1,5 @@ [ +"default", "3024-day", "3024-night", "abbott", @@ -63,6 +64,5 @@ "xq-light", "yeti", "yonce", -"zenburn", -"default" +"zenburn" ] From e16110da6a37587aa0b5f1a284ec8e5cb8a726f9 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 7 Sep 2023 17:05:52 +1200 Subject: [PATCH 15/17] Add custom styling for light background themes --- themes/codeMirror/customEditorStyles.less | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/themes/codeMirror/customEditorStyles.less b/themes/codeMirror/customEditorStyles.less index 4db332c20..3318e1305 100644 --- a/themes/codeMirror/customEditorStyles.less +++ b/themes/codeMirror/customEditorStyles.less @@ -65,4 +65,24 @@ } } } + // Themes with light backgrounds + &.cm-s-default, + &.cm-s-3024-day, + &.cm-s-ambiance-mobile, + &.cm-s-base16-light, + &.cm-s-duotone-light, + &.cm-s-eclipse, + &.cm-s-elegant, + &.cm-s-juejin, + &.cm-s-neat, + &.cm-s-neo, + &.cm-s-paraiso-lightm + &.cm-s-solarized, + &.cm-s-ssms, + &.cm-s-ttcn, + &.cm-s-xq-light, + &.cm-s-yeti { + // Future styling for themes with light backgrounds + --dummyVar: 'currently unused'; + } } \ No newline at end of file From e909bc8f356c1f54f63a090882eb24cb4e7dbd99 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 7 Sep 2023 17:33:36 +1200 Subject: [PATCH 16/17] Load editorThemes in SnippetBar.jsx --- client/homebrew/editor/snippetbar/snippetbar.jsx | 6 ++++-- scripts/buildHomebrew.js | 2 +- server/app.js | 9 +++------ 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index c14c3e8a2..ad4c7d466 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -15,6 +15,9 @@ ThemeSnippets['V3_5eDMG'] = require('themes/V3/5eDMG/snippets.js'); ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js'); ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js'); +// const EditorThemes = require('../themes/codeMirror/editorThemes.json'); +const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json'); + const execute = function(val, props){ if(_.isFunction(val)) return val(props); return val; @@ -115,7 +118,7 @@ const Snippetbar = createClass({ renderThemeSelector : function(){ return
@@ -229,5 +232,4 @@ const SnippetGroup = createClass({
; }, - }); diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index 701240f31..e78759168 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -115,7 +115,7 @@ fs.emptyDirSync('./build'); stream.end(); await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes'); - // await fs.copy('./themes/codeMirror', './build/themes/codeMirror'); + await fs.copy('./themes/codeMirror', './build/homebrew/codeMirror'); //v==----------------------------- BUNDLE PACKAGES --------------------------------==v// diff --git a/server/app.js b/server/app.js index 5b72774c5..520dd154e 100644 --- a/server/app.js +++ b/server/app.js @@ -17,8 +17,6 @@ const asyncHandler = require('express-async-handler'); const { DEFAULT_BREW } = require('./brewDefaults.js'); -const codeMirrorThemes = require('../themes/codeMirror/editorThemes.json'); - const splitTextStyleAndMetadata = (brew)=>{ brew.text = brew.text.replaceAll('\r\n', '\n'); if(brew.text.startsWith('```metadata')) { @@ -419,10 +417,9 @@ const templateFn = require('./../client/template.js'); const renderPage = async (req, res)=>{ // Create configuration object const configuration = { - local : isLocalEnvironment, - publicUrl : config.get('publicUrl') ?? '', - environment : nodeEnv, - codeMirrorThemes : codeMirrorThemes + local : isLocalEnvironment, + publicUrl : config.get('publicUrl') ?? '', + environment : nodeEnv }; const props = { version : require('./../package.json').version, From 3f6eb7371fb8eadf0de2f64dd7e55c5f7bff584f Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Thu, 7 Sep 2023 18:28:08 +1200 Subject: [PATCH 17/17] Increase ESLint lines for SnippetBar.jsx --- client/homebrew/editor/snippetbar/snippetbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index ad4c7d466..246d534a9 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -1,3 +1,4 @@ +/*eslint max-lines: ["warn", {"max": 250, "skipBlankLines": true, "skipComments": true}]*/ require('./snippetbar.less'); const React = require('react'); const createClass = require('create-react-class'); @@ -15,7 +16,6 @@ ThemeSnippets['V3_5eDMG'] = require('themes/V3/5eDMG/snippets.js'); ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js'); ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js'); -// const EditorThemes = require('../themes/codeMirror/editorThemes.json'); const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json'); const execute = function(val, props){