feat(website): fix editor playground load dictionary

Author: aymericzip

apps/website/package.json

@@ -59,6 +59,7 @@
     "@intlayer/config": "workspace:*",
     "@intlayer/core": "workspace:*",
     "@intlayer/design-system": "workspace:*",
+    "@intlayer/dictionaries-entry": "workspace:*",
     "@intlayer/docs": "workspace:*",
     "@intlayer/editor-react": "workspace:*",
     "@monaco-editor/react": "^4.7.0",
@@ -88,7 +89,6 @@
   },
   "devDependencies": {
     "@intlayer/backend": "workspace:*",
-    "@intlayer/swc": "workspace:*",
     "@tailwindcss/postcss": "^4.0.14",
     "@types/next-pwa": "^5.6.9",
     "@types/node": "^22.13.10",

apps/website/src/components/Dashboard/Editor/DictionaryListDrawer/DictionaryListDrawer.tsx

@@ -2,23 +2,20 @@
 
 import type { Locales } from '@intlayer/config';
 import {
-  RightDrawer,
   Button,
+  RightDrawer,
   useRightDrawerStore,
 } from '@intlayer/design-system';
 import { useGetAllDictionaries } from '@intlayer/design-system/hooks';
 import { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';
 import { ChevronRight } from 'lucide-react';
-import { type FC, useCallback, useMemo } from 'react';
+import { type FC } from 'react';
 import { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';
 import { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier';
 
 export const DictionaryListDrawer: FC = () => {
   const { all: dictionaries } = useGetAllDictionaries();
-  const dictionaryKeyList = useMemo(
-    () => Object.keys(dictionaries) as Locales[],
-    [dictionaries]
-  );
+  const dictionaryKeyList = Object.keys(dictionaries) as Locales[];
 
   const { close: closeDrawer, open: openDrawer } = useRightDrawerStore();
 
@@ -37,11 +34,8 @@ export const DictionaryListDrawer: FC = () => {
     openDrawer(getDrawerIdentifier(dictionaryKey));
   };
 
-  const isDictionaryEdited = useCallback(
-    (dictionaryKey: string) =>
-      Object.keys(editedContent ?? {}).includes(dictionaryKey),
-    [editedContent]
-  );
+  const isDictionaryEdited = (dictionaryKey: string) =>
+    Object.keys(editedContent ?? {}).includes(dictionaryKey);
 
   return (
     <RightDrawer

apps/website/src/components/Dashboard/Editor/EditorLayout.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import { type Locales } from '@intlayer/config/client';
-import { useCrossFrameState } from '@intlayer/editor-react';
+import { Container } from '@intlayer/design-system';
+import dictionaries from '@intlayer/dictionaries-entry';
+import {
+  useCrossFrameState,
+  useDictionariesRecordActions,
+} from '@intlayer/editor-react';
 import { useTheme } from 'next-themes';
-import type { FC, PropsWithChildren } from 'react';
+import { useEffect, type FC, type PropsWithChildren } from 'react';
 import { DictionaryEditionDrawerController } from './DictionaryEditionDrawer';
 import { DictionaryListDrawer } from './DictionaryListDrawer';
-import { Container } from '@intlayer/design-system';
 
 export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
   const { resolvedTheme } = useTheme();
@@ -19,6 +23,12 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
     }
   );
 
+  const { setLocaleDictionaries } = useDictionariesRecordActions();
+
+  useEffect(() => {
+    setLocaleDictionaries(dictionaries);
+  }, []);
+
   return (
     <>
       <Container
@@ -29,7 +39,6 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
       >
         {children}
       </Container>
-
       <DictionaryEditionDrawerController
         locale={currentLocale}
         isDarkMode={resolvedTheme === 'dark'}

packages/intlayer-editor/client/src/components/Editor/DictionaryListDrawer/DictionaryListDrawer.tsx

@@ -6,35 +6,17 @@ import {
   RightDrawer,
   useRightDrawerStore,
 } from '@intlayer/design-system';
-import {
-  useGetAllDictionaries,
-  useGetEditorDictionaries,
-} from '@intlayer/design-system/hooks';
-import {
-  useDictionariesRecordActions,
-  useEditedContent,
-  useFocusDictionary,
-} from '@intlayer/editor-react';
+import { useGetAllDictionaries } from '@intlayer/design-system/hooks';
+import { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';
 import { ChevronRight } from 'lucide-react';
-import { type FC, useEffect } from 'react';
+import { type FC } from 'react';
 import { getDrawerIdentifier } from '../DictionaryEditionDrawer/useDictionaryEditionDrawer';
 import { dictionaryListDrawerIdentifier } from './dictionaryListDrawerIdentifier';
 
 export const DictionaryListDrawer: FC = () => {
   const { all: dictionaries } = useGetAllDictionaries();
   const dictionaryKeyList = Object.keys(dictionaries) as Locales[];
 
-  const { setLocaleDictionaries } = useDictionariesRecordActions();
-  const { data: localeDictionaries } = useGetEditorDictionaries({
-    autoFetch: true,
-  });
-
-  useEffect(() => {
-    if (!localeDictionaries) return;
-
-    setLocaleDictionaries(localeDictionaries);
-  }, [dictionaries]);
-
   const { close: closeDrawer, open: openDrawer } = useRightDrawerStore();
 
   const { editedContent } = useEditedContent();

packages/intlayer-editor/client/src/components/Editor/EditorLayout.tsx

@@ -1,8 +1,13 @@
 'use client';
 
 import { type Locales } from '@intlayer/config/client';
-import { MessageKey, useCrossFrameState } from '@intlayer/editor-react';
-import { type FC, type PropsWithChildren } from 'react';
+import { useGetEditorDictionaries } from '@intlayer/design-system/hooks';
+import {
+  MessageKey,
+  useCrossFrameState,
+  useDictionariesRecordActions,
+} from '@intlayer/editor-react';
+import { useEffect, type FC, type PropsWithChildren } from 'react';
 import { DictionaryEditionDrawerController } from './DictionaryEditionDrawer';
 import { DictionaryListDrawer } from './DictionaryListDrawer';
 
@@ -15,6 +20,17 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
       emit: false,
     }
   );
+  const { data: localeDictionaries } = useGetEditorDictionaries({
+    autoFetch: true,
+  });
+
+  const { setLocaleDictionaries } = useDictionariesRecordActions();
+
+  useEffect(() => {
+    if (!localeDictionaries) return;
+
+    setLocaleDictionaries(localeDictionaries);
+  }, [localeDictionaries]);
 
   return (
     <div className="bg-card relative size-full p-3">