Adjusted types for mergeTags property of react-email-editor (#43681)

* Adjusted types for mergeTags property or react-email-editor

* Updated version for react-email-editor types

* Fix lint

types/react-email-editor/index.d.ts

@@ -1,6 +1,7 @@
-// Type definitions for react-email-editor 0.9
+// Type definitions for react-email-editor 1.0
 // Project: https://github.com/unlayer/react-email-editor
 // Definitions by: Nikita Granko <https://github.com/ngranko>
+//                 Vladimir Penyazkov <https://github.com/mindtraveller>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -23,11 +24,30 @@ export interface User {
     readonly email?: string;
 }
 
-export interface MergeTag {
+export interface GroupedMergeTag {
+    readonly name: string;
+    readonly mergeTags: Array<SimpleMergeTag | GroupedMergeTag>;
+}
+
+export interface SimpleMergeTag {
     readonly name: string;
     readonly value: string;
 }
 
+export interface ConditionalMergeTagRule {
+    readonly name: string;
+    readonly before: string;
+    readonly after: string;
+}
+
+export interface ConditionalMergeTag {
+    readonly name: string;
+    readonly rules: ConditionalMergeTagRule[];
+    readonly mergeTags?: SimpleMergeTag[];
+}
+
+export type MergeTag = SimpleMergeTag | ConditionalMergeTag | GroupedMergeTag;
+
 export interface DesignTagConfig {
     readonly delimeter: [string, string];
 }

types/react-email-editor/react-email-editor-tests.tsx

@@ -4,6 +4,9 @@ import EmailEditor, {
   FileInfo,
   FileUploadDoneCallback,
   HtmlExport,
+  SimpleMergeTag,
+  GroupedMergeTag,
+  ConditionalMergeTag
 } from 'react-email-editor';
 
 const TOOLS_CONFIG = {
@@ -16,6 +19,27 @@ const TOOLS_CONFIG = {
   },
 };
 
+const simpleMergeTag: SimpleMergeTag = { value: '{{simple_merge_tag}}', name: 'Simple Merge Tag' };
+const groupedMergeTag: GroupedMergeTag = {
+  name: 'Grouped Merge Tag',
+  mergeTags: [
+    { name: 'Tag 1', value: '{tag_1}' },
+    {
+      name: 'Tag 2',
+      mergeTags: [{ name: 'Tag 4', value: '{tag_4}' }]
+    }
+  ],
+};
+const conditionalMergeTag: ConditionalMergeTag = {
+  name: 'Conditional',
+  rules: [{
+    name: 'Rule 1',
+    before: '{{#if}}',
+    after: '{{/if}}'
+  }],
+  mergeTags: [{ name: 'Tag 1', value: '{tag_1}' }]
+};
+
 class App extends React.Component {
   private readonly editorRef = React.createRef<EmailEditor>();
 
@@ -34,7 +58,9 @@ class App extends React.Component {
           }),
       );
       this.editorRef.current.setMergeTags([
-        { name: '{{newTestTag}}', value: 'New Test Tag Value' },
+          simpleMergeTag,
+          groupedMergeTag,
+          conditionalMergeTag
       ]);
     }
   }
@@ -75,7 +101,7 @@ class App extends React.Component {
               name: 'John Doe',
               email: 'john.doe@acme.com',
             },
-            mergeTags: [{ name: '{{testTag}}', value: 'Test Tag Value' }],
+            mergeTags: [simpleMergeTag, groupedMergeTag, conditionalMergeTag],
             designTags: {
               current_user_name: 'John Doe',
             },