From aaab187a3ce81e45ddbcd1618bcad46d807530c8 Mon Sep 17 00:00:00 2001
From: Gaagul Gigi <70290286+gaagul@users.noreply.github.com>
Date: Thu, 19 Oct 2023 23:58:57 +0530
Subject: [PATCH] Exports transformEditorContent function which can transform
 html string to editor supported format (#916)

---
 src/components/Editor/constants.js |  7 +++++++
 src/components/Editor/utils.js     | 10 ++++++++++
 src/index.js                       |  6 +++++-
 stories/API-Reference/constants.js |  4 ++++
 types.d.ts                         |  2 ++
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Editor/constants.js b/src/components/Editor/constants.js
index b591b529..cebdac64 100644
--- a/src/components/Editor/constants.js
+++ b/src/components/Editor/constants.js
@@ -18,3 +18,10 @@ export const EDITOR_PADDING_SIZE = 12;
 export const EDITOR_BORDER_SIZE = 1;
 
 export const EDITOR_LINE_HEIGHT = 21;
+
+export const IMAGE_REGEX = new RegExp(/(<img[^>]*?>)(?![\s\S]*<\/figure>)/g);
+export const IMAGE_REPLACEMENT_PATTERN = "<figure>$1</figure>";
+export const EMPTY_DIV_REGEX = new RegExp(
+  /<div[^>]*?>\s*(?:<br[^>]*?>)\s*<\/div>/g
+);
+export const TRAILING_BR_REGEX = new RegExp(/\s*(?:<br[^>]*?>)+\s*$/);
diff --git a/src/components/Editor/utils.js b/src/components/Editor/utils.js
index efd45053..dff36c38 100644
--- a/src/components/Editor/utils.js
+++ b/src/components/Editor/utils.js
@@ -8,6 +8,10 @@ import {
   EDITOR_LINE_HEIGHT,
   EDITOR_BORDER_SIZE,
   EDITOR_PADDING_SIZE,
+  IMAGE_REGEX,
+  IMAGE_REPLACEMENT_PATTERN,
+  EMPTY_DIV_REGEX,
+  TRAILING_BR_REGEX,
 } from "./constants";
 
 export const getEditorStyles = ({ rows }) => {
@@ -62,3 +66,9 @@ export const validateAndFormatUrl = url => {
 
   return url;
 };
+
+export const transformEditorContent = content =>
+  content
+    ?.replaceAll(IMAGE_REGEX, IMAGE_REPLACEMENT_PATTERN)
+    ?.replaceAll(EMPTY_DIV_REGEX, "")
+    ?.replace(TRAILING_BR_REGEX, "");
diff --git a/src/index.js b/src/index.js
index ebe753ce..3ba88fd6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,7 @@
-import { isEditorOverlaysActive } from "components/Editor/utils";
+import {
+  isEditorOverlaysActive,
+  transformEditorContent,
+} from "components/Editor/utils";
 import { substituteVariables } from "components/EditorContent/utils";
 import { isEditorEmpty } from "utils/common";
 import { initializeI18n } from "utils/i18next";
@@ -22,4 +25,5 @@ export {
   FormikEditor,
   Attachments,
   isEditorOverlaysActive,
+  transformEditorContent,
 };
diff --git a/stories/API-Reference/constants.js b/stories/API-Reference/constants.js
index 14e5ede6..8b0ea7e9 100644
--- a/stories/API-Reference/constants.js
+++ b/stories/API-Reference/constants.js
@@ -31,6 +31,10 @@ export const EDITOR_METHODS_TABLE_ROWS = [
     "isEditorOverlaysActive",
     "Returns a boolean value indicating whether the editor overlays are active or not.",
   ],
+  [
+    "transformEditorContent",
+    "Modifies the editor's content by performing specific operations, such as replacing <img> tags with <figure> tags, removing empty <div> tags containing line breaks, and eliminating trailing line breaks."
+  ]
 ];
 
 export const EDITOR_PROPS = [
diff --git a/types.d.ts b/types.d.ts
index b3a5b7ab..aeab6ea5 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -163,6 +163,8 @@ export function isEditorEmpty(htmlContent: string | null | undefined): boolean;
 
 export function isEditorOverlaysActive(): boolean;
 
+export function transformEditorContent(content: string): string;
+
 export function substituteVariables(
   highlightedContent: string,
   variables: (VariableCategory | Variable)[]