Fix multiple style issues with codemirror

packages/builder/package.json

@@ -66,7 +66,7 @@
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
     "@zerodevx/svelte-json-view": "^1.0.7",
-    "codemirror": "^5.59.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -299,12 +299,53 @@
 <style>
   /* Unify spacing between HBS and JS */
   .code-editor :global(.cm-content) {
-    padding: var(--spacing-m) 0;
+    padding: 10px 0;
   }
   .code-editor {
     font-size: 12px;
   }
 
+  /* Overrides to ensure background selection is pixel perfect with active line */
+  .code-editor :global(.cm-line) {
+    height: 16px;
+    padding: 0 var(--spacing-s);
+  }
+  .code-editor :global(.cm-activeLine) {
+    position: relative;
+    background: transparent;
+  }
+  .code-editor :global(.cm-activeLine::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-75);
+    z-index: -2;
+  }
+  .code-editor :global(.cm-gutterElement) {
+    margin-bottom: 0;
+  }
+  .code-editor :global(.cm-activeLineGutter) {
+    color: var(--spectrum-global-color-gray-700);
+    background: transparent;
+    position: relative;
+  }
+  .code-editor :global(.cm-activeLineGutter::before) {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 1px;
+    height: calc(100% - 2px);
+    width: 100%;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -2;
+  }
+  .code-editor :global(.cm-selectionBackground) {
+    background-color: var(--spectrum-global-color-gray-300) !important;
+  }
+
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }
@@ -330,6 +371,7 @@
     padding: 0;
     margin: 0;
     font-size: 12px;
+    font-family: var(--font-mono);
     white-space: pre;
     text-overflow: ellipsis;
     overflow: hidden;

packages/builder/src/components/common/CodeEditor/index.js

@@ -35,19 +35,6 @@ export const getDefaultTheme = opts => {
         backgroundColor: "var(--spectrum-global-color-gray-75)",
         color: "var(--spectrum-global-color-gray-500)",
       },
-      ".cm-activeLineGutter": {
-        backgroundColor: "var(--spectrum-global-color-gray-200)",
-        color: "var(--spectrum-global-color-gray-700)",
-      },
-      ".cm-activeLine": {
-        backgroundColor: "var(--spectrum-global-color-gray-75)",
-      },
-      ".cm-line": {
-        padding: "0 var(--spacing-s)",
-      },
-      ".cm-selectionBackground": {
-        backgroundColor: "var(--spectrum-global-color-gray-200) !important",
-      },
       "&.cm-focused .cm-cursor": {
         borderLeftColor: "var(--spectrum-alias-text-color)",
       },