refactor: organize app extensions

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

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-app-extension.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { CheatsheetExtension } from '../../../components/editor-page/cheatsheet/cheatsheet-extension'
+import type { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
+import { AppExtension } from '../../_base-classes/app-extension'
+import { IframeCapsuleMarkdownExtension } from './iframe-capsule-markdown-extension'
+
+export class IframeCapsuleAppExtension extends AppExtension {
+  buildMarkdownRendererExtensions(): MarkdownRendererExtension[] {
+    return [new IframeCapsuleMarkdownExtension()]
+  }
+
+  buildCheatsheetExtensions(): CheatsheetExtension[] {
+    return [
+      {
+        i18nKey: 'iframeCapsule',
+        categoryI18nKey: 'embedding'
+      }
+    ]
+  }
+}

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-markdown-extension.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/_base-classes/markdown-renderer-extension'
+import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
+import { IframeCapsuleReplacer } from './iframe-capsule-replacer'
+
+/**
+ * Adds a replacer that capsules iframes in a click shield.
+ */
+export class IframeCapsuleMarkdownExtension extends MarkdownRendererExtension {
+  public buildReplacers(): ComponentReplacer[] {
+    return [new IframeCapsuleReplacer()]
+  }
+
+  public buildTagNameAllowList(): string[] {
+    return ['iframe']
+  }
+}

frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { ClickShield } from '../../../components/markdown-renderer/replace-components/click-shield/click-shield'
+import type {
+  NativeRenderer,
+  NodeReplacement,
+  SubNodeTransform
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
+import {
+  ComponentReplacer,
+  DO_NOT_REPLACE
+} from '../../../components/markdown-renderer/replace-components/component-replacer'
+import type { Element } from 'domhandler'
+import React from 'react'
+import { Globe as IconGlobe } from 'react-bootstrap-icons'
+
+/**
+ * Capsules <iframe> elements with a click shield.
+ *
+ * @see ClickShield
+ */
+export class IframeCapsuleReplacer extends ComponentReplacer {
+  replace(node: Element, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): NodeReplacement {
+    return node.name !== 'iframe' ? (
+      DO_NOT_REPLACE
+    ) : (
+      <ClickShield
+        hoverIcon={IconGlobe}
+        targetDescription={node.attribs.src}
+        data-cypress-id={'iframe-capsule-click-shield'}>
+        {nativeRenderer()}
+      </ClickShield>
+    )
+  }
+}