sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-06-10 18:16:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support I18n (#243)

Browse Source 
* feat: support i18n

* feat: wip support i18n

* feat: complete space translation

* feat: complete page translation

* feat: update space translation

* feat: update workspace translation

* feat: update group translation

* feat: update workspace translation

* feat: update page translation

* feat: update user translation

* chore: update pnpm-lock

* feat: add query translation

* refactor: merge to single file

* chore: remove necessary code

* feat: save language to BE

* fix: only load current language

* feat: save language to locale column

* fix: cleanups

* add language menu to preferences page

* new translations

* translate editor

* Translate editor placeholders

* translate space selection component

---------

Co-authored-by: Philip Okugbe <phil@docmost.com>
Co-authored-by: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
This commit is contained in:
lleohao
2025-01-04 21:17:17 +08:00
committed by GitHub
parent 290b7d9d94
commit 670ee64179
119 changed files with 1672 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+11 -9
View File
@@ -26,6 +26,7 @@ import { useAtom } from "jotai";
import { v7 as uuid7 } from "uuid";
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
import { useTranslation } from "react-i18next";
export interface BubbleMenuItem {
name: string;
@@ -39,6 +40,7 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
};
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const { t } = useTranslation();
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
const showCommentPopupRef = useRef(showCommentPopup);
@@ -49,31 +51,31 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const items: BubbleMenuItem[] = [
{
name: "bold",
name: "Bold",
isActive: () => props.editor.isActive("bold"),
command: () => props.editor.chain().focus().toggleBold().run(),
icon: IconBold,
},
{
name: "italic",
name: "Italic",
isActive: () => props.editor.isActive("italic"),
command: () => props.editor.chain().focus().toggleItalic().run(),
icon: IconItalic,
},
{
name: "underline",
name: "Underline",
isActive: () => props.editor.isActive("underline"),
command: () => props.editor.chain().focus().toggleUnderline().run(),
icon: IconUnderline,
},
{
name: "strike",
name: "Strike",
isActive: () => props.editor.isActive("strike"),
command: () => props.editor.chain().focus().toggleStrike().run(),
icon: IconStrikethrough,
},
{
name: "code",
name: "Code",
isActive: () => props.editor.isActive("code"),
command: () => props.editor.chain().focus().toggleCode().run(),
icon: IconCode,
@@ -81,7 +83,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
];
const commentItem: BubbleMenuItem = {
name: "comment",
name: "Comment",
isActive: () => props.editor.isActive("comment"),
command: () => {
const commentId = uuid7();
@@ -138,13 +140,13 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
<ActionIcon.Group>
{items.map((item, index) => (
<Tooltip key={index} label={item.name} withArrow>
<Tooltip key={index} label={t(item.name)} withArrow>
<ActionIcon
key={index}
variant="default"
size="lg"
radius="0"
aria-label={item.name}
aria-label={t(item.name)}
className={clsx({ [classes.active]: item.isActive() })}
style={{ border: "none" }}
onClick={item.command}
@@ -175,7 +177,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
variant="default"
size="lg"
radius="0"
aria-label={commentItem.name}
aria-label={t(commentItem.name)}
style={{ border: "none" }}
onClick={commentItem.command}
>
apps/client/src/features/editor/components/bubble-menu/color-selector.tsx
+7 -5
View File
@@ -10,6 +10,7 @@ import {
Tooltip,
} from "@mantine/core";
import { useEditor } from "@tiptap/react";
import { useTranslation } from "react-i18next";
export interface BubbleColorMenuItem {
name: string;
@@ -106,6 +107,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
isOpen,
setIsOpen,
}) => {
const { t } = useTranslation();
const activeColorItem = TEXT_COLORS.find(({ color }) =>
editor.isActive("textStyle", { color }),
);
@@ -117,7 +119,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
return (
<Popover width={200} opened={isOpen} withArrow>
<Popover.Target>
<Tooltip label="Text color" withArrow>
<Tooltip label={t("Text color")} withArrow>
<ActionIcon
variant="default"
size="lg"
@@ -136,8 +138,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
<Popover.Dropdown>
{/* make mah responsive */}
<ScrollArea.Autosize type="scroll" mah="400">
<Text span c="dimmed" inherit>
COLOR
<Text span c="dimmed" tt="uppercase" inherit>
{t("Color")}
</Text>
<Button.Group orientation="vertical">
@@ -155,7 +157,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
}
onClick={() => {
editor.commands.unsetColor();
name !== "Default" &&
name !== t("Default") &&
editor
.chain()
.focus()
@@ -165,7 +167,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
}}
style={{ border: "none" }}
>
{name}
{t(name)}
</Button>
))}
</Button.Group>
apps/client/src/features/editor/components/bubble-menu/link-selector.tsx
+3 -1
View File
@@ -3,6 +3,7 @@ import { IconLink } from "@tabler/icons-react";
import { ActionIcon, Popover, Tooltip } from "@mantine/core";
import { useEditor } from "@tiptap/react";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { useTranslation } from "react-i18next";
interface LinkSelectorProps {
editor: ReturnType<typeof useEditor>;
@@ -15,6 +16,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
isOpen,
setIsOpen,
}) => {
const { t } = useTranslation();
const onLink = useCallback(
(url: string) => {
setIsOpen(false);
@@ -32,7 +34,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
withArrow
>
<Popover.Target>
<Tooltip label="Add link" withArrow>
<Tooltip label={t("Add link")} withArrow>
<ActionIcon
variant="default"
size="lg"
apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
+5 -2
View File
@@ -14,6 +14,7 @@ import {
} from "@tabler/icons-react";
import { Popover, Button, ScrollArea } from "@mantine/core";
import { useEditor } from "@tiptap/react";
import { useTranslation } from "react-i18next";
interface NodeSelectorProps {
editor: ReturnType<typeof useEditor>;
@@ -33,6 +34,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
isOpen,
setIsOpen,
}) => {
const { t } = useTranslation();
const items: BubbleMenuItem[] = [
{
name: "Text",
@@ -114,7 +117,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
rightSection={<IconChevronDown size={16} />}
onClick={() => setIsOpen(!isOpen)}
>
{activeItem?.name}
{t(activeItem?.name)}
</Button>
</Popover.Target>
@@ -137,7 +140,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
}}
style={{ border: "none" }}
>
{item.name}
{t(item.name)}
</Button>
))}
</Button.Group>