Rename wysiwyg prop into composer

matrix-org · Oct 14, 2022 · c0bf45f · c0bf45f
1 parent 6b6af28
commit c0bf45f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx
@@ -55,15 +55,15 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
 }
 
 interface FormattingButtonsProps {
-    wysiwyg: ReturnType<typeof useWysiwyg>['wysiwyg'];
+    composer: ReturnType<typeof useWysiwyg>['wysiwyg'];
     formattingStates: ReturnType<typeof useWysiwyg>['formattingStates'];
 }
 
-export function FormattingButtons({ wysiwyg, formattingStates }: FormattingButtonsProps) {
+export function FormattingButtons({ composer, formattingStates }: FormattingButtonsProps) {
     return <div className="mx_FormattingButtons">
-        <Button isActive={formattingStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => wysiwyg.bold()} className="mx_FormattingButtons_Button_bold" />
-        <Button isActive={formattingStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => wysiwyg.italic()} className="mx_FormattingButtons_Button_italic" />
-        <Button isActive={formattingStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => wysiwyg.underline()} className="mx_FormattingButtons_Button_underline" />
-        <Button isActive={formattingStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => wysiwyg.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
+        <Button isActive={formattingStates.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={formattingStates.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" />
     </div>;
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
@@ -57,7 +57,7 @@ export function WysiwygComposer(
 
     return (
         <div className="mx_WysiwygComposer">
-            <FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />
+            <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
             <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
             { children?.(memoizedSendMessage) }
         </div>

diff --git a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
@@ -41,7 +41,7 @@ describe('FormattingButtons', () => {
 
     it('Should have the correspond CSS classes', () => {
         // When
-        render(<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />);
+        render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
 
         // Then
         expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active');
@@ -52,7 +52,7 @@ describe('FormattingButtons', () => {
 
     it('Should call wysiwyg function on button click', () => {
         // When
-        render(<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />);
+        render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
         screen.getByLabelText('Bold').click();
         screen.getByLabelText('Italic').click();
         screen.getByLabelText('Underline').click();
@@ -68,7 +68,7 @@ describe('FormattingButtons', () => {
     it('Should display the tooltip on mouse over', async () => {
         // When
         const user = userEvent.setup();
-        render(<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />);
+        render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
         await user.hover(screen.getByLabelText('Bold'));
 
         // Then