feat: add mui formik text editor

src/components/mui/formik-inputs/mui-formik-text-editor.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { useField } from "formik";
+import { InputLabel } from "@mui/material";
+import TextEditorV3 from "../../inputs/editor-input-v3";
+import { normalizeHtmlString } from "../../../utils/methods";
+
+const FormikTextEditor = ({ name, label = "", options = {}, licence, ...props }) => {
+  const [field, meta, helpers] = useField(name);
+  const mergedOptions = { tabIndex: 0, allowTabNavigation: true, ...options };
+
+  return (
+    <>
+      {label && (
+        <InputLabel htmlFor={name}>
+          {label}
+        </InputLabel>
+      )}
+      <TextEditorV3
+        id={name}
+        value={field.value}
+        options={mergedOptions}
+        onChange={(e) => {
+          const stringValue = normalizeHtmlString(e.target.value);
+          helpers.setValue(stringValue);
+        }}
+        error={meta.touched && meta.error}
+        license={licence}
+        {...props}
+      />
+    </>
+  );
+};
+
+export default FormikTextEditor;

src/utils/methods.js

@@ -311,3 +311,9 @@ export const empty = (value) => {
 };
 
 export const isSentryInitialized = () => typeof window !== "undefined" && !!window.SENTRY_DSN;
+
+export const normalizeHtmlString = (textInput) => {
+  if (!textInput) return "";
+  const doc = new DOMParser().parseFromString(textInput, "text/html");
+  return doc.body.textContent.trim().length === 0 ? "" : textInput;
+};