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

feat: Render diffs in email notifications (#4164)

Browse Source 
* deps

* diffCompact

* Diffs in email

* test

* fix: Fade deleted images
fix: Don't include empty paragraphs as context
fix: Allow for same image multiple times and refactor

* Remove target _blank

* fix: Table heading incorrect color
This commit is contained in:
Tom Moor
2022-09-24 23:29:11 +02:00
committed by GitHub
parent 0c5859222f
commit 91d8d27f2d
15 changed files with 396 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
server/emails/templates/DocumentNotificationEmail.tsx
View File

@@ -3,6 +3,7 @@ import { Document } from "@server/models";
import BaseEmail from "./BaseEmail";
import Body from "./components/Body";
import Button from "./components/Button";
import Diff from "./components/Diff";
import EmailTemplate from "./components/EmailLayout";
import EmptySpace from "./components/EmptySpace";
import Footer from "./components/Footer";
@@ -17,6 +18,7 @@ type InputProps = {
eventName: string;
teamUrl: string;
unsubscribeUrl: string;
content: string;
};
type BeforeSend = {
@@ -73,25 +75,34 @@ Open Document: ${teamUrl}${document.url}
eventName = "published",
teamUrl,
unsubscribeUrl,
content,
}: Props) {
const link = `${teamUrl}${document.url}?ref=notification-email`;
return (
<EmailTemplate>
<Header />
<Body>
<Heading>
"{document.title}" {eventName}
“{document.title}” {eventName}
</Heading>
<p>
{actorName} {eventName} the document "{document.title}", in the{" "}
{collectionName} collection.
{actorName} {eventName} the document{" "}
<a href={link}>{document.title}</a>, in the {collectionName}{" "}
collection.
</p>
<hr />
<EmptySpace height={10} />
<p>{document.getSummary()}</p>
<EmptySpace height={10} />
{content && (
<>
<EmptySpace height={20} />
<Diff>
<div dangerouslySetInnerHTML={{ __html: content }} />
</Diff>
<EmptySpace height={20} />
</>
)}
<p>
<Button href={`${teamUrl}${document.url}`}>Open Document</Button>
<Button href={link}>Open Document</Button>
</p>
</Body>

2
server/emails/templates/InviteEmail.tsx
View File

@@ -57,7 +57,7 @@ Join now: ${teamUrl}
</p>
<EmptySpace height={10} />
<p>
<Button href={teamUrl}>Join now</Button>
<Button href={`${teamUrl}?ref=invite-email`}>Join now</Button>
</p>
</Body>

4
server/emails/templates/InviteReminderEmail.tsx
View File

@@ -59,7 +59,9 @@ If you haven't signed up yet, you can do so here: ${teamUrl}
<p>If you haven't signed up yet, you can do so here:</p>
<EmptySpace height={10} />
<p>
<Button href={teamUrl}>Join now</Button>
<Button href={`${teamUrl}?ref=invite-reminder-email`}>
Join now
</Button>
</p>
</Body>

4
server/emails/templates/WelcomeEmail.tsx
View File

@@ -59,7 +59,9 @@ ${teamUrl}/home
</p>
<EmptySpace height={10} />
<p>
<Button href={`${teamUrl}/home`}>Open Outline</Button>
<Button href={`${teamUrl}/home?ref=welcome-email`}>
Open Outline
</Button>
</p>
</Body>

25
server/emails/templates/components/Diff.tsx Normal file
View File

@@ -0,0 +1,25 @@
import * as React from "react";
import theme from "@shared/styles/theme";
type Props = {
children: React.ReactNode;
href?: string;
};
export default ({ children, ...rest }: Props) => {
const style = {
borderRadius: "4px",
background: theme.secondaryBackground,
padding: ".75em 1em",
color: theme.text,
display: "block",
textDecoration: "none",
width: "100%",
};
return (
<div style={style} className="content-diff" {...rest}>
{children}
</div>
);
};