Add the ability to override the system syntax config

styles/src/styleTree/editor.ts

@@ -1,9 +1,12 @@
 import { fontWeights } from "../common"
 import { withOpacity } from "../utils/color"
-import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
+import { ColorScheme, Layer, StyleSets, Syntax, ThemeSyntax } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
+import deepmerge from 'deepmerge';
+
+
 export default function editor(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
 
@@ -35,7 +38,7 @@ export default function editor(colorScheme: ColorScheme) {
         }
     }
 
-    const syntax = {
+    const syntax: Syntax = {
         primary: {
             color: colorScheme.ramps.neutral(1).hex(),
             weight: fontWeights.normal,
@@ -129,6 +132,21 @@ export default function editor(colorScheme: ColorScheme) {
         },
     }
 
+    function createSyntax(colorScheme: ColorScheme): Syntax {
+        if (!colorScheme.syntax) {
+            return syntax
+        }
+
+        return deepmerge<Syntax, Partial<ThemeSyntax>>(syntax, colorScheme.syntax, {
+            arrayMerge: (destinationArray, sourceArray) => [
+                ...destinationArray,
+                ...sourceArray,
+            ],
+        });
+    }
+
+    const mergedSyntax = createSyntax(colorScheme)
+
     return {
         textColor: syntax.primary.color,
         background: background(layer),
@@ -285,6 +303,6 @@ export default function editor(colorScheme: ColorScheme) {
                 color: borderColor(layer),
             },
         },
-        syntax,
+        syntax: mergedSyntax,
     }
 }