GitHub/outline
1
0
Fork 0
mirror of https://github.com/outline/outline.git synced 2026-06-13 03:14:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

add Dropbox embeddings support (#7299)

Browse Source 
* add Dropbox embedder support

* Update embeds.ts

---------

Co-authored-by: Tom Moor <tom@getoutline.com>
This commit is contained in:
Baboon
2024-07-26 14:47:35 +02:00
committed by GitHub
parent 465c935879
commit 0e667c5d3d
7 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.sample
+4
View File
@@ -189,6 +189,10 @@ SLACK_VERIFICATION_TOKEN=your_token
SLACK_APP_ID=A0XXXXXXX
SLACK_MESSAGE_ACTIONS=true
# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
# and do not forget to whitelist your domain name in the app settings
DROPBOX_APP_KEY=
# Optionally enable Sentry (sentry.io) to track errors and performance,
# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
public/images/dropbox.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

server/env.ts
+7
View File
@@ -348,6 +348,13 @@ export class Environment {
*/
public SMTP_SECURE = this.toBoolean(environment.SMTP_SECURE ?? "true");
/**
* Dropbox app key for embedding Dropbox files
*/
@Public
@IsOptional()
public DROPBOX_APP_KEY = this.toOptionalString(environment.DROPBOX_APP_KEY);
/**
* Sentry DSN for capturing errors and frontend performance.
*/
server/routes/embeds.ts
+34
View File
@@ -1,5 +1,6 @@
import escape from "escape-html";
import { Context, Next } from "koa";
import env from "@server/env";
/**
* Resize observer script that sends a message to the parent window when content is resized. Inject
@@ -117,5 +118,38 @@ ${resizeObserverScript(ctx)}
return;
}
if (
parsed.host === "www.dropbox.com" &&
parsed.protocol === "https:" &&
ctx.path === "/embeds/dropbox"
) {
const dropboxJs = "https://www.dropbox.com/static/api/2/dropins.js";
const csp = ctx.response.get("Content-Security-Policy");
// Inject Dropbox domain into the script-src directive
ctx.set(
"Content-Security-Policy",
csp.replace("script-src", "script-src www.dropbox.com")
);
ctx.set("X-Frame-Options", "sameorigin");
ctx.type = "html";
ctx.body = `
<html>
<head>
<style>body { margin: 0; }</style>
<base target="_parent">
${iframeCheckScript(ctx)}
</head>
<body>
<a href="${parsed}" class="dropbox-embed">
<script type="text/javascript" src="${dropboxJs}"
id="dropboxjs" data-app-key="${env.DROPBOX_APP_KEY}"></script>
${resizeObserverScript(ctx)}
</body>
`;
return;
}
return next();
};
server/routes/index.ts
+1
View File
@@ -131,6 +131,7 @@ router.get("/s/:shareId/*", shareDomains(), renderShare);
router.get("/embeds/gitlab", renderEmbed);
router.get("/embeds/github", renderEmbed);
router.get("/embeds/dropbox", renderEmbed);
// catch all for application
router.get("*", shareDomains(), async (ctx, next) => {
shared/editor/embeds/Dropbox.tsx
+23
View File
@@ -0,0 +1,23 @@
import * as React from "react";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
function Dropbox({ matches, ...props }: Props) {
// "fi" = file
// "fo" = folder
// Files need more vertical space to be readable
const embedHeight = matches[3].split("/")[0] === "fi" ? "550px" : "350px";
// Wrap inside an iframe to isolate external script and losened CSP
return (
<Frame
src={`/embeds/dropbox?url=${encodeURIComponent(props.attrs.href)}`}
className={props.isSelected ? "ProseMirror-selectednode" : ""}
width="100%"
height={embedHeight}
title="Dropbox"
/>
);
}
export default Dropbox;
shared/editor/embeds/index.tsx
+15
View File
@@ -1,12 +1,14 @@
import * as React from "react";
import styled from "styled-components";
import { Primitive } from "utility-types";
import env from "../../env";
import { IntegrationService, IntegrationType } from "../../types";
import type { IntegrationSettings } from "../../types";
import { urlRegex } from "../../utils/urls";
import Image from "../components/Img";
import Berrycast from "./Berrycast";
import Diagrams from "./Diagrams";
import Dropbox from "./Dropbox";
import Gist from "./Gist";
import GitLabSnippet from "./GitLabSnippet";
import InVision from "./InVision";
@@ -228,6 +230,19 @@ const embeds: EmbedDescriptor[] = [
`https://share.descript.com/embed/${matches[1]}`,
icon: <Img src="/images/descript.png" alt="Descript" />,
}),
...(env.DROPBOX_APP_KEY
? [
new EmbedDescriptor({
title: "Dropbox",
keywords: "file document",
regexMatch: [
new RegExp("^https?://(www.)?dropbox.com/(s|scl)/(.*)$"),
],
icon: <Img src="/images/dropbox.png" alt="Dropbox" />,
component: Dropbox,
}),
]
: []),
new EmbedDescriptor({
title: "Figma",
keywords: "design svg vector",