@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/tiptap/mindmap/mind-map.tsx

@@ -42,8 +42,7 @@ import {
   type Theme as MindElixirTheme,
 } from "mind-elixir"
 import MindElixir from "mind-elixir"
-import { useTranslation } from "react-i18next"
-import { getClientI18n } from "@/i18n/client"
+import { m } from "@/paraglide/messages.js";
 
 type Theme = "light" | "dark"
 
@@ -91,7 +90,7 @@ const MindMapContext = createContext<MindMapContextValue | null>(null)
 
 export function useMindMap() {
   const context = useContext(MindMapContext)
-  if (!context) throw new Error(getClientI18n().t("errors.useMindMapContext", { ns: "mindmap" }))
+  if (!context) throw new Error(m.mindmap_errors_useMindMapContext())
   return context
 }
 
@@ -259,7 +258,6 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
   const [currentDirection, setCurrentDirection] = useState<0 | 1 | 2>(() => data?.direction ?? direction)
   const resolvedTheme = useResolvedTheme(themeProp)
   const id = useId()
-  const { t } = useTranslation("mindmap")
 
   useImperativeHandle(ref, () => ({ instance: mindRef.current }), [])
 
@@ -283,24 +281,24 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
   useEffect(() => {
     if (!containerRef.current || mindRef.current) return
     let isSubscribed = true
-    const initialData = initialDataRef.current || MindElixir.new(t("defaultTopic"))
+    const initialData = initialDataRef.current || MindElixir.new(m.mindmap_defaultTopic())
     const themeToUse = getTheme(resolvedThemeRef.current === "dark")
     const options = {
       el: containerRef.current,
       direction: data?.direction ?? direction,
       contextMenu: contextMenu ? { locale: {
-        addChild: t("editor.insert-child"),
-        addParent: t("editor.insert-parent"),
-        addSibling: t("editor.insert-sibling"),
-        removeNode: t("editor.delete-node"),
-        focus: t("editor.focus"),
-        cancelFocus: t("editor.unfocus"),
-        moveUp: t("editor.move-up"),
-        moveDown: t("editor.move-down"),
-        link: t("editor.link"),
-        linkBidirectional: t("editor.bidirectional-link"),
-        clickTips: t("editor.click-target"),
-        summary: t("editor.summary"),
+        addChild: m['editor_insert-child'](),
+        addParent: m['editor_insert-parent'](),
+        addSibling: m['editor_insert-sibling'](),
+        removeNode: m['editor_delete-node'](),
+        focus: m.editor_focus(),
+        cancelFocus: m.editor_unfocus(),
+        moveUp: m['editor_move-up'](),
+        moveDown: m['editor_move-down'](),
+        link: m.editor_link(),
+        linkBidirectional: m['editor_bidirectional-link'](),
+        clickTips: m['editor_click-target'](),
+        summary: m.editor_summary(),
       }} : false,
       toolBar: false,
       nodeMenu,
@@ -311,7 +309,7 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
       editable: !readonly,
       alignment: "nodes",
       theme: themeToUse,
-      newTopicName: t("defaultNode"),
+      newTopicName: m.mindmap_defaultNode(),
     } as Options
     try {
       const mind = new MindElixir(options)
@@ -335,7 +333,7 @@ export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
         }
       }
     } catch (error) {
-      console.error(getClientI18n().t("errors.initFailed", { ns: "mindmap" }), error)
+      console.error(m.mindmap_errors_initFailed(), error)
     }
     return () => {
       isSubscribed = false
@@ -425,7 +423,6 @@ export function MindMapControls({
   onClose,
 }: MindMapControlsProps) {
   const { mind, isLoaded, direction, onDirectionChange } = useMindMap()
-  const { t } = useTranslation("mindmap")
   const [mounted, setMounted] = useState(false)
   useEffect(() => {
     const t = setTimeout(() => setMounted(true), 0)
@@ -454,7 +451,7 @@ export function MindMapControls({
         backgroundColor: mind.theme.cssVar["--bgcolor"],
       })
     } catch (error) {
-      console.error(getClientI18n().t("errors.exportFailed", { ns: "mindmap" }), error)
+      console.error(m.mindmap_errors_exportFailed(), error)
     }
   }
 
@@ -474,61 +471,61 @@ export function MindMapControls({
       {showClose && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <button onClick={onClose} className={btn} aria-label={t("toolbar.close")}>
+            <button onClick={onClose} className={btn} aria-label={m.mindmap_toolbar_close()}>
               <X className="size-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="left">{t("toolbar.close")}</TooltipContent>
+          <TooltipContent side="left">{m.mindmap_toolbar_close()}</TooltipContent>
         </Tooltip>
       )}
       {showZoom && (
         <>
           <Tooltip>
             <TooltipTrigger asChild>
-              <button onClick={handleZoomIn} className={btn} aria-label={t("toolbar.zoomIn")}>
+              <button onClick={handleZoomIn} className={btn} aria-label={m.mindmap_toolbar_zoomIn()}>
                 <Plus className="size-4" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">{t("toolbar.zoomIn")}</TooltipContent>
+            <TooltipContent side="left">{m.mindmap_toolbar_zoomIn()}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
-              <button onClick={handleZoomOut} className={btn} aria-label={t("toolbar.zoomOut")}>
+              <button onClick={handleZoomOut} className={btn} aria-label={m.mindmap_toolbar_zoomOut()}>
                 <Minus className="size-4" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">{t("toolbar.zoomOut")}</TooltipContent>
+            <TooltipContent side="left">{m.mindmap_toolbar_zoomOut()}</TooltipContent>
           </Tooltip>
         </>
       )}
       {showFit && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <button onClick={handleFit} className={btn} aria-label={t("toolbar.fit")}>
+            <button onClick={handleFit} className={btn} aria-label={m.mindmap_toolbar_fit()}>
               <ScanSearch className="size-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="left">{t("toolbar.fit")}</TooltipContent>
+          <TooltipContent side="left">{m.mindmap_toolbar_fit()}</TooltipContent>
         </Tooltip>
       )}
       {showFullscreen && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <button onClick={onFullscreen} className={btn} aria-label={t("toolbar.fullscreen")}>
+            <button onClick={onFullscreen} className={btn} aria-label={m.mindmap_toolbar_fullscreen()}>
               <Maximize className="size-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="left">{t("toolbar.fullscreen")}</TooltipContent>
+          <TooltipContent side="left">{m.mindmap_toolbar_fullscreen()}</TooltipContent>
         </Tooltip>
       )}
       {showExport && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <button onClick={handleExport} className={btn} aria-label={t("toolbar.export")}>
+            <button onClick={handleExport} className={btn} aria-label={m.mindmap_toolbar_export()}>
               <Download className="size-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent side="left">{t("toolbar.export")}</TooltipContent>
+          <TooltipContent side="left">{m.mindmap_toolbar_export()}</TooltipContent>
         </Tooltip>
       )}
       <Separator />
