fix: text to diagram translation update issue on language update (#10016)

packages/excalidraw/components/Actions.tsx

@@ -12,19 +12,16 @@ import {
 import {
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
-} from "@excalidraw/element";
-
-import {
   hasBoundTextElement,
   isElbowArrow,
   isImageElement,
   isLinearElement,
   isTextElement,
   isArrowElement,
+  hasStrokeColor,
+  toolIsArrow,
 } from "@excalidraw/element";
 
-import { hasStrokeColor, toolIsArrow } from "@excalidraw/element";
-
 import type {
   ExcalidrawElement,
   ExcalidrawElementType,
@@ -902,16 +899,14 @@ export const ShapesSwitcher = ({
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
           {app.props.aiEnabled !== false && app.plugins.diagramToCode && (
-            <>
+            <DropdownMenu.Item
-              <DropdownMenu.Item
+              onSelect={() => app.onMagicframeToolSelect()}
-                onSelect={() => app.onMagicframeToolSelect()}
+              icon={MagicIcon}
-                icon={MagicIcon}
+              data-testid="toolbar-magicframe"
-                data-testid="toolbar-magicframe"
+            >
-              >
+              {t("toolBar.magicframe")}
-                {t("toolBar.magicframe")}
+              <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
-                <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
+            </DropdownMenu.Item>
-              </DropdownMenu.Item>
-            </>
           )}
         </DropdownMenu.Content>
       </DropdownMenu>

packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx

@@ -1,12 +1,11 @@
 import { trackEvent } from "../../analytics";
 import { useTunnels } from "../../context/tunnels";
-import { t } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { useExcalidrawSetAppState } from "../App";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";
 import { brainIcon } from "../icons";
 
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
-import type { JSX } from "react";
 
 export const TTDDialogTrigger = ({
   children,
@@ -15,6 +14,7 @@ export const TTDDialogTrigger = ({
   children?: ReactNode;
   icon?: JSX.Element;
 }) => {
+  const { t } = useI18n();
   const { TTDDialogTriggerTunnel } = useTunnels();
   const setAppState = useExcalidrawSetAppState();