diff --git a/package.json b/package.json index 86af00b184..4a3b34cd20 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "dependencies": { "@babel/runtime": "^7.12.5", "@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", "@sentry/browser": "^6.11.0", "@sentry/tracing": "^6.11.0", diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index 00127e5e43..32b132cc6c 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx @@ -15,7 +15,7 @@ limitations under the License. */ 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 AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton"; @@ -56,14 +56,14 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) interface FormattingButtonsProps { composer: FormattingFunctions; - formattingStates: FormattingStates; + actionStates: AllActionStates; } -export function FormattingButtons({ composer, formattingStates }: FormattingButtonsProps) { +export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) { return
-
; } diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx index e687d4b3b6..f071365ad2 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx @@ -52,7 +52,7 @@ export const WysiwygComposer = memo(function WysiwygComposer( ) { const inputEventProcessor = useInputEventProcessor(onSend); - const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = + const { ref, isWysiwygReady, content, actionStates, wysiwyg } = useWysiwyg({ initialContent, inputEventProcessor }); useEffect(() => { @@ -68,7 +68,7 @@ export const WysiwygComposer = memo(function WysiwygComposer( return (
- + { children?.(ref, wysiwyg) }
diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx index debeb7b5e6..bacf951dea 100644 --- a/test/components/views/rooms/MessageComposer-test.tsx +++ b/test/components/views/rooms/MessageComposer-test.tsx @@ -47,7 +47,7 @@ import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysi jest.mock("@matrix-org/matrix-wysiwyg", () => ({ useWysiwyg: () => { 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' } }; }, })); diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx index 00d6a43f97..884e8a352c 100644 --- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx @@ -45,7 +45,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({ content: mockContent, isWysiwygReady: true, wysiwyg: { clear: mockClear }, - formattingStates: { + actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx index 3b5b8885d8..c88fb34a25 100644 --- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx @@ -41,7 +41,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({ content: 'html', isWysiwygReady: true, wysiwyg: { clear: mockClear }, - formattingStates: { + actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx index e935b62ae5..2447e2f076 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx @@ -29,7 +29,7 @@ describe('FormattingButtons', () => { strikeThrough: jest.fn(), } as any; - const formattingStates = { + const actionStates = { bold: 'reversed', italic: 'reversed', underline: 'enabled', @@ -42,7 +42,7 @@ describe('FormattingButtons', () => { it('Should have the correspond CSS classes', () => { // When - render(); + render(); // Then expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active'); @@ -53,7 +53,7 @@ describe('FormattingButtons', () => { it('Should call wysiwyg function on button click', () => { // When - render(); + render(); screen.getByLabelText('Bold').click(); screen.getByLabelText('Italic').click(); screen.getByLabelText('Underline').click(); @@ -69,7 +69,7 @@ describe('FormattingButtons', () => { it('Should display the tooltip on mouse over', async () => { // When const user = userEvent.setup(); - render(); + render(); await user.hover(screen.getByLabelText('Bold')); // Then diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx index 64be2edfb3..f7ba6aa4a8 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx @@ -35,7 +35,7 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({ content: 'html', isWysiwygReady: true, wysiwyg: { clear: () => void 0 }, - formattingStates: { + actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', diff --git a/yarn.lock b/yarn.lock index 7152c5bd4a..647b29a0b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1788,10 +1788,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.3.2": - version "0.3.2" - resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.3.2.tgz#586f3ad2f4a7bf39d8e2063630c52294c877bcd6" - integrity sha512-Q6Ntj2q1/7rVUlro94snn9eZy/3EbrGqaq5nqNMbttXcnFzYtgligDV1avViB4Um6ZRdDOxnQEPkMca/SqYSmw== +"@matrix-org/matrix-wysiwyg@^0.6.0": + version "0.6.0" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.6.0.tgz#f06577eec5a98fa414d2cd66688d32d984544c94" + 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": version "3.2.8"