Add pattern for variable tag in tiptap (#16652)

Since we now store rich text value in blocknote rather than markdown,
variables need to be resolved accordingly.

Replacing the variable tag pattern
`{"type":"variableTag","attrs":\{"variable":"(\{\{[^{}]+\}\})"\}\}` by a
blocknote text `{"type":"text","text":"${escapedText}"}`

Fixes https://github.com/twentyhq/twenty/issues/16583

To test :
- build a workflow that creates a note/ sends an email with a variable
in the body
- make sure the result is properly formatted once run

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

packages/twenty-shared/src/utils/__tests__/rich-text-variable-resolver.test.ts

@@ -0,0 +1,225 @@
+import { resolveRichTextVariables } from '../rich-text-variable-resolver';
+
+describe('resolveRichTextVariables', () => {
+  const context = {
+    step1: {
+      message: 'Hello World',
+      name: 'John',
+    },
+    user: {
+      email: 'john@example.com',
+    },
+  };
+
+  it('should resolve a single variableTag node', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Hello World"}]}]',
+    );
+  });
+
+  it('should resolve variableTag nodes mixed with text', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"text","text":"Message: "},{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}},{"type":"text","text":" from user"}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Message: "},{"type":"text","text":"Hello World"},{"type":"text","text":" from user"}]}]',
+    );
+  });
+
+  it('should resolve multiple variableTag nodes', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.name}}"}},{"type":"text","text":" - "},{"type":"variableTag","attrs":{"variable":"{{user.email}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"John"},{"type":"text","text":" - "},{"type":"text","text":"john@example.com"}]}]',
+    );
+  });
+
+  it('should handle undefined variables by replacing with empty string', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{nonexistent.field}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":""}]}]',
+    );
+  });
+
+  it('should escape special characters in resolved values', () => {
+    const contextWithSpecialChars = {
+      step1: {
+        message: 'Hello "World" with \\ backslash',
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, contextWithSpecialChars);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Hello \\"World\\" with \\\\ backslash"}]}]',
+    );
+  });
+
+  it('should not modify strings without variableTag nodes', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"text","text":"Plain text content"}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(input);
+  });
+
+  it('should handle doc type structure', () => {
+    const input =
+      '{"type":"doc","content":[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]}';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello World"}]}]}',
+    );
+  });
+
+  it('should handle null context values by replacing with empty string', () => {
+    const contextWithNull = {
+      step1: {
+        value: null,
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.value}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, contextWithNull);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":""}]}]',
+    );
+  });
+
+  it('should handle numeric values', () => {
+    const contextWithNumber = {
+      step1: {
+        count: 42,
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.count}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, contextWithNumber);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"42"}]}]',
+    );
+  });
+
+  it('should preserve regular {{variable}} patterns in non-variableTag contexts', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"text","text":"Regular {{step1.message}} pattern"}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(input);
+  });
+
+  it('should return null for null input', () => {
+    const result = resolveRichTextVariables(null, context);
+
+    expect(result).toBeNull();
+  });
+
+  it('should return undefined for undefined input', () => {
+    const result = resolveRichTextVariables(undefined, context);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should resolve variableTag nodes with attrs before type (alternate JSON order)', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"attrs":{"variable":"{{step1.message}}"},"type":"variableTag"}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Hello World"}]}]',
+    );
+  });
+
+  it('should resolve mixed property order variableTag nodes', () => {
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.name}}"}},{"attrs":{"variable":"{{user.email}}"},"type":"variableTag"}]}]';
+
+    const result = resolveRichTextVariables(input, context);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"John"},{"type":"text","text":"john@example.com"}]}]',
+    );
+  });
+
+  it('should convert newlines to hardBreak nodes', () => {
+    const contextWithNewlines = {
+      step1: {
+        message: 'Hello\nWorld',
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, contextWithNewlines);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Hello"},{"type":"hardBreak"},{"type":"text","text":"World"}]}]',
+    );
+  });
+
+  it('should handle multiple newlines', () => {
+    const contextWithMultipleNewlines = {
+      step1: {
+        message: 'Line 1\nLine 2\nLine 3',
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]';
+
+    const result = resolveRichTextVariables(input, contextWithMultipleNewlines);
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Line 1"},{"type":"hardBreak"},{"type":"text","text":"Line 2"},{"type":"hardBreak"},{"type":"text","text":"Line 3"}]}]',
+    );
+  });
+
+  it('should handle newlines with special characters', () => {
+    const contextWithNewlinesAndSpecialChars = {
+      step1: {
+        message: 'Hello "World"\nGoodbye',
+      },
+    };
+
+    const input =
+      '[{"type":"paragraph","content":[{"type":"variableTag","attrs":{"variable":"{{step1.message}}"}}]}]';
+
+    const result = resolveRichTextVariables(
+      input,
+      contextWithNewlinesAndSpecialChars,
+    );
+
+    expect(result).toBe(
+      '[{"type":"paragraph","content":[{"type":"text","text":"Hello \\"World\\""},{"type":"hardBreak"},{"type":"text","text":"Goodbye"}]}]',
+    );
+  });
+});

