yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve GitLab embed

Browse Source
This commit is contained in:
Tom Moor
2024-03-23 22:30:08 -04:00
parent d8d60814ce
commit 8b6a760e02
3 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
shared/editor/embeds/Gist.tsx
View File

@@ -1,30 +1,25 @@
import * as React from "react";
import styled from "styled-components";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
const Iframe = styled.iframe`
margin-top: 8px;
`;
function Gist(props: Props) {
const gistUrl = new URL(props.attrs.href);
const id = gistUrl.pathname.split("/")[2];
const gistLink = `https://gist.github.com/${id}.js`;
const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
const styles =
"<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:150px; overflow:auto; }</style>";
"<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:300px; overflow:auto; }</style>";
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${gistScript}</body></html>`;
return (
<Iframe
<Frame
src={`data:text/html;base64,${btoa(iframeHtml)}`}
className={props.isSelected ? "ProseMirror-selectednode" : ""}
frameBorder="0"
width="100%"
height="200px"
scrolling="no"
height="355px"
id={`gist-${id}`}
title="GitHub Gist"
dangerouslySkipSanitizeSrc
/>
);
}

30
shared/editor/embeds/GitLabSnippet.tsx
View File

@@ -1,28 +1,38 @@
import * as React from "react";
import styled from "styled-components";
import useEventListener from "~/hooks/useEventListener";
import Frame, { resizeObserverScript } from "../components/Frame";
import { EmbedProps as Props } from ".";
const Iframe = styled.iframe`
margin-top: 8px;
`;
function GitLabSnippet(props: Props) {
const frame = React.useRef(null);
const [height, setHeight] = React.useState(400);
const snippetUrl = new URL(props.attrs.href);
const id = snippetUrl.pathname.split("/").pop();
const snippetLink = `${snippetUrl}.js`;
const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>`;
const styles = "<style>body { margin: 0; }</style>";
const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>${resizeObserverScript}`;
const styles =
"<style>body { margin: 0; .gitlab-embed-snippets { margin: 0; } }</style>";
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${snippetScript}</body></html>`;
useEventListener(
"message",
(event: MessageEvent<{ type: string; value: number }>) => {
if (event.data.type === "frame-resized") {
setHeight(event.data.value);
}
}
);
return (
<Iframe
<Frame
ref={frame}
src={`data:text/html;base64,${btoa(iframeHtml)}`}
className={props.isSelected ? "ProseMirror-selectednode" : ""}
frameBorder="0"
width="100%"
height="400px"
height={`${height}px`}
id={`gitlab-snippet-${id}`}
title="GitLab Snippet"
dangerouslySkipSanitizeSrc
/>
);
}