fix text selection

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<Props> {
       dragDrop: false,
       lineNumbers: true,
       lineWrapping: true,
+      styleSelectedText: true,
     });
   }
 

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);
 }
 

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);
 

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;

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;

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;