refactor(renderer): convert html/markdown-to-react converters from hooks to components

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/html-to-react/__snapshots__/html-to-react.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HTML to React renders basic html correctly 1`] = `
+<div>
+  <p>
+    This is a test 
+    <b>
+      sentence
+    </b>
+  </p>
+</div>
+`;
+
+exports[`HTML to React will forward the DomPurify settings 1`] = `
+<div>
+  <test-tag>
+    Test!
+  </test-tag>
+</div>
+`;
+
+exports[`HTML to React will forward the parser options 1`] = `
+<div>
+  <p>
+    Hijacked!
+  </p>
+</div>
+`;
+
+exports[`HTML to React won't render script tags 1`] = `<div />`;

frontend/src/components/common/html-to-react/html-to-react.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { HtmlToReact } from './html-to-react'
+import { render } from '@testing-library/react'
+
+describe('HTML to React', () => {
+  it('renders basic html correctly', () => {
+    const view = render(<HtmlToReact htmlCode={'<p>This is a test <b>sentence</b></p>'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it("won't render script tags", () => {
+    const view = render(<HtmlToReact htmlCode={'<script type="application/javascript">alert("XSS!")</script>'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('will forward the DomPurify settings', () => {
+    const view = render(
+      <HtmlToReact domPurifyConfig={{ ADD_TAGS: ['test-tag'] }} htmlCode={'<test-tag>Test!</test-tag>'} />
+    )
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('will forward the parser options', () => {
+    let transformerVisited = false
+    let preprocessNodesVisited = false
+
+    const view = render(
+      <HtmlToReact
+        htmlCode={'<p>This is a sentence</p>'}
+        parserOptions={{
+          transform: () => {
+            transformerVisited = true
+            return <p>Hijacked!</p>
+          },
+          preprocessNodes: (document) => {
+            preprocessNodesVisited = true
+            return document
+          }
+        }}
+      />
+    )
+    expect(view.container).toMatchSnapshot()
+    expect(preprocessNodesVisited).toBeTruthy()
+    expect(transformerVisited).toBeTruthy()
+  })
+})

frontend/src/components/common/html-to-react/html-to-react.tsx

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { ParserOptions } from '@hedgedoc/html-to-react'
+import convertHtmlToReact from '@hedgedoc/html-to-react'
+import type DOMPurify from 'dompurify'
+import { sanitize } from 'dompurify'
+import React, { Fragment, useMemo } from 'react'
+
+export interface HtmlToReactProps {
+  htmlCode: string
+  domPurifyConfig?: DOMPurify.Config
+  parserOptions?: ParserOptions
+}
+
+/**
+ * Renders
+ * @param htmlCode
+ * @param domPurifyConfig
+ * @param parserOptions
+ * @constructor
+ */
+export const HtmlToReact: React.FC<HtmlToReactProps> = ({ htmlCode, domPurifyConfig, parserOptions }) => {
+  const elements = useMemo(() => {
+    const sanitizedHtmlCode = sanitize(htmlCode, { ...domPurifyConfig, RETURN_DOM_FRAGMENT: false, RETURN_DOM: false })
+    return convertHtmlToReact(sanitizedHtmlCode, parserOptions)
+  }, [domPurifyConfig, htmlCode, parserOptions])
+
+  return <Fragment>{elements}</Fragment>
+}