Iframe capsule (#1663)

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

CHANGELOG.md

@@ -81,6 +81,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - The email sign-in/registration does not require an email address anymore but uses a username
 - The history shows both the entries saved in LocalStorage and the entries saved on the server together
 - The gist embedding uses a click-shield, like vimeo and youtube
+- HTML-Iframes are capsuled in click-shields
 - Use [Twemoji](https://twemoji.twitter.com/) as icon font
 - The `[name=...]`, `[time=...]` and `[color=...]` tags may now be used anywhere in the document and not just inside of blockquotes and lists.
 - The <i class="fa fa-picture-o"/> (add image) and <i class="fa fa-link"/> (add link) toolbar buttons put selected links directly in the `()` instead of the `[]` part of the generated markdown.

cypress/integration/iframe-capsule.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('Iframe capsule', () => {
+  beforeEach(() => {
+    cy.visitTestEditor()
+  })
+
+  it('shows a clickable click shield instead of the iframe', () => {
+    cy.setCodemirrorContent('<iframe src="https://example.org"></iframe>')
+    cy.getMarkdownBody().findById('iframe-capsule-click-shield').should('exist').click()
+    cy.getMarkdownBody().find('iframe').should('exist').should('have.attr', 'src', 'https://example.org')
+  })
+})

src/components/markdown-renderer/hooks/use-markdown-extensions.ts

@@ -39,6 +39,7 @@ import type { LineMarkers } from '../markdown-extension/linemarker/add-line-mark
 import type { ImageClickHandler } from '../markdown-extension/image/proxy-image-replacer'
 import type { TocAst } from 'markdown-it-toc-done-right'
 import type { MarkdownExtension } from '../markdown-extension/markdown-extension'
+import { IframeCapsuleMarkdownExtension } from '../markdown-extension/iframe-capsule/iframe-capsule-markdown-extension'
 
 /**
  * Provides a list of {@link MarkdownExtension markdown extensions} that is a combination of the common extensions and the given additional.
@@ -73,6 +74,7 @@ export const useMarkdownExtensions = (
         currentLineMarkers ? (lineMarkers) => (currentLineMarkers.current = lineMarkers) : undefined,
         lineOffset
       ),
+      new IframeCapsuleMarkdownExtension(),
       new GistMarkdownExtension(),
       new YoutubeMarkdownExtension(),
       new VimeoMarkdownExtension(),

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
+    }
+  }
+}

src/components/markdown-renderer/replace-components/click-shield/click-shield.scss

@@ -43,5 +43,13 @@
     object-fit: cover;
     min-height: 300px;
     width: 100%;
+
+    body.dark &{
+      @import "../../../../style/variables.dark";
+      box-shadow: inset fade-out($black, 0.5) 0 0 20px;
+    }
+
+    @import "../../../../style/variables.light";
+    box-shadow: inset fade-out($black, 0.5) 0 0 20px;
   }
 }

src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx

@@ -21,9 +21,8 @@ const log = new Logger('OneClickEmbedding')
 interface ClickShieldProps extends PropsWithDataCypressId {
   onImageFetch?: () => Promise<string>
   fallbackPreviewImageUrl?: string
-  hoverIcon?: IconName
-  hoverTextI18nKey?: string
-  targetDescription?: string
+  hoverIcon: IconName
+  targetDescription: string
   containerClassName?: string
   fallbackBackgroundColor?: Property.BackgroundColor
 }
@@ -98,21 +97,21 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
     )
   }, [fallbackBackgroundStyle, previewHoverText, previewImageUrl])
 
+  const hoverTextTranslationValues = useMemo(() => ({ target: targetDescription }), [targetDescription])
+
   return (
     <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
       <ShowIf condition={showChildren}>{children}</ShowIf>
       <ShowIf condition={!showChildren}>
         <span className={`click-shield embed-responsive embed-responsive-16by9`} onClick={doShowChildren}>
           {previewBackground}
-          <ShowIf condition={!!hoverIcon}>
-            <span className={`preview-hover text-center`}>
-              <span className={'preview-hover-text'}>
-                <Trans i18nKey={'renderer.clickShield.previewHoverText'} tOptions={{ target: targetDescription }} />
-              </span>
-              <br />
-              <ForkAwesomeIcon icon={hoverIcon as IconName} size={'5x'} className={'mb-2'} />
+          <span className={`preview-hover text-center`}>
+            <span className={'preview-hover-text'}>
+              <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
             </span>
-          </ShowIf>
+            <br />
+            <ForkAwesomeIcon icon={hoverIcon} size={'5x'} className={'mb-2'} />
+          </span>
         </span>
       </ShowIf>
     </span>