diff --git a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts index 0a6441ffeb4b..ed56029fbe02 100644 --- a/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts +++ b/src/components/views/rooms/wysiwyg_composer/ComposerContext.ts @@ -18,15 +18,17 @@ import { createContext, useContext } from "react"; import { SubSelection } from "./types"; -export const defaultContext: { selection: SubSelection } = { - selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 }, -}; +export function getDefaultContextValue() { + return { + selection: { anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0 }, + }; +} export interface ComposerContextState { selection: SubSelection; } -export const ComposerContext = createContext(defaultContext); +export const ComposerContext = createContext(getDefaultContextValue()); ComposerContext.displayName = "ComposerContext"; export function useComposerContext() { diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx index 275d30bb1f43..f00aadcdffbc 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 } from "react"; +import React, { forwardRef, RefObject, useRef } from "react"; import classNames from "classnames"; import EditorStateTransfer from "../../../../utils/EditorStateTransfer"; @@ -23,6 +23,7 @@ import { EditionButtons } from "./components/EditionButtons"; import { useWysiwygEditActionHandler } from "./hooks/useWysiwygEditActionHandler"; import { useEditing } from "./hooks/useEditing"; import { useInitialContent } from "./hooks/useInitialContent"; +import { ComposerContext, getDefaultContextValue } from "./ComposerContext"; interface ContentProps { disabled: boolean; @@ -44,6 +45,7 @@ interface EditWysiwygComposerProps { } export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) { + const defaultContextValue = useRef(getDefaultContextValue()); const initialContent = useInitialContent(editorStateTransfer); const isReady = !editorStateTransfer || initialContent !== undefined; @@ -51,24 +53,26 @@ export function EditWysiwygComposer({ editorStateTransfer, className, ...props } return ( isReady && ( - - {(ref) => ( - <> - - - - )} - + + + {(ref) => ( + <> + + + + )} + + ) ); } diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx index abaa80739b51..032a8411a521 100644 --- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ForwardedRef, forwardRef, MutableRefObject } from "react"; +import React, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react"; import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler"; import { WysiwygComposer } from "./components/WysiwygComposer"; @@ -24,7 +24,7 @@ import { E2EStatus } from "../../../../utils/ShieldUtils"; import E2EIcon from "../E2EIcon"; import { AboveLeftOf } from "../../../structures/ContextMenu"; import { Emoji } from "./components/Emoji"; -import { ComposerContext, defaultContext } from "./ComposerContext"; +import { ComposerContext, getDefaultContextValue } from "./ComposerContext"; interface ContentProps { disabled?: boolean; @@ -57,9 +57,10 @@ export function SendWysiwygComposer({ ...props }: SendWysiwygComposerProps) { const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer; + const defaultContextValue = useRef(getDefaultContextValue()); return ( - + } diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index bbfcd490bb6b..d2cafb119891 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx @@ -31,6 +31,7 @@ import { KeyCombo } from "../../../../../KeyBindingsManager"; import { _td } from "../../../../../languageHandler"; import { ButtonEvent } from "../../../elements/AccessibleButton"; import { openLinkModal } from "./LinkModal"; +import { useComposerContext } from "../ComposerContext"; interface TooltipProps { label: string; @@ -78,6 +79,8 @@ interface FormattingButtonsProps { } export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) { + const composerContext = useComposerContext(); + return (
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx index a5a78ca79255..6c1315ab769e 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx @@ -21,13 +21,13 @@ import { _td } from "../../../../../languageHandler"; import Modal from "../../../../../Modal"; import QuestionDialog from "../../../dialogs/QuestionDialog"; import Field from "../../../elements/Field"; -import { useComposerContext } from "../ComposerContext"; +import { ComposerContextState } from "../ComposerContext"; import { isSelectionEmpty, setSelection } from "../utils/selection"; -export function openLinkModal(composer: FormattingFunctions) { +export function openLinkModal(composer: FormattingFunctions, composerContext: ComposerContextState) { const modal = Modal.createDialog( LinkModal, - { composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() }, + { composerContext, composer, onClose: () => modal.close(), isTextEnabled: isSelectionEmpty() }, "mx_CompoundDialog", false, true, @@ -42,11 +42,10 @@ interface LinkModalProps { composer: FormattingFunctions; isTextEnabled: boolean; onClose: () => void; + composerContext: ComposerContextState; } -export function LinkModal({ composer, isTextEnabled, onClose }: LinkModalProps) { - const composerContext = useComposerContext(); - +export function LinkModal({ composer, isTextEnabled, onClose, composerContext }: LinkModalProps) { const [fields, setFields] = useState({ text: "", link: "" }); const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link); diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx index 898b83080ae5..b4a3fd4828a2 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx @@ -19,7 +19,6 @@ import { render, screen, waitFor } from "@testing-library/react"; import React from "react"; import userEvent from "@testing-library/user-event"; -import { ComposerContext } from "../../../../../../src/components/views/rooms/wysiwyg_composer/ComposerContext"; import { LinkModal } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal"; import { mockPlatformPeg } from "../../../../../test-utils"; import * as selection from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection"; @@ -38,9 +37,12 @@ describe("LinkModal", () => { const customRender = (isTextEnabled: boolean, onClose: () => void) => { return render( - - - , + , ); };