PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #9573 from matrix-org/tech/update-rich-text-editor

Browse source 
Update @matrix-org/matrix-wysiwyg dependency
This commit is contained in:
Florian Duros 2022-11-14 14:34:46 +01:00 committed by GitHub
commit ebb0e2e520
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -57,7 +57,7 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@matrix-org/analytics-events": "^0.3.0", "@matrix-org/analytics-events": "^0.3.0",
"@matrix-org/matrix-wysiwyg": "^0.3.2", "@matrix-org/matrix-wysiwyg": "^0.6.0",
"@matrix-org/react-sdk-module-api": "^0.0.3", "@matrix-org/react-sdk-module-api": "^0.0.3",
"@sentry/browser": "^6.11.0", "@sentry/browser": "^6.11.0",
"@sentry/tracing": "^6.11.0", "@sentry/tracing": "^6.11.0",

14
src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
View file

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import React, { MouseEventHandler } from "react"; import React, { MouseEventHandler } from "react";
import { FormattingFunctions, FormattingStates } from "@matrix-org/matrix-wysiwyg"; import { FormattingFunctions, AllActionStates } from "@matrix-org/matrix-wysiwyg";
import classNames from "classnames"; import classNames from "classnames";
import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
@ -56,14 +56,14 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
interface FormattingButtonsProps { interface FormattingButtonsProps {
composer: FormattingFunctions; composer: FormattingFunctions;
formattingStates: FormattingStates; actionStates: AllActionStates;
} }
export function FormattingButtons({ composer, formattingStates }: FormattingButtonsProps) { export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) {
return <div className="mx_FormattingButtons"> return <div className="mx_FormattingButtons">
<Button isActive={formattingStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} className="mx_FormattingButtons_Button_bold" /> <Button isActive={actionStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} className="mx_FormattingButtons_Button_bold" />
<Button isActive={formattingStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} className="mx_FormattingButtons_Button_italic" /> <Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} className="mx_FormattingButtons_Button_italic" />
<Button isActive={formattingStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} className="mx_FormattingButtons_Button_underline" /> <Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} className="mx_FormattingButtons_Button_underline" />
<Button isActive={formattingStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" /> <Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
</div>; </div>;
} }

4
src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
View file

