Fix graphql and other things

src-web/components/core/Editor/Editor.tsx

@@ -93,8 +93,6 @@ export function _Editor({
             onFocus: handleFocus,
             readOnly,
             singleLine,
-            contentType,
-            useTemplating,
           }),
         ],
       });
@@ -132,15 +130,11 @@ function getExtensions({
   singleLine,
   onChange,
   onFocus,
-  contentType,
-  useTemplating,
-}: Pick<_EditorProps, 'singleLine' | 'contentType' | 'useTemplating' | 'readOnly'> & {
+}: Pick<_EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
   onChange: MutableRefObject<_EditorProps['onChange']>;
   onFocus: MutableRefObject<_EditorProps['onFocus']>;
 }) {
-  const ext = getLanguageExtension({ contentType, useTemplating });
-
   // TODO: Ensure tooltips render inside the dialog if we are in one.
   const parent =
     container?.closest<HTMLDivElement>('[role="dialog"]') ??
@@ -153,7 +147,6 @@ function getExtensions({
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
     ...(singleLine ? [singleLineExt()] : []),
     ...(!singleLine ? [multiLineExtensions] : []),
-    ...(ext ? [ext] : []),
     ...(readOnly ? [EditorState.readOnly.of(true)] : []),
     ...(singleLine
       ? [

src-web/components/core/Editor/extensions.ts

@@ -42,13 +42,17 @@ export const myHighlightStyle = HighlightStyle.define([
     color: '#757b93',
     fontStyle: 'italic',
   },
+  {
+    tag: [t.paren],
+    color: 'hsl(var(--color-gray-900))',
+  },
   {
     tag: [t.name, t.tagName, t.angleBracket, t.docString, t.number],
     color: 'hsl(var(--color-blue-600))',
   },
   { tag: [t.variableName], color: 'hsl(var(--color-green-600))' },
   { tag: [t.bool], color: 'hsl(var(--color-pink-600))' },
-  { tag: [t.attributeName], color: 'hsl(var(--color-violet-600))' },
+  { tag: [t.attributeName, t.propertyName], color: 'hsl(var(--color-violet-600))' },
   { tag: [t.attributeValue], color: 'hsl(var(--color-orange-600))' },
   { tag: [t.string], color: 'hsl(var(--color-yellow-600))' },
   { tag: [t.keyword, t.meta, t.operator], color: 'hsl(var(--color-red-600))' },
@@ -88,7 +92,7 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
 
 export function getLanguageExtension({
   contentType,
-  useTemplating,
+  useTemplating = false,
 }: {
   contentType?: string;
   useTemplating?: boolean;

src-web/components/core/IconButton.tsx

@@ -20,7 +20,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
         'text-gray-700 hover:text-gray-1000',
         '!px-0',
         size === 'md' && 'w-9',
-        size === 'sm' && 'w-9',
+        size === 'sm' && 'w-8',
       )}
       size={size}
       {...props}

src-web/components/core/PairEditor.tsx

@@ -105,7 +105,7 @@ function FormRow({
         onChange={(name) => onChange({ id, pair: { name, value: pairContainer.pair.value } })}
         onFocus={onFocus}
         placeholder={isLast ? 'new name' : 'name'}
-        useEditor={{ useTemplating: true }}
+        useEditor={{ useTemplating: true, contentType: 'text/plain' }}
       />
       <Input
         hideLabel
@@ -116,7 +116,7 @@ function FormRow({
         onChange={(value) => onChange({ id, pair: { name: pairContainer.pair.name, value } })}
         onFocus={onFocus}
         placeholder={isLast ? 'new value' : 'value'}
-        useEditor={{ useTemplating: true }}
+        useEditor={{ useTemplating: true, contentType: 'text/plain' }}
       />
       {onDelete && (
         <IconButton

src-web/components/core/Tabs/Tabs.tsx

@@ -37,10 +37,7 @@ export function Tabs({ defaultValue, label, children, tabs, className, tabListCl
     >
       <T.List
         aria-label={label}
-        className={classnames(
-          tabListClassName,
-          'h-auto flex items-center overflow-x-auto mb-1 pb-1',
-        )}
+        className={classnames(tabListClassName, 'h-auto flex items-center overflow-x-auto pb-1')}
       >
         <HStack space={1}>
           {tabs.map((t) => {