In type: AdvancedType.TABLE categories default rows and columns

[dipak-tech-aher]

As im using below code for blocks so by default table is rendering 3 by 3 table instead can we render 2 by 2 table since i need to add mergtags in cells

import React, { useEffect, useState } from "react";
import { PageHeader } from "@arco-design/web-react";
import { EmailEditor, EmailEditorProvider, Stack } from "easy-email-editor";
import "easy-email-editor/lib/style.css";
import { AdvancedType, BasicType, BlockManager } from "easy-email-core";
import { StandardLayout } from "easy-email-extensions";
import "easy-email-editor/lib/style.css";
import "easy-email-extensions/lib/style.css";
import "@arco-themes/react-easy-email-theme/css/arco.css";
import * as Yup from "yup";
import { useParams } from "react-router-dom";
import { TemplateVariableModal } from "./TemplateVariableModal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCaretLeft,
faCaretRight,
faCaretDown,
faCaretUp,
} from "@fortawesome/free-solid-svg-icons";
import { TemplateVariablesForm } from "./TemplateVariablesForm";
import { StepOne } from "./stepForms/StepOne";

const fontList = [
"Arial",
"Tahoma",
"Verdana",
"Times New Roman",
"Courier New",
"Georgia",
"Lato",
"Montserrat",
].map((item) => ({ value: item, label: item }));

const categories = [
{
label: "Content",
active: true,
blocks: [
{ type: AdvancedType.TEXT },
{ type: AdvancedType.BUTTON },
{
type: AdvancedType.TABLE,
},
{ type: AdvancedType.SOCIAL },
{ type: AdvancedType.DIVIDER },
{ type: AdvancedType.SPACER },
],
},
{
label: "Layout",
active: true,
displayType: "column",
blocks: [
{
title: "2 columns",
payload: [
["50%", "50%"],
["33%", "67%"],
["67%", "33%"],
["25%", "75%"],
["75%", "25%"],
],
},
{
title: "3 columns",
payload: [
["33.33%", "33.33%", "33.33%"],
["25%", "25%", "50%"],
["50%", "25%", "25%"],
],
},
{
title: "4 columns",
payload: [
["25%", "25%", "25%", "25%"],
["25%", "25%", "25%", "25%"],
["25%", "25%", "25%", "25%"],
["25%", "25%", "25%", "25%"],
],
},
],
},
];

const pageBlock = BlockManager.getBlockByType(BasicType.PAGE) || null;

