Display Markdown only on active CodeMirror lines

admin/assets/css/admin.css

@@ -1786,7 +1786,7 @@ span.CodeMirror-selectedtext {
 }
 
 .CodeMirror-lines pre {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .editor-toolbar + .editor-textarea,
@@ -1826,6 +1826,26 @@ span.CodeMirror-selectedtext {
   background: rgba(30, 136, 229, 0.25);
 }
 
+.cm-formatting-code-block,
+.cm-formatting-list {
+  display: inline !important;
+}
+
+.cm-formatting,
+.cm-image-alt-text,
+.cm-url {
+  display: none;
+}
+.CodeMirror-activeline .cm-formatting,
+.CodeMirror-activeline .cm-image-alt-text,
+.CodeMirror-activeline .cm-url {
+  display: inline;
+}
+
+.cm-s-formwork .cm-formatting {
+  color: #7d7d7d;
+}
+
 .cm-s-formwork .cm-header-1 {
   font-size: 1.75rem;
 }
@@ -1859,16 +1879,57 @@ span.CodeMirror-selectedtext {
   color: #7d7d7d;
 }
 
+.cm-s-formwork .cm-formatting-quote + .cm-quote::before {
+  margin-right: 0.25rem;
+  color: #7d7d7d;
+  content: " ";
+  font-family: Icons, sans-serif;
+}
+
+.cm-s-formwork .CodeMirror-activeline .cm-formatting-quote + .cm-quote::before {
+  display: none;
+}
+
 .cm-s-formwork .cm-link {
   color: #1e88e5;
   text-decoration: underline;
 }
 
-.cm-s-formwork .cm-url,
+.cm-s-formwork .cm-url.cm-formatting,
+.cm-s-formwork .cm-image-alt-text.cm-formatting,
 .cm-s-formwork .cm-image-marker {
   color: #1e88e5;
 }
 
+.cm-s-formwork .cm-url,
+.cm-s-formwork .cm-image-alt-text {
+  color: #7d7d7d;
+  text-decoration: none;
+}
+
+.cm-s-formwork .cm-image ~ .cm-url:not(.cm-formatting) {
+  display: inline;
+  padding: 0 0.25rem;
+  border-radius: 3px;
+  background-color: #ededed;
+  color: #262626;
+}
+.cm-s-formwork .cm-image ~ .cm-url:not(.cm-formatting)::before {
+  margin-right: 0.25rem;
+  color: #7d7d7d;
+  content: " ";
+  font-family: Icons, sans-serif;
+}
+
+.cm-s-formwork .CodeMirror-activeline .cm-image ~ .cm-url:not(.cm-formatting) {
+  padding: 0;
+  background-color: transparent;
+  color: #7d7d7d;
+}
+.cm-s-formwork .CodeMirror-activeline .cm-image ~ .cm-url:not(.cm-formatting)::before {
+  display: none;
+}
+
 .cm-s-formwork .cm-hr {
   color: #7d7d7d;
 }
@@ -4414,7 +4475,7 @@ button .page-language,
   content: "";
 }
 
-.i-image::before {
+.i-image::before, .cm-s-formwork .cm-image ~ .cm-url:not(.cm-formatting)::before {
   content: "";
 }
 
@@ -4494,7 +4555,7 @@ button .page-language,
   content: "";
 }
 
-.i-quote::before {
+.i-quote::before, .cm-s-formwork .cm-formatting-quote + .cm-quote::before {
   content: "";
 }
 

admin/assets/js/src/components/editor.js

@@ -7,16 +7,27 @@ import 'codemirror/addon/edit/continuelist.js';
 
 export default function Editor(textarea) {
     var editor = CodeMirror.fromTextArea(textarea, {
-        mode: 'markdown',
+        mode: {
+            name: 'markdown',
+            highlightFormatting: true
+        },
         theme: 'formwork',
         indentUnit: 4,
         lineWrapping: true,
         addModeClass: true,
-        extraKeys: {'Enter': 'newlineAndIndentContinueMarkdownList'}
+        extraKeys: {'Enter': 'newlineAndIndentContinueMarkdownList'},
+        configureMouse: function () {
+            return {
+                extend: false,
+                addNew: false
+            };
+        }
     });
 
     var toolbar = $('.editor-toolbar[data-for=' + textarea.id + ']');
 
+    var activeLines = [];
+
     $('[data-command=bold]', toolbar).addEventListener('click', function () {
         insertAtCursor('**');
     });
@@ -109,6 +120,23 @@ export default function Editor(textarea) {
         }
     }, 500));
 
