From 21c3ad0ecc604fa60df26043de2ede8c47b44e23 Mon Sep 17 00:00:00 2001 From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com> Date: Sat, 15 Mar 2025 18:27:26 +0000 Subject: [PATCH] feat: enhance editor uploads (#895) * * multi-file paste support * allow media files (image/videos) to be attachments * insert trailing node if file placeholder is at the end of the editor * fix video align --- .../attachment/upload-attachment-action.tsx | 7 +- .../common/editor-paste-handler.tsx | 20 +++-- .../components/slash-menu/menu-items.ts | 81 ++++++++++++++----- .../editor/components/video/video-view.tsx | 1 + .../src/lib/attachment/attachment-upload.ts | 15 +++- .../editor-ext/src/lib/image/image-upload.ts | 12 +-- packages/editor-ext/src/lib/media-utils.ts | 18 ++++- .../editor-ext/src/lib/video/video-upload.ts | 13 ++- 8 files changed, 123 insertions(+), 44 deletions(-) diff --git a/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx b/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx index f1fd2eb6..9f668963 100644 --- a/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx +++ b/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx @@ -17,8 +17,11 @@ export const uploadAttachmentAction = handleAttachmentUpload({ throw err; } }, - validateFn: (file) => { - if (file.type.includes("image/") || file.type.includes("video/")) { + validateFn: (file, allowMedia: boolean) => { + if ( + (file.type.includes("image/") || file.type.includes("video/")) && + !allowMedia + ) { return false; } if (file.size > getFileUploadSizeLimit()) { diff --git a/apps/client/src/features/editor/components/common/editor-paste-handler.tsx b/apps/client/src/features/editor/components/common/editor-paste-handler.tsx index c0a9c6d8..3a15e95d 100644 --- a/apps/client/src/features/editor/components/common/editor-paste-handler.tsx +++ b/apps/client/src/features/editor/components/common/editor-paste-handler.tsx @@ -40,10 +40,8 @@ export const handlePaste = ( if (event.clipboardData?.files.length) { event.preventDefault(); - const [file] = Array.from(event.clipboardData.files); - const pos = view.state.selection.from; - - if (file) { + for (const file of event.clipboardData.files) { + const pos = view.state.selection.from; uploadImageAction(file, view, pos, pageId); uploadVideoAction(file, view, pos, pageId); uploadAttachmentAction(file, view, pos, pageId); @@ -61,13 +59,13 @@ export const handleFileDrop = ( ) => { if (!moved && event.dataTransfer?.files.length) { event.preventDefault(); - const [file] = Array.from(event.dataTransfer.files); - const coordinates = view.posAtCoords({ - left: event.clientX, - top: event.clientY, - }); - // here we deduct 1 from the pos or else the image will create an extra node - if (file) { + + for (const file of event.dataTransfer.files) { + const coordinates = view.posAtCoords({ + left: event.clientX, + top: event.clientY, + }); + uploadImageAction(file, view, coordinates?.pos ?? 0 - 1, pageId); uploadVideoAction(file, view, coordinates?.pos ?? 0 - 1, pageId); uploadAttachmentAction(file, view, coordinates?.pos ?? 0 - 1, pageId); diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts index 9672631e..9c5296eb 100644 --- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts +++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts @@ -38,7 +38,8 @@ import { LoomIcon, MiroIcon, TypeformIcon, - VimeoIcon, YoutubeIcon + VimeoIcon, + YoutubeIcon, } from "@/components/icons"; const CommandGroups: SlashMenuGroupedItemsType = { @@ -221,13 +222,7 @@ const CommandGroups: SlashMenuGroupedItemsType = { if (input.files?.length) { const file = input.files[0]; const pos = editor.view.state.selection.from; - if (file.type.includes("image/*")) { - uploadImageAction(file, editor.view, pos, pageId); - } else if (file.type.includes("video/*")) { - uploadVideoAction(file, editor.view, pos, pageId); - } else { - uploadAttachmentAction(file, editor.view, pos, pageId); - } + uploadAttachmentAction(file, editor.view, pos, pageId, true); } }; input.click(); @@ -368,7 +363,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["airtable"], icon: AirtableIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'airtable' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "airtable" }) + .run(); }, }, { @@ -377,7 +377,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["loom"], icon: LoomIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'loom' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "loom" }) + .run(); }, }, { @@ -386,7 +391,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["figma"], icon: FigmaIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'figma' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "figma" }) + .run(); }, }, { @@ -395,7 +405,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["typeform"], icon: TypeformIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'typeform' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "typeform" }) + .run(); }, }, { @@ -404,7 +419,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["miro"], icon: MiroIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'miro' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "miro" }) + .run(); }, }, { @@ -413,7 +433,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["youtube", "yt"], icon: YoutubeIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'youtube' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "youtube" }) + .run(); }, }, { @@ -422,7 +447,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["vimeo"], icon: VimeoIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'vimeo' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "vimeo" }) + .run(); }, }, { @@ -431,7 +461,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["framer"], icon: FramerIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'framer' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "framer" }) + .run(); }, }, { @@ -440,7 +475,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["google drive", "gdrive"], icon: GoogleDriveIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gdrive' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "gdrive" }) + .run(); }, }, { @@ -449,7 +489,12 @@ const CommandGroups: SlashMenuGroupedItemsType = { searchTerms: ["google sheets", "gsheets"], icon: GoogleSheetsIcon, command: ({ editor, range }: CommandProps) => { - editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gsheets' }).run(); + editor + .chain() + .focus() + .deleteRange(range) + .setEmbed({ provider: "gsheets" }) + .run(); }, }, ], diff --git a/apps/client/src/features/editor/components/video/video-view.tsx b/apps/client/src/features/editor/components/video/video-view.tsx index 40b646a5..d7a53b0f 100644 --- a/apps/client/src/features/editor/components/video/video-view.tsx +++ b/apps/client/src/features/editor/components/video/video-view.tsx @@ -22,6 +22,7 @@ export default function VideoView(props: NodeViewProps) { controls src={getFileUrl(src)} className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)} + style={{ display: "block" }} /> ); diff --git a/packages/editor-ext/src/lib/attachment/attachment-upload.ts b/packages/editor-ext/src/lib/attachment/attachment-upload.ts index ed44b842..0d2ac6c7 100644 --- a/packages/editor-ext/src/lib/attachment/attachment-upload.ts +++ b/packages/editor-ext/src/lib/attachment/attachment-upload.ts @@ -1,6 +1,10 @@ import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state"; import { Decoration, DecorationSet } from "@tiptap/pm/view"; -import { MediaUploadOptions, UploadFn } from "../media-utils"; +import { + insertTrailingNode, + MediaUploadOptions, + UploadFn, +} from "../media-utils"; import { IAttachment } from "../types"; const uploadKey = new PluginKey("attachment-upload"); @@ -33,7 +37,8 @@ export const AttachmentUploadPlugin = ({ placeholder.appendChild(uploadingText); - const deco = Decoration.widget(pos + 1, placeholder, { + const realPos = pos + 1; + const deco = Decoration.widget(realPos, placeholder, { id, }); set = set.add(tr.doc, [deco]); @@ -64,8 +69,8 @@ function findPlaceholder(state: EditorState, id: {}) { export const handleAttachmentUpload = ({ validateFn, onUpload }: MediaUploadOptions): UploadFn => - async (file, view, pos, pageId) => { - const validated = validateFn?.(file); + async (file, view, pos, pageId, allowMedia) => { + const validated = validateFn?.(file, allowMedia); // @ts-ignore if (!validated) return; // A fresh object to act as the ID for this upload @@ -82,6 +87,8 @@ export const handleAttachmentUpload = fileName: file.name, }, }); + + insertTrailingNode(tr, pos, view); view.dispatch(tr); await onUpload(file, pageId).then( diff --git a/packages/editor-ext/src/lib/image/image-upload.ts b/packages/editor-ext/src/lib/image/image-upload.ts index 2f8b824e..9a759903 100644 --- a/packages/editor-ext/src/lib/image/image-upload.ts +++ b/packages/editor-ext/src/lib/image/image-upload.ts @@ -1,6 +1,6 @@ import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state"; import { Decoration, DecorationSet } from "@tiptap/pm/view"; -import { MediaUploadOptions, UploadFn } from "../media-utils"; +import { insertTrailingNode, MediaUploadOptions, UploadFn } from "../media-utils"; import { IAttachment } from "../types"; const uploadKey = new PluginKey("image-upload"); @@ -69,13 +69,13 @@ export const handleImageUpload = // A fresh object to act as the ID for this upload const id = {}; - // Replace the selection with a placeholder - const tr = view.state.tr; - if (!tr.selection.empty) tr.deleteSelection(); - const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { + const tr = view.state.tr; + // Replace the selection with a placeholder + if (!tr.selection.empty) tr.deleteSelection(); + tr.setMeta(uploadKey, { add: { id, @@ -83,6 +83,8 @@ export const handleImageUpload = src: reader.result, }, }); + + insertTrailingNode(tr, pos, view); view.dispatch(tr); }; diff --git a/packages/editor-ext/src/lib/media-utils.ts b/packages/editor-ext/src/lib/media-utils.ts index 82d57994..f05c4264 100644 --- a/packages/editor-ext/src/lib/media-utils.ts +++ b/packages/editor-ext/src/lib/media-utils.ts @@ -1,13 +1,29 @@ import type { EditorView } from "@tiptap/pm/view"; +import { Transaction } from "@tiptap/pm/state"; export type UploadFn = ( file: File, view: EditorView, pos: number, pageId: string, + // only applicable to file attachments + allowMedia?: boolean, ) => void; export interface MediaUploadOptions { - validateFn?: (file: File) => void; + validateFn?: (file: File, allowMedia?: boolean) => void; onUpload: (file: File, pageId: string) => Promise; } + +export function insertTrailingNode( + tr: Transaction, + pos: number, + view: EditorView, +) { + // create trailing node after decoration + // if decoration is at the last node + const currentDocSize = view.state.doc.content.size; + if (pos + 1 === currentDocSize) { + tr.insert(currentDocSize, view.state.schema.nodes.paragraph.create()); + } +} diff --git a/packages/editor-ext/src/lib/video/video-upload.ts b/packages/editor-ext/src/lib/video/video-upload.ts index b0a9a25a..1e976ecc 100644 --- a/packages/editor-ext/src/lib/video/video-upload.ts +++ b/packages/editor-ext/src/lib/video/video-upload.ts @@ -1,6 +1,10 @@ import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state"; import { Decoration, DecorationSet } from "@tiptap/pm/view"; -import { MediaUploadOptions, UploadFn } from "../media-utils"; +import { + insertTrailingNode, + MediaUploadOptions, + UploadFn, +} from "../media-utils"; import { IAttachment } from "../types"; const uploadKey = new PluginKey("video-upload"); @@ -70,12 +74,13 @@ export const handleVideoUpload = const id = {}; // Replace the selection with a placeholder - const tr = view.state.tr; - if (!tr.selection.empty) tr.deleteSelection(); const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { + const tr = view.state.tr; + if (!tr.selection.empty) tr.deleteSelection(); + tr.setMeta(uploadKey, { add: { id, @@ -83,6 +88,8 @@ export const handleVideoUpload = src: reader.result, }, }); + + insertTrailingNode(tr, pos, view); view.dispatch(tr); };