export default function EmailTemplateDesigner({
onSubmit,
mergeTags,
editorJson,
handleFillWordForm,
templateData,
isNewTemplateVariable,
setIsNewTemplateVariable,
setStep,
}) {
const { templateId } = useParams();

const [isOpen, setIsOpen] = useState(false);
const [isOpenDynamicForm, setIsOpenDynamicForm] = useState(true);
const [wordForm, setWordForm] = useState([]);
const [initialValues, setInitialValues] = useState();
const [tags, setTags] = useState();
const [templateVariableModal, setTemplateVariableModal] = useState(false);

useEffect(() => {
if (
templateData?.template_Parameters &&
templateData?.template_Parameters?.includes("{")
) {
setWordForm(JSON.parse(templateData?.template_Parameters));
}
}, [editorJson, mergeTags, templateData]);

const validationSchema = Yup.object().shape(
wordForm.reduce((schema, field) => {
schema[field.label] = Yup.string();
return schema;
}, {})
);

const initialFormValues = wordForm.reduce((values, field) => {
console.log("field----------->", field);
if (field?.inputType?.includes("{")) {
const data = JSON.parse(field?.inputType);

  console.log("data?.values?.[0]?.value---->", data?.values?.[0]?.value);
  values[field.label] = data?.values?.[0]?.value ?? "";
} else {
  values[field.label] = field?.value ?? "";
}
return values;

}, {});

useEffect(() => {
if (mergeTags && mergeTags?.mergeTags?.mergeTags.length > 0) {
let tags = {};
for (const val of mergeTags?.mergeTags?.mergeTags) {
tags[val.name] = val?.name;
}

  console.log("tags=====>", tags);
  setTags({
    ...tags,
    // "<span onclick=\"let x = document.getElementById('Choose_diagnosis'); x.innerHTML=`<select id='Choose_diagnosis'><option value='diagnosis1'>Diagnosis 1</option><option value='diagnosis2'>Diagnosis 2</option><option value='diagnosis3'>Diagnosis 3</option><option value='diagnosis4'>Diagnosis 4</option></select>`;\">choose diagnosis</span>":
    //   "",
    // "<span onclick=\"let hostElement = document.querySelector('VisualEditorEditMode'); console.log('hostElement--->',hostElement); let x = document.getElementById('checkbox_0'); console.log('x--->',x); x.innerHTML=`☒`;\"><div id='checkbox_0'>checkbox</div></span>":
    //   "",
  });
}

}, [mergeTags]);

useEffect(() => {
const initValue = {
subject: "Welcome to Template Creation",
subTitle: "Nice to meet you!",
content: editorJson || pageBlock.create({}),
};
setInitialValues(initValue);
}, [editorJson, templateData]);

const handleClose = () => {
setTemplateVariableModal(false);
};

const handleShow = () => {
setTemplateVariableModal(true);
setIsOpenDynamicForm(false);
};

const handleShowPageAttributes = () => {
const elements = document.querySelectorAll(
".arco-layout-sider.arco-layout-sider-light"
);

elements.forEach((element) => {
  if (!element.classList.contains("arco-layout-sider-collapsed")) {
    if (isOpen) {
      element.classList.remove("open");
      element.classList.add("closed");
    } else {
      element.classList.remove("closed");
      element.classList.add("open");
    }
  }
});

};

if (!initialValues) return null;
return (

<EmailEditorProvider
key={JSON.stringify(initialValues)}
dashed={false}
data={initialValues}
height={"calc(100vh - 85px)"}
autoComplete
mergeTags={tags}
fontList={fontList}
onSubmit={onSubmit}
>
{({ values }, { submit }) => {
return (
<>
<PageHeader
title="Design Template"
extra={

<button
className="btn btn-primary"
type="button"
onClick={() => setStep((prev) => prev - 1)}
>
Previous

<button
className="btn btn-primary"
type="button"
value="Submit"
onClick={() => {
submit();
}}
>
Submit

}
/>
<button
type="button"
className=" template-variables-btn"
onClick={() => handleShow()}
>
Add More Template Variables

          <button
            onClick={() => {
              setIsOpen(!isOpen);
              handleShowPageAttributes();
            }}
            class="easy-email-editor-button page-attribute-toggle"
            title="redo"
            disabled=""
            type="button"
          >
            <FontAwesomeIcon icon={isOpen ? faCaretLeft : faCaretRight} />
          </button>

          {templateVariableModal && (
            <TemplateVariableModal
              data={{ templateVariableModal, isNewTemplateVariable }}
              handlers={{ handleClose, setIsNewTemplateVariable }}
            />
          )}
          {templateId && (
            <>
              <span
                className="open-close-form"
                onClick={() => setIsOpenDynamicForm(!isOpenDynamicForm)}
              >
                <FontAwesomeIcon
                  icon={isOpenDynamicForm ? faCaretDown : faCaretUp}
                />
                &nbsp;{isOpenDynamicForm ? "Back" : "Open Form"}
              </span>

              <div
                className="container dynamic-form-of-template"
                style={{
                  height: isOpenDynamicForm ? "90vh" : "0",
                  background: isOpenDynamicForm ? "gainsboro" : "white",
                  margin: isOpenDynamicForm ? "0" : "auto",
                }}
              >
                {isOpenDynamicForm && (
                  <TemplateVariablesForm
                    data={{
                      initialFormValues,
                      validationSchema,
                      wordForm,
                      templateTypes: [],
                    }}
                    handlers={{ handleFillWordForm }}
                  />
                )}
              </div>
            </>
          )}

          <StandardLayout categories={categories} showSourceCode={false}>
            <EmailEditor />
          </StandardLayout>
        </>
      );
    }}
  </EmailEditorProvider>
</div>

);
}