Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add emoji handling for rich text mode #9661

Merged
merged 13 commits into from
Dec 8, 2022
Merged
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"dependencies": {
"@babel/runtime": "^7.12.5",
"@matrix-org/analytics-events": "^0.3.0",
"@matrix-org/matrix-wysiwyg": "^0.8.0",
"@matrix-org/matrix-wysiwyg": "^0.9.0",
"@matrix-org/react-sdk-module-api": "^0.0.3",
"@sentry/browser": "^7.0.0",
"@sentry/tracing": "^7.0.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -58,8 +58,8 @@ export function SendWysiwygComposer(
return <Composer
className="mx_SendWysiwygComposer"
leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
// TODO add emoji support
rightComponent={<EmojiButton menuPosition={menuPosition} addEmoji={() => false} />}
rightComponent={(selectPreviousSelection) =>
<Emoji menuPosition={menuPosition} selectPreviousSelection={selectPreviousSelection} />}
{...props}
>
{ (ref, composerFunctions) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,23 @@ import classNames from 'classnames';
import React, { CSSProperties, forwardRef, memo, MutableRefObject, ReactNode } from 'react';

import { useIsExpanded } from '../hooks/useIsExpanded';
import { useSelection } from '../hooks/useSelection';

const HEIGHT_BREAKING_POINT = 20;

interface EditorProps {
disabled: boolean;
placeholder?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
rightComponent?: (selectPreviousSelection: () => void) => ReactNode;
}

export const Editor = memo(
forwardRef<HTMLDivElement, EditorProps>(
function Editor({ disabled, placeholder, leftComponent, rightComponent }: EditorProps, ref,
) {
const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, selectPreviousSelection } = useSelection();

return <div
data-testid="WysiwygComposerEditor"
Expand All @@ -55,9 +57,11 @@ export const Editor = memo(
aria-haspopup="listbox"
dir="auto"
aria-disabled={disabled}
onFocus={onFocus}
onBlur={onBlur}
/>
</div>
{ rightComponent }
{ rightComponent?.(selectPreviousSelection) }
</div>;
},
),
Expand Down
Original file line number Diff line number Diff line change
@@ -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 <EmojiButton menuPosition={menuPosition}
addEmoji={(emoji) => {
selectPreviousSelection();
dis.dispatch<ComposerInsertPayload>({
action: Action.ComposerInsert,
text: emoji,
timelineRenderingType: roomContext.timelineRenderingType,
});
return true;
}}
/>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ interface PlainTextComposerProps {
initialContent?: string;
className?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
rightComponent?: (
selectPreviousSelection: () => void
) => ReactNode;
children?: (
ref: MutableRefObject<HTMLDivElement | null>,
composerFunctions: ComposerFunctions,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ interface WysiwygComposerProps {
initialContent?: string;
className?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
rightComponent?: (
selectPreviousSelection: () => void
) => ReactNode;
children?: (
ref: MutableRefObject<HTMLDivElement | null>,
wysiwyg: FormattingFunctions,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,8 @@ export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
ref.current.innerHTML = '';
}
},
insertText: (text: string) => {
// TODO
},
}), [ref]);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
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 { useCallback, useEffect, useRef } from "react";

import useFocus from "../../../../../hooks/useFocus";
import { setSelection } from "../utils/selection";

type SubSelection = Pick<Selection, 'anchorNode' | 'anchorOffset' | 'focusNode' | 'focusOffset'>;

export function useSelection() {
const selectionRef = useRef<SubSelection>({
anchorNode: null,
anchorOffset: 0,
focusNode: null,
focusOffset: 0,
});
const [isFocused, focusProps] = useFocus();

useEffect(() => {
function onSelectionChange() {
const selection = document.getSelection();

if (selection) {
selectionRef.current = {
anchorNode: selection.anchorNode,
anchorOffset: selection.anchorOffset,
focusNode: selection.focusNode,
focusOffset: selection.focusOffset,
};
}
}

if (isFocused) {
document.addEventListener('selectionchange', onSelectionChange);
}

return () => document.removeEventListener('selectionchange', onSelectionChange);
}, [isFocused]);

const selectPreviousSelection = useCallback(() => {
setSelection(selectionRef.current);
}, [selectionRef]);

return { ...focusProps, selectPreviousSelection };
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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]);

Expand Down
1 change: 1 addition & 0 deletions src/components/views/rooms/wysiwyg_composer/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ limitations under the License.

export type ComposerFunctions = {
clear: () => void;
insertText: (text: string) => void;
};
29 changes: 29 additions & 0 deletions src/components/views/rooms/wysiwyg_composer/utils/selection.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
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.
*/

export function setSelection(selection:
Pick<Selection, 'anchorNode' | 'anchorOffset' | 'focusNode' | 'focusOffset'>,
) {
if (selection.anchorNode && selection.focusNode) {
const range = new Range();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);

document.getSelection()?.removeAllRanges();
document.getSelection()?.addRange(range);
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { IRoomState } from "../../../../../src/components/structures/RoomView";
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
import { ComposerInsertPayload, ComposerType } from "../../../../../src/dispatcher/payloads/ComposerInsertPayload";
import { setSelection } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";

jest.mock("../../../../../src/components/views/rooms/EmojiButton", () => ({
EmojiButton: ({ addEmoji }: {addEmoji: (emoji: string) => void}) => {
return <button aria-label="Emoji" type="button" onClick={() => addEmoji('🦫')}>Emoji</button>;
},
}));

describe('SendWysiwygComposer', () => {
afterEach(() => {
Expand All @@ -47,9 +55,28 @@ describe('SendWysiwygComposer', () => {

const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});

const registerId = defaultDispatcher.register((payload) => {
switch (payload.action) {
case Action.ComposerInsert: {
if (payload.composerType) break;

// re-dispatch to the correct composer
defaultDispatcher.dispatch<ComposerInsertPayload>({
...(payload as ComposerInsertPayload),
composerType: ComposerType.Send,
});
break;
}
}
});

afterAll(() => {
defaultDispatcher.unregister(registerId);
});

const customRender = (
onChange = (_content: string) => void 0,
onSend = () => void 0,
onChange = (_content: string): void => void 0,
onSend = (): void => void 0,
disabled = false,
isRichTextEnabled = true,
placeholder?: string) => {
Expand Down Expand Up @@ -177,7 +204,6 @@ describe('SendWysiwygComposer', () => {

it('Should not has placeholder', async () => {
// When
console.log('here');
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));

Expand Down Expand Up @@ -222,5 +248,55 @@ describe('SendWysiwygComposer', () => {
);
});
});

describe.each([
{ isRichTextEnabled: true },
// TODO { isRichTextEnabled: false },
])('Emoji when %s', ({ isRichTextEnabled }) => {
let emojiButton: HTMLElement;

beforeEach(async () => {
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
emojiButton = screen.getByLabelText('Emoji');
});

afterEach(() => {
jest.resetAllMocks();
});

it('Should add an emoji in an empty composer', async () => {
// When
emojiButton.click();

// Then
await waitFor(() => expect(screen.getByRole('textbox')).toHaveTextContent(/🦫/));
});

it('Should add an emoji in the middle of a word', async () => {
// When
screen.getByRole('textbox').focus();
screen.getByRole('textbox').innerHTML = 'word';
fireEvent.input(screen.getByRole('textbox'), {
data: 'word',
inputType: 'insertText',
});

const textNode = screen.getByRole('textbox').firstChild;
setSelection({
anchorNode: textNode,
anchorOffset: 2,
focusNode: textNode,
focusOffset: 2,
});
// the event is not automatically fired by jest
document.dispatchEvent(new CustomEvent('selectionchange'));

emojiButton.click();

// Then
await waitFor(() => expect(screen.getByRole('textbox')).toHaveTextContent(/wo🦫rd/));
});
});
});

8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1520,10 +1520,10 @@
resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.3.0.tgz#a428f7e3f164ffadf38f35bc0f0f9a3e47369ce6"
integrity sha512-f1WIMA8tjNB3V5g1C34yIpIJK47z6IJ4SLiY4j+J9Gw4X8C3TKGTAx563rMcMvW3Uk/PFqnIBXtkavHBXoYJ9A==

"@matrix-org/matrix-wysiwyg@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.8.0.tgz#3b64c6a16cf2027e395766c950c13752b1a81282"
integrity sha512-q3lpMNbD/GF2RPOuDR3COYDGR6BQWZBHUPtRYGaDf1i9eL/8vWD/WruwjzpI/RwNbYyPDm9Cs6vZj9BNhHB3Jw==
"@matrix-org/matrix-wysiwyg@^0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.9.0.tgz#8651eacdc0bbfa313501e4feeb713c74dbf099cc"
integrity sha512-utxLZPSmBR/oKFeLLteAfqprhSW8prrH9IKzeMK1VswQYganPusYYO8u86kCQt4SuDz/1Zc8C7r76xmOiVJ9JQ==

"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
version "3.2.8"
Expand Down