feat: add attachments from clipboard

src/components/messaging/MessageInput.tsx

@@ -6,9 +6,9 @@ import Channel from "../../stores/objects/Channel";
 import { MessageType, RESTPostAPIChannelMessageJSONBody } from "@spacebarchat/spacebar-api-types/v9";
 import { observer } from "mobx-react-lite";
 import React, { useMemo } from "react";
-import { BaseEditor, Descendant, Node, createEditor } from "slate";
-import { HistoryEditor, withHistory } from "slate-history";
-import { Editable, ReactEditor, Slate, withReact } from "slate-react";
+import { Descendant, Node, createEditor } from "slate";
+import { withHistory } from "slate-history";
+import { Editable, Slate, withReact } from "slate-react";
 import Guild from "../../stores/objects/Guild";
 import { Permissions } from "../../utils/Permissions";
 import Snowflake from "../../utils/Snowflake";
@@ -18,17 +18,6 @@ import IconButton from "../IconButton";
 import AttachmentUploadList from "./AttachmentUploadList";
 import TypingStatus from "./TypingStatus";
 
-type CustomElement = { type: "paragraph"; children: CustomText[] };
-type CustomText = { text: string; bold?: true };
-
-declare module "slate" {
-	interface CustomTypes {
-		Editor: BaseEditor & ReactEditor & HistoryEditor;
-		Element: CustomElement;
-		Text: CustomText;
-	}
-}
-
 const Container = styled.div`
 	margin-top: -8px;
 	padding-left: 16px;
@@ -106,6 +95,19 @@ function MessageInput(props: Props) {
 	const uploadRef = React.useRef<HTMLInputElement>(null);
 	const [attachments, setAttachments] = React.useState<File[]>([]);
 
+	editor.insertData = (data) => {
+		console.log("insert data", data);
+		const text = data.getData("text/plain");
+		const { files } = data;
+
+		if (files && files.length > 0) {
+			const newAttachments = [...attachments, ...files];
+			setAttachments(newAttachments);
+		} else {
+			editor.insertText(text);
+		}
+	};
+
 	React.useEffect(() => {
 		const permission = Permissions.getPermission(app.account!.id, props.guild, props.channel);
 		setCanSendMessages(permission.has("SEND_MESSAGES"));

src/components/messaging/Slate.ts

@@ -0,0 +1,38 @@
+import { BaseEditor, BaseRange, Descendant } from "slate";
+import { HistoryEditor } from "slate-history";
+import { ReactEditor } from "slate-react";
+
+export type EmptyText = {
+	text: string;
+};
+
+export type CustomText = {
+	bold?: boolean;
+	italic?: boolean;
+	code?: boolean;
+	text: string;
+};
+
+export type ParagraphElement = {
+	type: "paragraph";
+	align?: string;
+	children: Descendant[];
+};
+
+type CustomElement = ParagraphElement;
+export type CustomEditor = BaseEditor &
+	ReactEditor &
+	HistoryEditor & {
+		nodeToDecorations?: Map<Element, Range[]>;
+	};
+
+declare module "slate" {
+	interface CustomTypes {
+		Editor: CustomEditor;
+		Element: CustomElement;
+		Text: CustomText | EmptyText;
+		Range: BaseRange & {
+			[key: string]: unknown;
+		};
+	}
+}