From 7fcc65a3fe43278ce06eb2294a08509f5c258c87 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 2 Dec 2022 16:05:14 +0100 Subject: [PATCH] Use Event for emoji --- .../wysiwyg_composer/SendWysiwygComposer.tsx | 13 ++---- .../wysiwyg_composer/components/Emoji.tsx | 45 +++++++++++++++++++ .../components/PlainTextComposer.tsx | 5 +-- .../components/WysiwygComposer.tsx | 5 +-- .../hooks/useWysiwygSendActionHandler.ts | 14 +++++- 5 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx index ea424895d6..bec2b9a08a 100644 --- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx @@ -22,8 +22,8 @@ import { PlainTextComposer } from './components/PlainTextComposer'; import { ComposerFunctions } from './types'; import { E2EStatus } from '../../../../utils/ShieldUtils'; import E2EIcon from '../E2EIcon'; -import { EmojiButton } from '../EmojiButton'; import { AboveLeftOf } from '../../../structures/ContextMenu'; +import { Emoji } from './components/Emoji'; interface ContentProps { disabled?: boolean; @@ -58,15 +58,8 @@ export function SendWysiwygComposer( return } - // TODO add emoji support - rightComponent={(composerFunctions, selectPreviousSelection) => - { - selectPreviousSelection(); - setTimeout(() => composerFunctions.insertText(unicode), 100); - return true; - }} - />} + rightComponent={(selectPreviousSelection) => + } {...props} > { (ref, composerFunctions) => ( diff --git a/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx new file mode 100644 index 0000000000..d8a4d04972 --- /dev/null +++ b/src/components/views/rooms/wysiwyg_composer/components/Emoji.tsx @@ -0,0 +1,45 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; + +import { AboveLeftOf } from "../../../../structures/ContextMenu"; +import { EmojiButton } from "../../EmojiButton"; +import dis from '../../../../../dispatcher/dispatcher'; +import { ComposerInsertPayload } from "../../../../../dispatcher/payloads/ComposerInsertPayload"; +import { Action } from "../../../../../dispatcher/actions"; +import { useRoomContext } from "../../../../../contexts/RoomContext"; + +interface EmojiProps { + selectPreviousSelection: () => void; + menuPosition: AboveLeftOf; +} + +export function Emoji({ selectPreviousSelection, menuPosition }: EmojiProps) { + const roomContext = useRoomContext(); + + return { + selectPreviousSelection(); + dis.dispatch({ + action: Action.ComposerInsert, + text: emoji, + timelineRenderingType: roomContext.timelineRenderingType, + }); + return true; + }} + />; +} diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx index c8972f923e..5339e986cd 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx @@ -34,7 +34,6 @@ interface PlainTextComposerProps { className?: string; leftComponent?: ReactNode; rightComponent?: ( - composerFunctions: ComposerFunctions, selectPreviousSelection: () => void ) => ReactNode; children?: ( @@ -61,8 +60,6 @@ export function PlainTextComposer({ useSetCursorPosition(disabled, ref); const { isFocused, onFocus } = useIsFocused(); const computedPlaceholder = !content && placeholder || undefined; - const rightComp = - (selectPreviousSelection: () => void) => rightComponent(composerFunctions, selectPreviousSelection); return
- + { children?.(ref, composerFunctions) }
; } diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx index 509218e0d5..c346ceb1a4 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx @@ -33,7 +33,6 @@ interface WysiwygComposerProps { className?: string; leftComponent?: ReactNode; rightComponent?: ( - composerFunctions: FormattingFunctions, selectPreviousSelection: () => void ) => ReactNode; children?: ( @@ -72,12 +71,10 @@ export const WysiwygComposer = memo(function WysiwygComposer( const { isFocused, onFocus } = useIsFocused(); const computedPlaceholder = !content && placeholder || undefined; - const rightComp = (selectPreviousSelection: () => void) => rightComponent(wysiwyg, selectPreviousSelection); - return (
- + { children?.(ref, wysiwyg) }
); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts index 500f027049..f2ee55ad46 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts @@ -23,6 +23,7 @@ import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/R import { useDispatcher } from "../../../../../hooks/useDispatcher"; import { focusComposer } from "./utils"; import { ComposerFunctions } from "../types"; +import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload"; export function useWysiwygSendActionHandler( disabled: boolean, @@ -48,7 +49,18 @@ export function useWysiwygSendActionHandler( composerFunctions.clear(); focusComposer(composerElement, context, roomContext, timeoutId); break; - // TODO: case Action.ComposerInsert: - see SendMessageComposer + case Action.ComposerInsert: + if (payload.timelineRenderingType !== roomContext.timelineRenderingType) break; + if (payload.composerType !== ComposerType.Send) break; + + if (payload.userId) { + // TODO insert mention - see SendMessageComposer + } else if (payload.event) { + // TODO insert quote message - see SendMessageComposer + } else if (payload.text) { + composerFunctions.insertText(payload.text); + } + break; } }, [disabled, composerElement, composerFunctions, timeoutId, roomContext]);