Merge branch '220249-styling-of-sse-markdown-mode' into 'master'

Update styling for SSE markdown editor

Closes #220249

See merge request gitlab-org/gitlab!35347

app/assets/stylesheets/components/rich_content_editor.scss

@@ -2,30 +2,45 @@
 * Overrides styles from ToastUI editor
 */
 
-// Toolbar buttons
-.tui-editor-defaultUI-toolbar .toolbar-button {
-  color: $gl-gray-600;
-  border: 0;
-
-  &:hover,
-  &:active {
-    color: $blue-500;
+.tui-editor-defaultUI {
+
+  // Toolbar buttons
+  .tui-editor-defaultUI-toolbar .toolbar-button {
+    color: $gl-gray-600;
     border: 0;
+
+    &:hover,
+    &:active {
+      color: $blue-500;
+      border: 0;
+    }
   }
-}
 
-// Contextual menu's & popups
-.tui-editor-defaultUI .tui-popup-wrapper {
-  @include gl-overflow-hidden;
-  @include gl-rounded-base;
-  @include gl-border-gray-400;
+  // Contextual menu's & popups
+  .tui-popup-wrapper {
+    @include gl-overflow-hidden;
+    @include gl-rounded-base;
+    @include gl-border-gray-400;
 
-  hr {
-    @include gl-m-0;
-    @include gl-bg-gray-400;
+    hr {
+      @include gl-m-0;
+      @include gl-bg-gray-400;
+    }
+
+    button {
+      @include gl-text-gray-800;
+    }
   }
 
-  button {
-    @include gl-text-gray-800;
+  /**
+  * Overrides styles from ToastUI's Code Mirror (markdown mode) editor.
+  * Toast UI internally overrides some of these using the `.tui-md-` prefix.
+  * https://codemirror.net/doc/manual.html#styling
+  */
+
+  .te-md-container .CodeMirror * {
+    @include gl-font-monospace;
+    @include gl-font-size-monospace;
+    @include gl-line-height-20;
   }
 }

changelogs/unreleased/35347-styling-of-sse-markdown-mode.yml

+---
+title: Update the static site editor's markdown mode text to monospace to better reflect a code-editing experience
+merge_request: 35347
+author: Derek Knox
+type: changed