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/api/src/app/workflows-v2/shared/map-step-type-to-result.mapper.ts

@@ -1,6 +1,6 @@
 import { ActionStepEnum, actionStepSchemas, ChannelStepEnum, channelStepSchemas } from '@novu/framework/internal';
-import { JSONSchema } from 'json-schema-to-ts';
 import { StepTypeEnum } from '@novu/shared';
+import { JSONSchema } from 'json-schema-to-ts';
 
 export function computeResultSchema(stepType: StepTypeEnum, payloadSchema?: JSONSchema) {
   const mapStepTypeToResult: Record<ChannelStepEnum & ActionStepEnum, JSONSchema> = {
@@ -31,9 +31,13 @@ function buildDigestResult(payloadSchema?: JSONSchema) {
             time: {
               type: 'string',
             },
-            payload: payloadSchema || {
-              type: 'object',
-            },
+            payload:
+              payloadSchema && typeof payloadSchema === 'object'
+                ? { ...payloadSchema, additionalProperties: true }
+                : {
+                    type: 'object',
+                    additionalProperties: true,
+                  },
           },
           required: ['id', 'time', 'payload'],
           additionalProperties: false,

apps/api/src/app/workflows-v2/util/utils.ts

@@ -1,12 +1,10 @@
 import difference from 'lodash/difference';
 import flatMap from 'lodash/flatMap';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
 import reduce from 'lodash/reduce';
 import set from 'lodash/set';
 import values from 'lodash/values';
-import isObject from 'lodash/isObject';
-import isArray from 'lodash/isArray';
-
-import { BadRequestException } from '@nestjs/common';
 
 import { JSONSchemaDto } from '@novu/shared';
 

apps/dashboard/package.json

@@ -75,6 +75,7 @@
     "flat": "^6.0.1",
     "js-cookie": "^3.0.5",
     "launchdarkly-react-client-sdk": "^3.3.2",
+    "liquidjs": "^10.20.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",

apps/dashboard/src/components/primitives/command.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import { type DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
 
-import { cn } from '@/utils/ui';
 import { Dialog, DialogContent } from '@/components/primitives/dialog';
 import { InputField, inputVariants } from '@/components/primitives/input';
+import { cn } from '@/utils/ui';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -37,9 +37,9 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <InputField>
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & { inputFieldClassName?: string }
+>(({ className, inputFieldClassName, ...props }, ref) => (
+  <InputField className={inputFieldClassName}>
     <CommandPrimitive.Input ref={ref} className={cn(inputVariants(), className)} {...props} />
   </InputField>
 ));
@@ -115,11 +115,11 @@ CommandShortcut.displayName = 'CommandShortcut';
 export {
   Command,
   CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
+  CommandShortcut,
 };

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

@@ -0,0 +1,115 @@
+import { autocompletion } from '@codemirror/autocomplete';
+import { EditorView } from '@uiw/react-codemirror';
+
+import { Editor } from '@/components/primitives/editor';
+import { Popover, PopoverTrigger } from '@/components/primitives/popover';
+import { createAutocompleteSource } from '@/utils/liquid-autocomplete';
+import { LiquidVariable } from '@/utils/parseStepVariablesToLiquidVariables';
+import { useCallback, useMemo, useRef } from 'react';
+import { useVariables } from './hooks/use-variables';
+import { createVariablePlugin } from './variable-plugin';
+import { variablePillTheme } from './variable-plugin/variable-theme';
+import { VariablePopover } from './variable-popover';
+
+type CompletionRange = {
+  from: number;
+  to: number;
+} | null;
+
+type FieldEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  variables: LiquidVariable[];
+  placeholder?: string;
+  autoFocus?: boolean;
+  size?: 'default' | 'lg';
+  id?: string;
+  singleLine?: boolean;
+  indentWithTab?: boolean;
+};
+
+const baseExtensions = [EditorView.lineWrapping, variablePillTheme];
+
+export function FieldEditor({
+  value,
+  onChange,
+  variables,
+  placeholder,
+  autoFocus,
+  size = 'default',
+  id,
+  singleLine,
+  indentWithTab,
+}: FieldEditorProps) {
+  const viewRef = useRef<EditorView | null>(null);
+  const lastCompletionRef = useRef<CompletionRange>(null);
+
+  const { selectedVariable, setSelectedVariable, handleVariableSelect, handleVariableUpdate } = useVariables(
+    viewRef,
+    onChange
+  );
+
+  const completionSource = useMemo(() => createAutocompleteSource(variables), [variables]);
+
+  const autocompletionExtension = useMemo(
+    () =>
+      autocompletion({
+        override: [completionSource],
+        closeOnBlur: true,
+        defaultKeymap: true,
+        activateOnTyping: true,
+      }),
+    [completionSource]
+  );
+
+  const variablePlugin = useMemo(
+    () =>
+      createVariablePlugin({
+        viewRef,
+        lastCompletionRef,
+        onSelect: handleVariableSelect,
+      }),
+    [handleVariableSelect]
+  );
+
+  const extensions = useMemo(
+    () => [...baseExtensions, autocompletionExtension, variablePlugin],
+    [autocompletionExtension, variablePlugin]
+  );
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        setTimeout(() => setSelectedVariable(null), 0);
+      }
+    },
+    [setSelectedVariable]
+  );
+
+  return (
+    <div className="relative">
+      <Editor
+        fontFamily="inherit"
+        singleLine={singleLine}
+        indentWithTab={indentWithTab}
+        size={size}
+        basicSetup={{
+          defaultKeymap: true,
+        }}
+        className="flex-1"
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        id={id}
+        extensions={extensions}
+        value={value}
+        onChange={onChange}
+      />
+      <Popover open={!!selectedVariable} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <div />
+        </PopoverTrigger>
+        {selectedVariable && <VariablePopover variable={selectedVariable.value} onUpdate={handleVariableUpdate} />}
+      </Popover>
+    </div>
+  );
+}

