fix(canary): add field to persist value CKEditor5 on form

clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/CKEditor5Field.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { FormControl, FormLabel, Flex, Tooltip, Stack } from "bonde-components/chakra";
+import { Hint } from "bonde-components";
+import { InfoIcon } from "bonde-components/icons";
+import { useField } from "bonde-components/form";
+
+import { CKEditor } from "@ckeditor/ckeditor5-react";
+import ClassicEditor from "ckeditor5-custom-build";
+
+
+const CKEditor5Field = ({
+  name,
+  helpText,
+  label,
+  ...config
+}: any) => {
+  const { input, meta } = useField(name, config);
+  const editorConfig: any = {
+    s3Upload: {
+      signingUrl: process.env.REACT_APP_UPLOADS_URL
+    }
+  }
+
+  return (
+    <FormControl
+      isInvalid={(meta.error || meta.submitError) && meta.touched}
+      mb={4}
+    >
+      <Flex direction="row" justify="space-between">
+        <Stack direction="row" spacing={2} align="center">
+          <FormLabel>{label}</FormLabel>
+          {helpText && (
+            <Tooltip label={helpText}>
+              <InfoIcon color="gray.300" boxSize={3} />
+            </Tooltip>
+          )}
+        </Stack>
+        {(meta.error || meta.submitError) && meta.touched && (
+          <Hint color="error">{meta.error || meta.submitError}</Hint>
+        )}
+      </Flex>
+      <CKEditor
+        data={input.value}
+        editor={ClassicEditor}
+        config={editorConfig}
+        onChange={(event, editor) => {
+          const data = editor.getData();
+          console.log("event, editor, data", { event, editor, data });
+          input.onChange(data);
+        }}
+      />
+    </FormControl>
+  )
+}
+
+export default CKEditor5Field;

clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from 'styled-components';
 
@@ -9,17 +9,17 @@ import {
   Flex,
   Grid,
   GridItem,
-  Heading,
-  FormLabel
+  Heading
 } from "bonde-components/chakra";
 
-import ClassicEditor from "ckeditor5-custom-build";
-import { CKEditor } from "@ckeditor/ckeditor5-react";
+
 
 import { noSpecialCharacters } from "../../../../services/utils";
 import { Widget } from "../../FetchWidgets";
 import SettingsForm from '../SettingsForm';
 
+import CKEditor5Field from "./CKEditor5Field";
+
 const Styles = styled.div`
   .emailBody {
     padding-bottom: 30px;
@@ -41,7 +41,7 @@ const { required, composeValidators, isEmail } = Validators;
 const AutofireForm = ({ widget, updateCache }: Props): React.ReactElement => {
   const { t } = useTranslation("widgetActions");
 
-  const [editorData, setEditorData] = useState(widget.settings.email_body);
+  console.log("settings", { settings: widget.settings });
 
   return (
     <Styles>
@@ -87,27 +87,13 @@ const AutofireForm = ({ widget, updateCache }: Props): React.ReactElement => {
                     required(t("settings.autofire.validators.required"))
                   )}
                 />
-                <Flex className="emailBody" direction="column">
-                    <FormLabel className="emailBody--label" htmlFor="editor">
-                      {t("settings.autofire.label.emailBody")}
-                    </FormLabel>
-                    <CKEditor
-                      data={editorData}
-                      editor={ClassicEditor}
-                      config={{
-                        s3Upload: {
-                          signingUrl: process.env.REACT_APP_UPLOADS_URL
-                        }
-                      }}
-                      onChange={(event, editor) => {
-                        const data = editor.getData();
-                        setEditorData(data);
-                      }}
-                      validate={composeValidators(
-                        required(t("settings.autofire.validators.required"))
-                      )}
-                    />
-                </Flex>
+                <CKEditor5Field
+                  name="settings.email_text"
+                  label={t("settings.autofire.label.emailBody")}
+                  validate={composeValidators(
+                    required(t("settings.autofire.validators.required"))
+                  )}
+                />
                 <Flex justify='end'>
                   <Button disabled={submitting || !dirty} type='submit'>{t('settings.defaultForm.submit')}</Button>
                 </Flex>