@@ -540,36 +537,36 @@ export function MindMapControls({
               <button
                 onClick={() => onDirectionChange(0)}
                 className={cn(btn, direction === 0 && "bg-accent text-accent-foreground")}
-                aria-label={t("toolbar.layoutLeft")}
+                aria-label={m.mindmap_toolbar_layoutLeft()}
               >
                 <span className="size-4 -scale-x-100"><TreeStructureIcon /></span>
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">{t("toolbar.layoutLeft")}</TooltipContent>
+            <TooltipContent side="left">{m.mindmap_toolbar_layoutLeft()}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 onClick={() => onDirectionChange(1)}
                 className={cn(btn, direction === 1 && "bg-accent text-accent-foreground")}
-                aria-label={t("toolbar.layoutRight")}
+                aria-label={m.mindmap_toolbar_layoutRight()}
               >
                 <span className="size-4"><TreeStructureIcon /></span>
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">{t("toolbar.layoutRight")}</TooltipContent>
+            <TooltipContent side="left">{m.mindmap_toolbar_layoutRight()}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 onClick={() => onDirectionChange(2)}
                 className={cn(btn, direction === 2 && "bg-accent text-accent-foreground")}
-                aria-label={t("toolbar.layoutBalance")}
+                aria-label={m.mindmap_toolbar_layoutBalance()}
               >
                 <span className="size-4"><GraphIcon /></span>
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">{t("toolbar.layoutBalance")}</TooltipContent>
+            <TooltipContent side="left">{m.mindmap_toolbar_layoutBalance()}</TooltipContent>
           </Tooltip>
         </>
       )}

