From 97e88e477d5fff0077071fda2f00981bf3c0247c Mon Sep 17 00:00:00 2001
From: alexmateos <alexmateoshenrich@gmail.com>
Date: Thu, 18 Apr 2024 16:14:35 +0200
Subject: [PATCH] Add MergeTags in Link component attribute (#390)

* Add MergeTags in Link component attribute

* Fix imports in Link component attribute

---------

Co-authored-by: Alejndro <alejndro@MacBook-Pro-Alex-Mateos.local>
---
 .../components/attributes/Link.tsx            | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/easy-email-extensions/src/AttributePanel/components/attributes/Link.tsx b/packages/easy-email-extensions/src/AttributePanel/components/attributes/Link.tsx
index 715410393..4fa08910b 100644
--- a/packages/easy-email-extensions/src/AttributePanel/components/attributes/Link.tsx
+++ b/packages/easy-email-extensions/src/AttributePanel/components/attributes/Link.tsx
@@ -1,11 +1,16 @@
 import React, { useMemo } from 'react';
-import { useFocusIdx } from 'easy-email-editor';
+import { useFocusIdx, IconFont } from 'easy-email-editor';
 import { IconLink } from '@arco-design/web-react/icon';
 import { SelectField, TextField } from '../../../components/Form';
-import { Grid } from '@arco-design/web-react';
+import { Grid, Popover, Space, Button as ArcoButton } from '@arco-design/web-react';
+import { MergeTags } from './MergeTags';
+import { useField } from 'react-final-form';
 
 export function Link() {
   const { focusIdx } = useFocusIdx();
+  const { input } = useField(`${focusIdx}.attributes.href`, {
+    parse: v => v,
+  });
 
   return useMemo(() => {
     return (
@@ -13,11 +18,32 @@ export function Link() {
         <Grid.Col span={11}>
           <TextField
             prefix={<IconLink />}
-            label={<span>{t('Href')}&nbsp;&nbsp;&nbsp;</span>}
+            label={
+              <Space>
+                <span>{t('Href')}&nbsp;&nbsp;&nbsp;</span>
+                <Popover
+                  trigger='click'
+                  content={
+                    <MergeTags
+                      value={input.value}
+                      onChange={input.onChange}
+                    />
+                  }
+                >
+                  <ArcoButton
+                    type='text'
+                    icon={<IconFont iconName='icon-merge-tags' />}
+                  />
+                </Popover>
+              </Space>
+            }
             name={`${focusIdx}.attributes.href`}
           />
         </Grid.Col>
-        <Grid.Col offset={1} span={11}>
+        <Grid.Col
+          offset={1}
+          span={11}
+        >
           <SelectField
             label={t('Target')}
             name={`${focusIdx}.attributes.target`}