2024.5.0-beta.2 (#38)

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

@@ -266,7 +266,7 @@
   }
 
   &.cm-completionInfo-right {
-    @apply ml-1 -mt-0.5;
+    @apply ml-1 -mt-0.5 font-sans;
   }
 
   &.cm-completionInfo-right-narrow {
@@ -278,7 +278,7 @@
   }
 
   &.cm-tooltip-autocomplete {
-    @apply font-mono text-editor;
+    @apply font-mono;
 
     & > ul {
       @apply p-1 max-h-[40vh];

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

@@ -195,7 +195,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
             placeholderCompartment.current.of(
               placeholderExt(placeholderElFromText(placeholder ?? '')),
             ),
-            wrapLinesCompartment.current.of([]),
+            wrapLinesCompartment.current.of(wrapLines ? [EditorView.lineWrapping] : []),
             ...getExtensions({
               container,
               readOnly,
@@ -331,7 +331,25 @@ function getExtensions({
     undefined;
 
   return [
-    // NOTE: These *must* be anonymous functions so the references update properly
+    ...baseExtensions, // Must be first
+    tooltips({ parent }),
+    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
+    ...(singleLine ? [singleLineExt()] : []),
+    ...(!singleLine ? [multiLineExtensions] : []),
+    ...(readOnly
+      ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ tabindex: '-1' })]
+      : []),
+
+    // ------------------------ //
+    // Things that must be last //
+    // ------------------------ //
+
+    EditorView.updateListener.of((update) => {
+      if (onChange && update.docChanged) {
+        onChange.current?.(update.state.doc.toString());
+      }
+    }),
+
     EditorView.domEventHandlers({
       focus: () => {
         onFocus.current?.();
@@ -346,22 +364,6 @@ function getExtensions({
         onPaste.current?.(e.clipboardData?.getData('text/plain') ?? '');
       },
     }),
-    tooltips({ parent }),
-    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
-    ...(singleLine ? [singleLineExt()] : []),
-    ...(!singleLine ? [multiLineExtensions] : []),
-    ...(readOnly
-      ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ tabindex: '-1' })]
-      : []),
-
-    // Handle onChange
-    EditorView.updateListener.of((update) => {
-      if (onChange && update.docChanged) {
-        onChange.current?.(update.state.doc.toString());
-      }
-    }),
-
-    ...baseExtensions,
   ];
 }
 

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

@@ -39,7 +39,7 @@ import { text } from './text/extension';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
 
-export const myHighlightStyle = HighlightStyle.define([
+export const syntaxHighlightStyle = HighlightStyle.define([
   {
     tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
     color: 'var(--fg-subtler)',
@@ -61,7 +61,7 @@ export const myHighlightStyle = HighlightStyle.define([
   { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--fg-danger)' },
 ]);
 
-const myTheme = EditorView.theme({}, { dark: true });
+const syntaxTheme = EditorView.theme({}, { dark: true });
 
 const syntaxExtensions: Record<string, LanguageSupport> = {
   'application/graphql': graphqlLanguageSupport(),
@@ -108,8 +108,8 @@ export const baseExtensions = [
       return (a.boost ?? 0) - (b.boost ?? 0);
     },
   }),
-  syntaxHighlighting(myHighlightStyle),
-  myTheme,
+  syntaxHighlighting(syntaxHighlightStyle),
+  syntaxTheme,
   EditorState.allowMultipleSelections.of(true),
 ];
 

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

@@ -20,7 +20,11 @@ export interface GenericCompletionConfig {
 /**
  * Complete options, always matching until the start of the line
  */
-export function genericCompletion({ options, minMatch = 1 }: GenericCompletionConfig) {
+export function genericCompletion(config?: GenericCompletionConfig) {
+  if (config == null) return [];
+
+  const { minMatch = 1, options } = config;
+
   return function completions(context: CompletionContext) {
     const toMatch = context.matchBefore(/.*/);
 

src-web/components/core/Editor/twig/extension.ts

@@ -1,13 +1,13 @@
 import type { LanguageSupport } from '@codemirror/language';
 import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
+import type { Environment, Workspace } from '../../../../lib/models';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
-import { placeholders } from './placeholder';
 import { textLanguageName } from '../text/extension';
 import { twigCompletion } from './completion';
+import { placeholders } from './placeholder';
 import { parser as twigParser } from './twig';
-import type { Environment, Workspace } from '../../../../lib/models';
 
 export function twig(
   base: LanguageSupport,
@@ -15,25 +15,19 @@ export function twig(
   workspace: Workspace | null,
   autocomplete?: GenericCompletionConfig,
 ) {
-  const variables =
-    [...(workspace?.variables ?? []), ...(environment?.variables ?? [])].filter((v) => v.enabled) ??
-    [];
-  const completions = twigCompletion({ options: variables });
-
   const language = mixLanguage(base);
-  const completion = language.data.of({ autocomplete: completions });
-  const completionBase = base.language.data.of({ autocomplete: completions });
-  const additionalCompletion = autocomplete
-    ? [base.language.data.of({ autocomplete: genericCompletion(autocomplete) })]
-    : [];
+  const allVariables = [...(workspace?.variables ?? []), ...(environment?.variables ?? [])];
+  const variables = allVariables.filter((v) => v.enabled) ?? [];
+  const completions = twigCompletion({ options: variables });
 
   return [
     language,
-    completion,
-    completionBase,
     base.support,
     placeholders(variables),
-    ...additionalCompletion,
+    language.data.of({ autocomplete: completions }),
+    base.language.data.of({ autocomplete: completions }),
+    language.data.of({ autocomplete: genericCompletion(autocomplete) }),
+    base.language.data.of({ autocomplete: genericCompletion(autocomplete) }),
   ];
 }