package/src/components/tiptap/mindmap/mindmap-fullscreen-dialog.tsx

@@ -16,9 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
-import { useTranslation } from "react-i18next"
 import { MindMap, MindMapControls } from "./mind-map"
 import type { MindElixirData } from "mind-elixir"
+import { m } from "@/paraglide/messages.js";
 
 export interface MindmapFullscreenDialogProps {
   open: boolean
@@ -31,11 +31,10 @@ export interface MindmapFullscreenDialogProps {
 export function MindmapFullscreenDialog({
   open, onOpenChange, data, direction, onChange,
 }: MindmapFullscreenDialogProps) {
-  const { t } = useTranslation("mindmap")
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-[90vw] h-[90vh] max-w-none sm:max-w-none max-h-none p-0 gap-0 z-[100]" showCloseButton={false}>
-        <DialogTitle className="sr-only">{t("fullscreen.title")}</DialogTitle>
+        <DialogTitle className="sr-only">{m.mindmap_fullscreen_title()}</DialogTitle>
         <div className="relative w-full h-full overflow-hidden">
           <MindMap data={data} direction={direction} onChange={onChange} fit>
             <MindMapControls

package/src/components/tiptap/node/annotation-node/annotation-node-view.tsx

@@ -32,7 +32,7 @@ import {
 } from "lucide-react";
 import { toast } from '@/components/ui/sonner';
 import "./annotation-node.scss";
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   button: MousePointerClick,
@@ -65,11 +65,10 @@ export function AnnotationNodeView({
   aiModel,
   onFillAnnotation,
 }: NodeViewProps & AnnotationNodeViewProps) {
-  const { t } = useTranslation('editor')
   const { componentId, componentType } = node.attrs;
   const config = componentType ? getComponent(componentType) : undefined;
   const Icon = (componentType && ICONS[componentType]) || MessageSquareQuote;
-  const name = config?.name ?? componentType ?? t('unknown-component');
+  const name = config?.name ?? componentType ?? m['editor_unknown-component']();
 
   const elementOverrides = componentId ? (overrides ?? {})[componentId] : undefined;
   const buttonText = componentType === "button" ? elementOverrides?.text : undefined;
@@ -92,7 +91,7 @@ export function AnnotationNodeView({
 
     try {
       if (!onFillAnnotation) {
-        toast.error(t('ai-annotation-not-configured'))
+        toast.error(m['ai-annotation-not-configured']())
         return
       }
       const result = await onFillAnnotation({
@@ -122,9 +121,9 @@ export function AnnotationNodeView({
       }
     } catch (err) {
       if (!abortController.signal.aborted) {
-        console.error(t('ai-annotation-fill-error'), err);
-        toast.error(t('ai-annotation-fill-failed'), {
-          description: err instanceof Error ? err.message : t('please-retry'),
+        console.error(m['editor_ai-annotation-fill-error'](), err);
+        toast.error(m['editor_ai-annotation-fill-failed'](), {
+          description: err instanceof Error ? err.message : m['editor_please-retry'](),
         });
       }
     } finally {
@@ -150,7 +149,7 @@ export function AnnotationNodeView({
           {name}
           {buttonText && <span className="annotation-override-tag">（{buttonText}）</span>}
         </span>
-        <span className="annotation-badge"> {t('annotate') } </span>
+        <span className="annotation-badge"> {m.editor_annotate() } </span>
         <button
           type="button"
           className="annotation-ai-btn"
@@ -159,17 +158,17 @@ export function AnnotationNodeView({
             e.stopPropagation();
             handleAiAnnotate();
           }}
-          title={isGenerating ? t('stop-generating') : t('ai-annotation')}
+          title={isGenerating ? m['editor_stop-generating']() : m['editor_ai-annotation']()}
         >
           {isGenerating ? (
             <>
               <SquareIcon className="annotation-ai-icon" />
-              <span className="annotation-ai-text"> {t('stop') } </span>
+              <span className="annotation-ai-text"> {m.editor_stop() } </span>
             </>
           ) : (
             <>
               <Sparkles className="annotation-ai-icon" />
-              <span className="annotation-ai-text"> {t('ai-annotation') } </span>
+              <span className="annotation-ai-text"> {m['editor_ai-annotation']() } </span>
             </>
           )}
         </button>
@@ -177,7 +176,7 @@ export function AnnotationNodeView({
       <NodeViewContent className="annotation-content" />
       {componentId && (
         <div className="annotation-footer" contentEditable={false}>
-          <span className="annotation-id-text">{t('component-id')}{componentId}</span>
+          <span className="annotation-id-text">{m['editor_component-id']()}{componentId}</span>
         </div>
       )}
     </NodeViewWrapper>

package/src/components/tiptap/node/doc-card-extension.tsx

@@ -16,8 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useEffect, useRef, useCallback } from "react"
-import { useTranslation } from 'react-i18next'
-import { getClientI18n } from '@/i18n/client'
 import { Node, ReactNodeViewRenderer, NodeViewWrapper, type NodeViewProps } from "@tiptap/react"
 import {
   FileText,
@@ -34,6 +32,7 @@ import { NotionAvatar } from "@/components/shared-kit/avatars/notion-avatar"
 import { formatDate } from "../lib/datetime.ts"
 import { useTimezone } from "@/components/shared-kit/timezone/timezone-provider"
 import { useEditorServices, type DocumentPreviewData } from "../notion-like/index.ts"
+import { m } from "@/paraglide/messages.js";
 
 const TYPE_ICONS: Record<string, typeof FileText> = {
   doc: FileText,
@@ -43,17 +42,16 @@ const TYPE_ICONS: Record<string, typeof FileText> = {
 }
 
 const GROUP_ICONS: Record<string, typeof FileText> = {
-  [getClientI18n().t('laws-regulations')]: Scale,
-  [getClientI18n().t('industry-compliance')]: ShieldCheck,
-  [getClientI18n().t('dictionary-entry')]: BookMarked,
-  [getClientI18n().t('website-bookmark')]: Bookmark,
+  [m['editor_laws-regulations']()]: Scale,
+  [m['editor_industry-compliance']()]: ShieldCheck,
+  [m['editor_dictionary-entry']()]: BookMarked,
+  [m['editor_website-bookmark']()]: Bookmark,
 }
 
 const MIN_HEIGHT = 200
 const DEFAULT_HEIGHT = 300
 
 function DocCardNodeView({ node, deleteNode, selected }: NodeViewProps) {
-  const { t } = useTranslation('editor')
   const attrs = node.attrs as {
     id: string
     label: string
@@ -159,11 +157,11 @@ function DocCardNodeView({ node, deleteNode, selected }: NodeViewProps) {
 
         <div className="overflow-y-auto px-4 py-3 text-sm leading-relaxed flex-1" style={{ height: `${height - 110}px` }}>
           {loading ? (
-            <p className="text-muted-foreground"> {t('loading') } </p>
+            <p className="text-muted-foreground"> {m.editor_loading() } </p>
           ) : !data ? (
-            <p className="text-muted-foreground"> {t('doc-not-found') } </p>
+            <p className="text-muted-foreground"> {m['editor_doc-not-found']() } </p>
           ) : (
-            <div className="text-muted-foreground">{plainText.slice(0, 2000) || t('no-content')}</div>
+            <div className="text-muted-foreground">{plainText.slice(0, 2000) || m['editor_no-content']()}</div>
           )}
         </div>
 

package/src/components/tiptap/node/image-node/image-node-floating.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "react-i18next"
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -34,13 +33,13 @@ import { Separator } from "../../ui-primitive/separator/index.tsx"
 import { ImageCaptionButton } from "../../ui/image-caption-button/index.tsx"
 import { ImageUploadButton } from "../../ui/image-upload-button/index.tsx"
 import { RefreshCcwIcon } from "../../icons/refresh-ccw-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export function ImageNodeFloating({
 editor: providedEditor,
 }: {
   editor?: Editor | null
 }) {
-  const { t } = useTranslation('editor')
   const { editor } = useTiptapEditor(providedEditor)
   const visible = isNodeTypeSelected(editor, ["image"])
 
@@ -57,7 +56,7 @@ editor: providedEditor,
       <ImageCaptionButton />
       <Separator />
       <ImageDownloadButton />
-      <ImageUploadButton icon={RefreshCcwIcon} tooltip={t('re-upload')} />
+      <ImageUploadButton icon={RefreshCcwIcon} tooltip={m['editor_re-upload']()} />
       <Separator />
       <DeleteNodeButton />
     </>

package/src/components/tiptap/node/image-upload-node/image-upload-node.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 { useRef, useState } from "react"
 import type { NodeViewProps } from "@tiptap/react"
 import { NodeViewWrapper } from "@tiptap/react"

package/src/components/tiptap/node/mention-extension.ts

@@ -1,4 +1,3 @@
-import { getClientI18n } from '@/i18n/client'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -17,6 +16,7 @@ import { getClientI18n } from '@/i18n/client'
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Mention } from "@tiptap/extension-mention"
+import { m } from "@/paraglide/messages.js";
 
 const DOC_REF_SVG: Record<
   string,
@@ -72,10 +72,10 @@ function getDocRefSvgChildren(
   group: string,
 ): Array<[string, Record<string, string>]> {
   const GROUP_ICON_MAP: Record<string, string> = {
-    [getClientI18n().t('laws-regulations')]: "scale",
-    [getClientI18n().t('industry-compliance')]: "shield-check",
-    [getClientI18n().t('dictionary-entry')]: "book-marked",
-    [getClientI18n().t('website-bookmark')]: "bookmark",
+    [m['editor_laws-regulations']()]: "scale",
+    [m['editor_industry-compliance']()]: "shield-check",
+    [m['editor_dictionary-entry']()]: "book-marked",
+    [m['editor_website-bookmark']()]: "bookmark",
   }
   const TYPE_ICON_MAP: Record<string, string> = {
     doc: "file-text",

package/src/components/tiptap/node/table-node/hooks/use-table-handle-state.ts

@@ -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 { useEffect, useState, useCallback, useRef } from "react"
 import type { Editor } from "@tiptap/react"
 import type { TableHandlesState } from "../extensions/table-handle/index.ts"

package/src/components/tiptap/node/table-node/ui/table-add-row-column-button/table-add-row-column-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 } from "react"
 
 // --- Hooks ---

package/src/components/tiptap/node/table-node/ui/table-add-row-column-button/use-table-add-row-column.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 } from "react"
 import type { Editor } from "@tiptap/react"
 import type { TableMap } from "@tiptap/pm/tables"
@@ -50,6 +48,7 @@ import { AddColLeftIcon } from "../../../../icons/add-col-left-icon.tsx"
 import { AddColRightIcon } from "../../../../icons/add-col-right-icon.tsx"
 import { AddRowBottomIcon } from "../../../../icons/add-row-bottom-icon.tsx"
 import { AddRowTopIcon } from "../../../../icons/add-row-top-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export type RowSide = "above" | "below"
 export type ColSide = "left" | "right"
@@ -93,12 +92,12 @@ const REQUIRED_EXTENSIONS = ["table"]
 
 export const tableAddRowColumnLabels = {
   row: {
-    above: getClientI18n().t('insert-row-above'),
-    below: getClientI18n().t('insert-row-below'),
+    above: m['editor_insert-row-above'](),
+    below: m['editor_insert-row-below'](),
   } as Record<RowSide, string>,
   column: {
-    left: getClientI18n().t('insert-column-left'),
-    right: getClientI18n().t('insert-column-right'),
+    left: m['editor_insert-column-left'](),
+    right: m['editor_insert-column-right'](),
   } as Record<ColSide, string>,
 } as const
 

package/src/components/tiptap/node/table-node/ui/table-align-cell-button/table-align-cell-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 } from "react"
 
 // --- Hooks ---

package/src/components/tiptap/node/table-node/ui/table-align-cell-button/use-table-align-cell.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, useMemo } from "react"
 import type { Editor } from "@tiptap/react"
 
@@ -39,6 +37,7 @@ import { AlignJustifyIcon } from "../../../../icons/align-justify-icon.tsx"
 import { AlignBottomIcon } from "../../../../icons/align-bottom-icon.tsx"
 import { AlignTopIcon } from "../../../../icons/align-top-icon.tsx"
 import { AlignMiddleIcon } from "../../../../icons/align-middle-icon.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export type TextAlignment = "left" | "center" | "right" | "justify"
 export type VerticalAlignment = "top" | "middle" | "bottom"
@@ -84,15 +83,15 @@ const REQUIRED_EXTENSIONS = ["table"]
 
 export const tableAlignCellLabels = {
   text: {
-    left: getClientI18n().t('left-align'),
-    center: getClientI18n().t('center-align'),
-    right: getClientI18n().t('right-align'),
-    justify: getClientI18n().t('justify-align'),
+    left: m['editor_left-align'](),
+    center: m['editor_center-align'](),
+    right: m['editor_right-align'](),
+    justify: m['editor_justify-align'](),
   } as Record<TextAlignment, string>,
   vertical: {
-    top: getClientI18n().t('top-align'),
-    middle: getClientI18n().t('center-align'),
-    bottom: getClientI18n().t('bottom-align'),
+    top: m['editor_top-align'](),
+    middle: m['editor_center-align'](),
+    bottom: m['editor_bottom-align'](),
   } as Record<VerticalAlignment, string>,
 }
 

package/src/components/tiptap/node/table-node/ui/table-alignment-menu/table-alignment-menu.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "react-i18next"
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,7 +15,6 @@ import { useTranslation } from "react-i18next"
 // 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/>.
 
-
 // --- Lib ---
 import type { Orientation } from "../../lib/tiptap-table-utils.ts"
 
@@ -39,6 +37,7 @@ import {
 import { Button } from "../../../../ui-primitive/button/index.tsx"
 import { ComboboxList } from "../../../../ui-primitive/combobox/index.tsx"
 import { Separator } from "../../../../ui-primitive/separator/index.tsx"
+import { m } from "@/paraglide/messages.js";
 
 export interface ActionItemProps {
   icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
@@ -56,7 +55,6 @@ export const TableAlignMenu = ({
   index?: number
   orientation?: Orientation
 }) => {
-  const { t } = useTranslation('editor')
   const textAlign = {
     left: useTableAlignCell({
       alignmentType: "text",
@@ -113,7 +111,7 @@ export const TableAlignMenu = ({
               render={
                 <Button variant="ghost">
                   <AlignmentIcon className="tiptap-button-icon" />
-                  <span className="tiptap-button-text"> {t('alignment') } </span>
+                  <span className="tiptap-button-text"> {m.editor_alignment() } </span>
                   <MenuButtonArrow render={<ChevronRightIcon />} />
                 </Button>
               }

package/src/components/tiptap/node/table-node/ui/table-cell-handle-menu/table-cell-handle-menu.tsx

@@ -15,9 +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, useEffect, useState } from "react"
-import { useTranslation } from 'react-i18next'
 import type { Editor } from "@tiptap/react"
 
 // --- Hooks ---
@@ -48,6 +46,7 @@ import { Separator } from "../../../../ui-primitive/separator/index.tsx"
 import { Grip4Icon } from "../../../../icons/grip-4-icon.tsx"
 
 import "./table-cell-handle-menu.scss"
+import { m } from "@/paraglide/messages.js";
 
 interface TableAction {
   icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
@@ -62,7 +61,6 @@ interface TableAction {
  * Hook to manage all table actions and their availability
  */
 function useTableActions() {
-  const { t } = useTranslation('editor')
   const mergeCellAction = useTableMergeSplitCell({ action: "merge" })
   const splitCellAction = useTableMergeSplitCell({ action: "split" })
   const clearContentAction = useTableClearRowColumnContent({ resetAttrs: true })
@@ -186,7 +184,6 @@ export const TableCellHandleMenu = forwardRef<
   TableCellHandleMenuProps
 >(({ editor: providedEditor, onOpenChange, className, ...props }, ref) => {
   const { editor } = useTiptapEditor(providedEditor)
-  const { t } = useTranslation('editor')
   const { isMenuOpen, handleMenuToggle, closeMenu } = useTableCellHandleMenu({
     editor,
   })
@@ -208,7 +205,7 @@ export const TableCellHandleMenu = forwardRef<
             isMenuOpen && "menu-opened",
             className
           )}
-          aria-label={t('table-cell-options')}
+          aria-label={m['editor_table-cell-options']()}
           aria-haspopup="menu"
           aria-expanded={isMenuOpen}
           {...props}

package/src/components/tiptap/node/table-node/ui/table-clear-row-column-content-button/table-clear-row-column-content-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 } from "react"
 
 // --- Hooks ---