diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx index 2c935b12403..70cdeda8083 100644 --- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { forwardRef, RefObject, useRef } from "react"; +import React, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react"; import classNames from "classnames"; import EditorStateTransfer from "../../../../utils/EditorStateTransfer"; @@ -24,16 +24,18 @@ import { useWysiwygEditActionHandler } from "./hooks/useWysiwygEditActionHandler import { useEditing } from "./hooks/useEditing"; import { useInitialContent } from "./hooks/useInitialContent"; import { ComposerContext, getDefaultContextValue } from "./ComposerContext"; +import { ComposerFunctions } from "./types"; interface ContentProps { - disabled: boolean; + disabled?: boolean; + composerFunctions: ComposerFunctions; } const Content = forwardRef(function Content( - { disabled }: ContentProps, - forwardRef: RefObject, + { disabled = false, composerFunctions }: ContentProps, + forwardRef: ForwardedRef, ) { - useWysiwygEditActionHandler(disabled, forwardRef); + useWysiwygEditActionHandler(disabled, forwardRef as MutableRefObject, composerFunctions); return null; }); @@ -65,9 +67,9 @@ export default function EditWysiwygComposer({ editorStateTransfer, className, .. onSend={editMessage} {...props} > - {(ref) => ( + {(ref, composerFunctions) => ( <> - + { - setSelection(composerContext.selection).then(() => - dis.dispatch({ - action: Action.ComposerInsert, - text: emoji, - timelineRenderingType: roomContext.timelineRenderingType, - }), - ); + dis.dispatch({ + action: Action.ComposerInsert, + text: emoji, + timelineRenderingType: roomContext.timelineRenderingType, + }); return true; }} /> diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts index ee00215dda0..542089a2702 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts @@ -22,9 +22,18 @@ import { ActionPayload } from "../../../../../dispatcher/payloads"; import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext"; import { useDispatcher } from "../../../../../hooks/useDispatcher"; import { focusComposer } from "./utils"; +import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload"; +import { ComposerFunctions } from "../types"; +import { setSelection } from "../utils/selection"; +import { useComposerContext } from "../ComposerContext"; -export function useWysiwygEditActionHandler(disabled: boolean, composerElement: RefObject) { +export function useWysiwygEditActionHandler( + disabled: boolean, + composerElement: RefObject, + composerFunctions: ComposerFunctions, +) { const roomContext = useRoomContext(); + const composerContext = useComposerContext(); const timeoutId = useRef(null); const handler = useCallback( @@ -39,9 +48,21 @@ export function useWysiwygEditActionHandler(disabled: boolean, composerElement: case Action.FocusEditMessageComposer: focusComposer(composerElement, context, roomContext, timeoutId); break; + case Action.ComposerInsert: + if (payload.timelineRenderingType !== roomContext.timelineRenderingType) break; + if (payload.composerType !== ComposerType.Edit) break; + + if (payload.userId) { + // TODO insert mention - see SendMessageComposer + } else if (payload.event) { + // TODO insert quote message - see SendMessageComposer + } else if (payload.text) { + setSelection(composerContext.selection).then(() => composerFunctions.insertText(payload.text)); + } + break; } }, - [disabled, composerElement, timeoutId, roomContext], + [disabled, composerElement, composerFunctions, timeoutId, roomContext, composerContext], ); useDispatcher(defaultDispatcher, handler); diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts index 8d6af77b12a..d951fe24795 100644 --- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts +++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts @@ -24,6 +24,8 @@ import { useDispatcher } from "../../../../../hooks/useDispatcher"; import { focusComposer } from "./utils"; import { ComposerFunctions } from "../types"; import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload"; +import { useComposerContext } from "../ComposerContext"; +import { setSelection } from "../utils/selection"; export function useWysiwygSendActionHandler( disabled: boolean, @@ -31,6 +33,7 @@ export function useWysiwygSendActionHandler( composerFunctions: ComposerFunctions, ) { const roomContext = useRoomContext(); + const composerContext = useComposerContext(); const timeoutId = useRef(null); const handler = useCallback( @@ -59,12 +62,12 @@ export function useWysiwygSendActionHandler( } else if (payload.event) { // TODO insert quote message - see SendMessageComposer } else if (payload.text) { - composerFunctions.insertText(payload.text); + setSelection(composerContext.selection).then(() => composerFunctions.insertText(payload.text)); } break; } }, - [disabled, composerElement, composerFunctions, timeoutId, roomContext], + [disabled, composerElement, roomContext, composerFunctions, composerContext], ); useDispatcher(defaultDispatcher, handler);