@ -52,7 +52,7 @@ export const WysiwygComposer = memo(function WysiwygComposer(
) { ) {
const inputEventProcessor = useInputEventProcessor(onSend); const inputEventProcessor = useInputEventProcessor(onSend);
const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = const { ref, isWysiwygReady, content, actionStates, wysiwyg } =
useWysiwyg({ initialContent, inputEventProcessor }); useWysiwyg({ initialContent, inputEventProcessor });
useEffect(() => { useEffect(() => {
@ -68,7 +68,7 @@ export const WysiwygComposer = memo(function WysiwygComposer(
return ( return (
<div data-testid="WysiwygComposer" className={classNames(className, { [`${className}-focused`]: isFocused })} onFocus={onFocus} onBlur={onFocus}> <div data-testid="WysiwygComposer" className={classNames(className, { [`${className}-focused`]: isFocused })} onFocus={onFocus} onBlur={onFocus}>
<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} /> <FormattingButtons composer={wysiwyg} actionStates={actionStates} />
<Editor ref={ref} disabled={!isReady} leftComponent={leftComponent} rightComponent={rightComponent} /> <Editor ref={ref} disabled={!isReady} leftComponent={leftComponent} rightComponent={rightComponent} />
{ children?.(ref, wysiwyg) } { children?.(ref, wysiwyg) }
</div> </div>

2
test/components/views/rooms/MessageComposer-test.tsx
View file

@ -47,7 +47,7 @@ import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysi
jest.mock("@matrix-org/matrix-wysiwyg", () => ({ jest.mock("@matrix-org/matrix-wysiwyg", () => ({
useWysiwyg: () => { useWysiwyg: () => {
return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 }, return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 },
formattingStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } }; actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } };
}, },
})); }));

2
test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
View file

@ -45,7 +45,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({
content: mockContent, content: mockContent,
isWysiwygReady: true, isWysiwygReady: true,
wysiwyg: { clear: mockClear }, wysiwyg: { clear: mockClear },
formattingStates: { actionStates: {
bold: 'enabled', bold: 'enabled',
italic: 'enabled', italic: 'enabled',
underline: 'enabled', underline: 'enabled',

2
test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View file

@ -41,7 +41,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({
content: '<b>html</b>', content: '<b>html</b>',
isWysiwygReady: true, isWysiwygReady: true,
wysiwyg: { clear: mockClear }, wysiwyg: { clear: mockClear },
formattingStates: { actionStates: {
bold: 'enabled', bold: 'enabled',
italic: 'enabled', italic: 'enabled',
underline: 'enabled', underline: 'enabled',

8
test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
View file

@ -29,7 +29,7 @@ describe('FormattingButtons', () => {
strikeThrough: jest.fn(), strikeThrough: jest.fn(),
} as any; } as any;
const formattingStates = { const actionStates = {
bold: 'reversed', bold: 'reversed',
italic: 'reversed', italic: 'reversed',
underline: 'enabled', underline: 'enabled',
@ -42,7 +42,7 @@ describe('FormattingButtons', () => {
it('Should have the correspond CSS classes', () => { it('Should have the correspond CSS classes', () => {
// When // When
render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
// Then // Then
expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active'); expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active');
@ -53,7 +53,7 @@ describe('FormattingButtons', () => {
it('Should call wysiwyg function on button click', () => { it('Should call wysiwyg function on button click', () => {
// When // When
render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
screen.getByLabelText('Bold').click(); screen.getByLabelText('Bold').click();
screen.getByLabelText('Italic').click(); screen.getByLabelText('Italic').click();
screen.getByLabelText('Underline').click(); screen.getByLabelText('Underline').click();
@ -69,7 +69,7 @@ describe('FormattingButtons', () => {
it('Should display the tooltip on mouse over', async () => { it('Should display the tooltip on mouse over', async () => {
// When // When
const user = userEvent.setup(); const user = userEvent.setup();
render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
await user.hover(screen.getByLabelText('Bold')); await user.hover(screen.getByLabelText('Bold'));
// Then // Then

2
test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
View file

@ -35,7 +35,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({
content: '<b>html</b>', content: '<b>html</b>',
isWysiwygReady: true, isWysiwygReady: true,
wysiwyg: { clear: () => void 0 }, wysiwyg: { clear: () => void 0 },
formattingStates: { actionStates: {
bold: 'enabled', bold: 'enabled',
italic: 'enabled', italic: 'enabled',
underline: 'enabled', underline: 'enabled',

8
yarn.lock
View file

@ -1788,10 +1788,10 @@
resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.3.0.tgz#a428f7e3f164ffadf38f35bc0f0f9a3e47369ce6" resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.3.0.tgz#a428f7e3f164ffadf38f35bc0f0f9a3e47369ce6"
integrity sha512-f1WIMA8tjNB3V5g1C34yIpIJK47z6IJ4SLiY4j+J9Gw4X8C3TKGTAx563rMcMvW3Uk/PFqnIBXtkavHBXoYJ9A== integrity sha512-f1WIMA8tjNB3V5g1C34yIpIJK47z6IJ4SLiY4j+J9Gw4X8C3TKGTAx563rMcMvW3Uk/PFqnIBXtkavHBXoYJ9A==
"@matrix-org/matrix-wysiwyg@^0.3.2": "@matrix-org/matrix-wysiwyg@^0.6.0":
version "0.3.2" version "0.6.0"
resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.3.2.tgz#586f3ad2f4a7bf39d8e2063630c52294c877bcd6" resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.6.0.tgz#f06577eec5a98fa414d2cd66688d32d984544c94"
integrity sha512-Q6Ntj2q1/7rVUlro94snn9eZy/3EbrGqaq5nqNMbttXcnFzYtgligDV1avViB4Um6ZRdDOxnQEPkMca/SqYSmw== integrity sha512-6wq6RzpGZLxAcczHL7+QuGLJwGcvUSAm1zXd/0FzevfIKORbGKF2uCWgQ4JoZVpe4rbBNJgtPGb1r36W/i66/A==
"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz": "@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" version "3.2.8"