Updated codemirror and updated codemirror base styles

Aligns styles with current release, since was causing overflow
with scrollbars.

Fixes #2267

diff --git a/package-lock.json b/package-lock.json
index c5b9fc3933262ed7c357927c14264861d87d87d8..cea03187cd0532014cef6e0ef355c29ad4f0b2a7 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -139,9 +139,9 @@
       }
     },
     "codemirror": {
       }
     },
     "codemirror": {

-      "version": "5.57.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.57.0.tgz",
-      "integrity": "sha512-WGc6UL7Hqt+8a6ZAsj/f1ApQl3NPvHY/UQSzG6fB6l4BjExgVdhFaxd7mRTw1UCiYe/6q86zHP+kfvBQcZGvUg=="
+      "version": "5.58.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.1.tgz",
+      "integrity": "sha512-UGb/ueu20U4xqWk8hZB3xIfV2/SFqnSLYONiM3wTMDqko0bsYrsAkGGhqUzbRkYm89aBKPyHtuNEbVWF9FTFzw=="

     },
     "color-convert": {
       "version": "1.9.3",
     },
     "color-convert": {
       "version": "1.9.3",

diff --git a/package.json b/package.json
index a8ec0df93d45591a493fd1d4fda4c862b9cfbd71..0c3c69a07be6df87325c535b5f018a6125e08701 100644 (file)
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "clipboard": "^2.0.6",
   },
   "dependencies": {
     "clipboard": "^2.0.6",

-    "codemirror": "^5.57.0",
+    "codemirror": "^5.58.1",

     "dropzone": "^5.7.2",
     "markdown-it": "^11.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "dropzone": "^5.7.2",
     "markdown-it": "^11.0.0",
     "markdown-it-task-lists": "^2.1.1",

diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index f65a7c42279f6214e4b268874598b4c8dca53e32..e419ab524e63112c1c383996cc326644e4b6ab4c 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -2,8 +2,10 @@
 
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
 
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */

+  font-family: monospace;

   height: 300px;
   color: black;
   height: 300px;
   color: black;

+  direction: ltr;

 }
 
 /* PADDING */
 }
 
 /* PADDING */


@@ -11,7 +13,8 @@
 .CodeMirror-lines {
   padding: 4px 0; /* Vertical padding around content */
 }
 .CodeMirror-lines {
   padding: 4px 0; /* Vertical padding around content */
 }

-.CodeMirror pre {
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {

   padding: 0 4px; /* Horizontal padding of content */
 }
 
   padding: 0 4px; /* Horizontal padding of content */
 }
 


@@ -57,7 +60,12 @@
 .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
 .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }

