js/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost synced 2025-03-28 21:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance editor uploads (#895)

Browse Source 
* * 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
This commit is contained in:
Philip Okugbe 2025-03-15 18:27:26 +00:00 committed by GitHub
parent 573457403e
commit 21c3ad0ecc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 123 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx
View File

@ -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()) {

20
apps/client/src/features/editor/components/common/editor-paste-handler.tsx
View File

@ -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);

81
apps/client/src/features/editor/components/slash-menu/menu-items.ts
View File

@ -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();
},
},
],

1
apps/client/src/features/editor/components/video/video-view.tsx
View File

@ -22,6 +22,7 @@ export default function VideoView(props: NodeViewProps) {
controls
src={getFileUrl(src)}
className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
style={{ display: "block" }}
/>
</NodeViewWrapper>
);

15
packages/editor-ext/src/lib/attachment/attachment-upload.ts
View File

@ -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(

12
packages/editor-ext/src/lib/image/image-upload.ts
View File

@ -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);
};

18
packages/editor-ext/src/lib/media-utils.ts
View File

@ -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<any>;
}
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());
}
}

13
packages/editor-ext/src/lib/video/video-upload.ts
View File

@ -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);
};