fix: inserting some weird characters on plain text and code blocks

close #2042
close #2037

resources/css/codemirror.solarized.css

@@ -0,0 +1,168 @@
+/*
+Solarized theme for code-mirror
+http://ethanschoonover.com/solarized
+*/
+
+/*
+Solarized color palette
+http://ethanschoonover.com/solarized/img/solarized-palette.png
+*/
+
+.solarized.base03 { color: #002b36; }
+.solarized.base02 { color: #073642; }
+.solarized.base01 { color: #586e75; }
+.solarized.base00 { color: #657b83; }
+.solarized.base0 { color: #839496; }
+.solarized.base1 { color: #93a1a1; }
+.solarized.base2 { color: #eee8d5; }
+.solarized.base3  { color: #fdf6e3; }
+.solarized.solar-yellow  { color: #b58900; }
+.solarized.solar-orange  { color: #cb4b16; }
+.solarized.solar-red { color: #dc322f; }
+.solarized.solar-magenta { color: #d33682; }
+.solarized.solar-violet  { color: #6c71c4; }
+.solarized.solar-blue { color: #268bd2; }
+.solarized.solar-cyan { color: #2aa198; }
+.solarized.solar-green { color: #859900; }
+
+/* Color scheme for code-mirror */
+
+.cm-s-solarized {
+  line-height: 1.45em;
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+.cm-s-solarized.cm-s-dark {
+  color: #839496;
+  background-color: #002b36;
+  text-shadow: #002b36 0 1px;
+}
+.cm-s-solarized.cm-s-light {
+  background-color: #fdf6e3;
+  color: #657b83;
+  text-shadow: #eee8d5 0 1px;
+}
+
+.cm-s-solarized .CodeMirror-widget {
+  text-shadow: none;
+}
+
+.cm-s-solarized .cm-header { color: #586e75; }
+.cm-s-solarized .cm-quote { color: #93a1a1; }
+
+.cm-s-solarized .cm-keyword { color: #cb4b16; }
+.cm-s-solarized .cm-atom { color: #d33682; }
+.cm-s-solarized .cm-number { color: #d33682; }
+.cm-s-solarized .cm-def { color: #2aa198; }
+
+.cm-s-solarized .cm-variable { color: #839496; }
+.cm-s-solarized .cm-variable-2 { color: #b58900; }
+.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; }
+
+.cm-s-solarized .cm-property { color: #2aa198; }
+.cm-s-solarized .cm-operator { color: #6c71c4; }
+
+.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }
+
+.cm-s-solarized .cm-string { color: #859900; }
+.cm-s-solarized .cm-string-2 { color: #b58900; }
+
+.cm-s-solarized .cm-meta { color: #859900; }
+.cm-s-solarized .cm-qualifier { color: #b58900; }
+.cm-s-solarized .cm-builtin { color: #d33682; }
+.cm-s-solarized .cm-bracket { color: #cb4b16; }
+.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
+.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
+.cm-s-solarized .cm-tag { color: #93a1a1; }
+.cm-s-solarized .cm-attribute { color: #2aa198; }
+.cm-s-solarized .cm-hr {
+  color: transparent;
+  border-top: 1px solid #586e75;
+  display: block;
+}
+.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
+.cm-s-solarized .cm-special { color: #6c71c4; }
+.cm-s-solarized .cm-em {
+  color: #999;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.cm-s-solarized .cm-error,
+.cm-s-solarized .cm-invalidchar {
+  color: #586e75;
+  border-bottom: 1px dotted #dc322f;
+}
+
+.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }
+.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
+.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }
+
+.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }
+.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }
+.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }
+
+/* Editor styling */
+
+
+
+/* Little shadow on the view-port of the buffer view */
+.cm-s-solarized.CodeMirror {
+  -moz-box-shadow: inset 7px 0 12px -6px #000;
+  -webkit-box-shadow: inset 7px 0 12px -6px #000;
+  box-shadow: inset 7px 0 12px -6px #000;
+}
+
+/* Remove gutter border */
+.cm-s-solarized .CodeMirror-gutters {
+  border-right: 0;
+}
+
+/* Gutter colors and line number styling based of color scheme (dark / light) */
+
+/* Dark */
+.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
+  background-color: #073642;
+}
+
+.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
+  color: #586e75;
+  text-shadow: #021014 0 -1px;
+}
+
+/* Light */
+.cm-s-solarized.cm-s-light .CodeMirror-gutters {
+  background-color: #eee8d5;
+}
+
+.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
+  color: #839496;
+}
+
+/* Common */
+.cm-s-solarized .CodeMirror-linenumber {
+  padding: 0 5px;
+}
+.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
+.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
+.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
+
+.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
+  color: #586e75;
+}
+
+/* Cursor */
+.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }
+
+/* Fat cursor */
+.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
+.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
+.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
+.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }
+
+/* Active line */
+.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
+  background: rgba(255, 255, 255, 0.06);
+}
+.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.06);
+}

src/main/frontend/extensions/code.cljs

@@ -107,7 +107,8 @@
 (defn render!
   [state]
   (let [editor-atom (:editor-atom state)
-        esc-pressed? (atom nil)]
+        esc-pressed? (atom nil)
+        dark? (state/dark?)]
     (if @editor-atom
       (let [editor @editor-atom
             doc (.getDoc editor)
@@ -126,6 +127,7 @@
                     (when textarea
                       (from-textarea textarea
                                      #js {:mode mode
+                                          :theme (if dark? "solarized dark" "solarized")
                                           :matchBrackets lisp?
                                           :autoCloseBrackets true
                                           :lineNumbers true

src/main/frontend/extensions/code.css

@@ -3,19 +3,19 @@
   z-index: 0;
 
   &-lang {
-    @apply absolute top-0 right-0 p-1 text-sm;
+    @apply absolute right-0 p-1 text-sm;
+    top: 3px;
     z-index: 1;
-    background: rgba(255, 255, 255, .6);
+    background: var(--ls-secondary-background-color);
   }
 
   > .CodeMirror {
     z-index: 0;
     height: auto;
-    padding: 4px 0;
     margin-top: 4px;
     margin-bottom: 6px;
     font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
-    max-width: 86vw;
+    max-width: var(--ls-main-content-max-width);
     border-radius: 2px;
     line-height: 1.45em;
 
@@ -28,289 +28,9 @@
     pre.CodeMirror-line {
       box-shadow: none !important;
     }
-  }
-}
-
-html[data-theme='dark'] {
-
-  .CodeMirror {
-    color: #839496;
-    background-color: var(--ls-secondary-background-color);
-
-    .CodeMirror-widget {
-      text-shadow: none;
-    }
-
-    .cm-keyword {
-      color: #cb4b16
-    }
-
-    .cm-atom {
-      color: #d33682;
-    }
-
-    .cm-number {
-      color: #d33682;
-    }
-
-    .cm-def {
-      color: #2aa198;
-    }
-
-    .cm-variable {
-      color: #268bd2;
-    }
-
-    .cm-variable-2 {
-      color: #b58900;
-    }
-
-    .cm-variable-3 {
-      color: #6c71c4;
-    }
-
-    .cm-property {
-      color: #2aa198;
-    }
-
-    .cm-operator {
-      color: #6c71c4;
-    }
-
-    .cm-comment {
-      color: #586e75;
-      font-style: italic;
-    }
-
-    .cm-string {
-      color: #859900;
-    }
-
-    .cm-string-2 {
-      color: #b58900;
-    }
-
-    .cm-meta {
-      color: #859900;
-    }
-
-    .cm-qualifier {
-      color: #b58900;
-    }
-
-    .cm-builtin {
-      color: #d33682;
-    }
-
-    .cm-bracket {
-      color: #cb4b16;
-    }
-
-    .CodeMirror-matchingbracket {
-      color: #859900;
-    }
-
-    .CodeMirror-nonmatchingbracket {
-      color: #dc322f;
-    }
-
-    .cm-tag {
-      color: #93a1a1
-    }
-
-    .cm-attribute {
-      color: #2aa198;
-    }
-
-    .cm-header {
-      color: #586e75;
-    }
-
-    .cm-quote {
-      color: #93a1a1;
-    }
-
-    .cm-hr {
-      color: transparent;
-      border-top: 1px solid #586e75;
-      display: block;
-    }
-
-    .cm-link {
-      color: #93a1a1;
-      cursor: pointer;
-    }
-
-    .cm-special {
-      color: #6c71c4;
-    }
-
-    .cm-em {
-      color: #999;
-      text-decoration: underline;
-      text-decoration-style: dotted;
-    }
-
-    .cm-strong {
-      color: #eee;
-    }
-
-    .cm-tab:before {
-      content: "➤"; /*visualize tab character*/
-      color: #586e75;
-      position: absolute;
-    }
-
-    .cm-error,
-    .cm-invalidchar {
-      color: #586e75;
-      border-bottom: 1px dotted #dc322f;
-    }
-
-    .CodeMirror-selected {
-      background: var(--ls-primary-background-color);
-    }
 
-    .CodeMirror-gutters {
-      border-right: 1px solid;
-    }
-
-    .CodeMirror-gutters {
-      background-color: var(--ls-secondary-background-color);
-      border-color: transparent;
-    }
-
-    pre.CodeMirror-line {
-      background-color: transparent !important;
-    }
-
-    .CodeMirror-linenumber {
-      text-shadow: #021014 0 -1px;
-    }
-
-    /* Common */
-
-    .CodeMirror-linenumber {
-      color: #586e75;
-      padding: 0 5px;
-    }
-
-    .CodeMirror-gutter .CodeMirror-gutter-text {
-      color: #586e75;
-    }
-
-    .CodeMirror-lines .CodeMirror-cursor {
-      border-left: 1px solid #819090;
-    }
-
-    /*
-    Active line. Negative margin compensates left padding of the text in the
-    view-port
-    */
-
-    .CodeMirror-activeline-background {
-      background: rgba(255, 255, 255, 0.10);
+    .CodeMirror-hscrollbar {
+        cursor: pointer;
     }
   }
-
-  .cp__right-sidebar .CodeMirror {
-    background-color: var(--ls-primary-background-color);
-  }
-
-  .cp__right-sidebar .CodeMirror .CodeMirror-gutters {
-    background-color: var(--ls-primary-background-color);
-  }
-
-  .cp__right-sidebar .CodeMirror .CodeMirror-selected {
-    background: var(--ls-secondary-background-color);
-  }
-
-  .extensions__code-lang {
-    background-color: rgba(0, 0, 0, .25);
-  }
 }
-
-html[data-theme='light'] {
-  .CodeMirror {
-    background: var(--ls-secondary-background-color);
-    color: #202020;
-
-    .CodeMirror-selected {
-      background: var(--ls-tertiary-background-color);
-    }
-
-    .CodeMirror-gutters {
-      background: #f5f5f5;
-      border-right: 0;
-    }
-
-    .CodeMirror-linenumber {
-      color: #b0b0b0;
-    }
-
-    .CodeMirror-cursor {
-      border-left: 1px solid #505050 !important;
-    }
-
-    span.cm-comment {
-      color: #8f5536;
-    }
-
-    span.cm-atom {
-      color: #aa759f;
-    }
-
-    span.cm-number {
-      color: #aa759f;
-    }
-
-    span.cm-property, span.cm-attribute {
-      color: #90a959;
-    }
-
-    span.cm-keyword {
-      color: #ac4142;
-    }
-
-    span.cm-string {
-      color: #eaaf5a;
-    }
-
-    span.cm-variable {
-      color: #8ca553;
-    }
-
-    span.cm-variable-2 {
-      color: #6a9fb5;
-    }
-
-    span.cm-def {
-      color: #d28445;
-    }
-
-    span.cm-bracket {
-      color: #202020;
-    }
-
-    span.cm-tag {
-      color: #ac4142;
-    }
-
-    span.cm-link {
-      color: #aa759f;
-    }
-
-    span.cm-error {
-      background: #ac4142;
-      color: #505050;
-    }
-
-    .CodeMirror-activeline-background {
-      background: var(--ls-tertiary-background-color) !important;
-    }
-
-    .CodeMirror-matchingbracket {
-      color: #1bff01 !important;
-    }
-  }
-}

tailwind.all.css

@@ -8,6 +8,7 @@
 @import "resources/css/excalidraw.min.css";
 @import "resources/css/katex.min.css";
 @import "resources/css/codemirror.min.css";
+@import "resources/css/codemirror.solarized.css";
 @import "resources/css/animation.css";
 @import "resources/css/table.css";
 @import "resources/css/datepicker.css";