Remove useTemplating prop (#184)

src-web/components/core/BulkPairEditor.tsx

@@ -33,7 +33,7 @@ export function BulkPairEditor({
 
   return (
     <Editor
-      useTemplating
+      autocompleteFunctions
       autocompleteVariables
       stateKey={`bulk_pair.${stateKey}`}
       forceUpdateKey={forceUpdateKey}

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

@@ -55,36 +55,36 @@ const keymapExtensions: Record<EditorKeymap, Extension> = {
 };
 
 export interface EditorProps {
-  id?: string;
-  readOnly?: boolean;
-  disabled?: boolean;
-  type?: 'text' | 'password';
-  className?: string;
-  heightMode?: 'auto' | 'full';
-  language?: EditorLanguage | 'pairs' | 'url';
-  forceUpdateKey?: string | number;
+  actions?: ReactNode;
   autoFocus?: boolean;
   autoSelect?: boolean;
+  autocomplete?: GenericCompletionConfig;
+  autocompleteFunctions?: boolean;
+  autocompleteVariables?: boolean;
+  className?: string;
   defaultValue?: string | null;
-  placeholder?: string;
-  tooltipContainer?: HTMLElement;
-  useTemplating?: boolean;
+  disableTabIndent?: boolean;
+  disabled?: boolean;
+  extraExtensions?: Extension[];
+  forceUpdateKey?: string | number;
+  format?: (v: string) => Promise<string>;
+  heightMode?: 'auto' | 'full';
+  hideGutter?: boolean;
+  id?: string;
+  language?: EditorLanguage | 'pairs' | 'url';
+  onBlur?: () => void;
   onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
   onPaste?: (value: string) => void;
   onPasteOverwrite?: (e: ClipboardEvent, value: string) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onKeyDown?: (e: KeyboardEvent) => void;
+  placeholder?: string;
+  readOnly?: boolean;
   singleLine?: boolean;
-  wrapLines?: boolean;
-  disableTabIndent?: boolean;
-  format?: (v: string) => Promise<string>;
-  autocomplete?: GenericCompletionConfig;
-  autocompleteVariables?: boolean;
-  extraExtensions?: Extension[];
-  actions?: ReactNode;
-  hideGutter?: boolean;
   stateKey: string | null;
+  tooltipContainer?: HTMLElement;
+  type?: 'text' | 'password';
+  wrapLines?: boolean;
 }
 
 const stateFields = { history: historyField, folds: foldState };
@@ -94,34 +94,34 @@ const emptyExtension: Extension = [];
 
 export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   {
-    readOnly,
-    type,
-    heightMode,
-    language,
+    actions,
     autoFocus,
     autoSelect,
-    placeholder,
-    useTemplating,
+    autocomplete,
+    autocompleteFunctions,
+    autocompleteVariables,
+    className,
     defaultValue,
+    disableTabIndent,
+    disabled,
+    extraExtensions,
     forceUpdateKey,
+    format,
+    heightMode,
+    hideGutter,
+    language,
+    onBlur,
     onChange,
+    onFocus,
+    onKeyDown,
     onPaste,
     onPasteOverwrite,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    className,
-    disabled,
+    placeholder,
+    readOnly,
     singleLine,
-    format,
-    autocomplete,
-    extraExtensions,
-    autocompleteVariables,
-    actions,
-    wrapLines,
-    disableTabIndent,
-    hideGutter,
     stateKey,
+    type,
+    wrapLines,
   }: EditorProps,
   ref,
 ) {
@@ -129,6 +129,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
 
   const allEnvironmentVariables = useActiveEnvironmentVariables();
   const environmentVariables = autocompleteVariables ? allEnvironmentVariables : emptyVariables;
+  const useTemplating = !!(autocompleteFunctions || autocompleteVariables || autocomplete);
 
   if (settings && wrapLines === undefined) {
     wrapLines = settings.editorSoftWrap;
@@ -340,16 +341,19 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     [focusParamValue],
   );
 
-  const completionOptions = useTemplateFunctionCompletionOptions(onClickFunction);
+  const completionOptions = useTemplateFunctionCompletionOptions(
+    onClickFunction,
+    !!autocompleteFunctions,
+  );
 
   // Update the language extension when the language changes
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
     const ext = getLanguageExtension({
+      useTemplating,
       language,
       environmentVariables,
-      useTemplating,
       autocomplete,
       completionOptions,
       onClickVariable,
@@ -360,13 +364,13 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   }, [
     language,
     autocomplete,
-    useTemplating,
     environmentVariables,
     onClickFunction,
     onClickVariable,
     onClickMissingVariable,
     onClickPathParameter,
     completionOptions,
+    useTemplating,
   ]);
 
   // Initialize the editor when ref mounts
@@ -381,8 +385,8 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       try {
         const languageCompartment = new Compartment();
         const langExt = getLanguageExtension({
-          language,
           useTemplating,
+          language,
           completionOptions,
           autocomplete,
           environmentVariables,

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

@@ -91,8 +91,8 @@ const syntaxExtensions: Record<NonNullable<EditorProps['language']>, LanguageSup
 const closeBracketsFor: (keyof typeof syntaxExtensions)[] = ['json', 'javascript', 'graphql'];
 
 export function getLanguageExtension({
+  useTemplating,
   language = 'text',
-  useTemplating = false,
   environmentVariables,
   autocomplete,
   onClickVariable,
@@ -100,12 +100,13 @@ export function getLanguageExtension({
   onClickPathParameter,
   completionOptions,
 }: {
+  useTemplating: boolean;
   environmentVariables: EnvironmentVariable[];
   onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
   onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
   onClickPathParameter: (name: string) => void;
   completionOptions: TwigCompletionOption[];
-} & Pick<EditorProps, 'language' | 'useTemplating' | 'autocomplete'>) {
+} & Pick<EditorProps, 'language' | 'autocomplete'>) {
   const extraExtensions: Extension[] = [];
 
   if (language === 'url') {

src-web/components/core/Input.tsx

@@ -13,13 +13,13 @@ import { HStack } from './Stacks';
 export type InputProps = Pick<
   EditorProps,
   | 'language'
-  | 'useTemplating'
   | 'autocomplete'
   | 'forceUpdateKey'
   | 'disabled'
   | 'autoFocus'
   | 'autoSelect'
   | 'autocompleteVariables'
+  | 'autocompleteFunctions'
   | 'onKeyDown'
   | 'readOnly'
 > & {

src-web/components/core/PairEditor.tsx

@@ -43,6 +43,7 @@ export type PairEditorProps = {
   className?: string;
   forceUpdateKey?: string;
   nameAutocomplete?: GenericCompletionConfig;
+  nameAutocompleteFunctions?: boolean;
   nameAutocompleteVariables?: boolean;
   namePlaceholder?: string;
   nameValidate?: InputProps['validate'];
@@ -51,6 +52,7 @@ export type PairEditorProps = {
   pairs: Pair[];
   stateKey: InputProps['stateKey'];
   valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
+  valueAutocompleteFunctions?: boolean;
   valueAutocompleteVariables?: boolean;
   valuePlaceholder?: string;
   valueType?: 'text' | 'password';
@@ -82,6 +84,7 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
     className,
     forceUpdateKey,
     nameAutocomplete,
+    nameAutocompleteFunctions,
     nameAutocompleteVariables,
     namePlaceholder,
     nameValidate,
@@ -89,6 +92,7 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
     onChange,
     pairs: originalPairs,
     valueAutocomplete,
+    valueAutocompleteFunctions,
     valueAutocompleteVariables,
     valuePlaceholder,
     valueType,
@@ -237,6 +241,7 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
               index={i}
               isLast={isLast}
               nameAutocomplete={nameAutocomplete}
+              nameAutocompleteFunctions={nameAutocompleteFunctions}
               nameAutocompleteVariables={nameAutocompleteVariables}
               namePlaceholder={namePlaceholder}
               nameValidate={nameValidate}
@@ -248,6 +253,7 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
               pair={p}
               stateKey={stateKey}
               valueAutocomplete={valueAutocomplete}
+              valueAutocompleteFunctions={valueAutocompleteFunctions}
               valueAutocompleteVariables={valueAutocompleteVariables}
               valuePlaceholder={valuePlaceholder}
               valueType={valueType}
@@ -291,8 +297,10 @@ type PairEditorRowProps = {
   | 'nameAutocompleteVariables'
   | 'namePlaceholder'
   | 'nameValidate'
+  | 'nameAutocompleteFunctions'
   | 'stateKey'
   | 'valueAutocomplete'
+  | 'valueAutocompleteFunctions'
   | 'valueAutocompleteVariables'
   | 'valuePlaceholder'
   | 'valueType'
@@ -309,9 +317,10 @@ function PairEditorRow({
   index,
   isLast,
   nameAutocomplete,
-  nameAutocompleteVariables,
   namePlaceholder,
   nameValidate,
+  nameAutocompleteFunctions,
+  nameAutocompleteVariables,
   onChange,
   onDelete,
   onEnd,
@@ -320,6 +329,7 @@ function PairEditorRow({
   pair,
   stateKey,
   valueAutocomplete,
+  valueAutocompleteFunctions,
   valueAutocompleteVariables,
   valuePlaceholder,
   valueType,
@@ -486,7 +496,6 @@ function PairEditorRow({
           <Input
             ref={nameInputRef}
             hideLabel
-            useTemplating
             stateKey={`name.${pair.id}.${stateKey}`}
             wrapLines={false}
             readOnly={pair.readOnlyName}
@@ -503,6 +512,7 @@ function PairEditorRow({
             placeholder={namePlaceholder ?? 'name'}
             autocomplete={nameAutocomplete}
             autocompleteVariables={nameAutocompleteVariables}
+            autocompleteFunctions={nameAutocompleteFunctions}
           />
         )}
         <div className="w-full grid grid-cols-[minmax(0,1fr)_auto] gap-1 items-center">
@@ -534,7 +544,6 @@ function PairEditorRow({
             <Input
               ref={valueInputRef}
               hideLabel
-              useTemplating
               stateKey={`value.${pair.id}.${stateKey}`}
               wrapLines={false}
               size="sm"
@@ -549,6 +558,7 @@ function PairEditorRow({
               type={isLast ? 'text' : valueType}
               placeholder={valuePlaceholder ?? 'value'}
               autocomplete={valueAutocomplete?.(pair.name)}
+              autocompleteFunctions={valueAutocompleteFunctions}
               autocompleteVariables={valueAutocompleteVariables}
             />
           )}
@@ -695,7 +705,7 @@ function MultilineEditDialog({
         language={language}
         onChange={setValue}
         stateKey={null}
-        useTemplating
+        autocompleteFunctions
         autocompleteVariables
       />
       <div>