feat: introduce CustomAutocomplete with variables

packages/web/src/components/ControlledCustomAutocomplete/Controller.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Controller as RHFController, useFormContext } from 'react-hook-form';
+
+interface ControllerProps {
+  defaultValue?: string;
+  name: string;
+  required?: boolean;
+  shouldUnregister?: boolean;
+  children: React.ReactElement;
+}
+
+function Controller(
+  props: ControllerProps
+): React.ReactElement {
+  const { control } = useFormContext();
+  const {
+    defaultValue = '',
+    name,
+    required,
+    shouldUnregister,
+    children,
+  } = props;
+
+  return (
+    <RHFController
+      rules={{ required }}
+      name={name}
+      control={control}
+      defaultValue={defaultValue}
+      shouldUnregister={shouldUnregister ?? false}
+      render={({
+        field,
+      }) => React.cloneElement(children, { field })}
+    />
+  );
+}
+
+export default Controller;

packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.tsx

@@ -0,0 +1,96 @@
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import Tab from '@mui/material/Tab';
+import * as React from 'react';
+
+import type { IFieldDropdownOption } from '@automatisch/types';
+import Suggestions from 'components/PowerInput/Suggestions';
+import TabPanel from 'components/TabPanel';
+
+import Options from './Options';
+import { Tabs } from './style';
+
+interface CustomOptionsProps {
+  open: boolean;
+  anchorEl: any;
+  data: any;
+  options: readonly IFieldDropdownOption[];
+  onSuggestionClick: any;
+  onOptionClick: (event: React.MouseEvent, option: any) => void;
+  onTabChange: (tabIndex: 0 | 1) => void;
+  label?: string;
+  initialTabIndex?: 0 | 1;
+};
+
+const CustomOptions = (props: CustomOptionsProps) => {
+  const {
+    open,
+    anchorEl,
+    data,
+    options = [],
+    onSuggestionClick,
+    onOptionClick,
+    onTabChange,
+    label,
+    initialTabIndex,
+  } = props;
+  const [activeTabIndex, setActiveTabIndex] = React.useState<number | undefined>(undefined);
+
+  React.useEffect(function applyInitialActiveTabIndex() {
+    setActiveTabIndex((currentActiveTabIndex) => {
+      if (currentActiveTabIndex === undefined) {
+        return initialTabIndex;
+      }
+
+      return currentActiveTabIndex;
+    });
+  }, [initialTabIndex]);
+
+  return (
+    <Popper
+      open={open}
+      anchorEl={anchorEl}
+      style={{ width: anchorEl?.clientWidth, zIndex: 1 }}
+      modifiers={[
+        {
+          name: 'flip',
+          enabled: false,
+          options: {
+            altBoundary: false,
+          },
+        },
+      ]}
+    >
+      <Paper elevation={5} sx={{ width: '100%' }}>
+        <Tabs
+          sx={{ mb: 2 }}
+          value={activeTabIndex ?? 0}
+          onChange={(event, tabIndex) => {
+            onTabChange(tabIndex);
+            setActiveTabIndex(tabIndex);
+          }}
+        >
+          <Tab label={label} />
+          <Tab label="Custom" />
+        </Tabs>
+
+        <TabPanel value={activeTabIndex ?? 0} index={0}>
+          <Options
+            data={options}
+            onOptionClick={onOptionClick}
+          />
+        </TabPanel>
+
+        <TabPanel value={activeTabIndex ?? 0} index={1}>
+          <Suggestions
+            data={data}
+            onSuggestionClick={onSuggestionClick}
+          />
+        </TabPanel>
+      </Paper>
+    </Popper>
+  );
+};
+
+
+export default CustomOptions;

packages/web/src/components/ControlledCustomAutocomplete/Options.tsx

