Better header editor and added completion data

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

@@ -9,7 +9,7 @@ import { useUnmount } from 'react-use';
 import { IconButton } from '../IconButton';
 import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
-import type { GenericCompletionOption } from './genericCompletion';
+import type { GenericCompletionConfig } from './genericCompletion';
 import { singleLineExt } from './singleLine';
 
 export interface _EditorProps {
@@ -27,7 +27,7 @@ export interface _EditorProps {
   onFocus?: () => void;
   singleLine?: boolean;
   format?: (v: string) => string;
-  autocompleteOptions?: GenericCompletionOption[];
+  autocomplete?: GenericCompletionConfig;
 }
 
 export function _Editor({
@@ -43,7 +43,7 @@ export function _Editor({
   className,
   singleLine,
   format,
-  autocompleteOptions,
+  autocomplete,
 }: _EditorProps) {
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -80,16 +80,16 @@ export function _Editor({
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
-    const ext = getLanguageExtension({ contentType, useTemplating, autocompleteOptions });
+    const ext = getLanguageExtension({ contentType, useTemplating, autocomplete });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
-  }, [contentType, JSON.stringify(autocompleteOptions)]);
+  }, [contentType, autocomplete]);
 
   // Initialize the editor when ref mounts
   useEffect(() => {
     if (wrapperRef.current === null || cm.current !== null) return;
     try {
       const languageCompartment = new Compartment();
-      const langExt = getLanguageExtension({ contentType, useTemplating, autocompleteOptions });
+      const langExt = getLanguageExtension({ contentType, useTemplating, autocomplete });
       const state = EditorState.create({
         doc: `${defaultValue ?? ''}`,
         extensions: [

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

@@ -34,6 +34,7 @@ import {
 import { tags as t } from '@lezer/highlight';
 import { graphqlLanguageSupport } from 'cm6-graphql';
 import type { GenericCompletionOption } from './genericCompletion';
+import type { EditorProps } from './index';
 import { text } from './text/extension';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
@@ -95,19 +96,15 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
 export function getLanguageExtension({
   contentType,
   useTemplating = false,
-  autocompleteOptions,
-}: {
-  contentType?: string;
-  useTemplating?: boolean;
-  autocompleteOptions?: GenericCompletionOption[];
-}) {
+  autocomplete,
+}: Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
   const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   const base = syntaxExtensions[justContentType] ?? text();
   if (!useTemplating) {
     return base ? base : [];
   }
 
-  return twig(base, autocompleteOptions);
+  return twig(base, autocomplete);
 }
 
 export const baseExtensions = [

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

@@ -3,17 +3,21 @@ import type { CompletionContext } from '@codemirror/autocomplete';
 export interface GenericCompletionOption {
   label: string;
   type: 'constant' | 'variable';
+  /** When given, should be a number from -99 to 99 that adjusts
+   * how this completion is ranked compared to other completions
+   * that match the input as well as this one. A negative number
+   * moves it down the list, a positive number moves it up. */
+  boost?: number;
 }
 
-export function genericCompletion({
-  options,
-  minMatch = 1,
-}: {
-  options: GenericCompletionOption[];
+export interface GenericCompletionConfig {
   minMatch?: number;
-}) {
+  options: GenericCompletionOption[];
+}
+
+export function genericCompletion({ options, minMatch = 1 }: GenericCompletionConfig) {
   return function completions(context: CompletionContext) {
-    const toMatch = context.matchBefore(/^[\w:/]*/);
+    const toMatch = context.matchBefore(/^.*/);
     if (toMatch === null) return null;
 
     const matchedMinimumLength = toMatch.to - toMatch.from >= minMatch;

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

@@ -1,16 +1,16 @@
 import { LanguageSupport, LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
-import type { GenericCompletionOption } from '../genericCompletion';
+import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
 import { placeholders } from '../widgets';
 import { completions } from './completion';
 import { parser as twigParser } from './twig';
 
-export function twig(base?: LanguageSupport, autocompleteOptions?: GenericCompletionOption[]) {
+export function twig(base?: LanguageSupport, autocomplete?: GenericCompletionConfig) {
   const language = mixedOrPlainLanguage(base);
   const additionalCompletion =
-    autocompleteOptions && base
-      ? [language.data.of({ autocomplete: genericCompletion({ options: autocompleteOptions }) })]
+    autocomplete && base
+      ? [language.data.of({ autocomplete: genericCompletion(autocomplete) })]
       : [];
   const completion = language.data.of({
     autocomplete: completions,