@griddo/ax 1.75.168 → 1.75.169

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.168",
+  "version": "1.75.169",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -87,14 +87,15 @@
     "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 +234,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77bd4bb799b614574187a9772e4fa1f84dec1d65"
+  "gitHead": "db5f28a576b8bae9193121620f538db55f6e2278"
 }

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

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

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

@@ -1,3 +1,17 @@
+import { DraftEntityMutability, DraftEntityType } from "draft-js";
+
+type DraftEntity = {
+  type: DraftEntityType;
+  mutability: DraftEntityMutability;
+  data: any;
+};
+const customEntityTransformFunc = (entity: DraftEntity, text: string): string | undefined => {
+  if (entity.type === "LINK" && entity.data.href) {
+    return entity.data.url;
+  }
+  return `<a href="${entity.data.url}" target="${entity.data.targetOption}">${text}</a>`;
+};
+
 const formatIframe = (iframeToFormat: string, firstConversion?: boolean) => {
   let iframeFormatted = iframeToFormat;
   if (firstConversion) {
@@ -16,4 +30,4 @@ const formatIframe = (iframeToFormat: string, firstConversion?: boolean) => {
   return iframeFormatted;
 };
 
-export { formatIframe };
+export { formatIframe, customEntityTransformFunc };

package/src/global.d.ts

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