From e9defd60dcbae983aef6b00408ec7fd791173835 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sun, 14 Nov 2021 18:44:55 +0100 Subject: [PATCH] Restructure click shield (#1611) * Rename one-click-embedding to click shield * Removes the static fallback image from the vimeo frame. The set URL is broken. * Adds the ability to define background colors for the click shield background Signed-off-by: Tilman Vatteroth --- cypress/integration/linkEmbedder.spec.ts | 9 +- cypress/integration/shortcodes.spec.ts | 4 +- locales/en.json | 2 +- .../asciinema/asciinema-frame.tsx | 29 +++-- .../click-shield.scss} | 27 ++-- .../click-shield/click-shield.tsx | 120 ++++++++++++++++++ .../replace-components/gist/gist-frame.scss | 6 - .../replace-components/gist/gist-frame.tsx | 13 +- .../replace-components/gist/gist-preview.png | Bin 30579 -> 0 bytes .../gist/gist-preview.png.license | 3 - .../one-click-frame/one-click-embedding.tsx | 88 ------------- .../replace-components/vimeo/vimeo-frame.tsx | 32 +++-- .../youtube/youtube-frame.tsx | 31 +++-- 13 files changed, 209 insertions(+), 155 deletions(-) rename src/components/markdown-renderer/replace-components/{one-click-frame/one-click-embedding.scss => click-shield/click-shield.scss} (56%) create mode 100644 src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx delete mode 100644 src/components/markdown-renderer/replace-components/gist/gist-preview.png delete mode 100644 src/components/markdown-renderer/replace-components/gist/gist-preview.png.license delete mode 100644 src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx diff --git a/cypress/integration/linkEmbedder.spec.ts b/cypress/integration/linkEmbedder.spec.ts index afeedcd3a..9ed427f38 100644 --- a/cypress/integration/linkEmbedder.spec.ts +++ b/cypress/integration/linkEmbedder.spec.ts @@ -14,7 +14,8 @@ describe('Link gets replaced with embedding: ', () => { it('GitHub Gist', () => { cy.setCodemirrorContent('https://gist.github.com/schacon/1') cy.getMarkdownBody() - .find('.one-click-embedding.gist-frame') + .find('[data-cypress-id="click-shield-gist"] .preview-background') + .parent() .click() cy.getMarkdownBody() .find('iframe[data-cypress-id=gh-gist]') @@ -24,7 +25,7 @@ describe('Link gets replaced with embedding: ', () => { it('YouTube', () => { cy.setCodemirrorContent('https://www.youtube.com/watch?v=YE7VzlLtp-4') cy.getMarkdownBody() - .find('.one-click-embedding-preview') + .find('[data-cypress-id="click-shield-youtube"] .preview-background') .should('have.attr', 'src', 'https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg') .parent() .click() @@ -46,7 +47,7 @@ describe('Link gets replaced with embedding: ', () => { }) cy.setCodemirrorContent('https://vimeo.com/23237102') cy.getMarkdownBody() - .find('.one-click-embedding-preview') + .find('[data-cypress-id="click-shield-vimeo"] .preview-background') .should('have.attr', 'src', 'https://i.vimeocdn.com/video/503631401_640.jpg') .parent() .click() @@ -58,7 +59,7 @@ describe('Link gets replaced with embedding: ', () => { it('Asciinema', () => { cy.setCodemirrorContent('https://asciinema.org/a/117928') cy.getMarkdownBody() - .find('.one-click-embedding-preview') + .find('[data-cypress-id="click-shield-asciinema"] .preview-background') .should('have.attr', 'src', 'https://asciinema.org/a/117928.png') .parent() .click() diff --git a/cypress/integration/shortcodes.spec.ts b/cypress/integration/shortcodes.spec.ts index 79cc514bb..8a5050734 100644 --- a/cypress/integration/shortcodes.spec.ts +++ b/cypress/integration/shortcodes.spec.ts @@ -37,10 +37,10 @@ describe('Short code gets replaced or rendered: ', () => { }) describe('youtube', () => { - it('renders one-click-embedding', () => { + it('renders click-shield', () => { cy.setCodemirrorContent(`{%youtube YE7VzlLtp-4 %}`) cy.getMarkdownBody() - .find('.one-click-embedding.embed-responsive-item') + .find('[data-cypress-id="click-shield-youtube"]') }) }) }) diff --git a/locales/en.json b/locales/en.json index 59975064c..477719aa0 100644 --- a/locales/en.json +++ b/locales/en.json @@ -29,7 +29,7 @@ "svg": "Save as SVG", "errorJson": "Error parsing the JSON" }, - "one-click-embedding": { + "clickShield": { "previewHoverText": "Click to load content from {{target}}" } }, diff --git a/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx b/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx index 6d4939289..e22613fe8 100644 --- a/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx +++ b/src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx @@ -5,22 +5,29 @@ */ import React from 'react' -import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' +import { ClickShield } from '../click-shield/click-shield' import type { IdProps } from '../custom-tag-with-id-component-replacer' +/** + * Renders an embedding for https://asciinema.org + * + * @param id The id from the asciinema url + */ export const AsciinemaFrame: React.FC = ({ id }) => { return ( - -