Custom background - Editor

browser/components/CodeEditor.js

@@ -19,6 +19,7 @@ import { isMarkdownTitleURL } from 'browser/lib/utils'
 import styles from '../components/CodeEditor.styl'
 const { ipcRenderer, remote, clipboard } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+import normalizeBackgroundImage from 'browser/lib/normalizeBackgroundImage'
 const spellcheck = require('browser/lib/spellcheck')
 const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
 import { createTurndownService } from '../lib/turndown'
@@ -274,6 +275,7 @@ export default class CodeEditor extends React.Component {
 
   componentDidMount () {
     const { rulers, enableRulers, enableMarkdownLint } = this.props
+    const backgroundPath = normalizeBackgroundImage(this.props.backgroundPath)
     eventEmitter.on('line:jump', this.scrollToLineHandeler)
 
     snippetManager.init()
@@ -304,10 +306,12 @@ export default class CodeEditor extends React.Component {
         override: true
       },
       extraKeys: this.defaultKeyMap,
-      prettierConfig: this.props.prettierConfig
+      prettierConfig: this.props.prettierConfig,
+      backgroundPath: this.props.backgroundPath
     })
 
     document.querySelector('.CodeMirror-lint-markers').style.display = enableMarkdownLint ? 'inline-block' : 'none'
+    document.querySelector('.CodeMirror.CodeMirror-wrap').style.backgroundImage = backgroundPath
 
     if (!this.props.mode && this.props.value && this.props.autoDetect) {
       this.autoDetectLanguage(this.props.value)
@@ -552,6 +556,10 @@ export default class CodeEditor extends React.Component {
     if (prevProps.fontFamily !== this.props.fontFamily) {
       needRefresh = true
     }
+    if (prevProps.backgroundPath !== this.props.backgroundPath) {
+      document.querySelector('.CodeMirror.CodeMirror-wrap').style.backgroundImage = normalizeBackgroundImage(this.props.backgroundPath)
+      needRefresh = true
+    }
     if (prevProps.keyMap !== this.props.keyMap) {
       needRefresh = true
     }
@@ -1219,7 +1227,8 @@ CodeEditor.propTypes = {
   spellCheck: PropTypes.bool,
   enableMarkdownLint: PropTypes.bool,
   customMarkdownLintConfig: PropTypes.string,
-  deleteUnusedAttachments: PropTypes.bool
+  deleteUnusedAttachments: PropTypes.bool,
+  backgroundPath: PropTypes.string
 }
 
 CodeEditor.defaultProps = {
@@ -1235,5 +1244,6 @@ CodeEditor.defaultProps = {
   enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
   customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,
   prettierConfig: DEFAULT_CONFIG.editor.prettierConfig,
-  deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments
+  deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments,
+  backgroundPath: DEFAULT_CONFIG.editor.backgroundPath
 }

browser/components/MarkdownEditor.js

@@ -325,6 +325,7 @@ class MarkdownEditor extends React.Component {
           customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
           prettierConfig={config.editor.prettierConfig}
           deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
+          backgroundPath={config.editor.backgroundPath}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'

browser/components/MarkdownSplitEditor.js

@@ -183,6 +183,7 @@ class MarkdownSplitEditor extends React.Component {
           enableMarkdownLint={config.editor.enableMarkdownLint}
           customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
           deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
+          backgroundPath={config.editor.backgroundPath}
        />
         <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
           <div styleName='slider-hitbox' />

browser/lib/normalizeBackgroundImage.js

@@ -0,0 +1,9 @@
+import isString from 'lodash/isString'
+
+export default function normalizeBackgroundImage (backgroundPath) {
+  const defaultEditorBackground = 'none'
+  let value = isString(backgroundPath) && backgroundPath.trim().length > 0
+    ? 'url(' + backgroundPath + ')'
+    : defaultEditorBackground
+  return value
+}

browser/main/global.styl

@@ -110,6 +110,11 @@ body[data-theme="dark"]
   font-family inherit !important
   line-height 1.4em
   height 100%
+  &.CodeMirror-wrap
+    background-blend-mode overlay
+    background-repeat no-repeat
+    background-position center
+    background-size cover
 .CodeMirror > div > textarea
   margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected

browser/main/lib/ConfigManager.js

@@ -77,7 +77,8 @@ export const DEFAULT_CONFIG = {
       "semi": false,
       "singleQuote": true
     }`,
-    deleteUnusedAttachments: true
+    deleteUnusedAttachments: true,
+    backgroundPath: ''
   },
   preview: {
     fontSize: '14',

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -125,6 +125,9 @@
 .note-for-keymap
   font-size: 12px
 
+.note-for-backgroundImage
+  font-size: 12px
+
 .code-mirror
   width 400px
   height 120px

browser/main/modals/PreferencesModal/UiTab.js

@@ -112,7 +112,8 @@ class UiTab extends React.Component {
         enableMarkdownLint: this.refs.enableMarkdownLint.checked,
         customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue(),
         prettierConfig: this.prettierConfigCM.getCodeMirror().getValue(),
-        deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked
+        deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked,
+        backgroundPath: this.refs.customBackgroundPathEditor.value
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -698,6 +699,19 @@ class UiTab extends React.Component {
               </div>
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Custom Background - Editor')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='customBackgroundPathEditor'
+                value={config.editor.backgroundPath}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
 
           <div styleName='group-header2'>{i18n.__('Preview')}</div>
           <div styleName='group-section'>

locales/en.json

@@ -55,6 +55,8 @@
   "default": "default",
   "vim": "vim",
   "emacs": "emacs",
+  "Custom CSS": "Custom CSS",
+  "Custom Background - Editor": "Custom Background - Editor",
   "⚠️ Please restart boostnote after you change the keymap": "⚠️ Please restart boostnote after you change the keymap",
   "Show line numbers in the editor": "Show line numbers in the editor",
   "Allow editor to scroll past the last line": "Allow editor to scroll past the last line",

locales/zh-TW.json

@@ -49,6 +49,7 @@
   "default": "預設",
   "vim": "vim",
   "emacs": "emacs",
+  "Custom Background - Editor": "自訂背景 - 文字編輯器",
   "⚠️ Please restart boostnote after you change the keymap": "⚠️ 修改鍵盤配置請重新開啟 Boostnote ",
   "Show line numbers in the editor": "在編輯器中顯示行號",
   "Allow editor to scroll past the last line": "允許編輯器捲軸捲動超過最後一行",