feat(dashboard): variable management for all editor fields

.cspell.json

@@ -821,6 +821,7 @@
     "tsconfig.json",
     "unreadRead",
     "websockets",
-    "apps/dashboard/src/components/header-navigation/customer-support-button.tsx"
+    "apps/dashboard/src/components/header-navigation/customer-support-button.tsx",
+    "apps/dashboard/src/components/primitives/field-editor/variable-popover/constants.ts"
   ]
 }

apps/dashboard/src/components/primitives/field-editor/field-editor.tsx

@@ -0,0 +1,238 @@
+import { EditorView } from '@uiw/react-codemirror';
+import { Completion, CompletionContext } from '@codemirror/autocomplete';
+import { autocompletion } from '@codemirror/autocomplete';
+
+import { Editor } from '@/components/primitives/editor';
+import { completions } from '@/utils/liquid-autocomplete';
+import { LiquidVariable } from '@/utils/parseStepVariablesToLiquidVariables';
+import { Popover, PopoverTrigger } from '@/components/primitives/popover';
+import { createVariablePlugin } from './variable-plugin';
+import { VariablePopover } from './variable-popover';
+import { variablePillTheme } from './variable-plugin/variable-theme';
+import { useCallback, useMemo, useRef, useState, Dispatch, SetStateAction } from 'react';
+
+type SelectedVariable = {
+  value: string;
+  from: number;
+  to: number;
+} | null;
+
+type CompletionRange = {
+  from: number;
+  to: number;
+} | null;
+
+type FieldEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  variables: LiquidVariable[];
+  placeholder?: string;
+  autoFocus?: boolean;
+  size?: 'default' | 'lg';
+  fontFamily?: 'inherit';
+  id?: string;
+  singleLine?: boolean;
+  indentWithTab?: boolean;
+};
+
+export function FieldEditor({
+  value,
+  onChange,
+  variables,
+  placeholder,
+  autoFocus,
+  size = 'default',
+  fontFamily = 'inherit',
+  id,
+  singleLine,
+  indentWithTab,
+}: FieldEditorProps) {
+  const viewRef = useRef<EditorView | null>(null);
+  const lastCompletionRef = useRef<CompletionRange>(null);
+
+  const { selectedVariable, setSelectedVariable, handleVariableSelect, isUpdatingRef } = useVariableSelection();
+
+  const handleVariableUpdate = useVariableUpdate(
+    selectedVariable,
+    viewRef,
+    isUpdatingRef,
+    onChange,
+    setSelectedVariable
+  );
+
+  const completionSource = useCompletionSource(variables, lastCompletionRef);
+
+  const extensions = useMemo(
+    () => [
+      autocompletion({
+        override: [completionSource],
+        closeOnBlur: false,
+        defaultKeymap: true,
+        activateOnTyping: true,
+      }),
+      EditorView.lineWrapping,
+      variablePillTheme,
+      createVariablePlugin({ viewRef, lastCompletionRef, onSelect: handleVariableSelect }),
+    ],
+    [variables, completionSource, handleVariableSelect]
+  );
+
+  return (
+    <div className="relative">
+      <Editor
+        singleLine={singleLine}
+        indentWithTab={indentWithTab}
+        size={size}
+        className="flex-1"
+        autoFocus={autoFocus}
+        fontFamily={fontFamily}
+        placeholder={placeholder}
+        id={id}
+        extensions={extensions}
+        value={value}
+        onChange={onChange}
+      />
+      <Popover
+        open={!!selectedVariable}
+        onOpenChange={(open) => {
+          if (!open) {
+            setTimeout(() => setSelectedVariable(null), 0);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <div />
+        </PopoverTrigger>
+        {selectedVariable && (
+          <VariablePopover
+            variable={selectedVariable.value}
+            onClose={() => setSelectedVariable(null)}
+            onUpdate={handleVariableUpdate}
+          />
+        )}
+      </Popover>
+    </div>
+  );
+}
+
+/**
+ * Manages the state and selection of Liquid variables in the editor.
+ *
+ * This hook handles the complex state management needed when a user selects a variable in the editor:
+ * 1. Tracks which variable is currently selected
+ * 2. Prevents recursive updates when variables are being modified
+ */
+function useVariableSelection() {
+  const [selectedVariable, setSelectedVariable] = useState<SelectedVariable>(null);
+  const isUpdatingRef = useRef(false);
+
+  const handleVariableSelect = useCallback((value: string, from: number, to: number) => {
+    if (isUpdatingRef.current) return;
+
+    requestAnimationFrame(() => {
+      setSelectedVariable({ value, from, to });
+    });
+  }, []);
+
+  return {
+    selectedVariable,
+    setSelectedVariable,
+    handleVariableSelect,
+    isUpdatingRef,
+  };
+}
+
+/**
+ * Handles the logic of updating Liquid variables in the editor while maintaining proper syntax.
+ *
+ * This hook manages several critical aspects of variable editing:
+ * 1. Ensures proper Liquid syntax ({{...}}) is maintained when updating variables
+ * 2. Handles edge cases like existing closing brackets
+ * 3. Maintains cursor position after updates
+ * 4. Prevents recursive updates during the edit process
+ *
+ * The update process:
+ * 1. Checks if the new value already has Liquid syntax
+ * 2. Detects if there are existing closing brackets after the cursor
+ * 3. Calculates the correct range to replace
+ * 4. Updates the editor state while maintaining proper cursor position
+ */
+function useVariableUpdate(
+  selectedVariable: SelectedVariable,
+  viewRef: React.RefObject<EditorView>,
+  isUpdatingRef: React.MutableRefObject<boolean>,
+  onChange: (value: string) => void,
+  setSelectedVariable: Dispatch<SetStateAction<SelectedVariable>>
+) {
+  return useCallback(
+    (newValue: string) => {
+      if (!selectedVariable || !viewRef.current || isUpdatingRef.current) return;
+
+      try {
+        isUpdatingRef.current = true;
+        const { from, to } = selectedVariable;
+        const view = viewRef.current;
+
+        const hasLiquidSyntax = newValue.match(/^\{\{.*\}\}$/);
+        const newVariableText = hasLiquidSyntax ? newValue : `{{${newValue}}}`;
+
+        const currentContent = view.state.doc.toString();
+        const afterCursor = currentContent.slice(to).trim();
+        const hasClosingBrackets = afterCursor.startsWith('}}');
+
+        const changes = {
+          from,
+          to: hasClosingBrackets ? to + 2 : to,
+          insert: newVariableText,
+        };
+
+        view.dispatch({
+          changes,
+          selection: { anchor: from + newVariableText.length },
+        });
+
+        onChange(view.state.doc.toString());
+
+        setSelectedVariable((prev: SelectedVariable) =>
+          prev ? { ...prev, value: newValue, to: from + newVariableText.length } : null
+        );
+      } finally {
+        isUpdatingRef.current = false;
+      }
+    },
+    [selectedVariable, onChange, viewRef, isUpdatingRef, setSelectedVariable]
+  );
+}
+
+function useCompletionSource(variables: LiquidVariable[], lastCompletionRef: React.MutableRefObject<CompletionRange>) {
+  return useCallback(
+    (context: CompletionContext) => {
+      // Match text that starts with {{ and capture everything after it until the cursor position
+      const word = context.matchBefore(/\{\{([^}]*)/);
+      if (!word) return null;
+
+      const options = completions(variables)(context);
+      if (!options) return null;
+
+      return {
+        ...options,
+        apply: (view: EditorView, completion: Completion, from: number, to: number) => {
+          const text = completion.label;
+          lastCompletionRef.current = { from, to };
+
+          // Handle liquid variable syntax ({{variable}})
+          // If we're not already inside liquid brackets, wrap the completion with {{}}
+          // If we're inside liquid brackets (detected by checking previous chars), just insert the variable name
+          const content = view.state.doc.toString();
+          const before = content.slice(Math.max(0, from - 2), from);
+          const insert = before !== '{{' ? `{{${text}}} ` : `${text}}} `;
+
+          view.dispatch({
+            changes: { from, to, insert },
+          });
+        },
+      };
+    },
+    [variables, lastCompletionRef]
+  );
+}

apps/dashboard/src/components/primitives/field-editor/index.ts

@@ -0,0 +1 @@
+export { FieldEditor } from './field-editor';

apps/dashboard/src/components/primitives/field-editor/variable-plugin/constants.ts

@@ -0,0 +1,3 @@
+export const VARIABLE_REGEX = /{{([^{}]+)}}/g;
+export const VARIABLE_PILL_CLASS = 'cm-variable-pill';
+export const MODIFIERS_CLASS = 'has-modifiers';

apps/dashboard/src/components/primitives/field-editor/variable-plugin/index.ts

@@ -0,0 +1,33 @@
+import { EditorView, ViewPlugin, Decoration } from '@uiw/react-codemirror';
+import type { PluginState } from './types';
+import { VariablePluginView } from './plugin-view';
+
+export function createVariablePlugin({ viewRef, lastCompletionRef, onSelect }: PluginState) {
+  return ViewPlugin.fromClass(
+    class {
+      private view: VariablePluginView;
+
+      constructor(view: EditorView) {
+        this.view = new VariablePluginView(view, viewRef, lastCompletionRef, onSelect);
+      }
+
+      update(update: any) {
+        this.view.update(update);
+      }
+
+      get decorations() {
+        return this.view.decorations;
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        }),
+    }
+  );
+}
+
+export * from './types';
+export * from './constants';

apps/dashboard/src/components/primitives/field-editor/variable-plugin/plugin-view.ts

@@ -0,0 +1,79 @@
+import { EditorView, Decoration, DecorationSet } from '@uiw/react-codemirror';
+import { MutableRefObject } from 'react';
+import { VARIABLE_REGEX } from './constants';
+import { VariablePillWidget } from './variable-pill-widget';
+import { handleVariableBackspace, handleVariableCompletion, isTypingVariable, parseVariable } from './utils';
+
+export class VariablePluginView {
+  decorations: DecorationSet;
+  lastCursor: number = 0;
+  isTypingVariable: boolean = false;
+
+  constructor(
+    view: EditorView,
+    private viewRef: MutableRefObject<EditorView | null>,
+    private lastCompletionRef: MutableRefObject<{ from: number; to: number } | null>,
+    private onSelect?: (value: string, from: number, to: number) => void
+  ) {
+    this.decorations = this.createDecorations(view);
+    viewRef.current = view;
+  }
+
+  update(update: any) {
+    if (update.docChanged || update.viewportChanged || update.selectionSet) {
+      const pos = update.state.selection.main.head;
+      const content = update.state.doc.toString();
+
+      this.isTypingVariable = isTypingVariable(content, pos);
+
+      // Handle backspace inside a variable
+      if (update.docChanged && update.changes.desc === 'input.delete.backward') {
+        if (handleVariableBackspace(update.view, pos, content)) {
+          return;
+        }
+      }
+
+      if (update.docChanged) {
+        handleVariableCompletion(update.view, pos, content);
+      }
+
+      this.decorations = this.createDecorations(update.view);
+    }
+
+    if (update.view) {
+      this.viewRef.current = update.view;
+    }
+  }
+
+  createDecorations(view: EditorView) {
+    const decorations: any[] = [];
+    const content = view.state.doc.toString();
+    const pos = view.state.selection.main.head;
+    let match;
+
+    // Iterate through all variable matches in the content and add the pills
+    while ((match = VARIABLE_REGEX.exec(content)) !== null) {
+      const { fullVariableName, variableName, start, end, hasModifiers } = parseVariable(match);
+
+      // Skip creating pills for variables that are currently being edited
+      // This allows users to modify variables without the pill getting in the way
+      if (this.isTypingVariable && pos > start && pos < end) {
+        continue;
+      }
+
+      if (variableName) {
+        decorations.push(
+          Decoration.replace({
+            widget: new VariablePillWidget(variableName, fullVariableName, start, end, hasModifiers, this.onSelect),
+            inclusive: false,
+            side: -1,
+          }).range(start, end)
+        );
+      }
+    }
+
+    this.lastCompletionRef.current = null;
+
+    return Decoration.set(decorations, true);
+  }
+}