gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload image option (#64)

Browse Source
This commit is contained in:
KM Koushik
2024-08-26 20:46:38 +10:00
committed by GitHub
parent 676f5c8c64
commit f9105971f0
17 changed files with 1595 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/email-editor/src/editor.tsx
View File

@@ -15,6 +15,7 @@ import { cn } from "@unsend/ui/lib/utils";
import { extensions } from "./extensions";
import LinkMenu from "./menus/LinkMenu";
import { Content, Editor as TipTapEditor } from "@tiptap/core";
import { UploadFn } from "./extensions/ImageExtension";
const content = `<h2>Hello World!</h2>
@@ -65,12 +66,14 @@ export type EditorProps = {
onUpdate?: (content: TipTapEditor) => void;
initialContent?: Content;
variables?: Array<string>;
uploadImage?: UploadFn;
};
export const Editor: React.FC<EditorProps> = ({
onUpdate,
initialContent,
variables,
uploadImage,
}) => {
const menuContainerRef = useRef(null);
@@ -91,7 +94,7 @@ export const Editor: React.FC<EditorProps> = ({
},
},
},
extensions: extensions({ variables }),
extensions: extensions({ variables, uploadImage }),
onUpdate: ({ editor }) => {
onUpdate?.(editor);
},

179
packages/email-editor/src/extensions/ImageExtension.tsx
View File

@@ -1,49 +1,142 @@
import { ReactNodeViewRenderer } from "@tiptap/react";
import TipTapImage from "@tiptap/extension-image";
import { ResizableImageTemplate } from "../nodes/image-resize";
import { PluginKey, Plugin } from "@tiptap/pm/state";
import { toast } from "@unsend/ui/src/toaster";
export const ResizableImageExtension = TipTapImage.extend({
addAttributes() {
return {
...this.parent?.(),
width: { renderHTML: ({ width }) => ({ width }), default: "600" },
height: { renderHTML: ({ height }) => ({ height }) },
borderRadius: {
default: "0",
},
borderWidth: {
default: "0",
},
borderColor: {
default: "rgb(0, 0, 0)",
},
alignment: {
default: "center",
renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
parseHTML: (element) =>
element.getAttribute("data-alignment") || "center",
},
externalLink: {
default: null,
renderHTML: ({ externalLink }) => {
if (!externalLink) {
return {};
}
return {
"data-external-link": externalLink,
};
const uploadKey = new PluginKey("upload-image");
export type UploadFn = (image: File) => Promise<string>;
interface ResizableImageExtensionOptions {
uploadImage?: UploadFn;
}
export const ResizableImageExtension =
TipTapImage.extend<ResizableImageExtensionOptions>({
addAttributes() {
return {
...this.parent?.(),
width: { renderHTML: ({ width }) => ({ width }), default: "600" },
height: { renderHTML: ({ height }) => ({ height }) },
borderRadius: {
default: "0",
},
parseHTML: (element) => {
const externalLink = element.getAttribute("data-external-link");
return externalLink ? { externalLink } : null;
borderWidth: {
default: "0",
},
},
alt: {
default: "image",
},
};
},
addNodeView() {
return ReactNodeViewRenderer(ResizableImageTemplate);
},
});
borderColor: {
default: "rgb(0, 0, 0)",
},
alignment: {
default: "center",
renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
parseHTML: (element) =>
element.getAttribute("data-alignment") || "center",
},
externalLink: {
default: null,
renderHTML: ({ externalLink }) => {
if (!externalLink) {
return {};
}
return {
"data-external-link": externalLink,
};
},
parseHTML: (element) => {
const externalLink = element.getAttribute("data-external-link");
return externalLink ? { externalLink } : null;
},
},
alt: {
default: "image",
},
isUploading: {
default: false,
},
};
},
addNodeView() {
return ReactNodeViewRenderer(ResizableImageTemplate);
},
addProseMirrorPlugins() {
return [
new Plugin({
key: uploadKey,
props: {
handleDOMEvents: {
drop: (view, event) => {
event.preventDefault();
const hasFiles = event.dataTransfer?.files?.length;
if (!hasFiles) return false;
const image = Array.from(event.dataTransfer.files).find(
(file) => file.type.startsWith("image/")
);
if (!this.options.uploadImage) {
toast.error("Upload image is not supported");
return true;
}
if (!image) {
toast.error("Only image is supported");
return true;
}
event.preventDefault();
const { schema } = view.state;
if (!schema.nodes.image) return false;
const coordinates = view.posAtCoords({
left: event.clientX,
top: event.clientY,
});
const placeholder = URL.createObjectURL(image);
const node = schema.nodes.image.create({
src: placeholder,
isUploading: true,
});
const transaction = view.state.tr.insert(
coordinates?.pos || 0,
node
);
view.dispatch(transaction);
this.options
.uploadImage?.(image)
.then((url) => {
const updateTransaction = view.state.tr.setNodeMarkup(
coordinates?.pos || 0,
null,
{
src: url,
isUploading: false,
}
);
view.dispatch(updateTransaction);
})
.catch((error) => {
// Remove the placeholder image node if there's an error
const removeTransaction = view.state.tr.delete(
coordinates?.pos || 0,
(coordinates?.pos || 0) + 1
);
view.dispatch(removeTransaction);
toast.error("Error uploading image:", error.message);
console.error("Error uploading image:", error);
});
return true;
},
},
},
}),
];
},
});

85
packages/email-editor/src/extensions/SlashCommand.tsx
View File

@@ -27,6 +27,7 @@ import {
useState,
} from "react";
import tippy, { GetReferenceClientRect } from "tippy.js";
import { UploadFn } from "./ImageExtension";
export interface CommandProps {
editor: Editor;
@@ -65,6 +66,7 @@ export const SlashCommand = Extension.create({
props.command({ editor, range });
},
},
uploadImage: undefined as UploadFn | undefined,
};
},
addProseMirrorPlugins() {
@@ -77,7 +79,7 @@ export const SlashCommand = Extension.create({
},
});
const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
{
title: "Text",
description: "Just start typing with plain text.",
@@ -158,14 +160,46 @@ const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
searchTerms: ["image"],
icon: <ImageIcon className="h-4 w-4" />,
command: ({ editor, range }: CommandProps) => {
const imageUrl = prompt("Image URL: ") || "";
if (uploadImage) {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = async () => {
const file = input.files?.[0];
if (file && uploadImage) {
editor.chain().focus().deleteRange(range).run();
const placeholder = URL.createObjectURL(file);
editor
.chain()
.focus()
.setImage({ src: placeholder })
.updateAttributes("image", { isUploading: true })
.run();
try {
console.log("before upload");
const url = await uploadImage(file);
editor
.chain()
.focus()
.updateAttributes("image", { src: url, isUploading: false })
.run();
} catch (e) {
editor.chain().focus().deleteNode("image").run();
console.error("Failed to upload image:", e);
}
}
};
input.click();
} else {
const imageUrl = prompt("Image URL: ") || "";
if (!imageUrl) {
return;
if (!imageUrl) {
return;
}
editor.chain().focus().deleteRange(range).run();
editor.chain().focus().setImage({ src: imageUrl }).run();
}
editor.chain().focus().deleteRange(range).run();
editor.chain().focus().setImage({ src: imageUrl }).run();
},
},
{
@@ -186,16 +220,6 @@ const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
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.",
@@ -372,22 +396,25 @@ const CommandList = ({
};
export function getSlashCommandSuggestions(
commands: SlashCommandItem[] = []
commands: SlashCommandItem[] = [],
uploadImage?: UploadFn
): 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 [...DEFAULT_SLASH_COMMANDS(uploadImage), ...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;
}
return true;
});
);
},
render: () => {
let component: ReactRenderer<any>;

15
packages/email-editor/src/extensions/index.ts
View File

@@ -16,9 +16,15 @@ import { SlashCommand, getSlashCommandSuggestions } from "./SlashCommand";
import { VariableExtension } from "./VariableExtension";
import { getVariableSuggestions } from "../nodes/variable";
import { UnsubscribeFooterExtension } from "./UnsubsubscribeExtension";
import { ResizableImageExtension } from "./ImageExtension";
import { ResizableImageExtension, UploadFn } from "./ImageExtension";
export function extensions({ variables }: { variables?: Array<string> }) {
export function extensions({
variables,
uploadImage,
}: {
variables?: Array<string>;
uploadImage?: UploadFn;
}) {
const extensions = [
StarterKit.configure({
heading: {
@@ -64,7 +70,8 @@ export function extensions({ variables }: { variables?: Array<string> }) {
TaskItem,
TaskList,
SlashCommand.configure({
suggestion: getSlashCommandSuggestions([]),
suggestion: getSlashCommandSuggestions([], uploadImage),
uploadImage,
}),
Placeholder.configure({
placeholder: "write something on '/' for commands",
@@ -75,7 +82,7 @@ export function extensions({ variables }: { variables?: Array<string> }) {
suggestion: getVariableSuggestions(variables),
}),
UnsubscribeFooterExtension,
ResizableImageExtension,
ResizableImageExtension.configure({ uploadImage }),
];
return extensions;

2
packages/email-editor/src/nodes/button.tsx
View File

@@ -167,7 +167,7 @@ export function ButtonComponent(props: NodeViewProps) {
<div className="flex">
{alignments.map((alignment) => (
<Tooltip key={alignment}>
<TooltipTrigger>
<TooltipTrigger asChild>
<Button
variant="ghost"
key={alignment}

102
packages/email-editor/src/nodes/image-resize.tsx
View File

@@ -27,6 +27,7 @@ import {
TooltipTrigger,
} from "@unsend/ui/src/tooltip";
import { Separator } from "@unsend/ui/src/separator";
import Spinner from "@unsend/ui/src/spinner";
import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
import { TextEditorPanel } from "../components/panels/TextEditorPanel";
@@ -168,6 +169,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
alt,
borderRadius: _br,
borderColor: _bc,
isUploading,
...attrs
} = node.attrs || {};
@@ -195,18 +197,31 @@ export function ResizableImageTemplate(props: NodeViewProps) {
}[alignment as string] || {}),
}}
>
<Popover open={props.selected}>
<Popover open={props.selected && !isUploading}>
<PopoverTrigger>
<img
{...attrs}
ref={imgRef}
style={{
...resizingStyle,
cursor: "default",
marginBottom: 0,
}}
/>
{selected && (
{isUploading ? (
<div className="relative w-full h-full">
<img
{...attrs}
className="flex items-center justify-center opacity-70"
/>
<div className="absolute inset-0 flex items-center justify-center">
<Spinner className="w-8 h-8 text-primary" />
</div>
</div>
) : (
<img
{...attrs}
ref={imgRef}
style={{
...resizingStyle,
cursor: "default",
marginBottom: 0,
}}
/>
)}
{selected && !isUploading && (
<>
{dragButton("left")}
{dragButton("right")}
@@ -239,7 +254,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
<Separator orientation="vertical" className="h-6 my-auto" />
{alignments.map((alignment) => (
<Tooltip key={alignment}>
<TooltipTrigger>
<TooltipTrigger asChild>
<Button
variant="ghost"
key={alignment}
@@ -326,7 +341,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
onClick={() => setOpenImgSrc(true)}
>
<Tooltip>
<TooltipTrigger>
<TooltipTrigger asChild>
<ImageIcon className="h-4 w-4 " />
</TooltipTrigger>
<TooltipContent>Image source</TooltipContent>
@@ -346,22 +361,22 @@ export function ResizableImageTemplate(props: NodeViewProps) {
</PopoverContent>
</Popover>
<Popover open={openAltText} onOpenChange={setOpenAltText}>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="px-2"
size="sm"
type="button"
onClick={() => setOpenAltText(true)}
>
<Tooltip>
<TooltipTrigger>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="px-2"
size="sm"
type="button"
onClick={() => setOpenAltText(true)}
>
<TypeIcon className="h-4 w-4 " />
</TooltipTrigger>
<TooltipContent>Alt text</TooltipContent>
</Tooltip>
</Button>
</PopoverTrigger>
</Button>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent>Alt text</TooltipContent>
</Tooltip>
<PopoverContent className="light border-gray-200 px-4 py-2">
<TextEditorPanel
initialText={alt}
@@ -375,22 +390,23 @@ export function ResizableImageTemplate(props: NodeViewProps) {
</PopoverContent>
</Popover>
<Popover open={openLink} onOpenChange={setOpenLink}>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="px-2"
size="sm"
type="button"
onClick={() => setOpenLink(true)}
>
<Tooltip>
<TooltipTrigger>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="px-2"
size="sm"
type="button"
onClick={() => setOpenLink(true)}
>
<LinkIcon className="h-4 w-4 " />
</TooltipTrigger>
<TooltipContent>Link</TooltipContent>
</Tooltip>
</Button>
</PopoverTrigger>
</Button>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent>Link</TooltipContent>
</Tooltip>
<PopoverContent className="light border-gray-200 px-4 py-2">
<LinkEditorPanel
initialUrl={externalLink}

2
packages/email-editor/tsconfig.lint.json
View File

@@ -3,6 +3,6 @@
"compilerOptions": {
"outDir": "dist"
},
"include": ["src", "turbo", "**/*.ts", "**/*.tsx"],
"include": ["src", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist"]
}