Iframe capsule (#1663)

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

src/components/markdown-renderer/markdown-extension/iframe-capsule/iframe-capsule-markdown-extension.ts

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

src/components/markdown-renderer/markdown-extension/iframe-capsule/iframe-capsule-replacer.tsx

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { NativeRenderer, NodeReplacement, SubNodeTransform } from '../../replace-components/component-replacer'
+import { ComponentReplacer, DO_NOT_REPLACE } from '../../replace-components/component-replacer'
+import type { Element } from 'domhandler'
+import { ClickShield } from '../../replace-components/click-shield/click-shield'
+
+/**
+ * Capsules <iframe> elements with a click shield.
+ *
+ * @see ClickShield
+ */
+export class IframeCapsuleReplacer extends ComponentReplacer {
+  replace(node: Element, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): NodeReplacement {
+    if (node.name === 'iframe') {
+      return (
+        <ClickShield
+          hoverIcon={'globe'}
+          targetDescription={node.attribs.src}
+          data-cypress-id={'iframe-capsule-click-shield'}>
+          {nativeRenderer()}
+        </ClickShield>
+      )
+    } else {
+      return DO_NOT_REPLACE
+    }
+  }
+}