fix: restore CM6 editor visual consistency with CM5 #4144

Author: parthjadhao01

client/modules/IDE/components/Editor/codemirror.js

@@ -99,7 +99,16 @@ export default function useCodeMirror({
 
   // When settings change, we pass those changes into CodeMirror.
   useEffect(() => {
-    cmView.current.dom.style['font-size'] = `${fontSize}px`;
+    const reconfigureEffect = (fileState) =>
+      fileState.fontSizeCpt.reconfigure(
+        EditorView.theme({ '&': { fontSize: `${fontSize}px` } })
+      );
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
   }, [fontSize]);
   useEffect(() => {
     const reconfigureEffect = (fileState) =>
@@ -171,7 +180,8 @@ export default function useCodeMirror({
             autocomplete: autocompleteHinter,
             onUpdateLinting,
             onViewUpdate,
-            referenceBaseUrl
+            referenceBaseUrl,
+            fontSize
           }
         );
       }

client/modules/IDE/components/Editor/stateUtils.js

@@ -402,6 +402,14 @@ export const createAutocompleteOptions = (referenceBaseUrl) => ({
   ]
 });
 
+// Uses window.document explicitly to avoid shadowing by the `document`
+// parameter in createNewFileState below.
+function createFoldMarker(open) {
+  const span = window.document.createElement('span');
+  span.className = open ? 'cm-fold-open' : 'cm-fold-closed';
+  return span;
+}
+
 /**
  * Creates a new CodeMirror editor state with configurations,
  * extensions, and keymaps tailored to the file type and settings.
@@ -416,12 +424,14 @@ export function createNewFileState(filename, document, settings) {
     autocloseBracketsQuotes,
     onUpdateLinting,
     onViewUpdate,
-    referenceBaseUrl
+    referenceBaseUrl,
+    fontSize
   } = settings;
   const lineNumbersCpt = new Compartment();
   const lineWrappingCpt = new Compartment();
   const closeBracketsCpt = new Compartment();
   const autocompleteCpt = new Compartment();
+  const fontSizeCpt = new Compartment();
 
   // Depending on the file mode, we have a different tidier function.
   // Keep this binding local to each file state so modes don't accumulate
@@ -469,6 +479,7 @@ export function createNewFileState(filename, document, settings) {
   // https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
   const extensions = [
     // The first few extensions can be toggled on or off.
+    fontSizeCpt.of(EditorView.theme({ '&': { fontSize: `${fontSize}px` } })),
     lineNumbersCpt.of(lineNumbers ? lineNumbersExt() : []),
     lineWrappingCpt.of(linewrap ? EditorView.lineWrapping : []),
     closeBracketsCpt.of(autocloseBracketsQuotes ? closeBrackets() : []),
@@ -495,7 +506,7 @@ export function createNewFileState(filename, document, settings) {
     EditorState.allowMultipleSelections.of(true),
     // Gutter extensions
     gutters({ fixed: false }),
-    foldGutter(),
+    foldGutter({ markerDOM: createFoldMarker }),
     // Misc extensions
     indentOnInput(),
     bracketMatching(),
@@ -557,7 +568,8 @@ export function createNewFileState(filename, document, settings) {
     lineNumbersCpt,
     lineWrappingCpt,
     closeBracketsCpt,
-    autocompleteCpt
+    autocompleteCpt,
+    fontSizeCpt
   };
 }
 

client/styles/components/_editor.scss

@@ -155,7 +155,60 @@
   }
 }
 
-// TODO: Add fold gutter styling back.
+// CM5: .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded
+.cm-foldGutter {
+  padding-right: #{math.div(3, $base-font-size)}rem;
+}
+
+.cm-foldGutter .cm-gutterElement {
+  cursor: pointer;
+  // !important needed to override CM6's inline display style on gutter elements
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+// CM5: .CodeMirror-foldgutter-open:after / .CodeMirror-foldgutter-folded:after
+.cm-fold-open,
+.cm-fold-closed {
+  display: inline-block;
+  width: #{math.div(10, $base-font-size)}rem;
+  height: #{math.div(10, $base-font-size)}rem;
+  background-size: #{math.div(10, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  opacity: 0.4;
+}
+
+.cm-fold-open {
+  @include themify() {
+    background-image: getThemifyVariable('codefold-icon-open');
+  }
+}
+
+.cm-fold-closed {
+  @include themify() {
+    background-image: getThemifyVariable('codefold-icon-closed');
+  }
+}
+
+// CM5: .CodeMirror-foldmarker
+.cm-foldPlaceholder {
+  display: inline-block;
+  vertical-align: middle;
+  height: 0.85em;
+  line-height: 0.7;
+  border-radius: 5px;
+  padding: 0 #{math.div(5, $base-font-size)}rem;
+  font-family: serif;
+  cursor: pointer;
+  opacity: 0.75;
+
+  @include themify() {
+    background-color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable('background-color');
+  }
+}
 
 .editor-holder {
   height: calc(100% - #{math.div(29, $base-font-size)}rem);