OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Rename wysiwyg prop into composer

t3chguy/dedup-icons-17oct
Florian Duros 2022-10-14 10:56:34 +02:00
parent 6b6af28ea9
commit c0bf45fddc
No known key found for this signature in database
GPG Key ID: 9700AA5870258A0B
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx
View File

@ -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>;
}

2
src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
View File

@ -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>

6
test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
View File

@ -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