Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use correct translation function for WYSIWYG buttons (#11315)

Browse Source 
* Use correct translation function for WYSIWYG buttons

* Add tests
This commit is contained in:
Germain 2023-07-26 12:30:54 +01:00 committed by GitHub
parent 9319911a27
commit 22f83e7917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 132 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,7 @@ import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
import { Alignment } from "../../../elements/Tooltip";
import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
import { KeyCombo } from "../../../../../KeyBindingsManager";
import { _td } from "../../../../../languageHandler";
import { _t } from "../../../../../languageHandler";
import { ButtonEvent } from "../../../elements/AccessibleButton";
import { openLinkModal } from "./LinkModal";
import { useComposerContext } from "../ComposerContext";
@ -93,47 +93,47 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
<div className="mx_FormattingButtons">
<Button
actionState={actionStates.bold}
label={_td("Bold")}
label={_t("Bold")}
keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
onClick={() => composer.bold()}
icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.italic}
label={_td("Italic")}
label={_t("Italic")}
keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
onClick={() => composer.italic()}
icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.underline}
label={_td("Underline")}
label={_t("Underline")}
keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
onClick={() => composer.underline()}
icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.strikeThrough}
label={_td("Strikethrough")}
label={_t("Strikethrough")}
onClick={() => composer.strikeThrough()}
icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.unorderedList}
label={_td("Bulleted list")}
label={_t("Bulleted list")}
onClick={() => composer.unorderedList()}
icon={<BulletedListIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.orderedList}
label={_td("Numbered list")}
label={_t("Numbered list")}
onClick={() => composer.orderedList()}
icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
/>
{isInList && (
<Button
actionState={actionStates.indent}
label={_td("Indent increase")}
label={_t("Indent increase")}
onClick={() => composer.indent()}
icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
/>
@ -141,33 +141,33 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
{isInList && (
<Button
actionState={actionStates.unindent}
label={_td("Indent decrease")}
label={_t("Indent decrease")}
onClick={() => composer.unindent()}
icon={<UnIndentIcon className="mx_FormattingButtons_Icon" />}
/>
)}
<Button
actionState={actionStates.quote}
label={_td("Quote")}
label={_t("Quote")}
onClick={() => composer.quote()}
icon={<QuoteIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.inlineCode}
label={_td("Code")}
label={_t("Code")}
keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
onClick={() => composer.inlineCode()}
icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.codeBlock}
label={_td("Code block")}
label={_t("Code block")}
onClick={() => composer.codeBlock()}
icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
/>
<Button
actionState={actionStates.link}
label={_td("Link")}
label={_t("Link")}
onClick={() => openLinkModal(composer, composerContext, actionStates.link === "reversed")}
icon={<LinkIcon className="mx_FormattingButtons_Icon" />}
/>

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

@ -21,6 +21,7 @@ import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "
import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
import { setLanguage } from "../../../../../../src/languageHandler";
const mockWysiwyg = {
bold: jest.fn(),
@ -76,6 +77,14 @@ describe("FormattingButtons", () => {
jest.resetAllMocks();
});
it("renders in german", async () => {
await setLanguage("de");
const { asFragment } = renderComponent();
expect(asFragment()).toMatchSnapshot();
await setLanguage("en");
});
it("Each button should not have active class when enabled", () => {
renderComponent();

110
test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap Normal file
View File

@ -0,0 +1,110 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FormattingButtons renders in german 1`] = `
<DocumentFragment>
<div
class="mx_FormattingButtons"
>
<button
aria-label="Fett"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Kursiv"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Unterstrichen"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Durchgestrichen"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Ungeordnete Liste"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Nummerierte Liste"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Zitieren"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Code"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Quelltextblock"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
<button
aria-label="Link"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<div
class="mx_FormattingButtons_Icon"
/>
</button>
</div>
</DocumentFragment>
`;