From c057a75f830eab7b47de9e8098b6b7c711b7f8e2 Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Fri, 25 Oct 2024 11:40:55 +0200
Subject: [PATCH 1/2] fix(react): allow to use polyfills to parse html

---
 packages/react/lib/Builder/index.tsx          | 11 +++++-
 .../react/lib/components/Button/index.tsx     | 36 ++++++++++++-------
 packages/react/lib/components/Text/index.tsx  | 30 +++++++++++-----
 packages/react/lib/components/Title/index.tsx | 13 +++++--
 packages/react/lib/contexts.ts                |  4 +++
 packages/react/lib/utils.ts                   | 27 ++++++++------
 6 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/packages/react/lib/Builder/index.tsx b/packages/react/lib/Builder/index.tsx
index 7497b34ca..bc578874f 100644
--- a/packages/react/lib/Builder/index.tsx
+++ b/packages/react/lib/Builder/index.tsx
@@ -49,6 +49,10 @@ export declare interface BuilderProps extends SpecialComponentPropsWithoutRef {
   topHistoryButtonsContainer?: string | HTMLElement | DocumentFragment;
   topHistoryButtonsEnabled?: boolean;
   value?: Array<ElementObject>;
+  polyfills?: {
+    DOMParser: typeof DOMParser;
+    XMLSerializer: typeof XMLSerializer;
+  };
   onChange?(content: Array<ElementObject>): void;
   onImageUpload?(event: FormEvent, opts: {
     element?: ElementObject;
@@ -66,6 +70,7 @@ const Builder = forwardRef<BuilderRef, BuilderProps>(({
   onImageUpload,
   topHistoryButtonsContainer,
   bottomHistoryButtonsContainer,
+  polyfills,
   historyEnabled = true,
   topHistoryButtonsEnabled = true,
   bottomHistoryButtonsEnabled = true,
@@ -107,7 +112,11 @@ const Builder = forwardRef<BuilderRef, BuilderProps>(({
     rootRef: innerRef,
     floatingsRef,
     editableType,
-  }), [builder, content, addons, rootBoundary, onImageUpload, editableType]);
+    polyfills,
+  }), [
+    builder, content, addons, rootBoundary, onImageUpload, polyfills,
+    editableType,
+  ]);
 
   const onAppend = (component: ComponentObject) => {
     catalogueRef.current?.close();
diff --git a/packages/react/lib/components/Button/index.tsx b/packages/react/lib/components/Button/index.tsx
index b7aa1de53..75a084317 100644
--- a/packages/react/lib/components/Button/index.tsx
+++ b/packages/react/lib/components/Button/index.tsx
@@ -1,8 +1,9 @@
-import type { ComponentPropsWithoutRef } from 'react';
 import type { ElementObject } from '@oakjs/core';
+import { type ComponentPropsWithoutRef, useContext } from 'react';
 import { Button, classNames } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
+import { BuilderContext, type BuilderContextValue } from '../../contexts';
 
 export interface ButtonProps extends ComponentPropsWithoutRef<typeof Button> {
   element: ElementObject;
@@ -11,17 +12,28 @@ export interface ButtonProps extends ComponentPropsWithoutRef<typeof Button> {
 const Button_ = ({
   element,
   className,
-}: ButtonProps) => !element.content ? null : (
-  <Button
-    className={classNames(
-      'default !oak-pointer-events-none sanitize-html',
-      className
-    )}
-    dangerouslySetInnerHTML={
-      { __html: sanitizeHTML(element.content as string) }
-    }
-  />
-);
+}: ButtonProps) => {
+  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+
+  if (!element.content) {
+    return null;
+  }
+
+  return (
+    <Button
+      className={classNames(
+        'default !oak-pointer-events-none sanitize-html',
+        className
+      )}
+      dangerouslySetInnerHTML={
+        { __html: sanitizeHTML(element.content as string, {
+          parser: polyfills?.DOMParser,
+          serializer: polyfills?.XMLSerializer,
+        }) }
+      }
+    />
+  );
+};
 
 Button_.displayName = 'Button';
 
diff --git a/packages/react/lib/components/Text/index.tsx b/packages/react/lib/components/Text/index.tsx
index 3b6169cba..329725cf7 100644
--- a/packages/react/lib/components/Text/index.tsx
+++ b/packages/react/lib/components/Text/index.tsx
@@ -1,8 +1,9 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, useContext } from 'react';
 import type { ElementObject } from '@oakjs/core';
 import { classNames } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
+import { BuilderContext, type BuilderContextValue } from '../../contexts';
 
 export interface TextComponentProps extends ComponentPropsWithoutRef<'div'> {
   element: ElementObject;
@@ -11,14 +12,25 @@ export interface TextComponentProps extends ComponentPropsWithoutRef<'div'> {
 const Text = ({
   element,
   className,
-}: TextComponentProps) => !element.content ? null : (
-  <div
-    className={classNames('junipero sanitize-html', className)}
-    dangerouslySetInnerHTML={
-      { __html: sanitizeHTML(element.content as string) }
-    }
-  />
-);
+}: TextComponentProps) => {
+  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+
+  if (!element.content) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames('junipero sanitize-html', className)}
+      dangerouslySetInnerHTML={
+        { __html: sanitizeHTML(element.content as string, {
+          parser: polyfills?.DOMParser,
+          serializer: polyfills?.XMLSerializer,
+        }) }
+      }
+    />
+  );
+};
 
 Text.displayName = 'TextComponent';
 
diff --git a/packages/react/lib/components/Title/index.tsx b/packages/react/lib/components/Title/index.tsx
index bcc453501..ba99aed3f 100644
--- a/packages/react/lib/components/Title/index.tsx
+++ b/packages/react/lib/components/Title/index.tsx
@@ -1,16 +1,20 @@
 import type { ElementObject } from '@oakjs/core';
+import { useContext } from 'react';
 import {
   type SpecialComponentPropsWithoutRef,
   classNames,
 } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
+import { BuilderContext, type BuilderContextValue } from '../../contexts';
 
 export interface TitleProps extends SpecialComponentPropsWithoutRef {
   element: ElementObject;
 }
 
 const Title = ({ element, className }: TitleProps) => {
+  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+
   const Tag = element.headingLevel || 'h1';
   const sizes: { [key: string]: string } = {
     h1: '!oak-text-4xl',
@@ -21,7 +25,9 @@ const Title = ({ element, className }: TitleProps) => {
     h6: '!oak-text-md',
   };
 
-  if (!element.content) return null;
+  if (!element.content) {
+    return null;
+  }
 
   return (
     <Tag
@@ -31,7 +37,10 @@ const Title = ({ element, className }: TitleProps) => {
         className
       )}
       dangerouslySetInnerHTML={
-        { __html: sanitizeHTML(element.content as string) }
+        { __html: sanitizeHTML(element.content as string, {
+          parser: polyfills?.DOMParser,
+          serializer: polyfills?.XMLSerializer,
+        }) }
       }
     />
   );
diff --git a/packages/react/lib/contexts.ts b/packages/react/lib/contexts.ts
index 397efe39b..76cb50bea 100644
--- a/packages/react/lib/contexts.ts
+++ b/packages/react/lib/contexts.ts
@@ -33,6 +33,10 @@ export declare type BuilderContextValue = {
   rootRef?: MutableRefObject<HTMLDivElement>;
   floatingsRef?: MutableRefObject<HTMLDivElement>;
   editableType?: EditableType;
+  polyfills?: {
+    DOMParser: typeof DOMParser;
+    XMLSerializer: typeof XMLSerializer;
+  };
 };
 
 export const BuilderContext = createContext<BuilderContextValue>({});
diff --git a/packages/react/lib/utils.ts b/packages/react/lib/utils.ts
index de898ee23..208eeb08f 100644
--- a/packages/react/lib/utils.ts
+++ b/packages/react/lib/utils.ts
@@ -1,23 +1,30 @@
 export const copyToClipboard = (value: string) =>
   globalThis.navigator.clipboard.writeText(value);
 
-export const sanitizeHTML = (content: string) => {
+export const sanitizeHTML = (content: string, opts?: {
+  parser?: typeof DOMParser;
+  serializer?: typeof XMLSerializer;
+}) => {
   try {
-    const parsed = new DOMParser().parseFromString(content, 'text/html');
+    const parsed = new (opts?.parser || DOMParser)()
+      .parseFromString(content, 'text/html');
 
     // Remove script & style tags
-    parsed
-      .querySelectorAll('script, style, iframe, object, video, audio')
-      .forEach(item => item.parentNode.removeChild(item));
+    ['script', 'style', 'iframe', 'object', 'video', 'audio'].forEach(t => {
+      Array.from(parsed.getElementsByTagName(t))
+        .forEach(item => item.parentNode.removeChild(item));
+    });
 
     // Disable all links
-    parsed.querySelectorAll('a[href]').forEach(item => {
-      item.removeAttribute('href');
-      item.removeAttribute('target');
-      item.setAttribute('role', 'link');
+    Array.from(parsed.getElementsByTagName('a')).forEach(item => {
+      if (item.hasAttribute('href')) {
+        item.removeAttribute('href');
+        item.removeAttribute('target');
+        item.setAttribute('role', 'link');
+      }
     });
 
-    return parsed.body.innerHTML;
+    return new (opts?.serializer || XMLSerializer)().serializeToString(parsed);
   } catch (e) {
     console.error(e);
 

From fb1aab8752e88a8ba8463de753da90dbd886a01c Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Fri, 25 Oct 2024 14:25:05 +0200
Subject: [PATCH 2/2] refactor: clean code

---
 packages/react/lib/components/Button/index.tsx | 6 +++---
 packages/react/lib/components/Text/index.tsx   | 6 +++---
 packages/react/lib/components/Title/index.tsx  | 5 ++---
 packages/react/lib/hooks.ts                    | 3 ++-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/lib/components/Button/index.tsx b/packages/react/lib/components/Button/index.tsx
index 75a084317..69356b010 100644
--- a/packages/react/lib/components/Button/index.tsx
+++ b/packages/react/lib/components/Button/index.tsx
@@ -1,9 +1,9 @@
+import type { ComponentPropsWithoutRef } from 'react';
 import type { ElementObject } from '@oakjs/core';
-import { type ComponentPropsWithoutRef, useContext } from 'react';
 import { Button, classNames } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
-import { BuilderContext, type BuilderContextValue } from '../../contexts';
+import { useBuilder } from '../../hooks';
 
 export interface ButtonProps extends ComponentPropsWithoutRef<typeof Button> {
   element: ElementObject;
@@ -13,7 +13,7 @@ const Button_ = ({
   element,
   className,
 }: ButtonProps) => {
-  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+  const { polyfills } = useBuilder();
 
   if (!element.content) {
     return null;
diff --git a/packages/react/lib/components/Text/index.tsx b/packages/react/lib/components/Text/index.tsx
index 329725cf7..8d793c355 100644
--- a/packages/react/lib/components/Text/index.tsx
+++ b/packages/react/lib/components/Text/index.tsx
@@ -1,9 +1,9 @@
-import { type ComponentPropsWithoutRef, useContext } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import type { ElementObject } from '@oakjs/core';
 import { classNames } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
-import { BuilderContext, type BuilderContextValue } from '../../contexts';
+import { useBuilder } from '../../hooks';
 
 export interface TextComponentProps extends ComponentPropsWithoutRef<'div'> {
   element: ElementObject;
@@ -13,7 +13,7 @@ const Text = ({
   element,
   className,
 }: TextComponentProps) => {
-  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+  const { polyfills } = useBuilder();
 
   if (!element.content) {
     return null;
diff --git a/packages/react/lib/components/Title/index.tsx b/packages/react/lib/components/Title/index.tsx
index ba99aed3f..1d91dc2a8 100644
--- a/packages/react/lib/components/Title/index.tsx
+++ b/packages/react/lib/components/Title/index.tsx
@@ -1,19 +1,18 @@
 import type { ElementObject } from '@oakjs/core';
-import { useContext } from 'react';
 import {
   type SpecialComponentPropsWithoutRef,
   classNames,
 } from '@junipero/react';
 
 import { sanitizeHTML } from '../../utils';
-import { BuilderContext, type BuilderContextValue } from '../../contexts';
+import { useBuilder } from '../../hooks';
 
 export interface TitleProps extends SpecialComponentPropsWithoutRef {
   element: ElementObject;
 }
 
 const Title = ({ element, className }: TitleProps) => {
-  const { polyfills } = useContext<BuilderContextValue>(BuilderContext);
+  const { polyfills } = useBuilder();
 
   const Tag = element.headingLevel || 'h1';
   const sizes: { [key: string]: string } = {
diff --git a/packages/react/lib/hooks.ts b/packages/react/lib/hooks.ts
index 93ee4ac18..5e30fd5f7 100644
--- a/packages/react/lib/hooks.ts
+++ b/packages/react/lib/hooks.ts
@@ -12,6 +12,7 @@ import {
 
 import type { EditableType } from './types';
 import {
+  type BuilderContextValue,
   BuilderContext,
   EditableFormContext,
   ElementContext,
@@ -153,6 +154,6 @@ export const useRootBuilder = ({
   return { builder, ...state };
 };
 
-export const useBuilder = () => useContext(BuilderContext);
+export const useBuilder = () => useContext<BuilderContextValue>(BuilderContext);
 export const useEditableForm = () => useContext(EditableFormContext);
 export const useElement = () => useContext(ElementContext);