@@ -0,0 +1,126 @@
+import type { IFieldDropdownOption } from '@automatisch/types';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import throttle from 'lodash/throttle';
+import * as React from 'react';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+
+import { Typography } from '@mui/material';
+import SearchInput from 'components/SearchInput';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { SearchInputWrapper } from './style';
+
+interface OptionsProps {
+  data: readonly IFieldDropdownOption[];
+  onOptionClick: (event: React.MouseEvent, option: any) => void;
+};
+
+const SHORT_LIST_LENGTH = 4;
+const LIST_ITEM_HEIGHT = 64;
+
+const computeListHeight = (currentLength: number) => {
+  const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
+  return LIST_ITEM_HEIGHT * numberOfRenderedItems;
+}
+
+const renderItemFactory = ({ onOptionClick }: Pick<OptionsProps, 'onOptionClick'>) => (props: ListChildComponentProps) => {
+  const { index, style, data } = props;
+
+  const suboption = data[index];
+
+  return (
+    <ListItemButton
+      sx={{ pl: 4 }}
+      divider
+      onClick={(event) => onOptionClick(event, suboption)}
+      data-test="power-input-suggestion-item"
+      key={index}
+      style={style}
+    >
+      <ListItemText
+        primary={suboption.label}
+        primaryTypographyProps={{
+          variant: 'subtitle1',
+          title: 'Property name',
+          sx: { fontWeight: 700 },
+        }}
+        secondary={suboption.value}
+        secondaryTypographyProps={{
+          variant: 'subtitle2',
+          title: 'Sample value',
+          noWrap: true,
+        }}
+      />
+    </ListItemButton>
+  );
+};
+
+const Options = (props: OptionsProps) => {
+  const formatMessage = useFormatMessage();
+  const {
+    data,
+    onOptionClick
+  } = props;
+  const [filteredData, setFilteredData] = React.useState<readonly IFieldDropdownOption[]>(
+    data
+  );
+
+  React.useEffect(function syncOptions() {
+    setFilteredData((filteredData) => {
+      if (filteredData.length === 0 && filteredData.length !== data.length) {
+        return data;
+      }
+
+      return filteredData;
+    })
+  }, [data]);
+
+  const renderItem = React.useMemo(() => renderItemFactory({
+    onOptionClick
+  }), [onOptionClick]);
+
+  const onSearchChange = React.useMemo(
+  () =>
+    throttle((event: React.ChangeEvent) => {
+      const search = (event.target as HTMLInputElement).value.toLowerCase();
+
+      if (!search) {
+        setFilteredData(data);
+        return;
+      }
+
+      const newFilteredData = data.filter(option => `${option.label}\n${option.value}`.toLowerCase().includes(search.toLowerCase()));
+
+      setFilteredData(newFilteredData);
+    }, 400),
+  [data]
+);
+
+  return (
+    <>
+      <SearchInputWrapper>
+        <SearchInput onChange={onSearchChange} />
+      </SearchInputWrapper>
+
+      <FixedSizeList
+        height={computeListHeight(filteredData.length)}
+        width="100%"
+        itemSize={LIST_ITEM_HEIGHT}
+        itemCount={filteredData.length}
+        overscanCount={2}
+        itemData={filteredData}
+      >
+        {renderItem}
+      </FixedSizeList>
+
+      {filteredData.length === 0 && (
+        <Typography sx={{ p: (theme) => theme.spacing(0, 0, 2, 2) }}>
+          {formatMessage('customAutocomplete.noOptions')}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+
+export default Options;

packages/web/src/components/ControlledCustomAutocomplete/index.tsx

@@ -0,0 +1,280 @@
+import * as React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import FormHelperText from '@mui/material/FormHelperText';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import type { IFieldDropdownOption } from '@automatisch/types';
+import { FakeDropdownButton } from './style';
+
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import InputLabel from '@mui/material/InputLabel';
+import { createEditor } from 'slate';
+import { Editable, ReactEditor,} from 'slate-react';
+
+import Slate from 'components/Slate';
+import Element from 'components/Slate/Element';
+
+import {
+  serialize,
+  deserialize,
+  insertVariable,
+  customizeEditor,
+  resetEditor,
+  overrideEditorValue,
+  focusEditor,
+} from 'components/Slate/utils';
+import { FakeInput, InputLabelWrapper, ChildrenWrapper, } from 'components/PowerInput/style';
+import { VariableElement } from 'components/Slate/types';
+import CustomOptions from './CustomOptions';
+import { processStepWithExecutions } from 'components/PowerInput/data';
+import { StepExecutionsContext } from 'contexts/StepExecutions';
+
+interface ControlledCustomAutocompleteProps
+  extends AutocompleteProps<IFieldDropdownOption, boolean, boolean, boolean> {
+  showOptionValue?: boolean;
+  dependsOn?: string[];
+
+  defaultValue?: string;
+  name: string;
+  label?: string;
+  type?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  docUrl?: string;
+  clickToCopy?: boolean;
+  disabled?: boolean;
+  shouldUnregister?: boolean;
+}
+
+function ControlledCustomAutocomplete(
+  props: ControlledCustomAutocompleteProps
+): React.ReactElement {
+  const {
+    defaultValue = '',
+    name,
+    label,
+    required,
+    options = [],
+    dependsOn = [],
+    description,
+    loading,
+    disabled,
+    shouldUnregister,
+  } = props;
+  const { control, watch } = useFormContext();
+  const { field, fieldState } = useController({
+    control,
+    name,
+    defaultValue,
+    rules: { required },
+    shouldUnregister,
+  });
+  const {
+    value,
+    onChange: controllerOnChange,
+    onBlur: controllerOnBlur,
+  } = field;
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const [isInitialValueSet, setInitialValue] = React.useState(false);
+  const [isSingleChoice, setSingleChoice] = React.useState<boolean | undefined>(undefined);
+  const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
+  const editorRef = React.useRef<HTMLDivElement | null>(null);
+  const renderElement = React.useCallback(
+    (props) => <Element {...props} disabled={disabled} />,
+    [disabled]
+  );
+  const [editor] = React.useState(() => customizeEditor(createEditor()));
+  const [showVariableSuggestions, setShowVariableSuggestions] =
+    React.useState(false);
+
+  let dependsOnValues: unknown[] = [];
+  if (dependsOn?.length) {
+    dependsOnValues = watch(dependsOn);
+  }
+
+  React.useEffect(() => {
+    const ref = ReactEditor.toDOMNode(editor, editor);
+
+    resizeObserver.observe(ref);
+
+    return () => resizeObserver.unobserve(ref);
+  }, []);
+
+  const promoteValue = () => {
+    const serializedValue = serialize(editor.children);
+    controllerOnChange(serializedValue);
+  }
+
+  const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
+    return new ResizeObserver(() => {
+      forceUpdate();
+    })
+  }, []);
+
+  React.useEffect(() => {
+    const hasDependencies = dependsOnValues.length;
+
+    if (hasDependencies) {
+      // Reset the field when a dependent has been updated
+      resetEditor(editor);
+    }
+  }, dependsOnValues);
+
+  React.useEffect(function updateInitialValue() {
+    const hasOptions = options.length;
+    const isOptionsLoaded = loading === false;
+    if (!isInitialValueSet && hasOptions && isOptionsLoaded) {
+      setInitialValue(true);
+
+      const option: IFieldDropdownOption | undefined = options.find((option) => option.value === value);
+
+      if (option) {
+        overrideEditorValue(editor, { option, focus: false });
+        setSingleChoice(true);
+      } else if (value) {
+        setSingleChoice(false);
+      }
+    }
+  }, [isInitialValueSet, options, loading]);
+
+  const hideSuggestionsOnShift = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Tab') {
+      setShowVariableSuggestions(false);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    hideSuggestionsOnShift(event);
+    if (event.code === 'Tab') {
+      promoteValue();
+    }
+
+    if (isSingleChoice && event.code !== 'Tab') {
+      event.preventDefault();
+    }
+  };
+
+  const stepsWithVariables = React.useMemo(() => {
+    return processStepWithExecutions(priorStepsWithExecutions);
+  }, [priorStepsWithExecutions]);
+
+  const handleVariableSuggestionClick = React.useCallback(
+    (variable: Pick<VariableElement, 'name' | 'value'>) => {
+      insertVariable(editor, variable, stepsWithVariables);
+    },
+    [stepsWithVariables]
+  );
+
+  const handleOptionClick = React.useCallback(
+    (event: React.MouseEvent, option: IFieldDropdownOption) => {
+      event.stopPropagation();
+      overrideEditorValue(editor, { option, focus: false });
+
+      setShowVariableSuggestions(false);
+
+      promoteValue();
+    },
+    [stepsWithVariables]
+  );
+
+  const reset = (tabIndex: 0 | 1) => {
+    const isOptions = tabIndex === 0;
+
+    setSingleChoice(isOptions);
+
+    resetEditor(editor, { focus: true });
+  }
+
+  return (
+    <Slate
+      editor={editor}
+      value={deserialize(value, options, stepsWithVariables)}
+    >
+      <ClickAwayListener
+        mouseEvent="onMouseDown"
+        onClickAway={() => {
+          promoteValue();
+
+          setShowVariableSuggestions(false);
+        }}
+      >
+        {/* ref-able single child for ClickAwayListener */}
+        <ChildrenWrapper style={{ width: '100%' }} data-test="power-input">
+          <FakeInput
+            disabled={disabled}
+            tabIndex={-1}
+            onClick={() => {
+              focusEditor(editor);
+            }}
+          >
+            <InputLabelWrapper>
+              <InputLabel
+                shrink={true}
+                disabled={disabled}
+                variant="outlined"
+                sx={{ bgcolor: 'white', display: 'inline-block', px: 0.75 }}
+              >
+                {label}
+              </InputLabel>
+            </InputLabelWrapper>
+
+            <Editable
+              readOnly={disabled}
+              style={{ width: '100%' }}
+              renderElement={renderElement}
+              onKeyDown={handleKeyDown}
+              onFocus={() => {
+                setShowVariableSuggestions(true);
+              }}
+              onBlur={() => {
+                controllerOnBlur();
+              }}
+            />
+
+            <FakeDropdownButton
+              disabled={disabled}
+              edge="end"
+              size="small"
+              tabIndex={-1}
+            >
+              <ArrowDropDownIcon />
+            </FakeDropdownButton>
+          </FakeInput>
+          {/* ghost placer for the variables popover */}
+          <div
+            ref={editorRef}
+            style={{
+              position: 'absolute',
+              right: 16,
+              left: 16
+            }}
+          />
+
+          <CustomOptions
+            label={label}
+            open={showVariableSuggestions}
+            initialTabIndex={isSingleChoice === undefined ? undefined : (isSingleChoice ? 0 : 1)}
+            anchorEl={editorRef.current}
+            data={stepsWithVariables}
+            options={options}
+            onSuggestionClick={handleVariableSuggestionClick}
+            onOptionClick={handleOptionClick}
+            onTabChange={reset}
+          />
+
+          <FormHelperText
+            variant="outlined"
+            error={Boolean(fieldState.isTouched && fieldState.error)}
+          >
+            {fieldState.isTouched
+              ? fieldState.error?.message || description
+              : description}
+          </FormHelperText>
+        </ChildrenWrapper>
+      </ClickAwayListener>
+    </Slate>
+  );
+}
+
+export default ControlledCustomAutocomplete;

packages/web/src/components/ControlledCustomAutocomplete/style.ts

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material/styles';
+import MuiIconButton from '@mui/material/IconButton';
+import MuiTabs from '@mui/material/Tabs';
+
+export const FakeDropdownButton = styled(MuiIconButton)`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(1)};
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+export const Tabs = styled(MuiTabs)`
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+`;
+
+export const SearchInputWrapper = styled('div')`
+  padding: ${({ theme }) => theme.spacing(0, 2, 2, 2)};
+`;

packages/web/src/components/FlowStep/index.tsx

@@ -41,6 +41,7 @@ import {
   Header,
   Wrapper,
 } from './style';
+import isEmpty from 'helpers/isEmpty';
 
 type FlowStepProps = {
   collapsed?: boolean;
@@ -75,7 +76,13 @@ function generateValidationSchema(substeps: ISubstep[]) {
           if (required) {
             substepArgumentValidations[key] = substepArgumentValidations[
               key
-            ].required(`${key} is required.`);
+            ]
+              .required(`${key} is required.`)
+              .test(
+                'empty-check',
+                `${key} must be not empty`,
+                (value: any) => !isEmpty(value),
+              );
           }
 
           // if the field depends on another field, add the dependsOn required validation

packages/web/src/components/FlowSubstep/index.tsx

@@ -4,7 +4,7 @@ import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import type { IField, IStep, ISubstep } from '@automatisch/types';
+import type { IStep, ISubstep } from '@automatisch/types';
 
 import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -21,25 +21,6 @@ type FlowSubstepProps = {
   step: IStep;
 };
 
-const validateSubstep = (substep: ISubstep, step: IStep) => {
-  if (!substep) return true;
-
-  const args: IField[] = substep.arguments || [];
-
-  return args.every((arg) => {
-    if (arg.required === false) {
-      return true;
-    }
-
-    const argValue = step.parameters?.[arg.key];
-
-    // `false` is an exceptional valid value
-    if (argValue === false) return true;
-
-    return argValue !== undefined && argValue !== null;
-  });
-};
-
 function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
   const {
     substep,
@@ -54,19 +35,7 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
 
   const editorContext = React.useContext(EditorContext);
   const formContext = useFormContext();
-  const [validationStatus, setValidationStatus] = React.useState<
-    boolean | null
-  >(validateSubstep(substep, formContext.getValues() as IStep));
-
-  React.useEffect(() => {
-    function validate(step: unknown) {
-      const validationResult = validateSubstep(substep, step as IStep);
-      setValidationStatus(validationResult);
-    }
-    const subscription = formContext.watch(validate);
-
-    return () => subscription.unsubscribe();
-  }, [substep, formContext.watch]);
+  const validationStatus = formContext.formState.isValid;
 
   const onToggle = expanded ? onCollapse : onExpand;
 

packages/web/src/components/InputCreator/index.tsx

@@ -8,6 +8,7 @@ import useDynamicData from 'hooks/useDynamicData';
 import PowerInput from 'components/PowerInput';
 import TextField from 'components/TextField';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import ControlledCustomAutocomplete from 'components/ControlledCustomAutocomplete';
 import DynamicField from 'components/DynamicField';
 
 type InputCreatorProps = {
@@ -81,22 +82,44 @@ export default function InputCreator(
 
     return (
       <React.Fragment>
-        <ControlledAutocomplete
-          key={computedName}
-          name={computedName}
-          dependsOn={schema.dependsOn}
-          fullWidth
-          disablePortal
-          disableClearable={required}
-          options={preparedOptions}
-          renderInput={(params) => <MuiTextField {...params} label={label} />}
-          defaultValue={value as string}
-          description={description}
-          loading={loading}
-          disabled={disabled}
-          showOptionValue={showOptionValue}
-          shouldUnregister={shouldUnregister}
-        />
+        {!schema.variables && (
+          <ControlledAutocomplete
+            key={computedName}
+            name={computedName}
+            dependsOn={schema.dependsOn}
+            fullWidth
+            disablePortal
+            disableClearable={required}
+            options={preparedOptions}
+            renderInput={(params) => <MuiTextField {...params} label={label} />}
+            defaultValue={value as string}
+            description={description}
+            loading={loading}
+            disabled={disabled}
+            showOptionValue={showOptionValue}
+            shouldUnregister={shouldUnregister}
+          />
+        )}
+
+        {schema.variables && (
+          <ControlledCustomAutocomplete
+            key={computedName}
+            name={computedName}
+            dependsOn={schema.dependsOn}
+            label={label}
+            fullWidth
+            disablePortal
+            disableClearable={required}
+            options={preparedOptions}
+            renderInput={(params) => <MuiTextField {...params} label={label} />}
+            defaultValue={value as string}
+            description={description}
+            loading={loading}
+            disabled={disabled}
+            showOptionValue={showOptionValue}
+            shouldUnregister={shouldUnregister}
+          />
+        )}
 
         {(additionalFieldsLoading && !additionalFields?.length) && <div>
           <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />

packages/web/src/components/PowerInput/Popper.tsx

@@ -0,0 +1,61 @@
+import Paper from '@mui/material/Paper';
+import MuiPopper from '@mui/material/Popper';
+import Tab from '@mui/material/Tab';
+import * as React from 'react';
+
+import Suggestions from 'components/PowerInput/Suggestions';
+import TabPanel from 'components/TabPanel';
+
+import { Tabs } from './style';
+
+interface PopperProps {
+  open: boolean;
+  anchorEl: any;
+  data: any;
+  onSuggestionClick: any;
+};
+
+const Popper = (props: PopperProps) => {
+  const {
+    open,
+    anchorEl,
+    data,
+    onSuggestionClick,
+  } = props;
+
+  return (
+    <MuiPopper
+      open={open}
+      anchorEl={anchorEl}
+      style={{ width: anchorEl?.clientWidth, zIndex: 1 }}
+      modifiers={[
+        {
+          name: 'flip',
+          enabled: false,
+          options: {
+            altBoundary: false,
+          },
+        },
+      ]}
+    >
+      <Paper elevation={5} sx={{ width: '100%' }}>
+        <Tabs
+          sx={{ mb: 2 }}
+          value={0}
+        >
+          <Tab label="Insert data..." />
+        </Tabs>
+
+        <TabPanel value={0} index={0}>
+          <Suggestions
+            data={data}
+            onSuggestionClick={onSuggestionClick}
+          />
+        </TabPanel>
+      </Paper>
+    </MuiPopper>
+  );
+};
+
+
+export default Popper;

packages/web/src/components/PowerInput/Suggestions.tsx

@@ -1,35 +1,99 @@
-import * as React from 'react';
-
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import MuiListItemText from '@mui/material/ListItemText';
-import Paper from '@mui/material/Paper';
-import Collapse from '@mui/material/Collapse';
-import Typography from '@mui/material/Typography';
+import type { IStep } from '@automatisch/types';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import type { IStep } from '@automatisch/types';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import throttle from 'lodash/throttle';
+import * as React from 'react';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
 
-const ListItemText = styled(MuiListItemText)``;
+import SearchInput from 'components/SearchInput';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 type SuggestionsProps = {
-  data: any[];
+  data: {
+    id: string;
+    name: string;
+    output: Record<string, unknown>[]
+  }[];
   onSuggestionClick: (variable: any) => void;
 };
 
 const SHORT_LIST_LENGTH = 4;
-const LIST_HEIGHT = 256;
+const LIST_ITEM_HEIGHT = 64;
+
+const computeListHeight = (currentLength: number) => {
+  const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
+  return LIST_ITEM_HEIGHT * numberOfRenderedItems;
+}
 
 const getPartialArray = (array: any[], length = array.length) => {
   return array.slice(0, length);
 };
 
+const renderItemFactory = ({ onSuggestionClick }: Pick<SuggestionsProps, 'onSuggestionClick'>) => (props: ListChildComponentProps) => {
+  const { index, style, data } = props;
+
+  const suboption = data[index];
+
+  return (
+    <ListItemButton
+      sx={{ pl: 4 }}
+      divider
+      onClick={() => onSuggestionClick(suboption)}
+      data-test="power-input-suggestion-item"
+      key={index}
+      style={style}
+    >
+      <ListItemText
+        primary={suboption.label}
+        primaryTypographyProps={{
+          variant: 'subtitle1',
+          title: 'Property name',
+          sx: { fontWeight: 700 },
+        }}
+        secondary={suboption.sampleValue || ''}
+        secondaryTypographyProps={{
+          variant: 'subtitle2',
+          title: 'Sample value',
+          noWrap: true,
+        }}
+      />
+    </ListItemButton>
+  );
+}
+
 const Suggestions = (props: SuggestionsProps) => {
-  const { data, onSuggestionClick = () => null } = props;
+  const formatMessage = useFormatMessage();
+  const {
+    data,
+    onSuggestionClick = () => null
+  } = props;
   const [current, setCurrent] = React.useState<number | null>(0);
   const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
+  const [filteredData, setFilteredData] = React.useState<any[]>(
+    data
+  );
+
+  React.useEffect(function syncOptions() {
+    setFilteredData((filteredData) => {
+      if (filteredData.length === 0 && filteredData.length !== data.length) {
+        return data;
+      }
+
+      return filteredData;
+    })
+  }, [data]);
+
+  const renderItem = React.useMemo(() => renderItemFactory({
+    onSuggestionClick
+  }), [onSuggestionClick]);
 
   const expandList = () => {
     setListLength(Infinity);
@@ -43,79 +107,95 @@ const Suggestions = (props: SuggestionsProps) => {
     setListLength(SHORT_LIST_LENGTH);
   }, [current]);
 
-  return (
-    <Paper elevation={5} sx={{ width: '100%' }}>
-      <Typography variant="subtitle2" sx={{ p: 2 }}>
-        Variables
-      </Typography>
-      <List disablePadding>
-        {data.map((option: IStep, index: number) => (
-          <>
-            <ListItemButton
-              divider
-              onClick={() =>
-                setCurrent((currentIndex) =>
-                  currentIndex === index ? null : index
+  const onSearchChange = React.useMemo(
+    () =>
+      throttle((event: React.ChangeEvent) => {
+        const search = (event.target as HTMLInputElement).value.toLowerCase();
+
+        if (!search) {
+          setFilteredData(data);
+          return;
+        }
+
+        const newFilteredData = data
+          .map((stepWithOutput) => {
+            return {
+              id: stepWithOutput.id,
+              name: stepWithOutput.name,
+              output: stepWithOutput.output
+                .filter(option => `${option.label}\n${option.sampleValue}`
+                  .toLowerCase()
+                  .includes(search.toLowerCase())
                 )
-              }
-              sx={{ py: 0.5 }}
-            >
-              <ListItemText primary={option.name} />
+            }
+          })
+          .filter((stepWithOutput) => stepWithOutput.output.length);
 
-              {!!option.output?.length &&
-                (current === index ? <ExpandLess /> : <ExpandMore />)}
-            </ListItemButton>
+        setFilteredData(newFilteredData);
+      }, 400),
+    [data]
+  );
 
-            <Collapse in={current === index} timeout="auto" unmountOnExit>
-              <List
-                component="div"
-                disablePadding
-                sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
-                data-test="power-input-suggestion-group"
-              >
-                {getPartialArray((option.output as any) || [], listLength).map(
-                  (suboption: any, index: number) => (
-                    <ListItemButton
-                      sx={{ pl: 4 }}
-                      divider
-                      onClick={() => onSuggestionClick(suboption)}
-                      data-test="power-input-suggestion-item"
-                      key={`suggestion-${suboption.name}`}
-                    >
-                      <ListItemText
-                        primary={suboption.name}
-                        primaryTypographyProps={{
-                          variant: 'subtitle1',
-                          title: 'Property name',
-                          sx: { fontWeight: 700 },
-                        }}
-                        secondary={suboption.value || ''}
-                        secondaryTypographyProps={{
-                          variant: 'subtitle2',
-                          title: 'Sample value',
-                          noWrap: true,
-                        }}
-                      />
-                    </ListItemButton>
+  return (
+    <Paper elevation={0} sx={{ width: '100%' }}>
+      <Box px={2} pb={2}>
+        <SearchInput onChange={onSearchChange} />
+      </Box>
+
+      {filteredData.length > 0 && (
+        <List disablePadding>
+          {filteredData.map((option: IStep, index: number) => (
+            <React.Fragment key={`${index}-${option.name}`}>
+              <ListItemButton
+                divider
+                onClick={() =>
+                  setCurrent((currentIndex) =>
+                    currentIndex === index ? null : index
                   )
+                }
+                sx={{ py: 0.5 }}
+              >
+                <ListItemText primary={option.name} />
+
+                {!!option.output?.length &&
+                  (current === index ? <ExpandLess /> : <ExpandMore />)}
+              </ListItemButton>
+
+              <Collapse in={current === index || filteredData.length === 1} timeout="auto" unmountOnExit>
+                <FixedSizeList
+                  height={computeListHeight(getPartialArray((option.output as any) || [], listLength).length)}
+                  width="100%"
+                  itemSize={LIST_ITEM_HEIGHT}
+                  itemCount={getPartialArray((option.output as any) || [], listLength).length}
+                  overscanCount={2}
+                  itemData={getPartialArray((option.output as any) || [], listLength)}
+                  data-test="power-input-suggestion-group"
+                >
+                  {renderItem}
+                </FixedSizeList>
+
+                {(option.output?.length || 0) > listLength && (
+                  <Button fullWidth onClick={expandList}>
+                    Show all
+                  </Button>
                 )}
-              </List>
 
-              {(option.output?.length || 0) > listLength && (
-                <Button fullWidth onClick={expandList}>
-                  Show all
-                </Button>
-              )}
+                {listLength === Infinity && (
+                  <Button fullWidth onClick={collapseList}>
+                    Show less
+                  </Button>
+                )}
+              </Collapse>
+            </React.Fragment>
+          ))}
+        </List>
+      )}
 
-              {listLength === Infinity && (
-                <Button fullWidth onClick={collapseList}>
-                  Show less
-                </Button>
-              )}
-            </Collapse>
-          </>
-        ))}
-      </List>
+      {filteredData.length === 0 && (
+        <Typography sx={{ p: (theme) => theme.spacing(0, 0, 2, 2) }}>
+          {formatMessage('powerInputSuggestions.noOptions')}
+        </Typography>
+      )}
     </Paper>
   );
 };

packages/web/src/components/PowerInput/data.ts

@@ -3,38 +3,63 @@ import type { IStep } from '@automatisch/types';
 const joinBy = (delimiter = '.', ...args: string[]) =>
   args.filter(Boolean).join(delimiter);
 
-const process = (data: any, parentKey?: any, index?: number): any[] => {
+type TProcessPayload = {
+  data: any;
+  parentKey: string;
+  index?: number;
+  parentLabel?: string;
+};
+
+const process = ({ data, parentKey, index, parentLabel = '' }: TProcessPayload): any[] => {
   if (typeof data !== 'object') {
     return [
       {
-        name: `${parentKey}.${index}`,
-        value: data,
+        label: `${parentLabel}.${index}`,
+        value: `${parentKey}.${index}`,
+        sampleValue: data,
       },
     ];
   }
 
   const entries = Object.entries(data);
 
-  return entries.flatMap(([name, value]) => {
-    const fullName = joinBy(
+  return entries.flatMap(([name, sampleValue]) => {
+    const label = joinBy(
+      '.',
+      parentLabel,
+      (index as number)?.toString(),
+      name
+    );
+
+    const value = joinBy(
       '.',
       parentKey,
       (index as number)?.toString(),
       name
     );
 
-    if (Array.isArray(value)) {
-      return value.flatMap((item, index) => process(item, fullName, index));
+    if (Array.isArray(sampleValue)) {
+      return sampleValue.flatMap((item, index) => process({
+        data: item,
+        parentKey: value,
+        index,
+        parentLabel: label
+      }));
     }
 
-    if (typeof value === 'object' && value !== null) {
-      return process(value, fullName);
+    if (typeof sampleValue === 'object' && sampleValue !== null) {
+      return process({
+        data: sampleValue,
+        parentKey: value,
+        parentLabel: label,
+      });
     }
 
     return [
       {
-        name: fullName,
+        label,
         value,
+        sampleValue,
       },
     ];
   });
@@ -52,12 +77,11 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
     .map((step: IStep, index: number) => ({
       id: step.id,
       // TODO: replace with step.name once introduced
-      name: `${index + 1}. ${
-        (step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
-      }`,
-      output: process(
-        step.executionSteps?.[0]?.dataOut || {},
-        `step.${step.id}`
-      ),
+      name: `${index + 1}. ${(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
+        }`,
+      output: process({
+        data: step.executionSteps?.[0]?.dataOut || {},
+        parentKey: `step.${step.id}`,
+      }),
     }));
 };

packages/web/src/components/PowerInput/index.tsx

@@ -1,25 +1,26 @@
-import * as React from 'react';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
-import Chip from '@mui/material/Chip';
-import Popper from '@mui/material/Popper';
-import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { createEditor } from 'slate';
-import { Slate, Editable, useSelected, useFocused } from 'slate-react';
+import { Editable } from 'slate-react';
+
+import Slate from 'components/Slate';
+import Element from 'components/Slate/Element';
 
 import {
-  serialize,
+  customizeEditor,
   deserialize,
   insertVariable,
-  customizeEditor,
-} from './utils';
-import Suggestions from './Suggestions';
+  serialize,
+} from 'components/Slate/utils';
 import { StepExecutionsContext } from 'contexts/StepExecutions';
 
-import { FakeInput, InputLabelWrapper, ChildrenWrapper } from './style';
-import { VariableElement } from './types';
+import { VariableElement } from 'components/Slate/types';
+import Popper from './Popper';
 import { processStepWithExecutions } from './data';
+import { ChildrenWrapper, FakeInput, InputLabelWrapper } from './style';
 
 type PowerInputProps = {
   onChange?: (value: string) => void;
@@ -59,6 +60,12 @@ const PowerInput = (props: PowerInputProps) => {
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
 
+  const disappearSuggestionsOnShift = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Tab') {
+      setShowVariableSuggestions(false);
+    }
+  }
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
@@ -93,7 +100,7 @@ const PowerInput = (props: PowerInputProps) => {
       }) => (
         <Slate
           editor={editor}
-          value={deserialize(value, stepsWithVariables)}
+          value={deserialize(value, [], stepsWithVariables)}
           onChange={(value) => {
             controllerOnChange(serialize(value));
           }}
@@ -122,6 +129,7 @@ const PowerInput = (props: PowerInputProps) => {
                   readOnly={disabled}
                   style={{ width: '100%' }}
                   renderElement={renderElement}
+                  onKeyDown={disappearSuggestionsOnShift}
                   onFocus={() => {
                     setShowVariableSuggestions(true);
                   }}
@@ -134,14 +142,14 @@ const PowerInput = (props: PowerInputProps) => {
               {/* ghost placer for the variables popover */}
               <div ref={editorRef} style={{ position: 'absolute', right: 16, left: 16 }} />
 
-              <FormHelperText variant="outlined">{description}</FormHelperText>
-
-              <SuggestionsPopper
+              <Popper
                 open={showVariableSuggestions}
                 anchorEl={editorRef.current}
                 data={stepsWithVariables}
                 onSuggestionClick={handleVariableSuggestionClick}
               />
+
+              <FormHelperText variant="outlined">{description}</FormHelperText>
             </ChildrenWrapper>
           </ClickAwayListener>
         </Slate>
@@ -150,60 +158,4 @@ const PowerInput = (props: PowerInputProps) => {
   );
 };
 
-const SuggestionsPopper = (props: any) => {
-  const { open, anchorEl, data, onSuggestionClick } = props;
-
-  return (
-    <Popper
-      open={open}
-      anchorEl={anchorEl}
-      style={{ width: anchorEl?.clientWidth, zIndex: 1 }}
-      modifiers={[
-        {
-          name: 'flip',
-          enabled: false,
-          options: {
-            altBoundary: false,
-          },
-        },
-      ]}
-    >
-      <Suggestions data={data} onSuggestionClick={onSuggestionClick} />
-    </Popper>
-  );
-};
-
-const Element = (props: any) => {
-  const { attributes, children, element } = props;
-  switch (element.type) {
-    case 'variable':
-      return <Variable {...props} />;
-    default:
-      return <p {...attributes}>{children}</p>;
-  }
-};
-
-const Variable = ({ attributes, children, element }: any) => {
-  const selected = useSelected();
-  const focused = useFocused();
-  const label = (
-    <>
-      {element.name}
-      {children}
-    </>
-  );
-  return (
-    <Chip
-      {...attributes}
-      component="span"
-      contentEditable={false}
-      style={{
-        boxShadow: selected && focused ? '0 0 0 2px #B4D5FF' : 'none',
-      }}
-      size="small"
-      label={label}
-    />
-  );
-};
-
 export default PowerInput;

packages/web/src/components/PowerInput/style.ts

@@ -1,3 +1,4 @@
+import MuiTabs from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
 
 export const ChildrenWrapper = styled('div')`
@@ -18,27 +19,41 @@ export const FakeInput = styled('div', {
   shouldForwardProp: (prop) => prop !== 'disabled',
 }) <{ disabled?: boolean }>`
   border: 1px solid #eee;
-  min-height: 52px;
+  min-height: 56px;
   width: 100%;
   display: block;
-  padding: ${({ theme }) => theme.spacing(0, 1.75)};
+  padding: ${({ theme }) => theme.spacing(0, 10, 0, 1.75)};
   border-radius: ${({ theme }) => theme.spacing(0.5)};
   border-color: rgba(0, 0, 0, 0.23);
   position: relative;
 
   ${({ disabled, theme }) =>
-    !!disabled &&
-    `
-    color: ${theme.palette.action.disabled},
-    border-color: ${theme.palette.action.disabled},
+    !!disabled && `
+    color: ${theme.palette.action.disabled};
+    border-color: ${theme.palette.action.disabled};
   `}
 
   &:hover {
     border-color: ${({ theme }) => theme.palette.text.primary};
   }
 
-  &:focus-within {
-    border-color: ${({ theme }) => theme.palette.primary.main};
-    border-width: 2px;
+  &:focus-within, &:focus {
+    &:before {
+      border-color: ${({ theme }) => theme.palette.primary.main};
+      border-radius: ${({ theme }) => theme.spacing(0.5)};
+      border-style: solid;
+      border-width: 2px;
+      bottom: -2px;
+      content: '';
+      display: block;
+      left: -2px;
+      position: absolute;
+      right: -2px;
+      top: -2px;
+    }
   }
 `;
+
+export const Tabs = styled(MuiTabs)`
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+`;

packages/web/src/components/PowerInput/utils.ts

@@ -1,125 +0,0 @@
-import { Text, Descendant, Transforms } from 'slate';
-import { withHistory } from 'slate-history';
-import { withReact } from 'slate-react';
-
-import type { CustomEditor, CustomElement, VariableElement } from './types';
-
-function getStepPosition(
-  id: string,
-  stepsWithVariables: Record<string, unknown>[]
-) {
-  const stepIndex = stepsWithVariables.findIndex((stepWithVariables) => {
-    return stepWithVariables.id === id;
-  });
-
-  return stepIndex + 1;
-}
-
-function humanizeVariableName(
-  variableName: string,
-  stepsWithVariables: Record<string, unknown>[]
-) {
-  const nameWithoutCurlies = variableName.replace(/{{|}}/g, '');
-  const stepId = nameWithoutCurlies.match(stepIdRegExp)?.[1] || '';
-  const stepPosition = getStepPosition(stepId, stepsWithVariables);
-  const humanizedVariableName = nameWithoutCurlies.replace(
-    `step.${stepId}.`,
-    `step${stepPosition}.`
-  );
-
-  return humanizedVariableName;
-}
-
-const variableRegExp = /({{.*?}})/;
-const stepIdRegExp = /^step.([\da-zA-Z-]*)/;
-export const deserialize = (
-  value: string,
-  stepsWithVariables: any[]
-): Descendant[] => {
-  if (!value)
-    return [
-      {
-        type: 'paragraph',
-        children: [{ text: '' }],
-      },
-    ];
-
-  return value.split('\n').map((line) => {
-    const nodes = line.split(variableRegExp);
-
-    if (nodes.length > 1) {
-      return {
-        type: 'paragraph',
-        children: nodes.map((node) => {
-          if (node.match(variableRegExp)) {
-            return {
-              type: 'variable',
-              name: humanizeVariableName(node, stepsWithVariables),
-              value: node,
-              children: [{ text: '' }],
-            };
-          }
-
-          return {
-            text: node,
-          };
-        }),
-      };
-    }
-
-    return {
-      type: 'paragraph',
-      children: [{ text: line }],
-    };
-  });
-};
-
-export const serialize = (value: Descendant[]): string => {
-  return value.map((node) => serializeNode(node)).join('\n');
-};
-
-const serializeNode = (node: CustomElement | Descendant): string => {
-  if (Text.isText(node)) {
-    return node.text;
-  }
-
-  if (node.type === 'variable') {
-    return node.value as string;
-  }
-
-  return node.children.map((n) => serializeNode(n)).join('');
-};
-
-export const withVariables = (editor: CustomEditor) => {
-  const { isInline, isVoid } = editor;
-
-  editor.isInline = (element: CustomElement) => {
-    return element.type === 'variable' ? true : isInline(element);
-  };
-
-  editor.isVoid = (element: CustomElement) => {
-    return element.type === 'variable' ? true : isVoid(element);
-  };
-
-  return editor;
-};
-
-export const insertVariable = (
-  editor: CustomEditor,
-  variableData: Pick<VariableElement, 'name' | 'value'>,
-  stepsWithVariables: Record<string, unknown>[]
-) => {
-  const variable: VariableElement = {
-    type: 'variable',
-    name: humanizeVariableName(variableData.name as string, stepsWithVariables),
-    value: `{{${variableData.name}}}`,
-    children: [{ text: '' }],
-  };
-
-  Transforms.insertNodes(editor, variable);
-  Transforms.move(editor);
-};
-
-export const customizeEditor = (editor: CustomEditor): CustomEditor => {
-  return withVariables(withReact(withHistory(editor)));
-};

packages/web/src/components/SearchableJSONViewer/index.tsx

@@ -1,70 +1,18 @@
 import * as React from 'react';
-import get from 'lodash/get';
-import set from 'lodash/set';
 import throttle from 'lodash/throttle';
 import isEmpty from 'lodash/isEmpty';
-import forIn from 'lodash/forIn';
-import isPlainObject from 'lodash/isPlainObject';
 import { Box, Typography } from '@mui/material';
 
 import { IJSONObject } from '@automatisch/types';
 import JSONViewer from 'components/JSONViewer';
 import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
+import filterObject from 'helpers/filterObject';
 
 type JSONViewerProps = {
   data: IJSONObject;
 };
 
-function aggregate(
-  data: any,
-  searchTerm: string,
-  result = {},
-  prefix: string[] = [],
-  withinArray = false
-) {
-  if (withinArray) {
-    const containerValue = get(result, prefix, []);
-
-    result = aggregate(
-      data,
-      searchTerm,
-      result,
-      prefix.concat(containerValue.length.toString())
-    );
-
-    return result;
-  }
-
-  if (isPlainObject(data)) {
-    forIn(data, (value, key) => {
-      const fullKey = [...prefix, key];
-
-      if (key.toLowerCase().includes(searchTerm)) {
-        set(result, fullKey, value);
-        return;
-      }
-
-      result = aggregate(value, searchTerm, result, fullKey);
-    });
-  }
-
-  if (Array.isArray(data)) {
-    forIn(data, (value) => {
-      result = aggregate(value, searchTerm, result, prefix, true);
-    });
-  }
-
-  if (
-    ['string', 'number'].includes(typeof data) &&
-    String(data).toLowerCase().includes(searchTerm)
-  ) {
-    set(result, prefix, data);
-  }
-
-  return result;
-}
-
 const SearchableJSONViewer = ({ data }: JSONViewerProps) => {
   const [filteredData, setFilteredData] = React.useState<IJSONObject | null>(
     data
@@ -81,7 +29,7 @@ const SearchableJSONViewer = ({ data }: JSONViewerProps) => {
           return;
         }
 
-        const newFilteredData = aggregate(data, search);
+        const newFilteredData = filterObject(data, search);
 
         if (isEmpty(newFilteredData)) {
           setFilteredData(null);

packages/web/src/components/Slate/Element.tsx

@@ -0,0 +1,12 @@
+import Variable from './Variable';
+
+export default function Element(props: any) {
+  const { attributes, children, element, disabled } = props;
+
+  switch (element.type) {
+    case 'variable':
+      return <Variable {...props} disabled={disabled} />;
+    default:
+      return <p {...attributes}>{children}</p>;
+  }
+};

packages/web/src/components/Slate/Variable.tsx

@@ -0,0 +1,28 @@
+import Chip from '@mui/material/Chip';
+import { useSelected, useFocused } from 'slate-react';
+
+export default function Variable({ attributes, children, element, disabled }: any) {
+  const selected = useSelected();
+  const focused = useFocused();
+  const label = (
+    <>
+      <span style={{ fontWeight: 500 }}>{element.name}</span>: <span style={{ fontWeight: 300 }}>{element.sampleValue}</span>
+      {children}
+    </>
+  );
+
+  return (
+    <Chip
+      {...attributes}
+      disabled={disabled}
+      component="span"
+      contentEditable={false}
+      style={{
+        boxShadow: selected && focused ? '0 0 0 2px #B4D5FF' : 'none',
+      }}
+      size="small"
+      label={label}
+    />
+  );
+};
+

packages/web/src/components/Slate/index.tsx

@@ -0,0 +1,3 @@
+import { Slate } from 'slate-react';
+
+export default Slate;

packages/web/src/components/Slate/types.ts

@@ -5,14 +5,21 @@ export type VariableElement = {
   type: 'variable';
   value?: unknown;
   name?: string;
+  sampleValue?: unknown;
   children: Text[];
 };
 
 export type ParagraphElement = {
   type: 'paragraph';
+  value?: string;
   children: Descendant[];
 };
 
+export type CustomText = {
+  text: string;
+  value: string;
+};
+
 export type CustomEditor = BaseEditor & ReactEditor;
 
 export type CustomElement = VariableElement | ParagraphElement;

packages/web/src/components/Slate/utils.ts

@@ -0,0 +1,280 @@
+import { Text, Descendant } from 'slate';
+import { withHistory } from 'slate-history';
+import { ReactEditor, withReact } from 'slate-react';
+import { IFieldDropdownOption } from '@automatisch/types';
+
+import type { CustomEditor, CustomElement, CustomText, ParagraphElement, VariableElement } from './types';
+
+type StepWithVariables = {
+  id: string;
+  name: string;
+  output: {
+    label: string;
+    sampleValue: string;
+    value: string;
+  }[];
+}
+
+type StepsWithVariables = StepWithVariables[];
+
+function isCustomText(value: any): value is CustomText {
+  const isText = Text.isText(value);
+  const hasValueProperty = 'value' in value;
+
+  if (isText && hasValueProperty) return true;
+
+  return false;
+}
+
+function getStepPosition(
+  id: string,
+  stepsWithVariables: StepsWithVariables
+) {
+  const stepIndex = stepsWithVariables.findIndex((stepWithVariables) => {
+    return stepWithVariables.id === id;
+  });
+
+  return stepIndex + 1;
+}
+
+function getVariableName(variable: string) {
+  return variable.replace(/{{|}}/g, '');
+}
+
+function getVariableStepId(variable: string) {
+  const nameWithoutCurlies = getVariableName(variable);
+  const stepId = nameWithoutCurlies.match(stepIdRegExp)?.[1] || '';
+
+  return stepId;
+}
+
+function getVariableSampleValue(variable: string, stepsWithVariables: StepsWithVariables) {
+  const variableStepId = getVariableStepId(variable);
+  const stepWithVariables = stepsWithVariables.find(({ id }: { id: string }) => id === variableStepId);
+
+  if (!stepWithVariables) return null;
+
+  const variableName = getVariableName(variable);
+  const variableData = stepWithVariables.output.find(({ value }) => variableName === value);
+
+  if (!variableData) return null;
+
+  return variableData.sampleValue;
+}
+
+function getVariableDetails(variable: string, stepsWithVariables: StepsWithVariables) {
+  const variableName = getVariableName(variable);
+  const stepId = getVariableStepId(variableName);
+  const stepPosition = getStepPosition(stepId, stepsWithVariables);
+  const sampleValue = getVariableSampleValue(variable, stepsWithVariables);
+  const label = variableName.replace(
+    `step.${stepId}.`,
+    `step${stepPosition}.`
+  );
+
+  return {
+    sampleValue,
+    label,
+  };
+}
+
+const variableRegExp = /({{.*?}})/;
+const stepIdRegExp = /^step.([\da-zA-Z-]*)/;
+
+export const deserialize = (
+  value: string,
+  options: readonly IFieldDropdownOption[],
+  stepsWithVariables: StepsWithVariables
+): Descendant[] => {
+  if (!value)
+    return [
+      {
+        type: 'paragraph',
+        children: [{ text: '' }],
+      },
+    ];
+
+  const selectedNativeOption = options.find((option) => value === option.value);
+
+  if (selectedNativeOption) {
+    return [
+      {
+        type: 'paragraph',
+        value: selectedNativeOption.value as string,
+        children: [{ text: selectedNativeOption.label }],
+      },
+    ];
+  }
+
+  return value.split('\n').map((line) => {
+    const nodes = line.split(variableRegExp);
+
+    if (nodes.length > 1) {
+      return {
+        type: 'paragraph',
+        children: nodes.map((node) => {
+          if (node.match(variableRegExp)) {
+            const variableDetails = getVariableDetails(node, stepsWithVariables);
+
+            return {
+              type: 'variable',
+              name: variableDetails.label,
+              sampleValue: variableDetails.sampleValue,
+              value: node,
+              children: [{ text: '' }],
+            };
+          }
+
+          return {
+            text: node,
+          };
+        }),
+      };
+    }
+
+    return {
+      type: 'paragraph',
+      children: [{ text: line }],
+    };
+  });
+};
+
+export const serialize = (value: Descendant[]): string => {
+  const serializedNodes = value.map((node) => serializeNode(node));
+
+  const hasSingleNode = value.length === 1;
+
+  /**
+   * return single serialize node alone so that we don't stringify.
+   * booleans stay booleans, numbers stay number
+   */
+  if (hasSingleNode) {
+    return serializedNodes[0];
+  }
+
+  const serializedValue = serializedNodes.join('\n');
+  return serializedValue;
+};
+
+const serializeNode = (node: CustomElement | Descendant): string => {
+  if (isCustomText(node)) return node.value;
+
+  if (Text.isText(node)) {
+    return node.text;
+  }
+
+  if (node.type === 'variable') {
+    return node.value as string;
+  }
+
+  const hasSingleChild = node.children.length === 1;
+
+  /**
+   * serialize alone so that we don't stringify.
+   * booleans stay booleans, numbers stay number
+   */
+  if (hasSingleChild) {
+    return serializeNode(node.children[0]);
+  }
+
+  return node.children.map((n) => serializeNode(n)).join('');
+};
+
+export const withVariables = (editor: CustomEditor) => {
+  const { isInline, isVoid } = editor;
+
+  editor.isInline = (element: CustomElement) => {
+    return element.type === 'variable' ? true : isInline(element);
+  };
+
+  editor.isVoid = (element: CustomElement) => {
+    return element.type === 'variable' ? true : isVoid(element);
+  };
+
+  return editor;
+};
+
+export const insertVariable = (
+  editor: CustomEditor,
+  variableData: Record<string, unknown>,
+  stepsWithVariables: StepsWithVariables
+) => {
+  const variableDetails = getVariableDetails(`{{${variableData.value}}}`, stepsWithVariables);
+
+  const variable: VariableElement = {
+    type: 'variable',
+    name: variableDetails.label,
+    sampleValue: variableDetails.sampleValue,
+    value: `{{${variableData.value}}}`,
+    children: [{ text: '' }],
+  };
+
+  editor.insertNodes(variable, { select: false });
+
+  focusEditor(editor);
+};
+
+export const focusEditor = (editor: CustomEditor) => {
+  ReactEditor.focus(editor);
+  editor.move();
+}
+
+export const resetEditor = (editor: CustomEditor, options?: { focus: boolean }) => {
+  const focus = options?.focus || false;
+
+  editor.removeNodes({
+    at: {
+      anchor: editor.start([]),
+      focus: editor.end([])
+    },
+  });
+
+  // `editor.normalize({ force: true })` doesn't add an empty node in the editor
+  editor.insertNode(createTextNode(''));
+
+  if (focus) {
+    focusEditor(editor);
+  }
+}
+
+export const overrideEditorValue = (editor: CustomEditor, options: { option: IFieldDropdownOption, focus: boolean }) => {
+  const { option, focus } = options;
+
+  const variable: ParagraphElement = {
+    type: 'paragraph',
+    children: [
+      {
+        value: option.value as string,
+        text: option.label as string
+      }
+    ],
+  };
+
+  editor.withoutNormalizing(() => {
+    editor.removeNodes({
+      at: {
+        anchor: editor.start([]),
+        focus: editor.end([])
+      },
+    });
+
+    editor.insertNode(variable);
+
+    if (focus) {
+      focusEditor(editor);
+    }
+  });
+};
+
+export const createTextNode = (text: string): ParagraphElement => ({
+  type: 'paragraph',
+  children: [
+    {
+      text
+    }
+  ]
+});
+
+export const customizeEditor = (editor: CustomEditor): CustomEditor => {
+  return withVariables(withReact(withHistory(editor)));
+};