Add unsend campaign feature (#45)
* Add unsend email editor Add email editor Add more email editor Add renderer partial Add more marketing email features * Add more campaign feature * Add variables * Getting there * campaign is there mfs * Add migration
This commit is contained in:
KM Koushik
GitHub
@@ -0,0 +1,65 @@
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
|
||||
export type LinkEditorPanelProps = {
|
||||
initialUrl?: string;
|
||||
onSetLink: (url: string) => void;
|
||||
};
|
||||
|
||||
export const useLinkEditorState = ({
|
||||
initialUrl,
|
||||
onSetLink,
|
||||
}: LinkEditorPanelProps) => {
|
||||
const [url, setUrl] = useState(initialUrl || "");
|
||||
|
||||
const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUrl(event.target.value);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSetLink(url);
|
||||
},
|
||||
[url, onSetLink]
|
||||
);
|
||||
|
||||
return {
|
||||
url,
|
||||
setUrl,
|
||||
onChange,
|
||||
handleSubmit,
|
||||
};
|
||||
};
|
||||
|
||||
export const LinkEditorPanel = ({
|
||||
onSetLink,
|
||||
initialUrl,
|
||||
}: LinkEditorPanelProps) => {
|
||||
const state = useLinkEditorState({
|
||||
onSetLink,
|
||||
initialUrl,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<form
|
||||
onSubmit={state.handleSubmit}
|
||||
className="flex items-center gap-2 justify-between"
|
||||
>
|
||||
<label className="flex items-center gap-2 p-2 rounded-lg cursor-text">
|
||||
<input
|
||||
className="flex-1 bg-transparent outline-none min-w-[12rem] text-black text-sm"
|
||||
placeholder="Enter valid url"
|
||||
value={state.url}
|
||||
onChange={state.onChange}
|
||||
/>
|
||||
</label>
|
||||
<Button variant="silent" size="sm" className="px-1">
|
||||
<CheckIcon className="h-4 w-4 disabled:opacity-50" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { Edit2Icon, EditIcon, Trash2Icon } from "lucide-react";
|
||||
|
||||
export type LinkPreviewPanelProps = {
|
||||
url: string;
|
||||
onEdit: () => void;
|
||||
onClear: () => void;
|
||||
};
|
||||
|
||||
export const LinkPreviewPanel = ({
|
||||
onClear,
|
||||
onEdit,
|
||||
url,
|
||||
}: LinkPreviewPanelProps) => {
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-2">
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm underline w-[12rem] overflow-hidden text-ellipsis"
|
||||
>
|
||||
{url}
|
||||
</a>
|
||||
<Button onClick={onEdit} variant="silent" size="sm" className="p-1">
|
||||
<Edit2Icon className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={onClear} variant="silent" size="sm" className="p-1">
|
||||
<Trash2Icon className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
37
packages/email-editor/src/components/ui/ColorPicker.tsx
Normal file
37
packages/email-editor/src/components/ui/ColorPicker.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
|
||||
|
||||
type ColorPickerProps = {
|
||||
color: string;
|
||||
onChange?: (color: string) => void;
|
||||
};
|
||||
|
||||
export function ColorPicker(props: ColorPickerProps) {
|
||||
const { color: initialColor, onChange } = props;
|
||||
|
||||
const [color, setColor] = useState(initialColor);
|
||||
|
||||
const handleColorChange = (color: string) => {
|
||||
setColor(color);
|
||||
onChange?.(color);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-w-[260px] rounded-xl border bg-white p-4">
|
||||
<HexAlphaColorPicker
|
||||
color={color}
|
||||
onChange={handleColorChange}
|
||||
className="flex !w-full flex-col gap-4"
|
||||
/>
|
||||
<HexColorInput
|
||||
alpha={true}
|
||||
color={color}
|
||||
onChange={handleColorChange}
|
||||
className="mt-4 bg-transparent text-black w-full min-w-0 rounded-lg border px-2 py-1.5 text-sm uppercase focus-visible:border-gray-400 focus-visible:outline-none"
|
||||
prefixed
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
import { SVGProps } from "../../../types";
|
||||
|
||||
export const BorderWidth: React.FC<SVGProps> = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<path d="M0 3.5A.5.5 0 0 1 .5 3h15a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5zm0 5A.5.5 0 0 1 .5 8h15a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
111
packages/email-editor/src/editor.tsx
Normal file
111
packages/email-editor/src/editor.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
BubbleMenu,
|
||||
EditorContent,
|
||||
EditorProvider,
|
||||
FloatingMenu,
|
||||
useEditor,
|
||||
} from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import React, { useRef } from "react";
|
||||
import { TextMenu } from "./menus/TextMenu";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
|
||||
import { extensions } from "./extensions";
|
||||
import LinkMenu from "./menus/LinkMenu";
|
||||
import { Content, Editor as TipTapEditor } from "@tiptap/core";
|
||||
|
||||
const content = `<h2>Hello World!</h2>
|
||||
|
||||
<h3>Unsend is the best open source resend alternative.</h3>
|
||||
|
||||
<p>Use markdown (<code># </code>, <code>## </code>, <code>### </code>, <code>\`\`</code>, <code>* *</code>, <code>** **</code>) to write your email. </p>
|
||||
<p>You can <b>Bold</b> text.
|
||||
You can <i>Italic</i> text.
|
||||
You can <u>Underline</u> text.
|
||||
You can <del>Delete</del> text.
|
||||
You can <code>Code</code> text.
|
||||
you can change <span style="color: #dc2626;"> color</span> of text. Add <a href="https://unsend.dev" target="_blank">link</a> to text
|
||||
</p>
|
||||
<br>
|
||||
You can create ordered list
|
||||
<ol>
|
||||
<li>Ordered list item</li>
|
||||
<li>Ordered list item</li>
|
||||
<li>Ordered list item</li>
|
||||
</ol>
|
||||
|
||||
<br>
|
||||
You can create unordered list
|
||||
<ul>
|
||||
<li>Unordered list item</li>
|
||||
<li>Unordered list item</li>
|
||||
<li>Unordered list item</li>
|
||||
</ul>
|
||||
|
||||
<p></p>
|
||||
<p>Add code by typing \`\`\` and enter</p>
|
||||
<pre>
|
||||
<code>
|
||||
const unsend = new Unsend({ apiKey: "us_12345" });
|
||||
|
||||
unsend.emails.send({
|
||||
to: "john@doe.com",
|
||||
from: "john@doe.com",
|
||||
subject: "Hello World!",
|
||||
html: "<p>Hello World!</p>",
|
||||
text: "Hello World!",
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
`;
|
||||
|
||||
export type EditorProps = {
|
||||
onUpdate?: (content: TipTapEditor) => void;
|
||||
initialContent?: Content;
|
||||
variables?: Array<string>;
|
||||
};
|
||||
|
||||
export const Editor: React.FC<EditorProps> = ({
|
||||
onUpdate,
|
||||
initialContent,
|
||||
variables,
|
||||
}) => {
|
||||
const menuContainerRef = useRef(null);
|
||||
|
||||
const editor = useEditor({
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: cn("unsend-prose w-full"),
|
||||
},
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
// prevent default event listeners from firing when slash command is active
|
||||
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
|
||||
const slashCommand = document.querySelector("#slash-command");
|
||||
if (slashCommand) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
extensions: extensions({ variables }),
|
||||
onUpdate: ({ editor }) => {
|
||||
onUpdate?.(editor);
|
||||
},
|
||||
content: initialContent,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-white rounded-md text-black p-8 unsend-editor light"
|
||||
ref={menuContainerRef}
|
||||
>
|
||||
<EditorContent editor={editor} className="min-h-[50vh]" />
|
||||
{editor ? <TextMenu editor={editor} /> : null}
|
||||
{editor ? <LinkMenu editor={editor} appendTo={menuContainerRef} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
92
packages/email-editor/src/extensions/ButtonExtension.ts
Normal file
92
packages/email-editor/src/extensions/ButtonExtension.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { mergeAttributes, Node } from "@tiptap/core";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { AllowedAlignments } from "../types";
|
||||
|
||||
import { ButtonComponent } from "../nodes/button";
|
||||
// import { AllowedLogoAlignment } from '../nodes/logo';
|
||||
|
||||
declare module "@tiptap/core" {
|
||||
interface Commands<ReturnType> {
|
||||
button: {
|
||||
setButton: () => ReturnType;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const ButtonExtension = Node.create({
|
||||
name: "button",
|
||||
group: "block",
|
||||
atom: true,
|
||||
draggable: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
component: {
|
||||
default: "button",
|
||||
},
|
||||
text: {
|
||||
default: "Button",
|
||||
},
|
||||
url: {
|
||||
default: "",
|
||||
},
|
||||
alignment: {
|
||||
default: "left",
|
||||
},
|
||||
borderRadius: {
|
||||
default: "4",
|
||||
},
|
||||
borderWidth: {
|
||||
default: "1",
|
||||
},
|
||||
buttonColor: {
|
||||
default: "rgb(0, 0, 0)",
|
||||
},
|
||||
borderColor: {
|
||||
default: "rgb(0, 0, 0)",
|
||||
},
|
||||
textColor: {
|
||||
default: "rgb(255, 255, 255)",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: `a[data-unsend-component="${this.name}"]`,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return [
|
||||
"a",
|
||||
mergeAttributes(
|
||||
{
|
||||
"data-unsend-component": this.name,
|
||||
},
|
||||
HTMLAttributes
|
||||
),
|
||||
];
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
setButton:
|
||||
() =>
|
||||
({ commands }) => {
|
||||
return commands.insertContent({
|
||||
type: this.name,
|
||||
attrs: {
|
||||
unsendComponent: this.name,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(ButtonComponent);
|
||||
},
|
||||
});
|
||||
487
packages/email-editor/src/extensions/SlashCommand.tsx
Normal file
487
packages/email-editor/src/extensions/SlashCommand.tsx
Normal file
@@ -0,0 +1,487 @@
|
||||
import { Editor, Extension, Range, ReactRenderer } from "@tiptap/react";
|
||||
import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
import {
|
||||
CodeIcon,
|
||||
DivideIcon,
|
||||
EraserIcon,
|
||||
Heading1Icon,
|
||||
Heading2Icon,
|
||||
Heading3Icon,
|
||||
ListIcon,
|
||||
ListOrderedIcon,
|
||||
RectangleEllipsisIcon,
|
||||
SquareSplitVerticalIcon,
|
||||
TextIcon,
|
||||
TextQuoteIcon,
|
||||
UserXIcon,
|
||||
VariableIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import tippy, { GetReferenceClientRect } from "tippy.js";
|
||||
|
||||
export interface CommandProps {
|
||||
editor: Editor;
|
||||
range: Range;
|
||||
}
|
||||
|
||||
interface CommandItemProps {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: ReactNode;
|
||||
}
|
||||
|
||||
export type SlashCommandItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
searchTerms: string[];
|
||||
icon: JSX.Element;
|
||||
command: (options: CommandProps) => void;
|
||||
};
|
||||
|
||||
export const SlashCommand = Extension.create({
|
||||
name: "slash-command",
|
||||
addOptions() {
|
||||
return {
|
||||
suggestion: {
|
||||
char: "/",
|
||||
command: ({
|
||||
editor,
|
||||
range,
|
||||
props,
|
||||
}: {
|
||||
editor: Editor;
|
||||
range: Range;
|
||||
props: any;
|
||||
}) => {
|
||||
props.command({ editor, range });
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
Suggestion({
|
||||
editor: this.editor,
|
||||
...this.options.suggestion,
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
|
||||
{
|
||||
title: "Text",
|
||||
description: "Just start typing with plain text.",
|
||||
searchTerms: ["p", "paragraph"],
|
||||
icon: <TextIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.toggleNode("paragraph", "paragraph")
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Heading 1",
|
||||
description: "Big section heading.",
|
||||
searchTerms: ["title", "big", "large"],
|
||||
icon: <Heading1Icon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.setNode("heading", { level: 1 })
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Heading 2",
|
||||
description: "Medium section heading.",
|
||||
searchTerms: ["subtitle", "medium"],
|
||||
icon: <Heading2Icon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.setNode("heading", { level: 2 })
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Heading 3",
|
||||
description: "Small section heading.",
|
||||
searchTerms: ["subtitle", "small"],
|
||||
icon: <Heading3Icon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.setNode("heading", { level: 3 })
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Bullet List",
|
||||
description: "Create a simple bullet list.",
|
||||
searchTerms: ["unordered", "point"],
|
||||
icon: <ListIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).toggleBulletList().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Numbered List",
|
||||
description: "Create a list with numbering.",
|
||||
searchTerms: ["ordered"],
|
||||
icon: <ListOrderedIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: "Image",
|
||||
// description: "Full width image",
|
||||
// searchTerms: ["image"],
|
||||
// icon: <ImageIcon className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// const imageUrl = prompt("Image URL: ") || "";
|
||||
|
||||
// if (!imageUrl) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// editor.chain().focus().deleteRange(range).run();
|
||||
// editor.chain().focus().setImage({ src: imageUrl }).run();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: "Logo",
|
||||
// description: "Add your brand logo",
|
||||
// searchTerms: ["image", "logo"],
|
||||
// icon: <ImageIcon className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// const logoUrl = prompt("Logo URL: ") || "";
|
||||
|
||||
// if (!logoUrl) {
|
||||
// return;
|
||||
// }
|
||||
// editor.chain().focus().deleteRange(range).run();
|
||||
// editor.chain().focus().setLogoImage({ src: logoUrl }).run();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: "Spacer",
|
||||
// description:
|
||||
// "Add a spacer to email. Useful for adding space between sections.",
|
||||
// searchTerms: ["space", "gap", "divider"],
|
||||
// icon: <MoveVertical className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// editor
|
||||
// .chain()
|
||||
// .focus()
|
||||
// .deleteRange(range)
|
||||
// .setSpacer({ height: "sm" })
|
||||
// .run();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: "Button",
|
||||
// description: "Add a call to action button to email.",
|
||||
// searchTerms: ["link", "button", "cta"],
|
||||
// icon: <MousePointer className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// editor.chain().focus().deleteRange(range).setButton().run();
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: "Link Card",
|
||||
// description: "Add a link card to email.",
|
||||
// searchTerms: ["link", "button", "image"],
|
||||
// icon: <ArrowUpRightSquare className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// editor.chain().focus().deleteRange(range).setLinkCard().run();
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: "Hard Break",
|
||||
description: "Add a break between lines.",
|
||||
searchTerms: ["break", "line"],
|
||||
icon: <DivideIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).setHardBreak().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Blockquote",
|
||||
description: "Add blockquote.",
|
||||
searchTerms: ["quote", "blockquote"],
|
||||
icon: <TextQuoteIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).toggleBlockquote().run();
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: "Footer",
|
||||
// description: "Add a footer text to email.",
|
||||
// searchTerms: ["footer", "text"],
|
||||
// icon: <FootprintsIcon className="h-4 w-4" />,
|
||||
// command: ({ editor, range }: CommandProps) => {
|
||||
// editor.chain().focus().deleteRange(range).setFooter().run();
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
title: "Button",
|
||||
description: "Add code.",
|
||||
searchTerms: ["button"],
|
||||
icon: <RectangleEllipsisIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).setButton().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Code Block",
|
||||
description: "Add code.",
|
||||
searchTerms: ["code"],
|
||||
icon: <CodeIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Horizontal Rule",
|
||||
description: "Add a horizontal rule.",
|
||||
searchTerms: ["horizontal", "rule"],
|
||||
icon: <SquareSplitVerticalIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Clear Line",
|
||||
description: "Clear the current line.",
|
||||
searchTerms: ["clear", "line"],
|
||||
icon: <EraserIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().selectParentNode().deleteSelection().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Variable",
|
||||
description: "Add a variable.",
|
||||
searchTerms: ["variable"],
|
||||
icon: <VariableIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent("{{").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Unsubscribe Footer",
|
||||
description: "Add an unsubscribe link.",
|
||||
searchTerms: ["unsubscribe"],
|
||||
icon: <UserXIcon className="h-4 w-4" />,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.setHorizontalRule()
|
||||
.insertContent(
|
||||
`<unsub data-unsend-component='unsubscribe-footer'><p>You are receiving this email because you opted in via our site.<br/><br/><a href="{{unsend_unsubscribe_url}}">Unsubscribe from the list</a></p><br><br><p>Company name,<br/>00 street name<br/>City, State 000000</p></unsub>`
|
||||
)
|
||||
.run();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
|
||||
const containerHeight = container.offsetHeight;
|
||||
const itemHeight = item ? item.offsetHeight : 0;
|
||||
|
||||
const top = item.offsetTop;
|
||||
const bottom = top + itemHeight;
|
||||
|
||||
if (top < container.scrollTop) {
|
||||
container.scrollTop -= container.scrollTop - top + 5;
|
||||
} else if (bottom > containerHeight + container.scrollTop) {
|
||||
container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
|
||||
}
|
||||
};
|
||||
|
||||
const CommandList = ({
|
||||
items,
|
||||
command,
|
||||
editor,
|
||||
}: {
|
||||
items: CommandItemProps[];
|
||||
command: (item: CommandItemProps) => void;
|
||||
editor: Editor;
|
||||
range: any;
|
||||
}) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
const selectItem = useCallback(
|
||||
(index: number) => {
|
||||
const item = items[index];
|
||||
if (item) {
|
||||
command(item);
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[command, editor, items]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (navigationKeys.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
if (e.key === "ArrowUp") {
|
||||
setSelectedIndex((selectedIndex + items.length - 1) % items.length);
|
||||
return true;
|
||||
}
|
||||
if (e.key === "ArrowDown") {
|
||||
setSelectedIndex((selectedIndex + 1) % items.length);
|
||||
return true;
|
||||
}
|
||||
if (e.key === "Enter") {
|
||||
selectItem(selectedIndex);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [items, selectedIndex, setSelectedIndex, selectItem]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [items]);
|
||||
|
||||
const commandListContainer = useRef<HTMLDivElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const container = commandListContainer?.current;
|
||||
|
||||
const item = container?.children[selectedIndex] as HTMLElement;
|
||||
|
||||
if (item && container) updateScrollView(container, item);
|
||||
}, [selectedIndex]);
|
||||
|
||||
return items.length > 0 ? (
|
||||
<div className="z-50 w-52 rounded-md border border-gray-200 bg-white shadow-md transition-all">
|
||||
<div
|
||||
id="slash-command"
|
||||
ref={commandListContainer}
|
||||
className="no-scrollbar h-auto max-h-[330px] overflow-y-auto scroll-smooth px-1 py-2"
|
||||
>
|
||||
{items.map((item: CommandItemProps, index: number) => {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900",
|
||||
index === selectedIndex
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-transparent"
|
||||
)}
|
||||
key={index}
|
||||
onClick={() => selectItem(index)}
|
||||
type="button"
|
||||
>
|
||||
<div className="flex h-6 w-6 shrink-0 items-center justify-center">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{item.title}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export function getSlashCommandSuggestions(
|
||||
commands: SlashCommandItem[] = []
|
||||
): Omit<SuggestionOptions, "editor"> {
|
||||
return {
|
||||
items: ({ query }) => {
|
||||
return [...DEFAULT_SLASH_COMMANDS, ...commands].filter((item) => {
|
||||
if (typeof query === "string" && query.length > 0) {
|
||||
const search = query.toLowerCase();
|
||||
return (
|
||||
item.title.toLowerCase().includes(search) ||
|
||||
item.description.toLowerCase().includes(search) ||
|
||||
(item.searchTerms &&
|
||||
item.searchTerms.some((term: string) => term.includes(search)))
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
},
|
||||
render: () => {
|
||||
let component: ReactRenderer<any>;
|
||||
let popup: InstanceType<any> | null = null;
|
||||
|
||||
return {
|
||||
onStart: (props) => {
|
||||
component = new ReactRenderer(CommandList, {
|
||||
props,
|
||||
editor: props.editor,
|
||||
});
|
||||
|
||||
popup = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
});
|
||||
},
|
||||
onUpdate: (props) => {
|
||||
component?.updateProps(props);
|
||||
|
||||
popup &&
|
||||
popup[0].setProps({
|
||||
getReferenceClientRect: props.clientRect,
|
||||
});
|
||||
},
|
||||
onKeyDown: (props) => {
|
||||
if (props.event.key === "Escape") {
|
||||
popup?.[0].hide();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return component?.ref?.onKeyDown(props);
|
||||
},
|
||||
onExit: () => {
|
||||
if (!popup || !popup?.[0] || !component) {
|
||||
return;
|
||||
}
|
||||
|
||||
popup?.[0].destroy();
|
||||
component?.destroy();
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { mergeAttributes, Node } from "@tiptap/core";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
|
||||
import { UnsubscribeFooterComponent } from "../nodes/unsubscribe-footer";
|
||||
|
||||
declare module "@tiptap/core" {
|
||||
interface Commands<ReturnType> {
|
||||
unsubscribeFooter: {
|
||||
setUnsubscribeFooter: () => ReturnType;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const UnsubscribeFooterExtension = Node.create({
|
||||
name: "unsubscribeFooter",
|
||||
group: "block",
|
||||
content: "inline*",
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
component: {
|
||||
default: "unsubscribeFooter",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: `unsub`,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return [
|
||||
"unsub",
|
||||
mergeAttributes(
|
||||
{
|
||||
"data-unsend-component": this.name,
|
||||
class: "footer",
|
||||
contenteditable: "true",
|
||||
},
|
||||
HTMLAttributes
|
||||
),
|
||||
0,
|
||||
];
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(UnsubscribeFooterComponent);
|
||||
},
|
||||
});
|
||||
141
packages/email-editor/src/extensions/VariableExtension.ts
Normal file
141
packages/email-editor/src/extensions/VariableExtension.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
import { mergeAttributes, Node } from "@tiptap/core";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { PluginKey } from "@tiptap/pm/state";
|
||||
import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
|
||||
import { VariableComponent, VariableOptions } from "../nodes/variable";
|
||||
|
||||
export interface VariableNodeAttrs extends VariableOptions {}
|
||||
|
||||
export type VariableExtensionOptions = {
|
||||
HTMLAttributes: Record<string, any>;
|
||||
suggestion: Omit<SuggestionOptions, "editor">;
|
||||
};
|
||||
|
||||
export const VariablePluginKey = new PluginKey("variable");
|
||||
|
||||
export const VariableExtension = Node.create<VariableExtensionOptions>({
|
||||
name: "variable",
|
||||
|
||||
group: "inline",
|
||||
|
||||
inline: true,
|
||||
|
||||
selectable: false,
|
||||
|
||||
atom: true,
|
||||
draggable: false,
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
HTMLAttributes: {},
|
||||
deleteTriggerWithBackspace: false,
|
||||
suggestion: {
|
||||
char: "{{",
|
||||
pluginKey: VariablePluginKey,
|
||||
command: ({ editor, range, props }) => {
|
||||
console.log("props: ", props);
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.insertContentAt(range, [
|
||||
{
|
||||
type: this.name,
|
||||
attrs: props,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
},
|
||||
])
|
||||
.run();
|
||||
|
||||
window.getSelection()?.collapseToEnd();
|
||||
},
|
||||
allow: ({ state, range }) => {
|
||||
const $from = state.doc.resolve(range.from);
|
||||
const type = state.schema.nodes[this.name];
|
||||
const allow = type
|
||||
? !!$from.parent.type.contentMatch.matchType(type)
|
||||
: false;
|
||||
console.log("allow: ", allow);
|
||||
|
||||
return allow;
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
id: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-id"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.id) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
"data-id": attributes.id,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
name: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-name"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.name) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
"data-name": attributes.name,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
fallback: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-fallback"),
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.fallback) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
"data-fallback": attributes.fallback,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: `span[data-type="${this.name}"]`,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return [
|
||||
"span",
|
||||
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
|
||||
];
|
||||
},
|
||||
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
Suggestion({
|
||||
editor: this.editor,
|
||||
...this.options.suggestion,
|
||||
}),
|
||||
];
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(VariableComponent);
|
||||
},
|
||||
});
|
||||
80
packages/email-editor/src/extensions/index.ts
Normal file
80
packages/email-editor/src/extensions/index.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import Link from "@tiptap/extension-link";
|
||||
import TextAlign from "@tiptap/extension-text-align";
|
||||
import Paragraph from "@tiptap/extension-paragraph";
|
||||
import Heading from "@tiptap/extension-heading";
|
||||
import CodeBlock from "@tiptap/extension-code-block";
|
||||
import TextStyle from "@tiptap/extension-text-style";
|
||||
import { Color } from "@tiptap/extension-color";
|
||||
import TaskItem from "@tiptap/extension-task-item";
|
||||
import TaskList from "@tiptap/extension-task-list";
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
import GlobalDragHandle from "tiptap-extension-global-drag-handle";
|
||||
import { ButtonExtension } from "./ButtonExtension";
|
||||
import { SlashCommand, getSlashCommandSuggestions } from "./SlashCommand";
|
||||
import { VariableExtension } from "./VariableExtension";
|
||||
import { getVariableSuggestions } from "../nodes/variable";
|
||||
import { UnsubscribeFooterExtension } from "./UnsubsubscribeExtension";
|
||||
|
||||
export function extensions({ variables }: { variables?: Array<string> }) {
|
||||
const extensions = [
|
||||
StarterKit.configure({
|
||||
heading: {
|
||||
levels: [1, 2, 3],
|
||||
},
|
||||
dropcursor: {
|
||||
color: "#555",
|
||||
width: 3,
|
||||
},
|
||||
code: {
|
||||
HTMLAttributes: {
|
||||
class:
|
||||
"p-0.5 px-2 bg-slate-200 text-black text-sm rounded tracking-normal font-normal",
|
||||
},
|
||||
},
|
||||
blockquote: {
|
||||
HTMLAttributes: {
|
||||
class: "not-prose border-l-4 border-gray-300 pl-4 mt-4 mb-4",
|
||||
},
|
||||
},
|
||||
}),
|
||||
Underline,
|
||||
Link.configure({
|
||||
HTMLAttributes: {
|
||||
class: "underline cursor-pointer",
|
||||
},
|
||||
openOnClick: false,
|
||||
}),
|
||||
TextAlign.configure({
|
||||
types: [Paragraph.name, Heading.name],
|
||||
}),
|
||||
CodeBlock.configure({
|
||||
HTMLAttributes: {
|
||||
class:
|
||||
"p-4 bg-slate-800 text-gray-100 text-sm rounded-md tracking-normal font-normal",
|
||||
},
|
||||
}),
|
||||
Heading.configure({
|
||||
levels: [1, 2, 3],
|
||||
}),
|
||||
TextStyle,
|
||||
Color,
|
||||
TaskItem,
|
||||
TaskList,
|
||||
SlashCommand.configure({
|
||||
suggestion: getSlashCommandSuggestions([]),
|
||||
}),
|
||||
Placeholder.configure({
|
||||
placeholder: "write something on '/' for commands",
|
||||
}),
|
||||
ButtonExtension,
|
||||
GlobalDragHandle,
|
||||
VariableExtension.configure({
|
||||
suggestion: getVariableSuggestions(variables),
|
||||
}),
|
||||
UnsubscribeFooterExtension,
|
||||
];
|
||||
|
||||
return extensions;
|
||||
}
|
||||
3
packages/email-editor/src/index.ts
Normal file
3
packages/email-editor/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import "./styles/index.css";
|
||||
|
||||
export * from "./editor";
|
||||
81
packages/email-editor/src/menus/LinkMenu.tsx
Normal file
81
packages/email-editor/src/menus/LinkMenu.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
|
||||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import { MenuProps } from "../types";
|
||||
import { LinkPreviewPanel } from "../components/panels/LinkPreviewPanel";
|
||||
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
|
||||
|
||||
export const LinkMenu = ({ editor, appendTo }: MenuProps): JSX.Element => {
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
|
||||
const shouldShow = useCallback(() => {
|
||||
const isActive = editor.isActive("link");
|
||||
return isActive;
|
||||
}, [editor]);
|
||||
|
||||
const { href: link } = editor.getAttributes("link");
|
||||
|
||||
const handleEdit = useCallback(() => {
|
||||
setShowEdit(true);
|
||||
}, []);
|
||||
|
||||
const onSetLink = useCallback(
|
||||
(url: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.extendMarkRange("link")
|
||||
.setLink({ href: url, target: "_blank" })
|
||||
.run();
|
||||
setShowEdit(false);
|
||||
},
|
||||
[editor]
|
||||
);
|
||||
|
||||
const onUnsetLink = useCallback(() => {
|
||||
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
||||
setShowEdit(false);
|
||||
return null;
|
||||
}, [editor]);
|
||||
|
||||
const onShowEdit = useCallback(() => {
|
||||
setShowEdit(true);
|
||||
}, []);
|
||||
|
||||
const onHideEdit = useCallback(() => {
|
||||
setShowEdit(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<BaseBubbleMenu
|
||||
editor={editor}
|
||||
pluginKey="textMenu"
|
||||
shouldShow={shouldShow}
|
||||
updateDelay={0}
|
||||
tippyOptions={{
|
||||
popperOptions: {
|
||||
modifiers: [{ name: "flip", enabled: false }],
|
||||
},
|
||||
appendTo: () => {
|
||||
return appendTo?.current;
|
||||
},
|
||||
onHidden: () => {
|
||||
setShowEdit(false);
|
||||
},
|
||||
}}
|
||||
className="flex gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md items-center mt-4"
|
||||
>
|
||||
{showEdit ? (
|
||||
<LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
|
||||
) : (
|
||||
<LinkPreviewPanel
|
||||
url={link}
|
||||
onClear={onUnsetLink}
|
||||
onEdit={handleEdit}
|
||||
/>
|
||||
)}
|
||||
</BaseBubbleMenu>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkMenu;
|
||||
426
packages/email-editor/src/menus/TextMenu.tsx
Normal file
426
packages/email-editor/src/menus/TextMenu.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
import { BubbleMenu, BubbleMenuProps, isTextSelection } from "@tiptap/react";
|
||||
import {
|
||||
AlignCenterIcon,
|
||||
AlignLeftIcon,
|
||||
AlignRightIcon,
|
||||
BoldIcon,
|
||||
ChevronDown,
|
||||
CodeIcon,
|
||||
Heading1Icon,
|
||||
Heading2Icon,
|
||||
Heading3Icon,
|
||||
ItalicIcon,
|
||||
LinkIcon,
|
||||
ListIcon,
|
||||
ListOrderedIcon,
|
||||
LucideIcon,
|
||||
PilcrowIcon,
|
||||
StrikethroughIcon,
|
||||
TextIcon,
|
||||
TextQuoteIcon,
|
||||
UnderlineIcon,
|
||||
} from "lucide-react";
|
||||
import { TextMenuButton } from "./TextMenuButton";
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@unsend/ui/src/popover";
|
||||
import { Separator } from "@unsend/ui/src/separator";
|
||||
import { useMemo, useState } from "react";
|
||||
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
|
||||
// import { allowedLogoAlignment } from "../nodes/logo";
|
||||
|
||||
export interface TextMenuItem {
|
||||
name: string;
|
||||
isActive: () => boolean;
|
||||
command: () => void;
|
||||
shouldShow?: () => boolean;
|
||||
icon?: LucideIcon;
|
||||
}
|
||||
|
||||
export type TextMenuProps = Omit<BubbleMenuProps, "children">;
|
||||
|
||||
export type ContentTypePickerOption = {
|
||||
label: string;
|
||||
id: string;
|
||||
type: "option";
|
||||
disabled: () => boolean | undefined;
|
||||
isActive: () => boolean | undefined;
|
||||
onClick: () => void;
|
||||
icon: LucideIcon;
|
||||
};
|
||||
|
||||
const textColors = [
|
||||
{
|
||||
name: "default",
|
||||
value: "#000000",
|
||||
},
|
||||
{
|
||||
name: "red",
|
||||
value: "#dc2626",
|
||||
},
|
||||
{
|
||||
name: "green",
|
||||
value: "#16a34a",
|
||||
},
|
||||
{
|
||||
name: "blue",
|
||||
value: "#2563eb",
|
||||
},
|
||||
{
|
||||
name: "yellow",
|
||||
value: "#eab308",
|
||||
},
|
||||
{
|
||||
name: "purple",
|
||||
value: "#a855f7",
|
||||
},
|
||||
{
|
||||
name: "orange",
|
||||
value: "#f97316",
|
||||
},
|
||||
{
|
||||
name: "pink",
|
||||
value: "#db2777",
|
||||
},
|
||||
{
|
||||
name: "gray",
|
||||
value: "#6b7280",
|
||||
},
|
||||
];
|
||||
|
||||
export function TextMenu(props: TextMenuProps) {
|
||||
const { editor } = props;
|
||||
|
||||
const icons = [AlignLeftIcon, AlignCenterIcon, AlignRightIcon];
|
||||
const alignmentItems: TextMenuItem[] = ["left", "center", "right"].map(
|
||||
(alignment, index) => ({
|
||||
name: alignment,
|
||||
isActive: () => editor?.isActive({ textAlign: alignment })!,
|
||||
command: () => {
|
||||
if (props?.editor?.isActive({ textAlign: alignment })) {
|
||||
props?.editor?.chain()?.focus().unsetTextAlign().run();
|
||||
} else {
|
||||
props?.editor?.chain().focus().setTextAlign(alignment).run()!;
|
||||
}
|
||||
},
|
||||
icon: icons[index],
|
||||
})
|
||||
);
|
||||
|
||||
const items: TextMenuItem[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: "bold",
|
||||
isActive: () => editor?.isActive("bold")!,
|
||||
command: () => editor?.chain().focus().toggleBold().run()!,
|
||||
icon: BoldIcon,
|
||||
},
|
||||
{
|
||||
name: "italic",
|
||||
isActive: () => editor?.isActive("italic")!,
|
||||
command: () => editor?.chain().focus().toggleItalic().run()!,
|
||||
icon: ItalicIcon,
|
||||
},
|
||||
{
|
||||
name: "underline",
|
||||
isActive: () => editor?.isActive("underline")!,
|
||||
command: () => editor?.chain().focus().toggleUnderline().run()!,
|
||||
icon: UnderlineIcon,
|
||||
},
|
||||
{
|
||||
name: "strike",
|
||||
isActive: () => editor?.isActive("strike")!,
|
||||
command: () => editor?.chain().focus().toggleStrike().run()!,
|
||||
icon: StrikethroughIcon,
|
||||
},
|
||||
{
|
||||
name: "code",
|
||||
isActive: () => editor?.isActive("code")!,
|
||||
command: () => editor?.chain().focus().toggleCode().run()!,
|
||||
icon: CodeIcon,
|
||||
},
|
||||
...alignmentItems,
|
||||
],
|
||||
[editor]
|
||||
);
|
||||
|
||||
const contentTypePickerOptions: ContentTypePickerOption[] = useMemo(
|
||||
() => [
|
||||
// {
|
||||
// label: "Text",
|
||||
// id: "text",
|
||||
// type: "option",
|
||||
// disabled: () => false,
|
||||
// isActive: () => editor?.isActive("text")!,
|
||||
// onClick: () => editor?.chain().focus().setNode("text")?.run()!,
|
||||
// },
|
||||
{
|
||||
icon: TextIcon,
|
||||
onClick: () =>
|
||||
editor
|
||||
?.chain()
|
||||
.focus()
|
||||
.lift("taskItem")
|
||||
.liftListItem("listItem")
|
||||
.setParagraph()
|
||||
.run(),
|
||||
id: "text",
|
||||
disabled: () => !editor?.can().setParagraph(),
|
||||
isActive: () =>
|
||||
editor?.isActive("paragraph") &&
|
||||
!editor?.isActive("orderedList") &&
|
||||
!editor?.isActive("bulletList") &&
|
||||
!editor?.isActive("taskList"),
|
||||
label: "Text",
|
||||
type: "option",
|
||||
},
|
||||
{
|
||||
icon: Heading1Icon,
|
||||
onClick: () =>
|
||||
editor
|
||||
?.chain()
|
||||
.focus()
|
||||
.lift("taskItem")
|
||||
.liftListItem("listItem")
|
||||
.setHeading({ level: 1 })
|
||||
.run(),
|
||||
id: "heading1",
|
||||
disabled: () => !editor?.can().setHeading({ level: 1 }),
|
||||
isActive: () => editor?.isActive("heading", { level: 1 }),
|
||||
label: "Heading 1",
|
||||
type: "option",
|
||||
},
|
||||
{
|
||||
icon: Heading2Icon,
|
||||
onClick: () =>
|
||||
editor
|
||||
?.chain()
|
||||
?.focus()
|
||||
?.lift("taskItem")
|
||||
.liftListItem("listItem")
|
||||
.setHeading({ level: 2 })
|
||||
.run(),
|
||||
id: "heading2",
|
||||
disabled: () => !editor?.can().setHeading({ level: 2 }),
|
||||
isActive: () => editor?.isActive("heading", { level: 2 }),
|
||||
label: "Heading 2",
|
||||
type: "option",
|
||||
},
|
||||
{
|
||||
icon: Heading3Icon,
|
||||
onClick: () =>
|
||||
editor
|
||||
?.chain()
|
||||
?.focus()
|
||||
?.lift("taskItem")
|
||||
.liftListItem("listItem")
|
||||
.setHeading({ level: 3 })
|
||||
.run(),
|
||||
id: "heading3",
|
||||
disabled: () => !editor?.can().setHeading({ level: 3 }),
|
||||
isActive: () => editor?.isActive("heading", { level: 3 }),
|
||||
label: "Heading 3",
|
||||
type: "option",
|
||||
},
|
||||
{
|
||||
icon: ListIcon,
|
||||
onClick: () => editor?.chain()?.focus()?.toggleBulletList()?.run(),
|
||||
id: "bulletList",
|
||||
disabled: () => !editor?.can()?.toggleBulletList(),
|
||||
isActive: () => editor?.isActive("bulletList"),
|
||||
label: "Bullet list",
|
||||
type: "option",
|
||||
},
|
||||
{
|
||||
icon: ListOrderedIcon,
|
||||
onClick: () => editor?.chain()?.focus()?.toggleOrderedList()?.run(),
|
||||
id: "orderedList",
|
||||
disabled: () => !editor?.can()?.toggleOrderedList(),
|
||||
isActive: () => editor?.isActive("orderedList"),
|
||||
label: "Numbered list",
|
||||
type: "option",
|
||||
},
|
||||
],
|
||||
[editor, editor?.state]
|
||||
);
|
||||
|
||||
const bubbleMenuProps: TextMenuProps = {
|
||||
...props,
|
||||
shouldShow: ({ editor, state, from, to }) => {
|
||||
const { doc, selection } = state;
|
||||
const { empty } = selection;
|
||||
|
||||
// Sometime check for `empty` is not enough.
|
||||
// Doubleclick an empty paragraph returns a node size of 2.
|
||||
// So we check also for an empty text size.
|
||||
const isEmptyTextBlock =
|
||||
!doc.textBetween(from, to).length && isTextSelection(state.selection);
|
||||
|
||||
if (
|
||||
empty ||
|
||||
isEmptyTextBlock ||
|
||||
!editor.isEditable ||
|
||||
editor.isActive("image") ||
|
||||
editor.isActive("logo") ||
|
||||
editor.isActive("spacer") ||
|
||||
editor.isActive("variable") ||
|
||||
editor.isActive("link") ||
|
||||
editor.isActive({
|
||||
component: "button",
|
||||
})
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
tippyOptions: {
|
||||
maxWidth: "100%",
|
||||
moveTransition: "transform 0.15s ease-out",
|
||||
},
|
||||
};
|
||||
|
||||
const selectedColor = editor?.getAttributes("textStyle")?.color;
|
||||
const activeItem = useMemo(
|
||||
() =>
|
||||
contentTypePickerOptions.find(
|
||||
(option) => option.type === "option" && option.isActive()
|
||||
),
|
||||
[contentTypePickerOptions]
|
||||
);
|
||||
|
||||
return (
|
||||
<BubbleMenu
|
||||
{...bubbleMenuProps}
|
||||
className="flex gap-1 rounded-md border border-gray-200 bg-white shadow-md items-center"
|
||||
>
|
||||
<ContentTypePicker options={contentTypePickerOptions} />
|
||||
<EditLinkPopover
|
||||
onSetLink={(url) => {
|
||||
editor
|
||||
?.chain()
|
||||
.focus()
|
||||
.setLink({ href: url, target: "_blank" })
|
||||
.run();
|
||||
|
||||
// editor?.commands.blur();
|
||||
}}
|
||||
/>
|
||||
<Separator orientation="vertical" className="h-6 bg-slate-300" />
|
||||
{items.map((item, index) => (
|
||||
<TextMenuButton key={index} {...item} />
|
||||
))}
|
||||
<Separator orientation="vertical" className="h-6 bg-slate-300" />
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="hover:bg-slate-100 hover:text-slate-900"
|
||||
>
|
||||
<span style={{ color: selectedColor }}>A</span>
|
||||
<ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="bg-white text-slate-900 w-52 px-1 border border-gray-200"
|
||||
sideOffset={16}
|
||||
>
|
||||
{textColors.map((color) => (
|
||||
<button
|
||||
key={color.value}
|
||||
onClick={() => editor?.chain().setColor(color.value).run()}
|
||||
className={`flex gap-2 items-center p-1 px-2 w-full ${
|
||||
selectedColor === color.value ||
|
||||
(selectedColor === undefined && color.value === "#000000")
|
||||
? "bg-gray-200 rounded-md"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<span style={{ color: color.value }}>A</span>
|
||||
<span className=" capitalize">{color.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</BubbleMenu>
|
||||
);
|
||||
}
|
||||
|
||||
type ContentTypePickerProps = {
|
||||
options: ContentTypePickerOption[];
|
||||
};
|
||||
|
||||
function ContentTypePicker({ options }: ContentTypePickerProps) {
|
||||
const activeOption = useMemo(
|
||||
() => options.find((option) => option.isActive()),
|
||||
[options]
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="hover:bg-slate-100 hover:text-slate-600 text-slate-600 px-2"
|
||||
>
|
||||
<span>{activeOption?.label || "Text"}</span>
|
||||
<ChevronDown className="h-4 w-4 ml-1.5 text-gray-800" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="bg-white border-gray-200 text-slate-900 w-52 px-1"
|
||||
sideOffset={16}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => {
|
||||
option.onClick();
|
||||
}}
|
||||
className={`flex gap-2 items-center p-1 px-2 w-full ${
|
||||
option.isActive() ? "bg-slate-100 rounded-md" : ""
|
||||
}`}
|
||||
>
|
||||
<option.icon className="h-3.5 w-3.5" />
|
||||
<span className=" capitalize">{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
type EditLinkPopoverType = {
|
||||
onSetLink: (url: string) => void;
|
||||
};
|
||||
|
||||
function EditLinkPopover({ onSetLink }: EditLinkPopoverType) {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="hover:bg-slate-100 hover:text-slate-600 text-slate-600 px-2"
|
||||
>
|
||||
<span>Link</span>
|
||||
<LinkIcon className="h-3.5 w-3.5 ml-1.5 text-gray-800" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="bg-white text-slate-900 px-1 w-[17rem] py-1 border border-gray-200"
|
||||
sideOffset={16}
|
||||
>
|
||||
<LinkEditorPanel onSetLink={onSetLink} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
30
packages/email-editor/src/menus/TextMenuButton.tsx
Normal file
30
packages/email-editor/src/menus/TextMenuButton.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
|
||||
import { TextMenuItem } from "./TextMenu";
|
||||
|
||||
export function TextMenuButton(item: TextMenuItem) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={item.command}
|
||||
className={cn(
|
||||
"px-2.5 hover:bg-slate-100 hover:text-black",
|
||||
item.isActive() ? "bg-slate-300" : ""
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
{item.icon ? (
|
||||
<item.icon
|
||||
className={cn(
|
||||
"h-3.5 w-3.5",
|
||||
item.isActive() ? "text-black" : "text-slate-700"
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-sm font-medium text-slate-700">{item.name}</span>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
304
packages/email-editor/src/nodes/button.tsx
Normal file
304
packages/email-editor/src/nodes/button.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
|
||||
import {
|
||||
AlignCenterIcon,
|
||||
AlignLeftIcon,
|
||||
AlignRightIcon,
|
||||
ScanIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@unsend/ui/src/popover";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
import { Input } from "@unsend/ui/src/input";
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { AllowedAlignments, ButtonOptions } from "../types";
|
||||
import { Separator } from "@unsend/ui/src/separator";
|
||||
import { BorderWidth } from "../components/ui/icons/BorderWidth";
|
||||
import { ColorPicker } from "../components/ui/ColorPicker";
|
||||
|
||||
const alignments: Array<AllowedAlignments> = ["left", "center", "right"];
|
||||
|
||||
export function ButtonComponent(props: NodeViewProps) {
|
||||
const {
|
||||
url,
|
||||
text,
|
||||
alignment,
|
||||
borderRadius: _radius,
|
||||
buttonColor,
|
||||
textColor,
|
||||
borderColor,
|
||||
borderWidth,
|
||||
} = props.node.attrs as ButtonOptions;
|
||||
const { getPos, editor } = props;
|
||||
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
className={`react-component ${
|
||||
props.selected && "ProseMirror-selectednode"
|
||||
}`}
|
||||
draggable="true"
|
||||
data-drag-handle=""
|
||||
style={{
|
||||
textAlign: alignment,
|
||||
}}
|
||||
>
|
||||
<Popover open={props.selected}>
|
||||
<PopoverTrigger asChild>
|
||||
<div>
|
||||
<button
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors disabled:pointer-events-none disabled:opacity-50",
|
||||
"h-10 px-4 py-2",
|
||||
"px-[32px] py-[20px] font-semibold no-underline"
|
||||
)}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
backgroundColor: buttonColor,
|
||||
color: textColor,
|
||||
borderWidth: Number(borderWidth),
|
||||
borderStyle: "solid",
|
||||
borderColor: borderColor,
|
||||
borderRadius: Number(_radius),
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const pos = getPos();
|
||||
editor.commands.setNodeSelection(pos);
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="start"
|
||||
side="top"
|
||||
className="space-y-2 light border-gray-200"
|
||||
sideOffset={10}
|
||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<Input
|
||||
placeholder="Add text here"
|
||||
value={text}
|
||||
onChange={(e) => {
|
||||
props.updateAttributes({
|
||||
text: e.target.value,
|
||||
});
|
||||
}}
|
||||
className="light"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Add link here"
|
||||
value={url}
|
||||
onChange={(e) => {
|
||||
props.updateAttributes({
|
||||
url: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-xs text-gray-500 mt-4">Border</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
|
||||
<ScanIcon className="text-slate-700 h-4 w-4" />
|
||||
<Input
|
||||
value={_radius}
|
||||
onChange={(e) =>
|
||||
props.updateAttributes({
|
||||
borderRadius: e.target.value,
|
||||
})
|
||||
}
|
||||
className="border-0 focus-visible:ring-0 h-6 p-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center border border-transparent focus-within:border-border gap-2 px-1 py-0.5 rounded-md">
|
||||
<BorderWidth className="text-slate-700 h-4 w-4" />
|
||||
<Input
|
||||
value={borderWidth}
|
||||
onChange={(e) =>
|
||||
props.updateAttributes({
|
||||
borderWidth: e.target.value,
|
||||
})
|
||||
}
|
||||
className="border-0 focus-visible:ring-0 h-6 p-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mt-4 mb-2">Alignment</div>
|
||||
<div className="flex">
|
||||
{alignments.map((alignment) => (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className=""
|
||||
size="sm"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
props.updateAttributes({
|
||||
alignment,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<AlignmentIcon alignment={alignment} />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mt-4 mb-2">Colors</div>
|
||||
<div className="flex gap-2">
|
||||
<BorderColorPickerPopup
|
||||
color={borderColor}
|
||||
onChange={(color) => {
|
||||
props.updateAttributes({
|
||||
borderColor: color,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<BackgroundColorPickerPopup
|
||||
color={buttonColor}
|
||||
onChange={(color) => {
|
||||
props.updateAttributes({
|
||||
buttonColor: color,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextColorPickerPopup
|
||||
color={textColor}
|
||||
onChange={(color) => {
|
||||
props.updateAttributes({
|
||||
textColor: color,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
// type ColorPickerProps = {
|
||||
// variant?: AllowedButtonVariant;
|
||||
// color: string;
|
||||
// onChange: (color: string) => void;
|
||||
// };
|
||||
|
||||
function BackgroundColorPickerPopup(props: ColorPickerProps) {
|
||||
const { color, onChange } = props;
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" className="" size="sm" type="button">
|
||||
<div
|
||||
className="h-4 w-4 rounded border"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full rounded-none border-0 !bg-transparent !p-0 shadow-none drop-shadow-md">
|
||||
<ColorPicker
|
||||
color={color}
|
||||
onChange={(newColor) => {
|
||||
// HACK: This is a workaround for a bug in tiptap
|
||||
// https://github.com/ueberdosis/tiptap/issues/3580
|
||||
//
|
||||
// ERROR: flushSync was called from inside a lifecycle
|
||||
//
|
||||
// To fix this, we need to make sure that the onChange
|
||||
// callback is run after the current execution context.
|
||||
queueMicrotask(() => {
|
||||
onChange(newColor);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function TextColorPickerPopup(props: ColorPickerProps) {
|
||||
const { color, onChange } = props;
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" size="sm" type="button">
|
||||
<div className="flex flex-col items-center justify-center gap-[1px]">
|
||||
<span className="font-bolder font-mono text-xs text-slate-700">
|
||||
A
|
||||
</span>
|
||||
<div className="h-[2px] w-3" style={{ backgroundColor: color }} />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full rounded-none border-0 !bg-transparent !p-0 shadow-none drop-shadow-md">
|
||||
<ColorPicker
|
||||
color={color}
|
||||
onChange={(color) => {
|
||||
queueMicrotask(() => {
|
||||
onChange(color);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
type ColorPickerProps = {
|
||||
color: string;
|
||||
onChange: (color: string) => void;
|
||||
};
|
||||
|
||||
function BorderColorPickerPopup(props: ColorPickerProps) {
|
||||
const { color, onChange } = props;
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" className="" size="sm" type="button">
|
||||
<BorderWidth className="h-4 w-4" style={{ color: color }} />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full rounded-none border-0 !bg-transparent !p-0 shadow-none drop-shadow-md">
|
||||
<ColorPicker
|
||||
color={color}
|
||||
onChange={(newColor) => {
|
||||
// HACK: This is a workaround for a bug in tiptap
|
||||
// https://github.com/ueberdosis/tiptap/issues/3580
|
||||
//
|
||||
// ERROR: flushSync was called from inside a lifecycle
|
||||
//
|
||||
// To fix this, we need to make sure that the onChange
|
||||
// callback is run after the current execution context.
|
||||
queueMicrotask(() => {
|
||||
onChange(newColor);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
const AlignmentIcon = ({ alignment }: { alignment: AllowedAlignments }) => {
|
||||
if (alignment === "left") {
|
||||
return <AlignLeftIcon className="h-4 w-4" />;
|
||||
} else if (alignment === "center") {
|
||||
return <AlignCenterIcon className="h-4 w-4" />;
|
||||
} else if (alignment === "right") {
|
||||
return <AlignRightIcon className="h-4 w-4" />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
14
packages/email-editor/src/nodes/unsubscribe-footer.tsx
Normal file
14
packages/email-editor/src/nodes/unsubscribe-footer.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { NodeViewProps, NodeViewWrapper, NodeViewContent } from "@tiptap/react";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
|
||||
export function UnsubscribeFooterComponent(props: NodeViewProps) {
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
className={`react-component footer`}
|
||||
draggable="true"
|
||||
data-drag-handle=""
|
||||
>
|
||||
<NodeViewContent className="content" />
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
225
packages/email-editor/src/nodes/variable.tsx
Normal file
225
packages/email-editor/src/nodes/variable.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { NodeViewProps, NodeViewWrapper, ReactRenderer } from "@tiptap/react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@unsend/ui/src/popover";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
import { Input } from "@unsend/ui/src/input";
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
||||
import { SuggestionOptions } from "@tiptap/suggestion";
|
||||
import tippy, { GetReferenceClientRect } from "tippy.js";
|
||||
import { CheckIcon, TriangleAlert } from "lucide-react";
|
||||
|
||||
export interface VariableOptions {
|
||||
name: string;
|
||||
fallback: string;
|
||||
}
|
||||
|
||||
export const VariableList = forwardRef((props: any, ref) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
const selectItem = (index: number) => {
|
||||
const item = props.items[index];
|
||||
|
||||
console.log("item: ", item);
|
||||
|
||||
if (item) {
|
||||
props.command({ id: item, name: item, fallback: "" });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => setSelectedIndex(0), [props.items]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
onKeyDown: ({ event }: { event: KeyboardEvent }) => {
|
||||
if (event.key === "ArrowUp") {
|
||||
setSelectedIndex(
|
||||
(selectedIndex + props.items.length - 1) % props.items.length
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
setSelectedIndex((selectedIndex + 1) % props.items.length);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.key === "Enter") {
|
||||
selectItem(selectedIndex);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="z-50 h-auto min-w-[128px] rounded-md border border-gray-200 bg-white p-1 shadow-md transition-all">
|
||||
{props?.items?.length ? (
|
||||
props?.items?.map((item: string, index: number) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => selectItem(index)}
|
||||
className={cn(
|
||||
"flex w-full space-x-2 rounded-md px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100",
|
||||
index === selectedIndex ? "bg-gray-200" : "bg-white"
|
||||
)}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<button className="flex w-full space-x-2 rounded-md bg-white px-2 py-1 text-left text-sm text-gray-900 hover:bg-gray-100">
|
||||
No result
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
VariableList.displayName = "VariableList";
|
||||
|
||||
export function getVariableSuggestions(
|
||||
variables: Array<string> = []
|
||||
): Omit<SuggestionOptions, "editor"> {
|
||||
return {
|
||||
items: ({ query }) => {
|
||||
return variables
|
||||
.concat(query.length > 0 ? [query] : [])
|
||||
.filter((item) => item.toLowerCase().startsWith(query.toLowerCase()))
|
||||
.slice(0, 5);
|
||||
},
|
||||
|
||||
render: () => {
|
||||
let component: ReactRenderer<any>;
|
||||
let popup: InstanceType<any> | null = null;
|
||||
|
||||
return {
|
||||
onStart: (props) => {
|
||||
component = new ReactRenderer(VariableList, {
|
||||
props,
|
||||
editor: props.editor,
|
||||
});
|
||||
|
||||
if (!props.clientRect) {
|
||||
return;
|
||||
}
|
||||
|
||||
popup = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
placement: "bottom-start",
|
||||
});
|
||||
},
|
||||
|
||||
onUpdate(props) {
|
||||
component.updateProps(props);
|
||||
|
||||
if (!props.clientRect) {
|
||||
return;
|
||||
}
|
||||
|
||||
popup?.[0]?.setProps({
|
||||
getReferenceClientRect: props.clientRect as GetReferenceClientRect,
|
||||
});
|
||||
},
|
||||
|
||||
onKeyDown(props) {
|
||||
if (props.event.key === "Escape") {
|
||||
popup?.[0].hide();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return component.ref?.onKeyDown(props);
|
||||
},
|
||||
|
||||
onExit() {
|
||||
if (!popup || !popup?.[0] || !component) {
|
||||
return;
|
||||
}
|
||||
|
||||
popup?.[0].destroy();
|
||||
component.destroy();
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function VariableComponent(props: NodeViewProps) {
|
||||
const { name, fallback } = props.node.attrs as VariableOptions;
|
||||
const [fallbackValue, setFallbackValue] = useState(fallback);
|
||||
const { getPos, editor } = props;
|
||||
|
||||
console.log(props.selected);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
props.updateAttributes({
|
||||
fallback: fallbackValue,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
className={`react-component inline-block ${
|
||||
props.selected && "ProseMirror-selectednode"
|
||||
}`}
|
||||
draggable="false"
|
||||
data-drag-handle=""
|
||||
>
|
||||
<Popover open={props.selected}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center rounded-md text-sm gap-1 ring-offset-white transition-colors",
|
||||
"px-2 border border-gray-300 shadow-sm cursor-pointer text-primary/80"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const pos = getPos();
|
||||
editor.commands.setNodeSelection(pos);
|
||||
}}
|
||||
>
|
||||
<span className="">{`{{${name}}}`}</span>
|
||||
{!fallback ? (
|
||||
<TriangleAlert className="w-3 h-3 text-orange-400" />
|
||||
) : null}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="start"
|
||||
side="top"
|
||||
className="space-y-2 light border-gray-200"
|
||||
sideOffset={10}
|
||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="flex gap-2 items-center">
|
||||
<Input
|
||||
placeholder="Fallback value"
|
||||
value={fallbackValue}
|
||||
onChange={(e) => {
|
||||
setFallbackValue(e.target.value);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Button variant="silent" size="sm" className="px-1" type="submit">
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Fallback value will be used if the variable value is empty.
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
765
packages/email-editor/src/renderer.tsx
Normal file
765
packages/email-editor/src/renderer.tsx
Normal file
@@ -0,0 +1,765 @@
|
||||
import { CSSProperties, Fragment } from "react";
|
||||
import type { JSONContent } from "@tiptap/core";
|
||||
import {
|
||||
Text,
|
||||
Html,
|
||||
Head,
|
||||
Body,
|
||||
Font,
|
||||
Container,
|
||||
Link,
|
||||
Heading,
|
||||
Hr,
|
||||
Button,
|
||||
Img,
|
||||
Preview,
|
||||
Row,
|
||||
Column,
|
||||
render,
|
||||
Code,
|
||||
} from "jsx-email";
|
||||
import { AllowedAlignments } from "./types";
|
||||
|
||||
interface NodeOptions {
|
||||
parent?: JSONContent;
|
||||
prev?: JSONContent;
|
||||
next?: JSONContent;
|
||||
}
|
||||
|
||||
export interface ThemeOptions {
|
||||
colors?: {
|
||||
heading?: string;
|
||||
paragraph?: string;
|
||||
horizontal?: string;
|
||||
footer?: string;
|
||||
blockquoteBorder?: string;
|
||||
codeBackground?: string;
|
||||
codeText?: string;
|
||||
link?: string;
|
||||
};
|
||||
fontSize?: {
|
||||
paragraph?: string;
|
||||
footer?: {
|
||||
size?: string;
|
||||
lineHeight?: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export interface RenderConfig {
|
||||
/**
|
||||
* The preview text is the snippet of text that is pulled into the inbox
|
||||
* preview of an email client, usually right after the subject line.
|
||||
*
|
||||
* Default: `undefined`
|
||||
*/
|
||||
preview?: string;
|
||||
/**
|
||||
* The theme object allows you to customize the colors and font sizes of the
|
||||
* rendered email.
|
||||
*
|
||||
* Default:
|
||||
* ```js
|
||||
* {
|
||||
* colors: {
|
||||
* heading: 'rgb(17, 24, 39)',
|
||||
* paragraph: 'rgb(55, 65, 81)',
|
||||
* horizontal: 'rgb(234, 234, 234)',
|
||||
* footer: 'rgb(100, 116, 139)',
|
||||
* },
|
||||
* fontSize: {
|
||||
* paragraph: '15px',
|
||||
* footer: {
|
||||
* size: '14px',
|
||||
* lineHeight: '24px',
|
||||
* },
|
||||
* },
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
theme?: ThemeOptions;
|
||||
}
|
||||
|
||||
const DEFAULT_THEME: ThemeOptions = {
|
||||
colors: {
|
||||
heading: "rgb(17, 24, 39)",
|
||||
paragraph: "rgb(55, 65, 81)",
|
||||
horizontal: "rgb(234, 234, 234)",
|
||||
footer: "rgb(100, 116, 139)",
|
||||
blockquoteBorder: "rgb(209, 213, 219)",
|
||||
codeBackground: "rgb(239, 239, 239)",
|
||||
codeText: "rgb(17, 24, 39)",
|
||||
link: "rgb(59, 130, 246)",
|
||||
},
|
||||
fontSize: {
|
||||
paragraph: "15px",
|
||||
footer: {
|
||||
size: ".8rem",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const CODE_FONT_FAMILY =
|
||||
'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
|
||||
|
||||
const allowedHeadings = ["h1", "h2", "h3"] as const;
|
||||
type AllowedHeadings = (typeof allowedHeadings)[number];
|
||||
|
||||
const headings: Record<AllowedHeadings, CSSProperties> = {
|
||||
h1: {
|
||||
fontSize: "36px",
|
||||
lineHeight: "40px",
|
||||
fontWeight: 800,
|
||||
},
|
||||
h2: {
|
||||
fontSize: "30px",
|
||||
lineHeight: "36px",
|
||||
fontWeight: 700,
|
||||
},
|
||||
h3: {
|
||||
fontSize: "24px",
|
||||
lineHeight: "38px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
};
|
||||
|
||||
const allowedSpacers = ["sm", "md", "lg", "xl"] as const;
|
||||
export type AllowedSpacers = (typeof allowedSpacers)[number];
|
||||
|
||||
const spacers: Record<AllowedSpacers, string> = {
|
||||
sm: "8px",
|
||||
md: "16px",
|
||||
lg: "32px",
|
||||
xl: "64px",
|
||||
};
|
||||
|
||||
export interface MarkType {
|
||||
[key: string]: any;
|
||||
type: string;
|
||||
attrs?: Record<string, any> | undefined;
|
||||
}
|
||||
|
||||
const antialiased: CSSProperties = {
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
MozOsxFontSmoothing: "grayscale",
|
||||
};
|
||||
|
||||
export function generateKey() {
|
||||
return Math.random().toString(36).substring(2, 8);
|
||||
}
|
||||
|
||||
export type VariableFormatter = (options: {
|
||||
variable: string;
|
||||
fallback?: string;
|
||||
}) => string;
|
||||
|
||||
const allowedLogoSizes = ["sm", "md", "lg"] as const;
|
||||
type AllowedLogoSizes = (typeof allowedLogoSizes)[number];
|
||||
|
||||
const logoSizes: Record<AllowedLogoSizes, string> = {
|
||||
sm: "40px",
|
||||
md: "48px",
|
||||
lg: "64px",
|
||||
};
|
||||
|
||||
type EmailRendererOption = {
|
||||
shouldReplaceVariableValues?: boolean;
|
||||
variableValues?: Record<string, string | null>;
|
||||
linkValues?: Record<string, string | null>;
|
||||
};
|
||||
|
||||
export class EmailRenderer {
|
||||
private config: RenderConfig = {
|
||||
theme: DEFAULT_THEME,
|
||||
};
|
||||
private shouldReplaceVariableValues = false;
|
||||
private variableValues: Record<string, string | null> = {};
|
||||
private linkValues: Record<string, string | null> = {};
|
||||
|
||||
constructor(
|
||||
private readonly email: JSONContent = { type: "doc", content: [] },
|
||||
options: EmailRendererOption = {}
|
||||
) {
|
||||
this.shouldReplaceVariableValues =
|
||||
options.shouldReplaceVariableValues || false;
|
||||
this.variableValues = options.variableValues || {};
|
||||
this.linkValues = options.linkValues || {};
|
||||
}
|
||||
|
||||
private variableFormatter: VariableFormatter = ({ variable, fallback }) => {
|
||||
return fallback
|
||||
? `{{${variable},fallback=${fallback}}}`
|
||||
: `{{${variable}}}`;
|
||||
};
|
||||
|
||||
public render(options: EmailRendererOption = {}) {
|
||||
this.shouldReplaceVariableValues =
|
||||
options.shouldReplaceVariableValues || false;
|
||||
this.variableValues = options.variableValues || {};
|
||||
this.linkValues = options.linkValues || {};
|
||||
const markup = this.markup();
|
||||
return render(markup);
|
||||
}
|
||||
|
||||
markup() {
|
||||
const nodes = this.email.content || [];
|
||||
|
||||
const jsxNodes = nodes.map((node, index) => {
|
||||
const nodeOptions: NodeOptions = {
|
||||
prev: nodes[index - 1],
|
||||
next: nodes[index + 1],
|
||||
parent: node,
|
||||
};
|
||||
|
||||
const component = this.renderNode(node, nodeOptions);
|
||||
if (!component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Fragment key={generateKey()}>{component}</Fragment>;
|
||||
});
|
||||
|
||||
const markup = (
|
||||
<Html>
|
||||
<Head>
|
||||
<Font
|
||||
fallbackFontFamily="sans-serif"
|
||||
fontFamily="Inter"
|
||||
fontStyle="normal"
|
||||
fontWeight={400}
|
||||
webFont={{
|
||||
url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
|
||||
format: "woff2",
|
||||
}}
|
||||
/>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `blockquote,h1,h2,h3,img,li,ol,p,ul{margin-top:0;margin-bottom:0} pre{padding:16px;border-radius:6px}`,
|
||||
}}
|
||||
/>
|
||||
<meta content="width=device-width" name="viewport" />
|
||||
<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
|
||||
<meta name="x-apple-disable-message-reformatting" />
|
||||
<meta
|
||||
// http://www.html-5.com/metatags/format-detection-meta-tag.html
|
||||
// It will prevent iOS from automatically detecting possible phone numbers in a block of text
|
||||
content="telephone=no,address=no,email=no,date=no,url=no"
|
||||
name="format-detection"
|
||||
/>
|
||||
<meta content="light" name="color-scheme" />
|
||||
<meta content="light" name="supported-color-schemes" />
|
||||
</Head>
|
||||
<Body>
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: "600px",
|
||||
minWidth: "300px",
|
||||
width: "100%",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
padding: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{jsxNodes}
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
|
||||
return markup;
|
||||
}
|
||||
|
||||
// `renderMark` will call the method of the corresponding mark type
|
||||
private renderMark(node: JSONContent): JSX.Element {
|
||||
// It will wrap the text with the corresponding mark type
|
||||
const text = node.text || <> </>;
|
||||
const marks = node.marks || [];
|
||||
|
||||
return marks.reduce(
|
||||
(acc, mark) => {
|
||||
const type = mark.type;
|
||||
if (type in this) {
|
||||
// @ts-expect-error - `this` is not assignable to type 'never'
|
||||
return this[type]?.(mark, acc) as JSX.Element;
|
||||
}
|
||||
|
||||
throw new Error(`Mark type "${type}" is not supported.`);
|
||||
},
|
||||
<>{text}</>
|
||||
);
|
||||
}
|
||||
|
||||
private getMappedContent(
|
||||
node: JSONContent,
|
||||
options?: NodeOptions
|
||||
): JSX.Element[] {
|
||||
return node.content
|
||||
?.map((childNode) => {
|
||||
const component = this.renderNode(childNode, options);
|
||||
if (!component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Fragment key={generateKey()}>{component}</Fragment>;
|
||||
})
|
||||
.filter((n) => n !== null) as JSX.Element[];
|
||||
}
|
||||
|
||||
private renderNode(
|
||||
node: JSONContent,
|
||||
options: NodeOptions = {}
|
||||
): JSX.Element | null {
|
||||
const type = node.type || "";
|
||||
|
||||
if (type in this) {
|
||||
// @ts-expect-error - `this` is not assignable to type 'never'
|
||||
return this[type]?.(node, options) as JSX.Element;
|
||||
}
|
||||
|
||||
throw new Error(`Node type "${type}" is not supported.`);
|
||||
}
|
||||
|
||||
private unsubscribeFooter(
|
||||
node: JSONContent,
|
||||
options?: NodeOptions
|
||||
): JSX.Element {
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
fontSize: this.config.theme?.fontSize?.footer?.size,
|
||||
lineHeight: this.config.theme?.fontSize?.footer?.lineHeight,
|
||||
maxWidth: "100%",
|
||||
color: this.config.theme?.colors?.footer,
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
private paragraph(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const alignment = attrs?.textAlign || "left";
|
||||
|
||||
const { parent, next } = options || {};
|
||||
const isParentListItem = parent?.type === "listItem";
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
textAlign: alignment,
|
||||
marginBottom: isParentListItem || isNextSpacer ? "0px" : "20px",
|
||||
marginTop: "0px",
|
||||
fontSize: this.config.theme?.fontSize?.paragraph,
|
||||
color: this.config.theme?.colors?.paragraph,
|
||||
...antialiased,
|
||||
}}
|
||||
>
|
||||
{node.content ? this.getMappedContent(node) : <> </>}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
private text(node: JSONContent, _?: NodeOptions): JSX.Element {
|
||||
const text = node.text || " ";
|
||||
if (node.marks) {
|
||||
return this.renderMark(node);
|
||||
}
|
||||
|
||||
return <>{text}</>;
|
||||
}
|
||||
|
||||
private bold(_: MarkType, text: JSX.Element): JSX.Element {
|
||||
return <strong>{text}</strong>;
|
||||
}
|
||||
|
||||
private italic(_: MarkType, text: JSX.Element): JSX.Element {
|
||||
return <em>{text}</em>;
|
||||
}
|
||||
|
||||
private underline(_: MarkType, text: JSX.Element): JSX.Element {
|
||||
return <u>{text}</u>;
|
||||
}
|
||||
|
||||
private strike(_: MarkType, text: JSX.Element): JSX.Element {
|
||||
return <s style={{ textDecoration: "line-through" }}>{text}</s>;
|
||||
}
|
||||
|
||||
private textStyle(mark: MarkType, text: JSX.Element): JSX.Element {
|
||||
const { attrs } = mark;
|
||||
const { fontSize, fontWeight, color } = attrs || {};
|
||||
|
||||
return <span style={{ fontSize, fontWeight, color }}>{text}</span>;
|
||||
}
|
||||
|
||||
private link(mark: MarkType, text: JSX.Element): JSX.Element {
|
||||
const { attrs } = mark;
|
||||
let href = attrs?.href || "#";
|
||||
const target = attrs?.target || "_blank";
|
||||
const rel = attrs?.rel || "noopener noreferrer nofollow";
|
||||
|
||||
// If the href value is provided, use it to replace the link
|
||||
// Otherwise, use the original link
|
||||
if (
|
||||
typeof this.linkValues === "object" ||
|
||||
typeof this.variableValues === "object"
|
||||
) {
|
||||
href = this.linkValues[href] || this.variableValues[href] || href;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
rel={rel}
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
textDecoration: "underline",
|
||||
color: this.config.theme?.colors?.link,
|
||||
}}
|
||||
target={target}
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
private heading(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const { next, prev } = options || {};
|
||||
|
||||
const level = `h${Number(attrs?.level) || 1}`;
|
||||
const alignment = attrs?.textAlign || "left";
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
const isPrevSpacer = prev?.type === "spacer";
|
||||
|
||||
const { fontSize, lineHeight, fontWeight } =
|
||||
headings[level as AllowedHeadings];
|
||||
|
||||
return (
|
||||
<Heading
|
||||
// @ts-expect-error - `this` is not assignable to type 'never'
|
||||
as={level}
|
||||
style={{
|
||||
textAlign: alignment,
|
||||
color: this.config.theme?.colors?.heading,
|
||||
marginBottom: isNextSpacer ? "0px" : "12px",
|
||||
marginTop: isPrevSpacer ? "0px" : "0px",
|
||||
fontSize,
|
||||
lineHeight,
|
||||
fontWeight,
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node)}
|
||||
</Heading>
|
||||
);
|
||||
}
|
||||
|
||||
private variable(node: JSONContent, _?: NodeOptions): JSX.Element {
|
||||
const { id: variable, fallback } = node.attrs || {};
|
||||
|
||||
let formattedVariable = this.variableFormatter({
|
||||
variable,
|
||||
fallback,
|
||||
});
|
||||
|
||||
// If `shouldReplaceVariableValues` is true, replace the variable values
|
||||
// Otherwise, just return the formatted variable
|
||||
if (this.shouldReplaceVariableValues) {
|
||||
formattedVariable =
|
||||
this.variableValues[variable] || fallback || formattedVariable;
|
||||
}
|
||||
|
||||
return <>{formattedVariable}</>;
|
||||
}
|
||||
|
||||
private horizontalRule(_: JSONContent, __?: NodeOptions): JSX.Element {
|
||||
return (
|
||||
<Hr
|
||||
style={{
|
||||
marginTop: "32px",
|
||||
marginBottom: "32px",
|
||||
borderTopWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private orderedList(node: JSONContent, _?: NodeOptions): JSX.Element {
|
||||
return (
|
||||
<Container style={{ maxWidth: "100%" }}>
|
||||
<ol
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
marginBottom: "20px",
|
||||
paddingLeft: "26px",
|
||||
listStyleType: "decimal",
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node)}
|
||||
</ol>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
private bulletList(node: JSONContent, _?: NodeOptions): JSX.Element {
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
marginBottom: "20px",
|
||||
paddingLeft: "26px",
|
||||
listStyleType: "disc",
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node)}
|
||||
</ul>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
private listItem(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
}}
|
||||
>
|
||||
<li
|
||||
style={{
|
||||
marginBottom: "8px",
|
||||
paddingLeft: "6px",
|
||||
...antialiased,
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node, { ...options, parent: node })}
|
||||
</li>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
private button(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const {
|
||||
text,
|
||||
url,
|
||||
buttonColor,
|
||||
textColor,
|
||||
borderRadius,
|
||||
borderColor,
|
||||
borderWidth,
|
||||
// @TODO: Update the attribute to `textAlign`
|
||||
alignment = "left",
|
||||
} = attrs || {};
|
||||
|
||||
const { next } = options || {};
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
|
||||
const href = this.linkValues[url] || this.variableValues[url] || url;
|
||||
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
textAlign: alignment,
|
||||
maxWidth: "100%",
|
||||
marginBottom: isNextSpacer ? "0px" : "20px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
href={href}
|
||||
style={{
|
||||
color: String(textColor),
|
||||
backgroundColor: buttonColor,
|
||||
borderColor: borderColor,
|
||||
padding: "12px 34px",
|
||||
borderWidth,
|
||||
borderStyle: "solid",
|
||||
textDecoration: "none",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
borderRadius: `${borderRadius}px`,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
private spacer(node: JSONContent, _?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const { height = "auto" } = attrs || {};
|
||||
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
height: spacers[height as AllowedSpacers] || height,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private hardBreak(_: JSONContent, __?: NodeOptions): JSX.Element {
|
||||
return <br />;
|
||||
}
|
||||
|
||||
private logo(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const {
|
||||
src,
|
||||
alt,
|
||||
title,
|
||||
size,
|
||||
// @TODO: Update the attribute to `textAlign`
|
||||
alignment = "left",
|
||||
} = attrs || {};
|
||||
|
||||
const { next } = options || {};
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
|
||||
return (
|
||||
<Row
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
marginBottom: isNextSpacer ? "0px" : "32px",
|
||||
}}
|
||||
>
|
||||
<Column align={alignment}>
|
||||
<Img
|
||||
alt={alt || title || "Logo"}
|
||||
src={src}
|
||||
style={{
|
||||
width: logoSizes[size as AllowedLogoSizes] || size,
|
||||
height: logoSizes[size as AllowedLogoSizes] || size,
|
||||
}}
|
||||
title={title || alt || "Logo"}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private image(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const {
|
||||
src,
|
||||
alt,
|
||||
title,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
alignment = "center",
|
||||
externalLink = "",
|
||||
} = attrs || {};
|
||||
|
||||
const { next } = options || {};
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
|
||||
const mainImage = (
|
||||
<Img
|
||||
alt={alt || title || "Image"}
|
||||
src={src}
|
||||
style={{
|
||||
height,
|
||||
width,
|
||||
maxWidth: "100%",
|
||||
outline: "none",
|
||||
border: "none",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
title={title || alt || "Image"}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Row
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
marginBottom: isNextSpacer ? "0px" : "32px",
|
||||
}}
|
||||
>
|
||||
<Column align={alignment}>
|
||||
{externalLink ? (
|
||||
<a
|
||||
href={externalLink}
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: "block",
|
||||
maxWidth: "100%",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
target="_blank"
|
||||
>
|
||||
{mainImage}
|
||||
</a>
|
||||
) : (
|
||||
mainImage
|
||||
)}
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private blockquote(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { next, prev } = options || {};
|
||||
const isNextSpacer = next?.type === "spacer";
|
||||
const isPrevSpacer = prev?.type === "spacer";
|
||||
|
||||
return (
|
||||
<blockquote
|
||||
style={{
|
||||
borderLeftWidth: "4px",
|
||||
borderLeftStyle: "solid",
|
||||
borderLeftColor: this.config.theme?.colors?.blockquoteBorder,
|
||||
paddingLeft: "16px",
|
||||
marginLeft: "0px",
|
||||
marginRight: "0px",
|
||||
marginTop: isPrevSpacer ? "0px" : "20px",
|
||||
marginBottom: isNextSpacer ? "0px" : "20px",
|
||||
}}
|
||||
>
|
||||
{this.getMappedContent(node)}
|
||||
</blockquote>
|
||||
);
|
||||
}
|
||||
|
||||
private code(_: MarkType, text: JSX.Element): JSX.Element {
|
||||
return (
|
||||
<code
|
||||
style={{
|
||||
backgroundColor: this.config.theme?.colors?.codeBackground,
|
||||
color: this.config.theme?.colors?.codeText,
|
||||
padding: "2px 4px",
|
||||
borderRadius: "6px",
|
||||
fontFamily: CODE_FONT_FAMILY,
|
||||
fontWeight: 400,
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
private codeBlock(node: JSONContent, options?: NodeOptions): JSX.Element {
|
||||
const { attrs } = node;
|
||||
const language = attrs?.language;
|
||||
|
||||
const content = node.content || [];
|
||||
|
||||
return (
|
||||
<Code language={language}>
|
||||
{content
|
||||
.map((n) => {
|
||||
return n.text;
|
||||
})
|
||||
.join("")}
|
||||
</Code>
|
||||
);
|
||||
}
|
||||
}
|
||||
246
packages/email-editor/src/styles/index.css
Normal file
246
packages/email-editor/src/styles/index.css
Normal file
@@ -0,0 +1,246 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.unsend-editor .unsend-prose p:where([class~="text-sm"]) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h1,
|
||||
.unsend-editor .unsend-prose h2,
|
||||
.unsend-editor .unsend-prose h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h1 {
|
||||
@apply text-[29px] font-semibold;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h2 {
|
||||
@apply text-2xl font-semibold;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h3 {
|
||||
@apply text-lg font-semibold;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose p {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h1 + p,
|
||||
.unsend-editor .unsend-prose h2 + p,
|
||||
.unsend-editor .unsend-prose h3 + p,
|
||||
.unsend-editor .unsend-prose hr + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose ol,
|
||||
.unsend-editor .unsend-prose ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose ol {
|
||||
@apply list-decimal pl-8;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose ul {
|
||||
@apply list-disc pl-8;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose li:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose li > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose hr {
|
||||
margin-block: 32px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
transition: opacity ease-in 0.2s;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 1.2rem;
|
||||
height: 1.5rem;
|
||||
z-index: 50;
|
||||
cursor: grab;
|
||||
|
||||
&:hover {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: background-color 0.2s;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .footer {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
color: rgb(100, 116, 139);
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .spacer + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose p + .spacer {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose a {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose blockquote + .spacer {
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose h1 + .spacer,
|
||||
.unsend-editor .unsend-prose h2 + .spacer,
|
||||
.unsend-editor .unsend-prose h3 + .spacer {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose ol + .spacer,
|
||||
.unsend-editor .unsend-prose ul + .spacer {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose img + .spacer {
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .node-button + .spacer,
|
||||
.unsend-editor .unsend-prose .node-linkCard + .spacer,
|
||||
.unsend-editor .unsend-prose footer + .spacer {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .node-button,
|
||||
.unsend-editor .unsend-prose .node-linkCard {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .node-image {
|
||||
line-height: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 32px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.unsend-editor .unsend-prose .node-image + .spacer {
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
||||
/* Remove code ::before and ::after */
|
||||
.unsend-editor .unsend-prose code::before,
|
||||
.unsend-editor .unsend-prose code::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
|
||||
}
|
||||
|
||||
.ProseMirror:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ProseMirror .is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #adb5bd;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
.ProseMirror .is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #adb5bd;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ProseMirror-selectednode {
|
||||
@apply bg-slate-50;
|
||||
}
|
||||
|
||||
/* Chrome, Safari and Opera */
|
||||
.unsend-no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unsend-no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.unsend-editor .react-colorful__alpha {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.unsend-editor .react-colorful__saturation,
|
||||
.unsend-editor .react-colorful__hue,
|
||||
.unsend-editor .react-colorful__alpha {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.unsend-editor .react-colorful__hue,
|
||||
.unsend-editor .react-colorful__alpha {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.unsend-editor .react-colorful__pointer {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.prosemirror-dropcursor-block {
|
||||
height: 1px !important;
|
||||
background-color: #555 !important;
|
||||
}
|
||||
|
||||
.unsend-editor .footer {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
23
packages/email-editor/src/types.ts
Normal file
23
packages/email-editor/src/types.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Editor } from "@tiptap/react";
|
||||
|
||||
export interface MenuProps {
|
||||
editor: Editor;
|
||||
appendTo?: React.RefObject<any>;
|
||||
shouldHide?: boolean;
|
||||
}
|
||||
|
||||
export type AllowedAlignments = "left" | "center" | "right";
|
||||
|
||||
export interface ButtonOptions {
|
||||
text: string;
|
||||
url: string;
|
||||
alignment: AllowedAlignments;
|
||||
borderRadius: string;
|
||||
borderColor: string;
|
||||
borderWidth: string;
|
||||
buttonColor: string;
|
||||
textColor: string;
|
||||
HTMLAttributes: Record<string, any>;
|
||||
}
|
||||
|
||||
export type SVGProps = React.SVGProps<SVGSVGElement>;
|
||||
Reference in New Issue
Block a user