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

pull/28788/head^2
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 { interface FormattingButtonsProps {
wysiwyg: ReturnType<typeof useWysiwyg>['wysiwyg']; composer: ReturnType<typeof useWysiwyg>['wysiwyg'];
formattingStates: ReturnType<typeof useWysiwyg>['formattingStates']; formattingStates: ReturnType<typeof useWysiwyg>['formattingStates'];
} }
export function FormattingButtons({ wysiwyg, formattingStates }: FormattingButtonsProps) { export function FormattingButtons({ composer, formattingStates }: 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={() => wysiwyg.bold()} className="mx_FormattingButtons_Button_bold" /> <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={() => wysiwyg.italic()} className="mx_FormattingButtons_Button_italic" /> <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={() => wysiwyg.underline()} className="mx_FormattingButtons_Button_underline" /> <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={() => wysiwyg.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" /> <Button isActive={formattingStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
</div>; </div>;
} }

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

@ -57,7 +57,7 @@ export function WysiwygComposer(
return ( return (
<div className="mx_WysiwygComposer"> <div className="mx_WysiwygComposer">
<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} /> <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
<Editor ref={ref} disabled={!isWysiwygReady || disabled} /> <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
{ children?.(memoizedSendMessage) } { children?.(memoizedSendMessage) }
</div> </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', () => { it('Should have the correspond CSS classes', () => {
// When // When
render(<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
// Then // Then
expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active'); expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active');
@ -52,7 +52,7 @@ describe('FormattingButtons', () => {
it('Should call wysiwyg function on button click', () => { it('Should call wysiwyg function on button click', () => {
// When // When
render(<FormattingButtons wysiwyg={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
screen.getByLabelText('Bold').click(); screen.getByLabelText('Bold').click();
screen.getByLabelText('Italic').click(); screen.getByLabelText('Italic').click();
screen.getByLabelText('Underline').click(); screen.getByLabelText('Underline').click();
@ -68,7 +68,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 wysiwyg={wysiwyg} formattingStates={formattingStates} />); render(<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />);
await user.hover(screen.getByLabelText('Bold')); await user.hover(screen.getByLabelText('Bold'));
// Then // Then