Exports transformEditorContent function which can transform html stri…

…ng to editor supported format (#916)

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*$/);

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, "");

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,
 };

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 = [

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)[]