@griddo/ax 1.75.162 → 1.75.164

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.162",
+  "version": "1.75.164",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -86,15 +86,14 @@
     "date-fns": "^2.21.3",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
+    "draft-convert": "^2.1.13",
     "draft-js": "^0.11.7",
     "draft-js-import-html": "^1.4.1",
-    "draftjs-to-html": "^0.9.1",
     "enhanced-resolve": "^5.8.2",
     "env-cmd": "^10.1.0",
     "file-loader": "^6.2.0",
     "find-up": "^5.0.0",
     "fs-extra": "7.0.1",
-    "html-to-draftjs": "^1.5.0",
     "html-to-image": "^1.9.0",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
@@ -233,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8fa58e0c531a549762db16ae2f85b6a02971ff51"
+  "gitHead": "3c0a6d18ce34990a17549ad4f67d17e461eef3b0"
 }

package/src/components/Fields/RichText/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, memo, useRef } from "react";
 import { Editor } from "react-draft-wysiwyg";
-import { EditorState, convertFromRaw, convertToRaw, ContentState } from "draft-js";
+import { EditorState, convertFromRaw, convertToRaw } from "draft-js";
 import { markdownToDraft, draftToMarkdown } from "markdown-draft-js";
-import draftToHtml from "draftjs-to-html";
-import htmlToDraft from "html-to-draftjs";
+import { convertFromHTML, convertToHTML } from "draft-convert";
 import { stateFromHTML } from "draft-js-import-html";
+import { formatIframe } from "./utils";
 import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 
 import * as S from "./style";
@@ -12,17 +12,17 @@ import * as S from "./style";
 const RichText = (props: IRichTextProps): JSX.Element => {
   const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false, delayed } = props;
 
-  const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
-  const { contentBlocks, entityMap } = rawData;
-  const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
+  const valueUnformatted = formatIframe(value, true);
+
+  const rawData = html ? convertFromHTML(valueUnformatted || "") : markdownToDraft(value);
+  const contentState = html ? rawData : convertFromRaw(rawData);
 
   const [editorState, setEditorState] = useState(() => EditorState.createWithContent(contentState));
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
-    const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
-    const { contentBlocks, entityMap } = rawData;
-    const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
+    const rawData = html ? convertFromHTML(valueUnformatted || "") : markdownToDraft(value);
+    const contentState = html ? rawData : convertFromRaw(rawData);
     setEditorState(EditorState.createWithContent(contentState));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID]);
@@ -47,7 +47,8 @@ const RichText = (props: IRichTextProps): JSX.Element => {
     const plainContent = content.getPlainText();
     const rawObject = convertToRaw(content);
     const markdownString =
-      plainContent === "" ? plainContent : html ? draftToHtml(rawObject) : draftToMarkdown(rawObject);
+      plainContent === "" ? plainContent : html ? formatIframe(convertToHTML(content)) : draftToMarkdown(rawObject);
+
     onChange(markdownString);
     error && handleValidation && handleValidation(plainContent);
   };
@@ -56,7 +57,8 @@ const RichText = (props: IRichTextProps): JSX.Element => {
     const content = stateFromHTML(pastedValue);
     setEditorState(() => EditorState.createWithContent(content));
     const rawObject = convertToRaw(content);
-    const markdownString = html ? draftToHtml(rawObject) : draftToMarkdown(rawObject);
+    const markdownString = html ? formatIframe(convertToHTML(content)) : draftToMarkdown(rawObject);
+
     onChange(markdownString);
     return false;
   };

package/src/components/Fields/RichText/utils.tsx

@@ -0,0 +1,19 @@
+const formatIframe = (iframeToFormat: string, firstConversion?: boolean) => {
+  let iframeFormatted = iframeToFormat;
+  if (firstConversion) {
+    if (iframeFormatted.match(/<iframe[^>]*?(?:\/>|>[^<]*?<\/iframe>)/g)) {
+      iframeFormatted = iframeToFormat.replaceAll("<iframe", "&lt;iframe");
+      iframeFormatted = iframeFormatted.replaceAll("></iframe>", "&gt;&lt;/iframe&gt;");
+    }
+  } else {
+    if (iframeToFormat.match(/(?:&lt;iframe[^>]*)/g)) {
+      iframeFormatted = iframeToFormat.replaceAll("&lt;iframe", "<iframe");
+      iframeFormatted = iframeFormatted.replaceAll("&gt;&lt;/iframe&gt;", "></iframe>");
+      iframeFormatted = iframeFormatted.replace(/&quot;/g, '"');
+      iframeFormatted = iframeFormatted.replace(/&amp;/g, "&");
+    }
+  }
+  return iframeFormatted;
+};
+
+export { formatIframe };

package/src/global.d.ts

@@ -7,5 +7,4 @@ declare module "is-wsl";
 declare module "react-draft-wysiwyg";
 declare module "history";
 declare module "@griddo/core";
-declare module "draftjs-to-html";
-declare module "html-to-draftjs";
+declare module "draft-convert";