diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx index b00e8ade3..55699c1ee 100644 --- a/src/renderer/component/viewers/codeViewer.jsx +++ b/src/renderer/component/viewers/codeViewer.jsx @@ -2,6 +2,10 @@ import React from 'react'; import CodeMirror from 'codemirror/lib/codemirror'; + +// Addons +import 'codemirror/addon/selection/mark-selection'; + // Syntax mode import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/markdown/markdown'; @@ -29,6 +33,7 @@ class CodeViewer extends React.PureComponent { dragDrop: false, lineNumbers: true, lineWrapping: true, + styleSelectedText: true, }); } diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index c25782bc3..1565438b6 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -245,7 +245,7 @@ p { /* Custom text selection */ *::selection { - background: var(--color-primary-light); + background: var(--text-selection-bg); color: var(--text-selection-color); } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 517f33fdd..1655a1575 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -62,9 +62,11 @@ $large-breakpoint: 1921px; --text-help-color: var(--color-help); --text-max-width: 660px; --text-link-padding: 4px; - --text-selection-bg: var(--color-purple); - --text-selection-color: #fff; + /* Text Selectiom */ + --text-selection-bg: var(--color-primary-light); + --text-selection-color: var(--color-white); + --editor-text-selection-bg: rgba(57, 148, 131, 0.8); /* Form */ --form-label-color: rgba(0, 0, 0, 0.54); diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss index 50d32c09c..befdc4712 100644 --- a/src/renderer/scss/component/_file-render.scss +++ b/src/renderer/scss/component/_file-render.scss @@ -51,6 +51,9 @@ height: 100%; min-height: 100px; + /* Block native text selection */ + user-select: none; + .CodeMirror-code { font-size: 1em; line-height: 1.5em; diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss index df3952f3e..794e3e651 100644 --- a/src/renderer/scss/component/_markdown-editor.scss +++ b/src/renderer/scss/component/_markdown-editor.scss @@ -55,11 +55,6 @@ div.editor-toolbar a { border: 1px solid var(--input-border-color) !important; } -.CodeMirror .CodeMirror-selected { - background: var(--text-selection-bg) !important; - color: var(--text-selection-color) !important; -} - .CodeMirror .CodeMirror-cursor { border-color: var(--color-primary) !important; } @@ -67,6 +62,23 @@ div.editor-toolbar a { .CodeMirror .CodeMirror-placeholder { opacity: 0.5; } + +/* Fix selection */ +.CodeMirror-line::selection, +.CodeMirror-line > span::selection, +.CodeMirror-line > span > span::selection { + background: var(--text-selection-bg); +} + +.CodeMirror .CodeMirror-selected { + background: transparent; +} + +.CodeMirror .CodeMirror-selectedtext { + background: var(--editor-text-selection-bg) !important; + color: var(--text-selection-color) !important; +} + .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { background: none; text-decoration: underline; diff --git a/static/themes/dark.css b/static/themes/dark.css index 2edfc8cd2..7343530d5 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -1,7 +1,6 @@ :root { - + /* Colors */ - --color-divider: #53637C;; --color-canvas: transparent; --color-help: #8696AF; @@ -12,12 +11,11 @@ --color-placeholder: var(--color-bg-alt); /* Text */ - --text-color: #FFF; + --text-color: var(--color-white); --text-help-color: var(--color-help); - --text-selection-color: #fff; /* Form */ - --form-label-color: #FFF; + --form-label-color: var(--color-white); /* Input */ --input-bg: transparent; @@ -90,7 +88,7 @@ /* Scrollbar */ --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); --scrollbar-thumb-hover-bg: #8696AF; - + /* Shadows */ --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2); }