Merge pull request #2896 from beekeeper-studio/fix/json-sidebar-fold-gutter

fix json viewer fold gutter

apps/studio/src/assets/styles/components/detail-view-sidebar.scss

@@ -87,6 +87,7 @@ div.sidebar.detail-view-sidebar {
 
   .CodeMirror.text-editor {
     width: 100%;
+    padding-left: 1rem;
 
     &, .CodeMirror-gutters {
       background-color: $theme-bg !important;

apps/studio/src/assets/styles/components/text-editor.scss

@@ -6,11 +6,26 @@
   }
 
   .CodeMirror-foldgutter {
-    padding-left: 1rem;
+    width: 1.2rem;
   }
 
-  .CodeMirror-gutter-elt [class^=CodeMirror-foldgutter] {
-    padding-left: 1rem;
+  .CodeMirror-foldgutter-open,
+  .CodeMirror-foldgutter-folded {
+    font-family: "Material Icons";
+    font-size: 1.2rem;
+    color: rgba($theme-base, 0.37);
+
+    &:hover {
+      color: $text-dark;
+    }
+  }
+
+  .CodeMirror-foldgutter-open::after {
+    content: "keyboard_arrow_down";
+  }
+
+  .CodeMirror-foldgutter-folded::after {
+    content: "keyboard_arrow_right";
   }
 
   .CodeMirror-gutter-background.changed {
@@ -20,21 +35,4 @@
   .CodeMirror-guttermaker-subtle {
     color: rgba($theme-base, 0.25);
   }
-
-  .CodeMirror-gutter-elt .btn-fab {
-    min-width: 18px;
-    width: 18px;
-    height: 18px;
-    color: rgba($theme-base, 0.37);
-
-    &:hover,
-    &:focus {
-      background-color: transparent;
-      color: $text-dark;
-    }
-
-    .dropdown-icon {
-      color: inherit;
-    }
-  }
 }

apps/studio/src/components/common/texteditor/TextEditor.vue

@@ -205,27 +205,6 @@ export default {
     async initialize(options: InitializeOptions = {}) {
       this.destroyEditor();
 
-      const gutters = []
-      let foldGutter: { indicatorOpen: HTMLElement, indicatorFolded: HTMLElement };
-
-      const lineNumbers = this.lineNumbers ?? true
-      if (lineNumbers) {
-        gutters.push("CodeMirror-linenumbers")
-      }
-      if (this.foldGutter) {
-        gutters.push("CodeMirror-foldgutter")
-      }
-
-      const indicatorOpen = document.createElement("span");
-      indicatorOpen.classList.add("CodeMirror-foldgutter", "foldgutter", "btn-fab", "open-close");
-      indicatorOpen.innerHTML = `<i class="dropdown-icon material-icons">keyboard_arrow_down</i>`;
-
-      const indicatorFolded = document.createElement("span");
-      indicatorFolded.classList.add("CodeMirror-foldgutter", "foldgutter", "btn-fab", "open-close");
-      indicatorFolded.innerHTML = `<i class="dropdown-icon material-icons">keyboard_arrow_right</i>`;
-
-      foldGutter = { indicatorOpen, indicatorFolded };
-
       const cm = CodeMirror.fromTextArea(this.$refs.editor, {
         autoRefresh: true,
         lineNumbers: this.lineNumbers ?? true,
@@ -246,10 +225,10 @@ export default {
         hintOptions: this.hintOptions,
         keyMap: options.userKeymap,
         getColumns: this.columnsGetter,
-        gutters,
-        // @ts-expect-error not fully typed
-        foldGutter,
-        autoRefresh: true,
+        ...(this.foldGutter && {
+          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+          foldGutter: true,
+        }),
         // Remove JSON root key from folding
         ...(this.removeJsonRootBrackets && {
           foldGutter: {

apps/studio/src/components/sidebar/DetailViewSidebar.vue

@@ -60,7 +60,7 @@
       :unfold-all="unfoldAll"
       :value="text"
       :mode="mode"
-      :force-initizalize="reinitializeTextEditor + (reinitialize ?? 0)"
+      :force-initialize="reinitializeTextEditor + (reinitialize ?? 0)"
       :markers="markers"
       :plugins="textEditorPlugins"
       :line-gutters="lineGutters"