apps/dashboard/src/components/primitives/field-editor/hooks/use-variables.ts

@@ -0,0 +1,78 @@
+import { EditorView } from '@uiw/react-codemirror';
+import { useCallback, useRef, useState } from 'react';
+
+type SelectedVariable = {
+  value: string;
+  from: number;
+  to: number;
+} | null;
+
+/**
+ * Manages variable selection and updates in the editor.
+ *
+ * This hook combines variable selection and update logic:
+ * 1. Tracks which variable is currently selected
+ * 2. Prevents recursive updates when variables are being modified
+ * 3. Handles proper Liquid syntax maintenance
+ * 4. Manages cursor position and editor state updates
+ */
+export function useVariables(viewRef: React.RefObject<EditorView>, onChange: (value: string) => void) {
+  const [selectedVariable, setSelectedVariable] = useState<SelectedVariable>(null);
+  const isUpdatingRef = useRef(false);
+
+  const handleVariableSelect = useCallback((value: string, from: number, to: number) => {
+    if (isUpdatingRef.current) return;
+    setSelectedVariable({ value, from, to });
+  }, []);
+
+  const handleVariableUpdate = useCallback(
+    (newValue: string) => {
+      if (!selectedVariable || !viewRef.current || isUpdatingRef.current) return;
+
+      try {
+        isUpdatingRef.current = true;
+        const { from, to } = selectedVariable;
+        const view = viewRef.current;
+
+        // Ensure the new value has proper liquid syntax
+        const hasLiquidSyntax = newValue.match(/^\{\{.*\}\}$/);
+        const newVariableText = hasLiquidSyntax ? newValue : `{{${newValue}}}`;
+
+        // Calculate the actual end position including closing brackets
+        const currentContent = view.state.doc.toString();
+        const afterCursor = currentContent.slice(to);
+        const closingBracketPos = afterCursor.indexOf('}}');
+        const actualEnd = closingBracketPos >= 0 ? to + closingBracketPos + 2 : to;
+
+        const changes = {
+          from,
+          to: actualEnd,
+          insert: newVariableText,
+        };
+
+        view.dispatch({
+          changes,
+          selection: { anchor: from + newVariableText.length },
+        });
+
+        onChange(view.state.doc.toString());
+
+        // Update the selected variable with new bounds
+        setSelectedVariable((prev: SelectedVariable) =>
+          prev ? { ...prev, value: newValue, to: from + newVariableText.length } : null
+        );
+      } finally {
+        isUpdatingRef.current = false;
+      }
+    },
+    [selectedVariable, onChange, viewRef]
+  );
+
+  return {
+    selectedVariable,
+    setSelectedVariable,
+    handleVariableSelect,
+    handleVariableUpdate,
+    isUpdatingRef,
+  };
+}

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';