packages/twenty-shared/src/utils/__tests__/variable-resolver.test.ts

@@ -1,4 +1,4 @@
-import { resolveInput } from './variable-resolver';
+import { resolveInput } from '../variable-resolver';
 
 describe('resolveInput', () => {
   const context = {

packages/twenty-shared/src/utils/evalFromContext.ts

@@ -0,0 +1,24 @@
+import Handlebars from 'handlebars';
+
+export const evalFromContext = (
+  input: string,
+  context: Record<string, unknown>,
+) => {
+  try {
+    Handlebars.registerHelper('json', (input: string) => JSON.stringify(input));
+
+    const inputWithHelper = input
+      .replace('{{', '{{{ json ')
+      .replace('}}', ' }}}');
+
+    const inferredInput = Handlebars.compile(inputWithHelper)(context, {
+      helpers: {
+        json: (input: string) => JSON.stringify(input),
+      },
+    });
+
+    return JSON.parse(inferredInput);
+  } catch {
+    return undefined;
+  }
+};

packages/twenty-shared/src/utils/index.ts

@@ -22,6 +22,7 @@ export { assertUnreachable } from './assertUnreachable';
 export { computeDiffBetweenObjects } from './compute-diff-between-objects';
 export { deepMerge } from './deepMerge';
 export { CustomError } from './errors/CustomError';
+export { evalFromContext } from './evalFromContext';
 export { extractAndSanitizeObjectStringFields } from './extractAndSanitizeObjectStringFields';
 export { computeMorphRelationFieldName } from './fieldMetadata/compute-morph-relation-field-name';
 export { isFieldMetadataDateKind } from './fieldMetadata/isFieldMetadataDateKind';
@@ -33,25 +34,25 @@ export { computeEmptyGqlOperationFilterForEmails } from './filter/computeEmptyGq
 export { computeEmptyGqlOperationFilterForLinks } from './filter/computeEmptyGqlOperationFilterForLinks';
 export { computeRecordGqlOperationFilter } from './filter/computeRecordGqlOperationFilter';
 export { addUnitToDateTime } from './filter/dates/utils/addUnitToDateTime';
-export type { FirstDayOfTheWeek } from './filter/dates/utils/firstDayOfWeekSchema';
 export { firstDayOfWeekSchema } from './filter/dates/utils/firstDayOfWeekSchema';
+export type { FirstDayOfTheWeek } from './filter/dates/utils/firstDayOfWeekSchema';
 export { getDateFromPlainDate } from './filter/dates/utils/getDateFromPlainDate';
 export { getEndUnitOfDateTime } from './filter/dates/utils/getEndUnitOfDateTime';
 export { getFirstDayOfTheWeekAsANumberForDateFNS } from './filter/dates/utils/getFirstDayOfTheWeekAsANumberForDateFNS';
 export { getPlainDateFromDate } from './filter/dates/utils/getPlainDateFromDate';
 export { getStartUnitOfDateTime } from './filter/dates/utils/getStartUnitOfDateTime';
 export { relativeDateFilterAmountSchema } from './filter/dates/utils/relativeDateFilterAmountSchema';
-export type { RelativeDateFilterDirection } from './filter/dates/utils/relativeDateFilterDirectionSchema';
 export { relativeDateFilterDirectionSchema } from './filter/dates/utils/relativeDateFilterDirectionSchema';
-export type { RelativeDateFilter } from './filter/dates/utils/relativeDateFilterSchema';
+export type { RelativeDateFilterDirection } from './filter/dates/utils/relativeDateFilterDirectionSchema';
 export { relativeDateFilterSchema } from './filter/dates/utils/relativeDateFilterSchema';
+export type { RelativeDateFilter } from './filter/dates/utils/relativeDateFilterSchema';
 export { relativeDateFilterStringifiedSchema } from './filter/dates/utils/relativeDateFilterStringifiedSchema';
-export type { RelativeDateFilterUnit } from './filter/dates/utils/relativeDateFilterUnitSchema';
 export { relativeDateFilterUnitSchema } from './filter/dates/utils/relativeDateFilterUnitSchema';
-export type { ResolvedDateFilterValue } from './filter/dates/utils/resolveDateFilter';
+export type { RelativeDateFilterUnit } from './filter/dates/utils/relativeDateFilterUnitSchema';
 export { resolveDateFilter } from './filter/dates/utils/resolveDateFilter';
-export type { ResolvedDateTimeFilterValue } from './filter/dates/utils/resolveDateTimeFilter';
+export type { ResolvedDateFilterValue } from './filter/dates/utils/resolveDateFilter';
 export { resolveDateTimeFilter } from './filter/dates/utils/resolveDateTimeFilter';
+export type { ResolvedDateTimeFilterValue } from './filter/dates/utils/resolveDateTimeFilter';
 export { resolveRelativeDateFilter } from './filter/dates/utils/resolveRelativeDateFilter';
 export { resolveRelativeDateFilterStringified } from './filter/dates/utils/resolveRelativeDateFilterStringified';
 export { resolveRelativeDateTimeFilter } from './filter/dates/utils/resolveRelativeDateTimeFilter';
@@ -60,11 +61,11 @@ export { shiftPointInTimeFromTimezoneDifferenceInMinutesWithSystemTimezone } fro
 export { subUnitFromDateTime } from './filter/dates/utils/subUnitFromDateTime';
 export { isEmptinessOperand } from './filter/isEmptinessOperand';
 export { turnAnyFieldFilterIntoRecordGqlFilter } from './filter/turnAnyFieldFilterIntoRecordGqlFilter';
+export { turnRecordFilterGroupsIntoGqlOperationFilter } from './filter/turnRecordFilterGroupIntoGqlOperationFilter';
 export type {
   RecordFilter,
-  RecordFilterGroup,
+  RecordFilterGroup
 } from './filter/turnRecordFilterGroupIntoGqlOperationFilter';
-export { turnRecordFilterGroupsIntoGqlOperationFilter } from './filter/turnRecordFilterGroupIntoGqlOperationFilter';
 export { turnRecordFilterIntoRecordGqlOperationFilter } from './filter/turnRecordFilterIntoGqlOperationFilter';
 export { combineFilters } from './filter/utils/combineFilters';
 export { computeTimezoneDifferenceInMinutes } from './filter/utils/computeTimezoneDifferenceInMinutes';
@@ -74,7 +75,7 @@ export { createAnyFieldRecordFilterBaseProperties } from './filter/utils/createA
 export {
   convertGreaterThanOrEqualRatingToArrayOfRatingValues,
   convertLessThanOrEqualRatingToArrayOfRatingValues,
-  convertRatingToRatingValue,
+  convertRatingToRatingValue
 } from './filter/utils/fieldRatingConvertors';
 export { filterSelectOptionsOfFieldMetadataItem } from './filter/utils/filterSelectOptionsOfFieldMetadataItem';
 export { generateILikeFiltersForCompositeFields } from './filter/utils/generateILikeFiltersForCompositeFields';
@@ -84,16 +85,16 @@ export { isExpectedSubFieldName } from './filter/utils/isExpectedSubFieldName';
 export { arrayOfStringsOrVariablesSchema } from './filter/utils/validation-schemas/arrayOfStringsOrVariablesSchema';
 export { arrayOfUuidOrVariableSchema } from './filter/utils/validation-schemas/arrayOfUuidsOrVariablesSchema';
 export {
-  relationFilterValueSchemaObject,
   jsonRelationFilterValueSchema,
+  relationFilterValueSchemaObject
 } from './filter/utils/validation-schemas/jsonRelationFilterValueSchema';
 export { fromArrayToUniqueKeyRecord } from './from-array-to-unique-key-record.util';
 export { fromArrayToValuesByKeyRecord } from './fromArrayToValuesByKeyRecord.util';
 export { getURLSafely } from './getURLSafely';
 export { getImageAbsoluteURI } from './image/getImageAbsoluteURI';
 export {
-  sanitizeURL,
   getLogoUrlFromDomainName,
+  sanitizeURL
 } from './image/getLogoUrlFromDomainName';
 export { getUniqueConstraintsFields } from './indexMetadata/getUniqueConstraintsFields';
 export { fastDeepEqual } from './json/fast-deep-equal';
@@ -102,25 +103,26 @@ export { getSettingsPath } from './navigation/getSettingsPath';
 export { parseJson } from './parseJson';
 export { removePropertiesFromRecord } from './removePropertiesFromRecord';
 export { removeUndefinedFields } from './removeUndefinedFields';
+export { resolveRichTextVariables } from './rich-text-variable-resolver';
 export { safeParseRelativeDateFilterJSONStringified } from './safeParseRelativeDateFilterJSONStringified';
 export { getGenericOperationName } from './sentry/getGenericOperationName';
 export { getHumanReadableNameFromCode } from './sentry/getHumanReadableNameFromCode';
 export { appendCopySuffix } from './strings/appendCopySuffix';
 export { capitalize } from './strings/capitalize';
 export { uncapitalize } from './strings/uncapitalize';
-export type {
-  TipTapMarkType,
-  TipTapNodeType,
-  LinkMarkAttributes,
-  TipTapMark,
-} from './tiptap/tiptap-marks';
 export {
   TIPTAP_MARK_TYPES,
-  TIPTAP_NODE_TYPES,
   TIPTAP_MARKS_RENDER_ORDER,
+  TIPTAP_NODE_TYPES
+} from './tiptap/tiptap-marks';
+export type {
+  LinkMarkAttributes,
+  TipTapMark,
+  TipTapMarkType,
+  TipTapNodeType
 } from './tiptap/tiptap-marks';
-export type { StringPropertyKeys } from './trim-and-remove-duplicated-whitespaces-from-object-string-properties';
 export { trimAndRemoveDuplicatedWhitespacesFromObjectStringProperties } from './trim-and-remove-duplicated-whitespaces-from-object-string-properties';
+export type { StringPropertyKeys } from './trim-and-remove-duplicated-whitespaces-from-object-string-properties';
 export { trimAndRemoveDuplicatedWhitespacesFromString } from './trim-and-remove-duplicated-whitespaces-from-string';
 export { throwIfNotDefined } from './typeguard/throwIfNotDefined';
 export { absoluteUrlSchema } from './url/absoluteUrlSchema';

packages/twenty-shared/src/utils/rich-text-variable-resolver.ts

@@ -0,0 +1,49 @@
+import { isDefined } from '@/utils/validation';
+import { evalFromContext } from './evalFromContext';
+
+const VARIABLE_TAG_PATTERN =
+  /\{"type":"variableTag","attrs":\{"variable":"(\{\{[^{}]+\}\})"\}\}|\{"attrs":\{"variable":"(\{\{[^{}]+\}\})"\},"type":"variableTag"\}/g;
+
+const escapeJsonString = (text: string): string => {
+  return JSON.stringify(text).slice(1, -1);
+};
+
+const buildTextNodesWithLineBreaks = (text: string): string => {
+  const lines = text.split('\n');
+
+  if (lines.length === 1) {
+    return `{"type":"text","text":"${escapeJsonString(text)}"}`;
+  }
+
+  return lines
+    .map((line, index) => {
+      const textNode = `{"type":"text","text":"${escapeJsonString(line)}"}`;
+
+      if (index < lines.length - 1) {
+        return `${textNode},{"type":"hardBreak"}`;
+      }
+
+      return textNode;
+    })
+    .join(',');
+};
+
+export const resolveRichTextVariables = (
+  input: string | null | undefined,
+  context: Record<string, unknown>,
+): string | null | undefined => {
+  if (!isDefined(input)) {
+    return input;
+  }
+
+  return input.replace(
+    VARIABLE_TAG_PATTERN,
+    (_, variableTypeFirst: string, variableAttrsFirst: string) => {
+      const variable = variableTypeFirst ?? variableAttrsFirst;
+      const resolvedValue = evalFromContext(variable, context);
+      const textValue = isDefined(resolvedValue) ? String(resolvedValue) : '';
+
+      return buildTextNodesWithLineBreaks(textValue);
+    },
+  );
+};

packages/twenty-shared/src/utils/variable-resolver.ts

@@ -1,10 +1,7 @@
-import Handlebars from 'handlebars';
+import { evalFromContext } from '@/utils/evalFromContext';
+import { isDefined } from '@/utils/validation';
 
-const isNil = (value: any): value is null | undefined => {
-  return value === null || value === undefined;
-};
-
-const isString = (value: any): value is string => {
+const isString = (value: unknown): value is string => {
   return typeof value === 'string';
 };
 
@@ -14,7 +11,7 @@ export const resolveInput = (
   unresolvedInput: unknown,
   context: Record<string, unknown>,
 ): unknown => {
-  if (isNil(unresolvedInput)) {
+  if (!isDefined(unresolvedInput)) {
     return unresolvedInput;
   }
 
@@ -84,23 +81,3 @@ const resolveString = (
     return processedToken;
   });
 };
-
-const evalFromContext = (input: string, context: Record<string, unknown>) => {
-  try {
-    Handlebars.registerHelper('json', (input: string) => JSON.stringify(input));
-
-    const inputWithHelper = input
-      .replace('{{', '{{{ json ')
-      .replace('}}', ' }}}');
-
-    const inferredInput = Handlebars.compile(inputWithHelper)(context, {
-      helpers: {
-        json: (input: string) => JSON.stringify(input),
-      },
-    });
-
-    return JSON.parse(inferredInput);
-  } catch {
-    return undefined;
-  }
-};