diff --git a/src/components/messaging/MessageInput.tsx b/src/components/messaging/MessageInput.tsx index adf498c..e737a4a 100644 --- a/src/components/messaging/MessageInput.tsx +++ b/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(null); const [attachments, setAttachments] = React.useState([]); + 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")); diff --git a/src/components/messaging/Slate.ts b/src/components/messaging/Slate.ts new file mode 100644 index 0000000..ba07f8c --- /dev/null +++ b/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; + }; + +declare module "slate" { + interface CustomTypes { + Editor: CustomEditor; + Element: CustomElement; + Text: CustomText | EmptyText; + Range: BaseRange & { + [key: string]: unknown; + }; + } +}