-
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}

 .cm-animate-fat-cursor {
   width: auto;
   border: 0;
 .cm-animate-fat-cursor {
   width: auto;
   border: 0;


@@ -89,7 +97,7 @@
 
 .CodeMirror-rulers {
   position: absolute;
 
 .CodeMirror-rulers {
   position: absolute;

-  left: 0; right: 0; top: -50px; bottom: -20px;
+  left: 0; right: 0; top: -50px; bottom: 0;

   overflow: hidden;
 }
 .CodeMirror-ruler {
   overflow: hidden;
 }
 .CodeMirror-ruler {


@@ -118,7 +126,7 @@
 .cm-s-default .cm-property,
 .cm-s-default .cm-operator {}
 .cm-s-default .cm-variable-2 {color: #05a;}
 .cm-s-default .cm-property,
 .cm-s-default .cm-operator {}
 .cm-s-default .cm-variable-2 {color: #05a;}

-.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}

 .cm-s-default .cm-comment {color: #a50;}
 .cm-s-default .cm-string {color: #a11;}
 .cm-s-default .cm-string-2 {color: #f50;}
 .cm-s-default .cm-comment {color: #a50;}
 .cm-s-default .cm-string {color: #a11;}
 .cm-s-default .cm-string-2 {color: #f50;}


@@ -138,8 +146,8 @@
 
 /* Default styles for common addons */
 
 
 /* Default styles for common addons */
 

-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}

 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
 .CodeMirror-activeline-background {background: #e8f2ff;}
 
 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
 .CodeMirror-activeline-background {background: #e8f2ff;}
 


@@ -156,17 +164,17 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-scroll {
   overflow: scroll !important; /* Things will break if this is overridden */
 
 .CodeMirror-scroll {
   overflow: scroll !important; /* Things will break if this is overridden */

-  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* 50px is the magic margin used to hide the element's real scrollbars */

   /* See overflow: hidden in .CodeMirror */
   /* See overflow: hidden in .CodeMirror */

-  margin-bottom: -30px; margin-right: -30px;
-  padding-bottom: 30px;
+  margin-bottom: -50px; margin-right: -50px;
+  padding-bottom: 50px;

   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
 }
 .CodeMirror-sizer {
   position: relative;
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
 }
 .CodeMirror-sizer {
   position: relative;

-  border-right: 30px solid transparent;
+  border-right: 50px solid transparent;

 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling


@@ -176,6 +184,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   position: absolute;
   z-index: 6;
   display: none;
   position: absolute;
   z-index: 6;
   display: none;

+  outline: none;

 }
 .CodeMirror-vscrollbar {
   right: 0; top: 0;
 }
 .CodeMirror-vscrollbar {
   right: 0; top: 0;


@@ -204,7 +213,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   height: 100%;
   display: inline-block;
   vertical-align: top;
   height: 100%;
   display: inline-block;
   vertical-align: top;

-  margin-bottom: -30px;
+  margin-bottom: -50px;

 }
 .CodeMirror-gutter-wrapper {
   position: absolute;
 }
 .CodeMirror-gutter-wrapper {
   position: absolute;


@@ -229,11 +238,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: text;
   min-height: 1px; /* prevents collapsing before first draw */
 }
   cursor: text;
   min-height: 1px; /* prevents collapsing before first draw */
 }

-.CodeMirror pre {
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {

   /* Reset some styles that the rest of the page might have set */
   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
   border-width: 0;
   background: transparent;
   /* Reset some styles that the rest of the page might have set */
   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
   border-width: 0;
   background: transparent;

+  font-family: inherit;

   font-size: inherit;
   margin: 0;
   white-space: pre;
   font-size: inherit;
   margin: 0;
   white-space: pre;


@@ -246,12 +257,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   -webkit-tap-highlight-color: transparent;
   -webkit-font-variant-ligatures: contextual;
   font-variant-ligatures: contextual;
   -webkit-tap-highlight-color: transparent;
   -webkit-font-variant-ligatures: contextual;
   font-variant-ligatures: contextual;

-  &:after {
-    content: none;
-    display: none;
-  }

 }
 }

-.CodeMirror-wrap pre {
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {

   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;


@@ -266,7 +274,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror-linewidget {
   position: relative;
   z-index: 2;
 .CodeMirror-linewidget {
   position: relative;
   z-index: 2;

-  overflow: auto;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */

 }
 
 .CodeMirror-widget {}
 }
 
 .CodeMirror-widget {}


@@ -321,8 +329,8 @@ div.CodeMirror-dragcursors {
 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {

-  background: #ffa;
-  background: rgba(255, 255, 0, .4);
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);

 }
 
 /* Used to force a border model for a node */
 }
 
 /* Used to force a border model for a node */


@@ -341,53 +349,6 @@ div.CodeMirror-dragcursors {
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
 

-/**
- * Codemirror Default theme
- */
-
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-

 /* STOP */
 
 /**
 /* STOP */
 
 /**


@@ -461,6 +422,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   border: 1px solid;
   @include lightDark(border-color, #DDD, #111);
 }
   border: 1px solid;
   @include lightDark(border-color, #DDD, #111);
 }

+.CodeMirror pre::after {
+  display: none;
+}

 html.dark-mode .CodeMirror pre {
   background-color: transparent;
 }
 html.dark-mode .CodeMirror pre {
   background-color: transparent;
 }