From dee494386a18ec2f826e6660af87a64adafe7f51 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Tue, 31 Aug 2021 22:37:33 +0200 Subject: [PATCH] Replace custom gist implementation with github rendering (#1436) * Replace custom gist implementation with github rendering Signed-off-by: Tilman Vatteroth --- CHANGELOG.md | 1 + .../replace-components/gist/gist-frame.scss | 15 +++ .../replace-components/gist/gist-frame.tsx | 86 +++++---------- .../gist/use-resize-gist-frame.ts | 101 ++++++++++++++++++ 4 files changed, 143 insertions(+), 60 deletions(-) create mode 100644 src/components/markdown-renderer/replace-components/gist/use-resize-gist-frame.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 054cdc606..b5c3c022d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -91,6 +91,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0 - Change editor font to "Fira Code" - Note tags can be set as yaml-array in frontmatter. - If only one external login provider is configured, the sign-in button will directly link to it. +- Links in Gist-Frames work only if explicitly opened in new tabs. --- diff --git a/src/components/markdown-renderer/replace-components/gist/gist-frame.scss b/src/components/markdown-renderer/replace-components/gist/gist-frame.scss index f5757ce57..08d0752d8 100644 --- a/src/components/markdown-renderer/replace-components/gist/gist-frame.scss +++ b/src/components/markdown-renderer/replace-components/gist/gist-frame.scss @@ -9,3 +9,18 @@ filter: blur(3px); } } + +.gist-resizer-row { + display: flex; + justify-content: center; + + .gist-resizer { + display: flex; + width: 48px; + height: 5px; + background: white; + border-radius: 90px; + cursor: row-resize; + box-shadow: black 0 0 3px; + } +} diff --git a/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx b/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx index 06f0e6f8c..b90356275 100644 --- a/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx +++ b/src/components/markdown-renderer/replace-components/gist/gist-frame.tsx @@ -4,77 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only */ -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback } from 'react' import './gist-frame.scss' +import { useResizeGistFrame } from './use-resize-gist-frame' export interface GistFrameProps { id: string } -interface resizeEvent { - size: number - id: string -} - +/** + * This component renders a GitHub Gist by placing the gist URL in an {@link HTMLIFrameElement iframe}. + * + * @param id The id of the gist + */ export const GistFrame: React.FC = ({ id }) => { - const iframeHtml = useMemo(() => { - return ` - - - - gist - - - - - - - ` - }, [id]) + const [frameHeight, onStartResizing] = useResizeGistFrame(150) - const [frameHeight, setFrameHeight] = useState(0) - - const sizeMessage = useCallback( - (message: MessageEvent) => { - const data = message.data as resizeEvent - if (data.id !== id) { - return - } - setFrameHeight(data.size) + const onStart = useCallback( + (event) => { + onStartResizing(event) }, - [id] + [onStartResizing] ) - useEffect(() => { - window.addEventListener('message', sizeMessage) - return () => { - window.removeEventListener('message', sizeMessage) - } - }, [sizeMessage]) - return ( -