Fix clear button email

frontend/src/components/controls/email/EmailForm.tsx

@@ -17,7 +17,7 @@ import './EmailForm.scss';
 type EmailFormProps = BaseInputProps<EmailModel> & {
   /** Attachments that are available for emailing */
   attachmentsAvailable: string[],
-  textEditorReplacements?: ITextEditorCustomReplacement[];
+  textEditorReplacements?: ITextEditorCustomReplacement[]
 };
 
 export const EmailForm = ({value, onChange, attachmentsAvailable, textEditorReplacements}: EmailFormProps) => {
@@ -29,7 +29,7 @@ export const EmailForm = ({value, onChange, attachmentsAvailable, textEditorRepl
   let getToolbarCustomButtons: (editorState: EditorState) => JSX.Element[] = () => [];
   if (textEditorReplacements && textEditorReplacements.length) {
     getToolbarCustomButtons = (editorState: EditorState) => (
-      [<TextEditorReplacements editorState={editorState} replacements={textEditorReplacements} />]
+      [<TextEditorReplacements editorState={editorState} replacements={textEditorReplacements}/>]
     );
   }
 

frontend/src/components/controls/form-controls/inputs/TextEditorReplacements.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, {useState} from 'react';
-import {Modifier, EditorState} from 'draft-js';
+import {Modifier, EditorState, ContentState} from 'draft-js';
 import {t} from '../../../utils';
 import {ITextEditorCustomReplacement} from '../../../invoice/invoice-replacements';
 
 
 type TextEditorReplacementsProps = {
   onChange?: (editorState: EditorState) => void,
   editorState: EditorState,
-  replacements: ITextEditorCustomReplacement[],
+  replacements: ITextEditorCustomReplacement[]
 }
 
 
@@ -30,25 +30,43 @@ export const TextEditorReplacements = ({onChange, editorState, replacements}: Te
     }
   };
 
+  const clearText = (): void => {
+    const contentState = ContentState.createFromText('');
+    const result = EditorState.push(editorState, contentState, 'remove-range');
+    if (onChange) {
+      onChange(result);
+    }
+  }
+
   return (
-    <div onClick={() => setOpen(!open)} className="rdw-block-wrapper" aria-label="rdw-block-control" role="button" tabIndex={0}>
-      <div className="rdw-dropdown-wrapper rdw-block-dropdown" aria-label="rdw-dropdown" style={{width: 180}}>
-        <div className="rdw-dropdown-selectedtext">
-          <span>{t('config.invoiceReplacements.title')}</span>
-          <div className={`rdw-dropdown-caretto${open ? 'close' : 'open'}`} />
+    <>
+      <div onClick={() => setOpen(!open)} className="rdw-block-wrapper" aria-label="rdw-block-control" role="button" tabIndex={0}>
+        <div className="rdw-dropdown-wrapper rdw-block-dropdown" aria-label="rdw-dropdown" style={{width: 180}}>
+          <div className="rdw-dropdown-selectedtext">
+            <span>{t('config.invoiceReplacements.title')}</span>
+            <div className={`rdw-dropdown-caretto${open ? 'close' : 'open'}`} />
+          </div>
+          <ul className={`rdw-dropdown-optionwrapper ${open ? '' : 'placeholder-ul'}`}>
+            {replacements.map(item => (
+              <li
+                onClick={() => addPlaceholder(item.defaultValue || item.code)}
+                key={item.code}
+                className="rdw-dropdownoption-default placeholder-li"
+              >
+                {item.code.replace(/\{|\}/g, '')}
+              </li>
+            ))}
+          </ul>
         </div>
-        <ul className={`rdw-dropdown-optionwrapper ${open ? '' : 'placeholder-ul'}`}>
-          {replacements.map(item => (
-            <li
-              onClick={() => addPlaceholder(item.defaultValue || item.code)}
-              key={item.code}
-              className="rdw-dropdownoption-default placeholder-li"
-            >
-              {item.code.replace(/\{|\}/g, '')}
-            </li>
-          ))}
-        </ul>
       </div>
-    </div>
+      <div className="rdw-inline-wrapper" aria-label="rdw-inline-control">
+        <div 
+          className="rdw-option-wrapper" 
+          aria-selected={false}
+          title={t("config.invoiceReplacements.clearButton")}
+          onClick={() => clearText()} > {t("config.invoiceReplacements.clearButton")}</div>
+      </div>
+    </>
+
   );
 };

frontend/src/trans.en.ts

@@ -181,6 +181,7 @@ export const trans = {
       consultantName: 'Naam consultant',
       projectMonth: 'Project maand (MomentJS)',
       projectMonthShort: 'Project maand',
+      clearButton: 'Clear'
     },
     company: {
       title: 'Your company',

frontend/src/trans.nl.ts

@@ -181,6 +181,7 @@ export const trans = {
       consultantName: 'Naam consultant',
       projectMonth: 'Project maand (MomentJS)',
       projectMonthShort: 'Project maand',
+      clearButton: 'Clear'
     },
     company: {
       title: 'Jouw bedrijfsgegevens',