+    editor.on('beforeSelectionChange', function (editor, selection) {
+        var lines = getLinesFromRange(selection.ranges);
+        editor.operation(function () {
+            if (!Utils.sameArray(lines, activeLines)) {
+                removeActiveLines(editor, activeLines);
+                addActiveLines(editor, lines);
+                activeLines = lines;
+            }
+        });
+        editor.refresh();
+    });
+
+    editor.on('blur', function (editor) {
+        removeActiveLines(editor, activeLines);
+        activeLines = [];
+    });
+
     document.addEventListener('keydown', function (event) {
         if (!event.altKey && (event.ctrlKey || event.metaKey)) {
             switch (event.which) {
@@ -176,4 +204,27 @@ export default function Editor(textarea) {
         editor.setCursor(cursor.line + lineBreaks, cursor.ch + leftValue.length - lineBreaks);
         editor.focus();
     }
+
+    function getLinesFromRange(ranges) {
+        var i;
+        var lines = [];
+        for (i = 0; i < ranges.length; i++) {
+            lines.push(ranges[i].head.line);
+        }
+        return lines;
+    }
+
+    function removeActiveLines(editor, lines) {
+        var i;
+        for (i = 0; i < lines.length; i++) {
+            editor.removeLineClass(lines[i], 'wrap', 'CodeMirror-activeline');
+        }
+    }
+
+    function addActiveLines(editor, lines) {
+        var i;
+        for (i = 0; i < lines.length; i++) {
+            editor.addLineClass(lines[i], 'wrap', 'CodeMirror-activeline');
+        }
+    }
 }

admin/assets/js/src/components/utils.js

@@ -143,6 +143,19 @@ export default {
         }
     },
 
+    sameArray: function (array1, array2) {
+        var i;
+        if (array1.length !== array2.length) {
+            return false;
+        }
+        for (i = 0; i < array1.length; i++) {
+            if (array1[i] !== array2[i]) {
+                return false;
+            }
+        }
+        return true;
+    },
+
     extendObject: function (target) {
         var i, source, property;
         target = target || {};

admin/assets/scss/components/_editor.scss

@@ -54,7 +54,7 @@
 }
 
 .CodeMirror-lines pre {
-    padding: 0;
+    padding: 0 !important;
 }
 
 .editor-toolbar + .editor-textarea,
@@ -94,6 +94,24 @@
     background: $selection-background-color;
 }
 
+.cm-formatting-code-block,
+.cm-formatting-list {
+    display: inline !important;
+}
+
+.cm-formatting,
+.cm-image-alt-text,
+.cm-url {
+    display: none;
+    .CodeMirror-activeline & {
+        display: inline;
+    }
+}
+
+.cm-s-formwork .cm-formatting {
+    color: $color-base-300;
+}
+
 .cm-s-formwork .cm-header-1 {
     font-size: 1.75rem;
 }
@@ -127,16 +145,57 @@
     color: $color-base-300;
 }
 
+.cm-s-formwork .cm-formatting-quote + .cm-quote::before {
+    margin-right: 0.25rem;
+    color: $color-base-300;
+    content: ' ';
+    @include icon('quote');
+}
+
+.cm-s-formwork .CodeMirror-activeline .cm-formatting-quote + .cm-quote::before {
+    display: none;
+}
+
 .cm-s-formwork .cm-link {
     color: $color-accent-500;
     text-decoration: underline;
 }
 
-.cm-s-formwork .cm-url,
+.cm-s-formwork .cm-url.cm-formatting,
+.cm-s-formwork .cm-image-alt-text.cm-formatting,
 .cm-s-formwork .cm-image-marker {
     color: $color-accent-500;
 }
 
+.cm-s-formwork .cm-url,
+.cm-s-formwork .cm-image-alt-text {
+    color: $color-base-300;
+    text-decoration: none;
+}
+
+.cm-s-formwork .cm-image ~ .cm-url:not(.cm-formatting) {
+    display: inline;
+    padding: 0 0.25rem;
+    border-radius: 3px;
+    background-color: $color-base-700;
+    color: $color-base-100;
+    &::before {
+        margin-right: 0.25rem;
+        color: $color-base-300;
+        content: ' ';
+        @include icon('image');
+    }
+}
+
+.cm-s-formwork .CodeMirror-activeline .cm-image ~ .cm-url:not(.cm-formatting) {
+    padding: 0;
+    background-color: transparent;
+    color: $color-base-300;
+    &::before {
+        display: none;
+    }
+}
+
 .cm-s-formwork .cm-hr {
     color: $color-base-300;
 }