Merge branch 'source' into landing--interactive-editor-on-landing

Author: hasparus

src/components/interactive-code-block/codemirror-theme.tsx

@@ -89,7 +89,7 @@ export const syntaxTheme = HighlightStyle.define([
   },
   { tag: [t.function(t.variableName), t.labelName], class: "cm-variable" },
   { tag: [t.color, t.constant(t.name), t.standard(t.name)], class: "cm-atom" },
-  { tag: [t.definition(t.name), t.separator], class: "cm-def" },
+  { tag: [t.definition(t.name)], class: "cm-def" },
   {
     tag: [
       t.typeName,
@@ -112,6 +112,7 @@ export const syntaxTheme = HighlightStyle.define([
       t.regexp,
       t.link,
       t.special(t.string),
+      t.separator,
     ],
     class: "cm-punctuation",
   },

src/components/interactive-code-block/syntax-highlighting.css

@@ -57,7 +57,6 @@
   --cm-hints-active-foreground: #ffffff;
 }
 
-/* CodeMirror 6 Editor Base Styles */
 .cm-editor {
   font-family: inherit;
   font-size: inherit;

src/components/interactive-code-block/variable-editor.tsx

@@ -3,7 +3,7 @@ import { EditorView } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { json } from "@codemirror/lang-json"
 import { history } from "@codemirror/commands"
-import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language"
+import { codeMirrorThemeExtension } from "./codemirror-theme"
 
 interface VariableEditorProps {
   value: string
@@ -43,13 +43,12 @@ export class VariableEditor extends Component<VariableEditorProps> {
   componentDidMount() {
     if (!this.domNode) return
 
-    // Create editor state for JSON (variables are JSON)
     const state = EditorState.create({
       doc: this.props.value || "",
       extensions: [
         history(),
         json(),
-        syntaxHighlighting(defaultHighlightStyle),
+        codeMirrorThemeExtension,
         EditorView.updateListener.of(update => {
           if (update.docChanged && !this.ignoreChangeEvent) {
             this.cachedValue = update.state.doc.toString()