@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/tiptap/ui/ai-menu/ai-menu-items/ai-menu-items.tsx

@@ -14,11 +14,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { getClientI18n } from "@/i18n/client"
 import { Fragment, useCallback, useMemo } from "react"
-import { useTranslation } from 'react-i18next'
 import { type Editor } from "@tiptap/react"
 import type { TextOptions } from "../../../lib/ai-types.ts"
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor.ts"
@@ -59,6 +55,7 @@ import { TextReduceIcon } from "../../../icons/text-reduce-icon.tsx"
 import { CompleteSentenceIcon } from "../../../icons/complete-sentence-icon.tsx"
 import { SmileAiIcon } from "../../../icons/smile-ai-icon.tsx"
 import { CheckAiIcon } from "../../../icons/check-ai-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 function initializeEditorMenuActions(): Record<
   MenuActionIdentifier,
@@ -71,13 +68,13 @@ function initializeEditorMenuActions(): Record<
       filterItems: true,
       icon: <MicAiIcon className="tiptap-button-icon" />,
       items: SUPPORTED_TONES,
-      label: getClientI18n().t('adjust-tone'),
+      label: m['editor_adjust-tone'](),
       value: "adjustTone",
     },
     aiFixSpellingAndGrammar: {
       type: "executable",
       icon: <CheckAiIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('fix-spelling-grammar'),
+      label: m['editor_fix-spelling-grammar'](),
       value: "aiFixSpellingAndGrammar",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -99,7 +96,7 @@ function initializeEditorMenuActions(): Record<
     aiExtend: {
       type: "executable",
       icon: <TextExtendIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('expand'),
+      label: m.editor_expand(),
       value: "aiExtend",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -121,7 +118,7 @@ function initializeEditorMenuActions(): Record<
     aiShorten: {
       type: "executable",
       icon: <TextReduceIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('abbreviate'),
+      label: m.editor_abbreviate(),
       value: "aiShorten",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -143,7 +140,7 @@ function initializeEditorMenuActions(): Record<
     simplifyLanguage: {
       type: "executable",
       icon: <Simplify2Icon className="tiptap-button-icon" />,
-      label: getClientI18n().t('simplify-language'),
+      label: m['editor_simplify-language'](),
       value: "simplifyLanguage",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -165,7 +162,7 @@ function initializeEditorMenuActions(): Record<
     improveWriting: {
       type: "executable",
       icon: <SmileAiIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('improve-writing'),
+      label: m['editor_improve-writing'](),
       value: "improveWriting",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -187,7 +184,7 @@ function initializeEditorMenuActions(): Record<
     emojify: {
       type: "executable",
       icon: <SmileAiIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('add-emoji'),
+      label: m['editor_add-emoji'](),
       value: "emojify",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -209,7 +206,7 @@ function initializeEditorMenuActions(): Record<
     continueWriting: {
       type: "executable",
       icon: <CompleteSentenceIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('continue-writing'),
+      label: m['editor_continue-writing'](),
       value: "continueWriting",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -231,7 +228,7 @@ function initializeEditorMenuActions(): Record<
     summarize: {
       type: "executable",
       icon: <SummarizeTextIcon className="tiptap-button-icon" />,
-      label: getClientI18n().t('add-summary'),
+      label: m['editor_add-summary'](),
       value: "summarize",
       onSelect: ({ editor, options }) => {
         if (!editor) return
@@ -256,7 +253,7 @@ function initializeEditorMenuActions(): Record<
       filterItems: true,
       icon: <LanguagesIcon className="tiptap-button-icon" />,
       items: SUPPORTED_LANGUAGES,
-      label: getClientI18n().t('language'),
+      label: m.common_settings_language(),
       value: "translateTo",
     },
   }
@@ -275,7 +272,7 @@ function mapInteractionContextToActions(
 
   const grouped: Action[] = [
     {
-      label: getClientI18n().t('edit'),
+      label: m.agents_agent_edit(),
       items: Object.values([
         menuActions.adjustTone,
         menuActions.aiFixSpellingAndGrammar,
@@ -287,7 +284,7 @@ function mapInteractionContextToActions(
       ]).map(convertToMenuAction),
     },
     {
-      label: getClientI18n().t('writing'),
+      label: m.editor_writing(),
       items: Object.values([
         menuActions.continueWriting,
         menuActions.summarize,

package/src/components/tiptap/ui/ai-menu/ai-menu-items/language-selection-submenu.tsx

@@ -19,7 +19,6 @@ import type { Language } from "../../../lib/ai-types.ts"
 import type { TextOptions } from "../../../lib/ai-types.ts"
 import type { Editor } from "@tiptap/react"
 import { useCallback, useMemo } from "react"
-import { useTranslation } from 'react-i18next'
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor.ts"
 import { getContextAndInsertAt, useAiMenuState } from "../index.tsx"
 import {
@@ -41,13 +40,13 @@ import { ChevronRightIcon } from "../../../icons/chevron-right-icon.tsx"
 import { LanguagesIcon } from "../../../icons/languages-icon.tsx"
 import { SUPPORTED_LANGUAGES } from "./ai-menu-items-constants"
 import type { MenuActionIdentifier } from "./ai-menu-items-types"
+import { m } from "@/paraglide/messages.js";
 
 export function LanguageSelectionSubmenu({
 editor: providedEditor,
 }: {
   editor?: Editor | null
 }) {
-  const { t } = useTranslation('editor')
   const { editor } = useTiptapEditor(providedEditor)
   const [searchValue] = useComboboxValueState()
   const { state, updateState } = useAiMenuState()
@@ -87,7 +86,7 @@ editor: providedEditor,
   const languageMenuItems = (
     <>
       {availableLanguages.length > 0 && (
-        <MenuGroupLabel> {t('language') } </MenuGroupLabel>
+        <MenuGroupLabel> {m.editor_language() } </MenuGroupLabel>
       )}
       {availableLanguages.map((language) => (
         <MenuItem
@@ -121,7 +120,7 @@ editor: providedEditor,
               render={
                 <Button variant="ghost">
                   <LanguagesIcon className="tiptap-button-icon" />
-                  <span className="tiptap-button-text"> {t('language') } </span>
+                  <span className="tiptap-button-text"> {m.editor_language() } </span>
                   <MenuButtonArrow render={<ChevronRightIcon />} />
                 </Button>
               }

package/src/components/tiptap/ui/ai-menu/ai-menu-items/tone-selection-submenu.tsx

@@ -18,7 +18,6 @@
 import type { TextOptions } from "../../../lib/ai-types.ts"
 import type { Editor } from "@tiptap/react"
 import { useCallback, useMemo } from "react"
-import { useTranslation } from 'react-i18next'
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor.ts"
 import { getContextAndInsertAt, useAiMenuState } from "../index.tsx"
 import {
@@ -37,11 +36,11 @@ import { ComboboxList } from "../../../ui-primitive/combobox/index.tsx"
 import { ChevronRightIcon } from "../../../icons/chevron-right-icon.tsx"
 import { MicAiIcon } from "../../../icons/mic-ai-icon.tsx"
 import { SUPPORTED_TONES } from "./ai-menu-items-constants"
+import { m } from "@/paraglide/messages.js";
 
 export function ToneSelectionSubmenu({ editor: providedEditor }: {
   editor?: Editor | null
 }) {
-  const { t } = useTranslation('editor')
   const { editor } = useTiptapEditor(providedEditor)
   const [searchValue] = useComboboxValueState()
   const { state, updateState } = useAiMenuState()
@@ -106,7 +105,7 @@ export function ToneSelectionSubmenu({ editor: providedEditor }: {
               render={
                 <Button variant="ghost">
                   <MicAiIcon className="tiptap-button-icon" />
-                  <span className="tiptap-button-text"> {t('adjust-tone') } </span>
+                  <span className="tiptap-button-text"> {m['editor_adjust-tone']() } </span>
                   <MenuButtonArrow render={<ChevronRightIcon />} />
                 </Button>
               }

package/src/components/tiptap/ui/ai-menu/ai-menu-utils.ts

@@ -1,4 +1,3 @@
-import { getClientI18n } from '@/i18n/client'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -18,6 +17,7 @@ import { getClientI18n } from '@/i18n/client'
 
 import { type Editor } from "@tiptap/react"
 import { getSelectedDOMElement } from "../../lib/advanced-utils.ts"
+import { m } from "@/paraglide/messages.js";
 
 /**
  * Computes the content-area rect of the editor (excluding padding/border).
@@ -200,13 +200,13 @@ export function getTopMostParentInsideEditor(
   editorRoot: HTMLElement
 ): HTMLElement {
   if (!element || !editorRoot) {
-    throw new Error(getClientI18n().t('element-and-editorroot-required'))
+    throw new Error(m['editor_element-and-editorroot-required']())
   }
 
   if (element === editorRoot) return element
 
   if (!editorRoot.contains(element)) {
-    throw new Error(getClientI18n().t('element-not-in-editor-root'))
+    throw new Error(m['editor_element-not-in-editor-root']())
   }
 
   let parent = element

package/src/components/tiptap/ui/ai-menu/ai-menu.tsx

@@ -14,9 +14,6 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { getClientI18n } from "@/i18n/client"
 import { useCallback, useEffect, useRef } from "react"
 import { type Editor } from "@tiptap/react"
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react"
@@ -70,6 +67,7 @@ import {
 import { StopCircle2Icon } from "../../icons/stop-circle-2-icon.tsx"
 
 import "./ai-menu.scss"
+import { m } from "@/paraglide/messages.js";
 
 const EDITOR_INSTRUCTIONS: Record<string, string> = {
   generate: "You are a creative writing assistant. Continue or write new content based on the user prompt. Output ONLY the requested content, no explanations, no preamble, no quotes.",
@@ -397,7 +395,7 @@ export function AiMenuProgress({ editor, stop }: { editor: Editor; stop: () => v
   return (
     <div className="tiptap-ai-menu-progress">
       <div className="tiptap-spinner-alt">
-        <span> {getClientI18n().t('ai-is-generating') } </span>
+        <span> {m['editor_ai-is-generating']() } </span>
         <div className="dots-container">
           <div className="dot"></div>
           <div className="dot"></div>
@@ -405,7 +403,7 @@ export function AiMenuProgress({ editor, stop }: { editor: Editor; stop: () => v
         </div>
       </div>
 
-      <Button variant="ghost" title={getClientI18n().t('stop')} onClick={handleStop}>
+      <Button variant="ghost" title={m.editor_stop()} onClick={handleStop}>
         <StopCircle2Icon className="tiptap-button-icon" />
       </Button>
     </div>

package/src/components/tiptap/ui/blockquote-button/blockquote-button.tsx

@@ -15,10 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { forwardRef, useCallback } from "react"
-
-import { useTranslation } from 'react-i18next'
 // --- Tiptap UI ---
 import type { UseBlockquoteConfig } from "./index.tsx"
 import {
@@ -36,6 +33,7 @@ import { parseShortcutKeys } from "../../lib/utils.ts"
 import type { ButtonProps } from "../../ui-primitive/button/index.tsx"
 import { Button } from "../../ui-primitive/button/index.tsx"
 import { Badge } from "../../ui-primitive/badge/index.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export interface BlockquoteButtonProps
   extends Omit<ButtonProps, "type">, UseBlockquoteConfig {
@@ -55,7 +53,6 @@ shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY,
 }: {
   shortcutKeys?: string
 }) {
-  const { t } = useTranslation('editor')
   return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
 }
 
@@ -82,7 +79,6 @@ export const BlockquoteButton = forwardRef<
     ref
   ) => {
     const { editor } = useTiptapEditor(providedEditor)
-    const { t } = useTranslation('editor')
     const {
       isVisible,
       canToggle,
@@ -121,7 +117,7 @@ export const BlockquoteButton = forwardRef<
         data-disabled={!canToggle}
         aria-label={label}
         aria-pressed={isActive}
-        tooltip={t('quote')}
+        tooltip={m.editor_quote()}
         onClick={handleClick}
         {...buttonProps}
         ref={ref}

package/src/components/tiptap/ui/blockquote-button/use-blockquote.ts

@@ -1,4 +1,3 @@
-import { getClientI18n } from '@/i18n/client'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,7 +15,6 @@ import { getClientI18n } from '@/i18n/client'
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useCallback, useEffect, useState } from "react"
 import type { Editor } from "@tiptap/react"
 import { NodeSelection, TextSelection } from "@tiptap/pm/state"
@@ -36,6 +34,7 @@ import {
   isValidPosition,
   selectionWithinConvertibleTypes,
 } from "../../lib/utils.ts"
+import { m } from "@/paraglide/messages.js";
 
 export const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b"
 
@@ -283,7 +282,7 @@ export function useBlockquote(config?: UseBlockquoteConfig) {
     isActive,
     handleToggle,
     canToggle,
-    label: getClientI18n().t('quote'),
+    label: m.editor_quote(),
     shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
     Icon: BlockquoteIcon,
   }

package/src/components/tiptap/ui/code-block-button/code-block-button.tsx

@@ -15,10 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { forwardRef, useCallback } from "react"
-
-import { useTranslation } from 'react-i18next'
 // --- Hooks ---
 import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
 
@@ -36,6 +33,7 @@ import {
 import type { ButtonProps } from "../../ui-primitive/button/index.tsx"
 import { Button } from "../../ui-primitive/button/index.tsx"
 import { Badge } from "../../ui-primitive/badge/index.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export interface CodeBlockButtonProps
   extends Omit<ButtonProps, "type">, UseCodeBlockConfig {
@@ -55,7 +53,6 @@ shortcutKeys = CODE_BLOCK_SHORTCUT_KEY,
 }: {
   shortcutKeys?: string
 }) {
-  const { t } = useTranslation('editor')
   return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
 }
 
@@ -82,7 +79,6 @@ export const CodeBlockButton = forwardRef<
     ref
   ) => {
     const { editor } = useTiptapEditor(providedEditor)
-    const { t } = useTranslation("editor")
     const {
       isVisible,
       canToggle,
@@ -121,7 +117,7 @@ export const CodeBlockButton = forwardRef<
         tabIndex={-1}
         aria-label={label}
         aria-pressed={isActive}
-        tooltip={t('code-block')}
+        tooltip={m['editor_code-block']()}
         onClick={handleClick}
         {...buttonProps}
         ref={ref}

package/src/components/tiptap/ui/code-block-button/use-code-block.ts

@@ -1,4 +1,3 @@
-import { getClientI18n } from '@/i18n/client'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,7 +15,6 @@ import { getClientI18n } from '@/i18n/client'
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useCallback, useEffect, useState } from "react"
 import { type Editor } from "@tiptap/react"
 import { NodeSelection, TextSelection } from "@tiptap/pm/state"
@@ -36,6 +34,7 @@ import {
 
 // --- Icons ---
 import { CodeBlockIcon } from "../../icons/code-block-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c"
 
@@ -293,7 +292,7 @@ export function useCodeBlock(config?: UseCodeBlockConfig) {
     isActive,
     handleToggle,
     canToggle: canToggleState,
-    label: getClientI18n().t('code-block'),
+    label: m['editor_code-block'](),
     shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
     Icon: CodeBlockIcon,
   }

package/src/components/tiptap/ui/color-highlight-button/color-highlight-button.tsx

@@ -15,7 +15,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { forwardRef, useCallback, useMemo } from "react"
 
 // --- Lib ---

package/src/components/tiptap/ui/color-highlight-button/use-color-highlight.ts

@@ -1,4 +1,3 @@
-import { getClientI18n } from '@/i18n/client'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,8 +15,8 @@ import { getClientI18n } from '@/i18n/client'
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useCallback, useEffect, useState } from "react"
+
 import { type Editor } from "@tiptap/react"
 import { useHotkeys } from "react-hotkeys-hook"
 
@@ -34,65 +33,66 @@ import {
 
 // --- Icons ---
 import { HighlighterIcon } from "../../icons/highlighter-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h"
 export const HIGHLIGHT_COLORS = [
   {
-    label: getClientI18n().t('default-bg'),
+    label: m['editor_default-bg'](),
     value: "var(--tt-bg-color)",
     colorValue: "#ffffff",
     border: "var(--tt-bg-color-contrast)",
   },
   {
-    label: getClientI18n().t('gray-bg'),
+    label: m['editor_gray-bg'](),
     value: "var(--tt-color-highlight-gray)",
     colorValue: "#f8f8f7",
     border: "var(--tt-color-highlight-gray-contrast)",
   },
   {
-    label: getClientI18n().t('brown-bg'),
+    label: m['editor_brown-bg'](),
     value: "var(--tt-color-highlight-brown)",
     colorValue: "#f4eeee",
     border: "var(--tt-color-highlight-brown-contrast)",
   },
   {
-    label: getClientI18n().t('orange-bg'),
+    label: m['editor_orange-bg'](),
     value: "var(--tt-color-highlight-orange)",
     colorValue: "#fbecdd",
     border: "var(--tt-color-highlight-orange-contrast)",
   },
   {
-    label: getClientI18n().t('yellow-bg'),
+    label: m['editor_yellow-bg'](),
     value: "var(--tt-color-highlight-yellow)",
     colorValue: "#fef9c3",
     border: "var(--tt-color-highlight-yellow-contrast)",
   },
   {
-    label: getClientI18n().t('green-bg'),
+    label: m['editor_green-bg'](),
     value: "var(--tt-color-highlight-green)",
     colorValue: "#dcfce7",
     border: "var(--tt-color-highlight-green-contrast)",
   },
   {
-    label: getClientI18n().t('blue-bg'),
+    label: m['editor_blue-bg'](),
     value: "var(--tt-color-highlight-blue)",
     colorValue: "#e0f2fe",
     border: "var(--tt-color-highlight-blue-contrast)",
   },
   {
-    label: getClientI18n().t('purple-bg'),
+    label: m['editor_purple-bg'](),
     value: "var(--tt-color-highlight-purple)",
     colorValue: "#f3e8ff",
     border: "var(--tt-color-highlight-purple-contrast)",
   },
   {
-    label: getClientI18n().t('pink-bg'),
+    label: m['editor_pink-bg'](),
     value: "var(--tt-color-highlight-pink)",
     colorValue: "#fcf1f6",
     border: "var(--tt-color-highlight-pink-contrast)",
   },
   {
-    label: getClientI18n().t('red-bg'),
+    label: m['editor_red-bg'](),
     value: "var(--tt-color-highlight-red)",
     colorValue: "#ffe4e6",
     border: "var(--tt-color-highlight-red-contrast)",
@@ -365,7 +365,7 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
   const handleRemoveHighlight = useCallback(() => {
     const success = removeHighlight(editor, mode)
     if (success) {
-      onApplied?.({ color: "", label: getClientI18n().t('remove-highlight'), mode })
+      onApplied?.({ color: "", label: m['editor_remove-highlight'](), mode })
     }
     return success
   }, [editor, onApplied, mode])
@@ -389,7 +389,7 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
     handleColorHighlight,
     handleRemoveHighlight,
     canColorHighlight: canColorHighlightState,
-    label: label || getClientI18n().t('editor:highlight'),
+    label: label || m.editor_highlight(),
     shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
     Icon: HighlighterIcon,
     mode,

package/src/components/tiptap/ui/color-highlight-popover/color-highlight-popover.tsx

@@ -14,11 +14,8 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { getClientI18n } from "@/i18n/client"
 import { forwardRef, useMemo, useRef, useState } from "react"
-import { useTranslation } from 'react-i18next'
+
 import { type Editor } from "@tiptap/react"
 
 // --- Hooks ---
@@ -56,6 +53,7 @@ import {
   useColorHighlight,
 } from "../color-highlight-button/index.tsx"
 import { ButtonGroup } from "../../ui-primitive/button-group/index.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export interface ColorHighlightPopoverContentProps {
   /**
@@ -104,8 +102,8 @@ export const ColorHighlightPopoverButton = forwardRef<
     data-appearance="default"
     role="button"
     tabIndex={-1}
-    aria-label={getClientI18n().t('highlight-text')}
-    tooltip={getClientI18n().t('highlight')}
+    aria-label={m['editor_highlight-text']()}
+    tooltip={m.editor_highlight()}
     ref={ref}
     {...props}
   >
@@ -131,7 +129,7 @@ editor,
   const containerRef = useRef<HTMLDivElement>(null)
 
   const menuItems = useMemo(
-    () => [...colors, { label: getClientI18n().t('remove-highlight'), value: "none" }],
+    () => [...colors, { label: m['editor_remove-highlight'](), value: "none" }],
     [colors]
   )
 
@@ -168,7 +166,7 @@ editor,
                     useColorValue ? color.colorValue : color.value
                   }
                   tooltip={color.label}
-                  aria-label={`${color.label} ${getClientI18n().t('editor:highlight-color')}`}
+                  aria-label={`${color.label} ${m['editor_highlight-color']()}`}
                   tabIndex={index === selectedIndex ? 0 : -1}
                   data-highlighted={selectedIndex === index}
                   useColorValue={useColorValue}
@@ -180,8 +178,8 @@ editor,
           <ButtonGroup>
             <Button
               onClick={handleRemoveHighlight}
-              aria-label={getClientI18n().t('remove-highlight')}
-              tooltip={getClientI18n().t('remove-highlight')}
+              aria-label={m['editor_remove-highlight']()}
+              tooltip={m['editor_remove-highlight']()}
               tabIndex={selectedIndex === colors.length ? 0 : -1}
               type="button"
               role="menuitem"
@@ -237,7 +235,7 @@ export function ColorHighlightPopover({
           <Icon className="tiptap-button-icon" />
         </ColorHighlightPopoverButton>
       </PopoverTrigger>
-      <PopoverContent aria-label={getClientI18n().t('highlight-color')}>
+      <PopoverContent aria-label={m['editor_highlight-color']()}>
         <ColorHighlightPopoverContent
           editor={editor}
           colors={colors}

package/src/components/tiptap/ui/color-menu/color-menu.tsx

@@ -14,12 +14,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { getClientI18n } from "@/i18n/client"
 import type { Editor } from "@tiptap/react"
-import { useTranslation } from 'react-i18next'
-
 // Primitive UI Components
 import { Button } from "../../ui-primitive/button/index.tsx"
 import { Spacer } from "../../ui-primitive/spacer/index.tsx"
@@ -54,13 +49,13 @@ import { PaintBucketIcon } from "../../icons/paint-bucket-icon.tsx"
 import { ChevronRightIcon } from "../../icons/chevron-right-icon.tsx"
 import { TextColorSmallIcon } from "../../icons/text-color-small-icon.tsx"
 import { useTiptapEditor } from "../../hooks/use-tiptap-editor.ts"
+import { m } from "@/paraglide/messages.js";
 
 interface ColorMenuItemProps {
   color: { value: string; label: string }
 }
 
 const TextColorMenuItem: React.FC<ColorMenuItemProps> = ({ color }) => {
-  const { t } = useTranslation('editor')
   const { addRecentColor } = useRecentColors()
   const { isActive, handleColorText, label } = useColorText({
     label: color.label,
@@ -150,10 +145,9 @@ export interface ColorMenuProps {
 export const ColorMenu: React.FC<ColorMenuProps> = ({
   editor: providedEditor,
   trigger,
-  label = getClientI18n().t('color'),
+  label = m.editor_color(),
   placement = "right",
 }) => {
-  const { t } = useTranslation('editor')
   const { editor } = useTiptapEditor(providedEditor)
   const { recentColors, isInitialized } = useRecentColors()
 
@@ -191,7 +185,7 @@ export const ColorMenu: React.FC<ColorMenuProps> = ({
           {/* Recent Colors */}
           {isInitialized && recentColors.length > 0 && (
             <MenuGroup>
-              <MenuGroupLabel> {getClientI18n().t('recently-used-colors') } </MenuGroupLabel>
+              <MenuGroupLabel> {m['editor_recently-used-colors']() } </MenuGroupLabel>
               {recentColors.map((colorObj) => (
                 <RecentColorMenuItem key={colorObj.value} colorObj={colorObj} />
               ))}
@@ -201,7 +195,7 @@ export const ColorMenu: React.FC<ColorMenuProps> = ({
 
           {/* Text Colors */}
           <MenuGroup>
-            <MenuGroupLabel> {getClientI18n().t('text-color') } </MenuGroupLabel>
+            <MenuGroupLabel> {m['editor_text-color']() } </MenuGroupLabel>
             {TEXT_COLORS.map((textColor) => (
               <TextColorMenuItem key={textColor.value} color={textColor} />
             ))}
@@ -211,7 +205,7 @@ export const ColorMenu: React.FC<ColorMenuProps> = ({
 
           {/* Background Colors */}
           <MenuGroup>
-            <MenuGroupLabel> {getClientI18n().t('background-color') } </MenuGroupLabel>
+            <MenuGroupLabel> {m['editor_background-color']() } </MenuGroupLabel>
             {HIGHLIGHT_COLORS.map((highlightColor) => (
               <HighlightColorMenuItem
                 key={highlightColor.value}