intlayer-editor 3.0.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.md +46 -24
  2. package/dist/cjs/ContentSelectorWrapper.cjs +5 -5
  3. package/dist/cjs/ContentSelectorWrapper.cjs.map +1 -1
  4. package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs +16 -18
  5. package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs.map +1 -1
  6. package/dist/cjs/DictionaryEditionDrawer/index.cjs.map +1 -1
  7. package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs +4 -20
  8. package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs.map +1 -1
  9. package/dist/cjs/DictionaryListDrawer/DictionaryListDrawer.cjs.map +1 -1
  10. package/dist/cjs/DictionaryListDrawer/index.cjs.map +1 -1
  11. package/dist/cjs/DictionaryListDrawer/useDictionaryListDrawer.cjs.map +1 -1
  12. package/dist/cjs/IntlayerEditorProvider.cjs +92 -0
  13. package/dist/cjs/IntlayerEditorProvider.cjs.map +1 -0
  14. package/dist/cjs/index.cjs +6 -12
  15. package/dist/cjs/index.cjs.map +1 -1
  16. package/dist/esm/ContentSelectorWrapper.mjs +5 -6
  17. package/dist/esm/ContentSelectorWrapper.mjs.map +1 -1
  18. package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs +17 -19
  19. package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs.map +1 -1
  20. package/dist/esm/DictionaryEditionDrawer/index.mjs.map +1 -1
  21. package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs +4 -20
  22. package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs.map +1 -1
  23. package/dist/esm/DictionaryListDrawer/DictionaryListDrawer.mjs.map +1 -1
  24. package/dist/esm/DictionaryListDrawer/index.mjs.map +1 -1
  25. package/dist/esm/DictionaryListDrawer/useDictionaryListDrawer.mjs.map +1 -1
  26. package/dist/esm/IntlayerEditorProvider.mjs +71 -0
  27. package/dist/esm/IntlayerEditorProvider.mjs.map +1 -0
  28. package/dist/esm/index.mjs +1 -4
  29. package/dist/esm/index.mjs.map +1 -1
  30. package/dist/types/ContentSelectorWrapper.d.ts.map +1 -1
  31. package/dist/types/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts +1 -0
  32. package/dist/types/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts.map +1 -1
  33. package/dist/types/DictionaryEditionDrawer/index.d.ts.map +1 -1
  34. package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts +0 -6
  35. package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts.map +1 -1
  36. package/dist/types/DictionaryListDrawer/DictionaryListDrawer.d.ts.map +1 -1
  37. package/dist/types/DictionaryListDrawer/index.d.ts.map +1 -1
  38. package/dist/types/DictionaryListDrawer/useDictionaryListDrawer.d.ts.map +1 -1
  39. package/dist/types/{ContentEditorProvider.d.ts → IntlayerEditorProvider.d.ts} +4 -4
  40. package/dist/types/IntlayerEditorProvider.d.ts.map +1 -0
  41. package/dist/types/index.d.ts +1 -4
  42. package/dist/types/index.d.ts.map +1 -1
  43. package/package.json +30 -29
  44. package/bin/start-server.js +0 -16
  45. package/dist/cjs/ContentEditionLayout.cjs +0 -54
  46. package/dist/cjs/ContentEditionLayout.cjs.map +0 -1
  47. package/dist/cjs/ContentEditorProvider.cjs +0 -55
  48. package/dist/cjs/ContentEditorProvider.cjs.map +0 -1
  49. package/dist/cjs/renderContentEditor.cjs +0 -54
  50. package/dist/cjs/renderContentEditor.cjs.map +0 -1
  51. package/dist/cjs/useEditorServer.cjs +0 -56
  52. package/dist/cjs/useEditorServer.cjs.map +0 -1
  53. package/dist/esm/ContentEditionLayout.mjs +0 -30
  54. package/dist/esm/ContentEditionLayout.mjs.map +0 -1
  55. package/dist/esm/ContentEditorProvider.mjs +0 -33
  56. package/dist/esm/ContentEditorProvider.mjs.map +0 -1
  57. package/dist/esm/renderContentEditor.mjs +0 -30
  58. package/dist/esm/renderContentEditor.mjs.map +0 -1
  59. package/dist/esm/useEditorServer.mjs +0 -32
  60. package/dist/esm/useEditorServer.mjs.map +0 -1
  61. package/dist/types/ContentEditionLayout.d.ts +0 -11
  62. package/dist/types/ContentEditionLayout.d.ts.map +0 -1
  63. package/dist/types/ContentEditorProvider.d.ts.map +0 -1
  64. package/dist/types/renderContentEditor.d.ts +0 -14
  65. package/dist/types/renderContentEditor.d.ts.map +0 -1
  66. package/dist/types/useEditorServer.d.ts +0 -4
  67. package/dist/types/useEditorServer.d.ts.map +0 -1
package/README.md CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  The Intlayer Editor is a tool that transforms your application into a visual editor. With Intlayer Editor, your teams can manage your site's content in all configured languages.
23
23
 
24
- ![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/enabledpletion.png)
24
+ ![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
25
25
 
26
26
  The `intlayer-editor` package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
27
27
 
@@ -50,54 +50,76 @@ In this way, you don't have to worry about where the file is declared or about f
50
50
  Once Intlayer is configured in your project, simply install `intlayer-editor` as a development dependency:
51
51
 
52
52
  ```bash
53
- npm install intlayer-editor -D
53
+ npm install intlayer-editor
54
54
  ```
55
55
 
56
56
  ```bash
57
- yarn add intlayer-editor -D
57
+ yarn add intlayer-editor
58
58
  ```
59
59
 
60
60
  ```bash
61
- pnpm add intlayer-editor -D
61
+ pnpm add intlayer-editor
62
62
  ```
63
63
 
64
+ ## Configuration
65
+
66
+ ### 1. Enable the Editor in your intlayer.config.ts file
67
+
64
68
  In your Intlayer configuration file, you can customize the editor settings:
65
69
 
66
70
  ```typescript
67
71
  const config: IntlayerConfig = {
68
72
  // ... other configuration settings
69
73
  editor: {
70
- enabled: process.env.NODE_ENV === "development", // If false, the editor is inactive and cannot be accessed.
71
- port: 3000, // Port of the intlayer-editor backend
74
+ enabled: process.env.INTLAYER_ENABLED === "true", // If false, the editor is inactive and cannot be accessed.
75
+ // Client ID and client secret are required to enable the editor.
76
+ // They allow the identify the user who is editing the content.
77
+ // They can be obtained by creating a new client in the Intlayer Dashboard - Projects (https://intlayer.org/dashboard/projects).
78
+ clientId: process.env.INTLAYER_CLIENT_ID,
79
+ clientSecret: process.env.INTLAYER_CLIENT_SECRET,
72
80
  },
73
81
  };
74
82
  ```
75
83
 
76
- To see all available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/configuration_en.md).
84
+ > If you don't have a client ID and client secret, you can obtain them by creating a new client in the [Intlayer Dashboard - Projects](https://intlayer.org/dashboard/projects).
77
85
 
78
- ### Start Editing
86
+ > To see all available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/configuration_en.md).
79
87
 
80
- To start editing, launch the editor server using `npx intlayer-editor start`.
88
+ ### 2. Insert the Intlayer Editor Provider in your application
81
89
 
82
- You can also create a custom script in your `package.json` file:
90
+ To enable the editor, you need to insert the Intlayer Editor Provider in your application.
83
91
 
84
- ```json5
85
- {
86
- scripts: {
87
- "start:editor": "npx intlayer-editor start",
88
- },
92
+ Example for React JS or Vite + React applications:
93
+
94
+ ```tsx
95
+ import { IntlayerProvider } from "react-intlayer";
96
+ import { IntlayerEditorProvider } from "intlayer-editor";
97
+
98
+ function App() {
99
+ return (
100
+ <IntlayerProvider>
101
+ <IntlayerEditorProvider>{/* Your application */}</IntlayerEditorProvider>
102
+ </IntlayerProvider>
103
+ );
89
104
  }
90
105
  ```
91
106
 
92
- To start both the Next.js server and the Intlayer Editor simultaneously, you can use the [concurrently](https://github.com/open-cli-tools/concurrently) tool:
93
-
94
- ```json5
95
- {
96
- scripts: {
97
- dev: "next dev",
98
- "start:editor": "npx intlayer-editor start",
99
- "dev:all": "concurrently \"npm run dev:nextjs\" \"npm run dev:intlayer-editor\"",
100
- },
107
+ Example for Next.js applications:
108
+
109
+ ```tsx
110
+ import { IntlayerClientProvider } from "next-intlayer";
111
+ import { IntlayerEditorProvider } from "intlayer-editor";
112
+
113
+ function Page() {
114
+ return (
115
+ <IntlayerServerProvider locale={locale}>
116
+ <IntlayerClientProvider locale={locale}>
117
+ <IntlayerEditorProvider>
118
+ {/* Your application */}
119
+ </IntlayerEditorProvider>
120
+ </IntlayerClientProvider>
121
+ </IntlayerServerProvider>
122
+ );
101
123
  }
102
124
  ```
103
125
 
@@ -26,7 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_core = require("@intlayer/core");
27
27
  var import_design_system = require("@intlayer/design-system");
28
28
  var import_react = require("react");
29
- var import_ContentEditorProvider = require('./ContentEditorProvider.cjs');
29
+ var import_IntlayerEditorProvider = require('./IntlayerEditorProvider.cjs');
30
30
  var import_useDictionaryEditionDrawer = require('./DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs');
31
31
  const ContentSelectorWrapper = ({
32
32
  children,
@@ -36,7 +36,7 @@ const ContentSelectorWrapper = ({
36
36
  }) => {
37
37
  const { open, getEditedContentValue, focusedContent, isOpen } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(dictionaryId);
38
38
  const editedValue = getEditedContentValue(dictionaryId, keyPath);
39
- const { editorEnabled } = (0, import_react.useContext)(import_ContentEditorProvider.IntlayerEditorContext);
39
+ const { isEditorEnabled } = (0, import_IntlayerEditorProvider.useIntlayerEditorContext)();
40
40
  const [displayedChildren, setDisplayedChildren] = (0, import_react.useState)(children);
41
41
  const handleSelect = (0, import_react.useCallback)(
42
42
  () => open({
@@ -48,11 +48,11 @@ const ContentSelectorWrapper = ({
48
48
  );
49
49
  const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && (0, import_core.isSameKeyPath)(focusedContent?.keyPath ?? [], keyPath)) ?? false;
50
50
  (0, import_react.useEffect)(() => {
51
- if (editorEnabled && editedValue && typeof editedValue === "string") {
51
+ if (isEditorEnabled && editedValue && typeof editedValue === "string") {
52
52
  setDisplayedChildren(editedValue);
53
53
  }
54
- }, [editedValue, editorEnabled]);
55
- if (!editorEnabled) {
54
+ }, [editedValue, isEditorEnabled]);
55
+ if (!isEditorEnabled) {
56
56
  return children;
57
57
  }
58
58
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.ContentSelector, { onSelect: handleSelect, isSelecting: isSelected, children: displayedChildren });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n useCallback,\n useContext,\n useEffect,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\nimport { IntlayerEditorContext } from './ContentEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n children: ReactNode;\n dictionaryId: string;\n dictionaryPath: string;\n keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n children,\n dictionaryId,\n dictionaryPath,\n keyPath,\n}) => {\n const { open, getEditedContentValue, focusedContent, isOpen } =\n useDictionaryEditionDrawer(dictionaryId);\n const editedValue = getEditedContentValue(dictionaryId, keyPath);\n const { editorEnabled } = useContext(IntlayerEditorContext);\n const [displayedChildren, setDisplayedChildren] =\n useState<ReactNode>(children);\n\n const handleSelect = useCallback(\n () =>\n open({\n dictionaryId,\n dictionaryPath,\n keyPath,\n }),\n [dictionaryId, dictionaryPath, keyPath, open]\n );\n\n const isSelected =\n (isOpen &&\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n false;\n\n useEffect(() => {\n // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n if (editorEnabled && editedValue && typeof editedValue === 'string') {\n setDisplayedChildren(editedValue);\n }\n }, [editedValue, editorEnabled]);\n\n if (!editorEnabled) {\n return children;\n }\n\n return (\n <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n {displayedChildren}\n </ContentSelector>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DI;AA7DJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAOO;AACP,mCAAsC;AACtC,wCAA2C;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,QAC1D,8DAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,cAAc,QAAI,yBAAW,kDAAqB;AAC1D,QAAM,CAAC,mBAAmB,oBAAoB,QAC5C,uBAAoB,QAAQ;AAE9B,QAAM,mBAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,SACzC,2BAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,8BAAU,MAAM;AAEd,QAAI,iBAAiB,eAAe,OAAO,gBAAgB,UAAU;AACnE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n useCallback,\n useEffect,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n children: ReactNode;\n dictionaryId: string;\n dictionaryPath: string;\n keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n children,\n dictionaryId,\n dictionaryPath,\n keyPath,\n}) => {\n const { open, getEditedContentValue, focusedContent, isOpen } =\n useDictionaryEditionDrawer(dictionaryId);\n const editedValue = getEditedContentValue(dictionaryId, keyPath);\n const { isEditorEnabled } = useIntlayerEditorContext();\n const [displayedChildren, setDisplayedChildren] =\n useState<ReactNode>(children);\n\n const handleSelect = useCallback(\n () =>\n open({\n dictionaryId,\n dictionaryPath,\n keyPath,\n }),\n [dictionaryId, dictionaryPath, keyPath, open]\n );\n\n const isSelected =\n (isOpen &&\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n false;\n\n useEffect(() => {\n // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n setDisplayedChildren(editedValue);\n }\n }, [editedValue, isEditorEnabled]);\n\n if (!isEditorEnabled) {\n return children;\n }\n\n return (\n <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n {displayedChildren}\n </ContentSelector>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA5DJ,kBAA4C;AAC5C,2BAAgC;AAChC,mBAMO;AACP,oCAAyC;AACzC,wCAA2C;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,QAC1D,8DAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,QAAI,wDAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,QAC5C,uBAAoB,QAAQ;AAE9B,QAAM,mBAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,SACzC,2BAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,8BAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}
@@ -30,18 +30,14 @@ var import_hooks = require("@intlayer/design-system/hooks");
30
30
  var import_react = require("react");
31
31
  var import_useDictionaryListDrawer = require('../DictionaryListDrawer/useDictionaryListDrawer.cjs');
32
32
  var import_useDictionaryEditionDrawer = require('./useDictionaryEditionDrawer.cjs');
33
- const DictionaryEditionDrawerContent = ({ locale, identifier }) => {
33
+ const DictionaryEditionDrawerContent = ({ locale, identifier, handleOnBack }) => {
34
34
  const [keyPathEditionModal, setKeyPathEditionModal] = (0, import_react.useState)(null);
35
- const {
36
- setFocusedContent,
37
- setDictionariesRecord,
38
- editContentRequest,
39
- editedContent,
40
- focusedContent,
41
- addEditedContent,
42
- clearEditedDictionaryContent
43
- } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(identifier);
35
+ const { setDictionariesRecord, focusedContent } = (0, import_useDictionaryEditionDrawer.useDictionaryEditionDrawer)(identifier);
44
36
  const { all: dictionaries } = (0, import_hooks.useGetAllDictionaries)();
37
+ const onClickDictionaryList = (0, import_react.useCallback)(() => {
38
+ setKeyPathEditionModal(null);
39
+ handleOnBack();
40
+ }, [handleOnBack]);
45
41
  (0, import_react.useEffect)(() => {
46
42
  if (dictionaries) {
47
43
  setDictionariesRecord(dictionaries);
@@ -59,7 +55,14 @@ const DictionaryEditionDrawerContent = ({ locale, identifier }) => {
59
55
  hasCloseButton: true,
60
56
  title: "Edit field",
61
57
  size: "xl",
62
- children: dictionary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.DictionaryFieldEditor, { dictionary })
58
+ transparency: "lg",
59
+ children: dictionary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
+ import_design_system.DictionaryFieldEditor,
61
+ {
62
+ dictionary,
63
+ onClickDictionaryList
64
+ }
65
+ )
63
66
  }
64
67
  ),
65
68
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -67,12 +70,6 @@ const DictionaryEditionDrawerContent = ({ locale, identifier }) => {
67
70
  {
68
71
  dictionary,
69
72
  locale,
70
- focusedKeyPath: focusedContent.keyPath,
71
- editedContent: editedContent[dictionaryId],
72
- onFocusKeyPath: (keyPath) => setFocusedContent({ ...focusedContent, keyPath }),
73
- onContentChange: (keyPath, newValue) => addEditedContent(dictionaryId, newValue, keyPath),
74
- onValidEdition: editContentRequest,
75
- onCancelEdition: () => clearEditedDictionaryContent(dictionaryId),
76
73
  onClickEdit: setKeyPathEditionModal
77
74
  }
78
75
  )
@@ -113,7 +110,8 @@ const DictionaryEditionDrawer = ({
113
110
  {
114
111
  focusedContent,
115
112
  locale,
116
- identifier: id
113
+ identifier: id,
114
+ handleOnBack
117
115
  }
118
116
  )
119
117
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n RightDrawer,\n DictionaryEditor,\n LocaleSwitcher,\n Modal,\n useEditionPanelStore,\n DictionaryFieldEditor,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useEffect, useState, type FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer';\nimport {\n type FileContent as FileContentWithDictionaryPath,\n useDictionaryEditionDrawer,\n getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n focusedContent: FileContentWithDictionaryPath;\n locale: Locales;\n identifier: string;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n DictionaryEditionDrawerContentProps\n> = ({ locale, identifier }) => {\n const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n KeyPath[] | null\n >(null);\n const {\n setFocusedContent,\n setDictionariesRecord,\n editContentRequest,\n editedContent,\n focusedContent,\n addEditedContent,\n clearEditedDictionaryContent,\n } = useDictionaryEditionDrawer(identifier);\n const { all: dictionaries } = useGetAllDictionaries();\n\n useEffect(() => {\n if (dictionaries) {\n setDictionariesRecord(dictionaries);\n }\n }, [setDictionariesRecord, dictionaries]);\n\n const dictionaryId = focusedContent?.dictionaryId;\n\n if (!dictionaryId) return <>No dictionary focused</>;\n\n const dictionary: Dictionary = dictionaries[dictionaryId];\n\n return (\n <>\n <Modal\n isOpen={keyPathEditionModal !== null}\n onClose={() => setKeyPathEditionModal(null)}\n hasCloseButton\n title=\"Edit field\"\n size=\"xl\"\n >\n {dictionary && <DictionaryFieldEditor dictionary={dictionary} />}\n </Modal>\n <DictionaryEditor\n dictionary={dictionary}\n locale={locale}\n focusedKeyPath={focusedContent.keyPath}\n editedContent={editedContent[dictionaryId]}\n onFocusKeyPath={(keyPath) =>\n setFocusedContent({ ...focusedContent, keyPath })\n }\n onContentChange={(keyPath, newValue) =>\n addEditedContent(dictionaryId, newValue, keyPath)\n }\n onValidEdition={editContentRequest}\n onCancelEdition={() => clearEditedDictionaryContent(dictionaryId)}\n onClickEdit={setKeyPathEditionModal}\n />\n </>\n );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n locale,\n localeList,\n setLocale,\n dictionaryId,\n}) => {\n const id = getDrawerIdentifier(dictionaryId);\n\n const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n const { open: openDictionaryListDrawer } = useDictionaryListDrawer();\n\n const handleOnBack = () => {\n close();\n openDictionaryListDrawer();\n };\n\n return (\n <RightDrawer\n title={dictionaryId}\n identifier={id}\n header={\n <LocaleSwitcher\n setLocale={setLocale}\n locale={locale}\n localeList={localeList}\n />\n }\n backButton={{\n onBack: handleOnBack,\n text: 'Dictionary list',\n }}\n >\n {focusedContent && (\n <DictionaryEditionDrawerContent\n focusedContent={focusedContent}\n locale={locale}\n identifier={id}\n />\n )}\n </RightDrawer>\n );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n locale: Locales;\n localeList: Locales[];\n setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n const focusedContent = useEditionPanelStore((s) => s.focusedContent);\n const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n if (!dictionaryId) {\n return <></>;\n }\n\n return (\n <DictionaryEditionDrawer\n locale={locale}\n localeList={localeList}\n setLocale={setLocale}\n dictionaryId={dictionaryId}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoD4B;AAhD5B,2BAOO;AACP,mBAAsC;AACtC,mBAA6C;AAC7C,qCAAwC;AACxC,wCAIO;AAQA,MAAM,iCAET,CAAC,EAAE,QAAQ,WAAW,MAAM;AAC9B,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAEpD,IAAI;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8DAA2B,UAAU;AACzC,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AAEpD,8BAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,2EAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAM;AAAA,QACN,MAAK;AAAA,QAEJ,wBAAc,4CAAC,8CAAsB,YAAwB;AAAA;AAAA,IAChE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,eAAe;AAAA,QAC/B,eAAe,cAAc,YAAY;AAAA,QACzC,gBAAgB,CAAC,YACf,kBAAkB,EAAE,GAAG,gBAAgB,QAAQ,CAAC;AAAA,QAElD,iBAAiB,CAAC,SAAS,aACzB,iBAAiB,cAAc,UAAU,OAAO;AAAA,QAElD,gBAAgB;AAAA,QAChB,iBAAiB,MAAM,6BAA6B,YAAY;AAAA,QAChE,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAK,uDAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,QAAI,wDAAwB;AAEnE,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,MACd;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,qBAAiB,2CAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,2EAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport {\n RightDrawer,\n DictionaryEditor,\n LocaleSwitcher,\n Modal,\n useEditionPanelStore,\n DictionaryFieldEditor,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { useCallback, useEffect, useState, type FC } from 'react';\nimport { useDictionaryListDrawer } from '../DictionaryListDrawer/useDictionaryListDrawer';\nimport {\n type FileContent as FileContentWithDictionaryPath,\n useDictionaryEditionDrawer,\n getDrawerIdentifier,\n} from './useDictionaryEditionDrawer';\n\ntype DictionaryEditionDrawerContentProps = {\n focusedContent: FileContentWithDictionaryPath;\n locale: Locales;\n identifier: string;\n handleOnBack: () => void;\n};\n\nexport const DictionaryEditionDrawerContent: FC<\n DictionaryEditionDrawerContentProps\n> = ({ locale, identifier, handleOnBack }) => {\n const [keyPathEditionModal, setKeyPathEditionModal] = useState<\n KeyPath[] | null\n >(null);\n const { setDictionariesRecord, focusedContent } =\n useDictionaryEditionDrawer(identifier);\n const { all: dictionaries } = useGetAllDictionaries();\n\n const onClickDictionaryList = useCallback(() => {\n setKeyPathEditionModal(null);\n handleOnBack();\n }, [handleOnBack]);\n\n useEffect(() => {\n if (dictionaries) {\n setDictionariesRecord(dictionaries);\n }\n }, [setDictionariesRecord, dictionaries]);\n\n const dictionaryId = focusedContent?.dictionaryId;\n\n if (!dictionaryId) return <>No dictionary focused</>;\n\n const dictionary: Dictionary = dictionaries[dictionaryId];\n\n return (\n <>\n <Modal\n isOpen={keyPathEditionModal !== null}\n onClose={() => setKeyPathEditionModal(null)}\n hasCloseButton\n title=\"Edit field\"\n size=\"xl\"\n transparency=\"lg\"\n >\n {dictionary && (\n <DictionaryFieldEditor\n dictionary={dictionary}\n onClickDictionaryList={onClickDictionaryList}\n />\n )}\n </Modal>\n <DictionaryEditor\n dictionary={dictionary}\n locale={locale}\n onClickEdit={setKeyPathEditionModal}\n />\n </>\n );\n};\n\ntype DictionaryEditionDrawerProps = DictionaryEditionDrawerControllerProps & {\n dictionaryId: string;\n};\n\nexport const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({\n locale,\n localeList,\n setLocale,\n dictionaryId,\n}) => {\n const id = getDrawerIdentifier(dictionaryId);\n\n const { focusedContent, close } = useDictionaryEditionDrawer(dictionaryId);\n const { open: openDictionaryListDrawer } = useDictionaryListDrawer();\n\n const handleOnBack = () => {\n close();\n openDictionaryListDrawer();\n };\n\n return (\n <RightDrawer\n title={dictionaryId}\n identifier={id}\n header={\n <LocaleSwitcher\n setLocale={setLocale}\n locale={locale}\n localeList={localeList}\n />\n }\n backButton={{\n onBack: handleOnBack,\n text: 'Dictionary list',\n }}\n >\n {focusedContent && (\n <DictionaryEditionDrawerContent\n focusedContent={focusedContent}\n locale={locale}\n identifier={id}\n handleOnBack={handleOnBack}\n />\n )}\n </RightDrawer>\n );\n};\n\ntype DictionaryEditionDrawerControllerProps = {\n locale: Locales;\n localeList: Locales[];\n setLocale: (locale: Locales) => void;\n};\n\nexport const DictionaryEditionDrawerController: FC<\n DictionaryEditionDrawerControllerProps\n> = ({ locale, localeList, setLocale }) => {\n const focusedContent = useEditionPanelStore((s) => s.focusedContent);\n const dictionaryId: string | undefined = focusedContent?.dictionaryId;\n\n if (!dictionaryId) {\n return <></>;\n }\n\n return (\n <DictionaryEditionDrawer\n locale={locale}\n localeList={localeList}\n setLocale={setLocale}\n dictionaryId={dictionaryId}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmD4B;AA/C5B,2BAOO;AACP,mBAAsC;AACtC,mBAA0D;AAC1D,qCAAwC;AACxC,wCAIO;AASA,MAAM,iCAET,CAAC,EAAE,QAAQ,YAAY,aAAa,MAAM;AAC5C,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAEpD,IAAI;AACN,QAAM,EAAE,uBAAuB,eAAe,QAC5C,8DAA2B,UAAU;AACvC,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AAEpD,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,2BAAuB,IAAI;AAC3B,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AAEjB,8BAAU,MAAM;AACd,QAAI,cAAc;AAChB,4BAAsB,YAAY;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,uBAAuB,YAAY,CAAC;AAExC,QAAM,eAAe,gBAAgB;AAErC,MAAI,CAAC,aAAc,QAAO,2EAAE,mCAAqB;AAEjD,QAAM,aAAyB,aAAa,YAAY;AAExD,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,wBAAwB;AAAA,QAChC,SAAS,MAAM,uBAAuB,IAAI;AAAA,QAC1C,gBAAc;AAAA,QACd,OAAM;AAAA,QACN,MAAK;AAAA,QACL,cAAa;AAAA,QAEZ,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAMO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAK,uDAAoB,YAAY;AAE3C,QAAM,EAAE,gBAAgB,MAAM,QAAI,8DAA2B,YAAY;AACzE,QAAM,EAAE,MAAM,yBAAyB,QAAI,wDAAwB;AAEnE,QAAM,eAAe,MAAM;AACzB,UAAM;AACN,6BAAyB;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,MAAM;AAAA,MACR;AAAA,MAEC,4BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAQO,MAAM,oCAET,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM;AACzC,QAAM,qBAAiB,2CAAqB,CAAC,MAAM,EAAE,cAAc;AACnE,QAAM,eAAmC,gBAAgB;AAEzD,MAAI,CAAC,cAAc;AACjB,WAAO,2EAAE;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryEditionDrawer/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer';\nexport * from './useDictionaryEditionDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4CAAc,sCAAd;AACA,4CAAc,yCADd;","names":[]}
1
+ {"version":3,"sources":["../../../src/DictionaryEditionDrawer/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer';\nexport * from './useDictionaryEditionDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4CAAc,sCAAd;AACA,4CAAc,yCADd;","names":[]}
@@ -24,29 +24,18 @@ __export(useDictionaryEditionDrawer_exports, {
24
24
  });
25
25
  module.exports = __toCommonJS(useDictionaryEditionDrawer_exports);
26
26
  var import_design_system = require("@intlayer/design-system");
27
- var import_useEditorServer = require('../useEditorServer.cjs');
28
27
  const getDrawerIdentifier = (dictionaryId) => `dictionary_edition_${dictionaryId}`;
29
28
  const useDictionaryEditionDrawer = (dictionaryId) => {
30
29
  const id = getDrawerIdentifier(dictionaryId);
31
30
  const { isOpen, open, close } = (0, import_design_system.useRightDrawerStore)(id)();
32
- const {
33
- editedContent,
34
- setDictionariesRecord,
35
- getEditedContentValue,
36
- addEditedContent,
37
- clearEditedDictionaryContent
38
- } = (0, import_design_system.useEditedContentStore)((s) => ({
39
- editedContent: s.editedContent,
31
+ const { setDictionariesRecord, getEditedContentValue } = (0, import_design_system.useEditedContentStore)((s) => ({
40
32
  setDictionariesRecord: s.setDictionariesRecord,
41
- addEditedContent: s.addEditedContent,
42
- getEditedContentValue: s.getEditedContentValue,
43
- clearEditedDictionaryContent: s.clearEditedDictionaryContent
33
+ getEditedContentValue: s.getEditedContentValue
44
34
  }));
45
35
  const { setFocusedContent, focusedContent } = (0, import_design_system.useEditionPanelStore)((s) => ({
46
36
  focusedContent: s.focusedContent,
47
37
  setFocusedContent: s.setFocusedContent
48
38
  }));
49
- const { editContentRequest } = (0, import_useEditorServer.useEditorServer)();
50
39
  const openDictionaryEditionDrawer = ({
51
40
  dictionaryId: dictionaryId2,
52
41
  dictionaryPath,
@@ -62,15 +51,10 @@ const useDictionaryEditionDrawer = (dictionaryId) => {
62
51
  return {
63
52
  isOpen,
64
53
  focusedContent,
65
- setFocusedContent,
66
54
  setDictionariesRecord,
67
- open: openDictionaryEditionDrawer,
68
- close,
69
55
  getEditedContentValue,
70
- editContentRequest,
71
- editedContent,
72
- addEditedContent,
73
- clearEditedDictionaryContent
56
+ open: openDictionaryEditionDrawer,
57
+ close
74
58
  };
75
59
  };
76
60
  const useDictionaryEditionDrawerControl = () => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n useRightDrawerStore,\n useEditedContentStore,\n useEditionPanelStore,\n type DictionaryContent,\n} from '@intlayer/design-system';\nimport { useEditorServer } from '../useEditorServer';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n dictionaryPath?: DictionaryPath;\n dictionaryId: string;\n keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n focusedContent: FileContent | null;\n setFocusedContent: (content: FileContent | null) => void;\n isOpen: boolean;\n open: (content: FileContent) => void;\n close: () => void;\n editContentRequest: () => Promise<void>;\n editedContent: DictionaryContent;\n addEditedContent: (\n dictionaryId: DictionaryId,\n newValue: DictionaryValue,\n keyPath: KeyPath[]\n ) => void;\n setDictionariesRecord: (\n dictionariesRecord: Record<DictionaryId, Dictionary>\n ) => void;\n getEditedContentValue: (\n dictionaryId: DictionaryId,\n keyPath: KeyPath[]\n ) => DictionaryValue | undefined;\n clearEditedDictionaryContent: (dictionaryPath: DictionaryPath) => void;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n dictionaryId: string;\n dictionaryPath?: string;\n keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n dictionaryId: string\n): DictionaryEditionDrawer => {\n const id = getDrawerIdentifier(dictionaryId);\n const { isOpen, open, close } = useRightDrawerStore(id)();\n const {\n editedContent,\n setDictionariesRecord,\n getEditedContentValue,\n addEditedContent,\n clearEditedDictionaryContent,\n } = useEditedContentStore((s) => ({\n editedContent: s.editedContent,\n setDictionariesRecord: s.setDictionariesRecord,\n addEditedContent: s.addEditedContent,\n getEditedContentValue: s.getEditedContentValue,\n clearEditedDictionaryContent: s.clearEditedDictionaryContent,\n }));\n const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({\n focusedContent: s.focusedContent,\n setFocusedContent: s.setFocusedContent,\n }));\n const { editContentRequest } = useEditorServer();\n\n const openDictionaryEditionDrawer = ({\n dictionaryId,\n dictionaryPath,\n keyPath = [],\n }: OpenDictionaryEditionDrawerProps) => {\n setFocusedContent({\n dictionaryId,\n dictionaryPath,\n keyPath,\n });\n\n open();\n };\n\n return {\n isOpen,\n focusedContent,\n setFocusedContent,\n setDictionariesRecord,\n open: openDictionaryEditionDrawer,\n close,\n getEditedContentValue,\n editContentRequest,\n editedContent,\n addEditedContent,\n clearEditedDictionaryContent,\n };\n};\n\ntype DictionaryEditionDrawerControl = {\n open: (content: FileContent) => void;\n close: (dictionaryId: string) => void;\n};\n\nexport const useDictionaryEditionDrawerControl =\n (): DictionaryEditionDrawerControl => {\n const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);\n\n const open = ({\n dictionaryId,\n dictionaryPath,\n keyPath = [],\n }: OpenDictionaryEditionDrawerProps) => {\n setFocusedContent({\n dictionaryId,\n dictionaryPath,\n keyPath,\n });\n\n const id = getDrawerIdentifier(dictionaryId);\n\n useRightDrawerStore(id).getState().open();\n };\n\n const close = (dictionaryId: string) => {\n const id = getDrawerIdentifier(dictionaryId);\n\n useRightDrawerStore(id).getState().close();\n };\n\n return {\n open,\n close,\n };\n };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAKO;AACP,6BAAgC;AAEzB,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AAwC7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,QAAQ,MAAM,MAAM,QAAI,0CAAoB,EAAE,EAAE;AACxD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4CAAsB,CAAC,OAAO;AAAA,IAChC,eAAe,EAAE;AAAA,IACjB,uBAAuB,EAAE;AAAA,IACzB,kBAAkB,EAAE;AAAA,IACpB,uBAAuB,EAAE;AAAA,IACzB,8BAA8B,EAAE;AAAA,EAClC,EAAE;AACF,QAAM,EAAE,mBAAmB,eAAe,QAAI,2CAAqB,CAAC,OAAO;AAAA,IACzE,gBAAgB,EAAE;AAAA,IAClB,mBAAmB,EAAE;AAAA,EACvB,EAAE;AACF,QAAM,EAAE,mBAAmB,QAAI,wCAAgB;AAE/C,QAAM,8BAA8B,CAAC;AAAA,IACnC,cAAAA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB,cAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,SAAK;AAAA,EACP;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAOO,MAAM,oCACX,MAAsC;AACpC,QAAM,wBAAoB,2CAAqB,CAAC,MAAM,EAAE,iBAAiB;AAEzE,QAAM,OAAO,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,KAAK;AAAA,EAC1C;AAEA,QAAM,QAAQ,CAAC,iBAAyB;AACtC,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,MAAM;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["dictionaryId"]}
1
+ {"version":3,"sources":["../../../src/DictionaryEditionDrawer/useDictionaryEditionDrawer.ts"],"sourcesContent":["import type { Dictionary, DictionaryValue, KeyPath } from '@intlayer/core';\nimport {\n useRightDrawerStore,\n useEditedContentStore,\n useEditionPanelStore,\n} from '@intlayer/design-system';\n\nexport const getDrawerIdentifier = (dictionaryId: string) =>\n `dictionary_edition_${dictionaryId}`;\n\ntype DictionaryId = string;\ntype DictionaryPath = string;\n\nexport type FileContent = {\n dictionaryPath?: DictionaryPath;\n dictionaryId: string;\n keyPath?: KeyPath[];\n};\n\ntype DictionaryEditionDrawer = {\n focusedContent: FileContent | null;\n isOpen: boolean;\n open: (content: FileContent) => void;\n close: () => void;\n setDictionariesRecord: (\n dictionariesRecord: Record<DictionaryId, Dictionary>\n ) => void;\n getEditedContentValue: (\n dictionaryId: DictionaryId,\n keyPath: KeyPath[]\n ) => DictionaryValue | undefined;\n};\n\ntype OpenDictionaryEditionDrawerProps = {\n dictionaryId: string;\n dictionaryPath?: string;\n keyPath?: KeyPath[];\n};\n\nexport const useDictionaryEditionDrawer = (\n dictionaryId: string\n): DictionaryEditionDrawer => {\n const id = getDrawerIdentifier(dictionaryId);\n const { isOpen, open, close } = useRightDrawerStore(id)();\n const { setDictionariesRecord, getEditedContentValue } =\n useEditedContentStore((s) => ({\n setDictionariesRecord: s.setDictionariesRecord,\n getEditedContentValue: s.getEditedContentValue,\n }));\n const { setFocusedContent, focusedContent } = useEditionPanelStore((s) => ({\n focusedContent: s.focusedContent,\n setFocusedContent: s.setFocusedContent,\n }));\n\n const openDictionaryEditionDrawer = ({\n dictionaryId,\n dictionaryPath,\n keyPath = [],\n }: OpenDictionaryEditionDrawerProps) => {\n setFocusedContent({\n dictionaryId,\n dictionaryPath,\n keyPath,\n });\n\n open();\n };\n\n return {\n isOpen,\n focusedContent,\n setDictionariesRecord,\n getEditedContentValue,\n open: openDictionaryEditionDrawer,\n close,\n };\n};\n\ntype DictionaryEditionDrawerControl = {\n open: (content: FileContent) => void;\n close: (dictionaryId: string) => void;\n};\n\nexport const useDictionaryEditionDrawerControl =\n (): DictionaryEditionDrawerControl => {\n const setFocusedContent = useEditionPanelStore((s) => s.setFocusedContent);\n\n const open = ({\n dictionaryId,\n dictionaryPath,\n keyPath = [],\n }: OpenDictionaryEditionDrawerProps) => {\n setFocusedContent({\n dictionaryId,\n dictionaryPath,\n keyPath,\n });\n\n const id = getDrawerIdentifier(dictionaryId);\n\n useRightDrawerStore(id).getState().open();\n };\n\n const close = (dictionaryId: string) => {\n const id = getDrawerIdentifier(dictionaryId);\n\n useRightDrawerStore(id).getState().close();\n };\n\n return {\n open,\n close,\n };\n };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAIO;AAEA,MAAM,sBAAsB,CAAC,iBAClC,sBAAsB,YAAY;AA+B7B,MAAM,6BAA6B,CACxC,iBAC4B;AAC5B,QAAM,KAAK,oBAAoB,YAAY;AAC3C,QAAM,EAAE,QAAQ,MAAM,MAAM,QAAI,0CAAoB,EAAE,EAAE;AACxD,QAAM,EAAE,uBAAuB,sBAAsB,QACnD,4CAAsB,CAAC,OAAO;AAAA,IAC5B,uBAAuB,EAAE;AAAA,IACzB,uBAAuB,EAAE;AAAA,EAC3B,EAAE;AACJ,QAAM,EAAE,mBAAmB,eAAe,QAAI,2CAAqB,CAAC,OAAO;AAAA,IACzE,gBAAgB,EAAE;AAAA,IAClB,mBAAmB,EAAE;AAAA,EACvB,EAAE;AAEF,QAAM,8BAA8B,CAAC;AAAA,IACnC,cAAAA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB,cAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,SAAK;AAAA,EACP;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF;AACF;AAOO,MAAM,oCACX,MAAsC;AACpC,QAAM,wBAAoB,2CAAqB,CAAC,MAAM,EAAE,iBAAiB;AAEzE,QAAM,OAAO,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,EACb,MAAwC;AACtC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,KAAK;AAAA,EAC1C;AAEA,QAAM,QAAQ,CAAC,iBAAyB;AACtC,UAAM,KAAK,oBAAoB,YAAY;AAE3C,kDAAoB,EAAE,EAAE,SAAS,EAAE,MAAM;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["dictionaryId"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n RightDrawer,\n Button,\n useEditedContentStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index';\nimport {\n dictionaryListDrawerIdentifier,\n useDictionaryListDrawer,\n} from './useDictionaryListDrawer';\n\nexport const DictionaryListDrawer: FC = () => {\n const { all: dictionaries } = useGetAllDictionaries();\n const dictionaryKeyList = Object.keys(dictionaries) as Locales[];\n const { open: openDictionaryEditionDrawer } =\n useDictionaryEditionDrawerControl();\n const { close } = useDictionaryListDrawer();\n const editedContent = useEditedContentStore((s) => s.editedContent);\n\n const handleClickDictionary = (dictionaryId: string) => {\n const { filePath } = dictionaries[dictionaryId];\n\n close();\n openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });\n };\n\n const isDictionaryEdited = (dictionaryId: string) =>\n Object.keys(editedContent).includes(dictionaryId);\n\n return (\n <RightDrawer\n title=\"Dictionary list\"\n identifier={dictionaryListDrawerIdentifier}\n >\n {dictionaryKeyList.map((dictionaryId) => (\n <div key={dictionaryId}>\n <Button\n label={`Open dictionary editor ${dictionaryId}`}\n onClick={() => handleClickDictionary(dictionaryId)}\n variant=\"hoverable\"\n color=\"text\"\n IconRight={ChevronRight}\n size=\"md\"\n isFullWidth\n >\n {isDictionaryEdited(dictionaryId)\n ? `✎ ${dictionaryId}`\n : dictionaryId}\n </Button>\n </div>\n ))}\n </RightDrawer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,2BAIO;AACP,mBAAsC;AACtC,0BAA6B;AAE7B,qCAAkD;AAClD,qCAGO;AAEA,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AACpD,QAAM,oBAAoB,OAAO,KAAK,YAAY;AAClD,QAAM,EAAE,MAAM,4BAA4B,QACxC,kEAAkC;AACpC,QAAM,EAAE,MAAM,QAAI,wDAAwB;AAC1C,QAAM,oBAAgB,4CAAsB,CAAC,MAAM,EAAE,aAAa;AAElE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAE9C,UAAM;AACN,gCAA4B,EAAE,cAAc,gBAAgB,SAAS,CAAC;AAAA,EACxE;AAEA,QAAM,qBAAqB,CAAC,iBAC1B,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/DictionaryListDrawer/DictionaryListDrawer.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n RightDrawer,\n Button,\n useEditedContentStore,\n} from '@intlayer/design-system';\nimport { useGetAllDictionaries } from '@intlayer/design-system/hooks';\nimport { ChevronRight } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useDictionaryEditionDrawerControl } from '../DictionaryEditionDrawer/index';\nimport {\n dictionaryListDrawerIdentifier,\n useDictionaryListDrawer,\n} from './useDictionaryListDrawer';\n\nexport const DictionaryListDrawer: FC = () => {\n const { all: dictionaries } = useGetAllDictionaries();\n const dictionaryKeyList = Object.keys(dictionaries) as Locales[];\n const { open: openDictionaryEditionDrawer } =\n useDictionaryEditionDrawerControl();\n const { close } = useDictionaryListDrawer();\n const editedContent = useEditedContentStore((s) => s.editedContent);\n\n const handleClickDictionary = (dictionaryId: string) => {\n const { filePath } = dictionaries[dictionaryId];\n\n close();\n openDictionaryEditionDrawer({ dictionaryId, dictionaryPath: filePath });\n };\n\n const isDictionaryEdited = (dictionaryId: string) =>\n Object.keys(editedContent).includes(dictionaryId);\n\n return (\n <RightDrawer\n title=\"Dictionary list\"\n identifier={dictionaryListDrawerIdentifier}\n >\n {dictionaryKeyList.map((dictionaryId) => (\n <div key={dictionaryId}>\n <Button\n label={`Open dictionary editor ${dictionaryId}`}\n onClick={() => handleClickDictionary(dictionaryId)}\n variant=\"hoverable\"\n color=\"text\"\n IconRight={ChevronRight}\n size=\"md\"\n isFullWidth\n >\n {isDictionaryEdited(dictionaryId)\n ? `✎ ${dictionaryId}`\n : dictionaryId}\n </Button>\n </div>\n ))}\n </RightDrawer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,2BAIO;AACP,mBAAsC;AACtC,0BAA6B;AAE7B,qCAAkD;AAClD,qCAGO;AAEA,MAAM,uBAA2B,MAAM;AAC5C,QAAM,EAAE,KAAK,aAAa,QAAI,oCAAsB;AACpD,QAAM,oBAAoB,OAAO,KAAK,YAAY;AAClD,QAAM,EAAE,MAAM,4BAA4B,QACxC,kEAAkC;AACpC,QAAM,EAAE,MAAM,QAAI,wDAAwB;AAC1C,QAAM,oBAAgB,4CAAsB,CAAC,MAAM,EAAE,aAAa;AAElE,QAAM,wBAAwB,CAAC,iBAAyB;AACtD,UAAM,EAAE,SAAS,IAAI,aAAa,YAAY;AAE9C,UAAM;AACN,gCAA4B,EAAE,cAAc,gBAAgB,SAAS,CAAC;AAAA,EACxE;AAEA,QAAM,qBAAqB,CAAC,iBAC1B,OAAO,KAAK,aAAa,EAAE,SAAS,YAAY;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAY;AAAA,MAEX,4BAAkB,IAAI,CAAC,iBACtB,4CAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,0BAA0B,YAAY;AAAA,UAC7C,SAAS,MAAM,sBAAsB,YAAY;AAAA,UACjD,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAW;AAAA,UAEV,6BAAmB,YAAY,IAC5B,UAAK,YAAY,KACjB;AAAA;AAAA,MACN,KAbQ,YAcV,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './useDictionaryListDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;AACA,yCAAc,sCADd;","names":[]}
1
+ {"version":3,"sources":["../../../src/DictionaryListDrawer/index.ts"],"sourcesContent":["export * from './DictionaryListDrawer';\nexport * from './useDictionaryListDrawer';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;AACA,yCAAc,sCADd;","names":[]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/client/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = () =>\n useRightDrawerStore(dictionaryListDrawerIdentifier)();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B,UACrC,0CAAoB,8BAA8B,EAAE;","names":[]}
1
+ {"version":3,"sources":["../../../src/DictionaryListDrawer/useDictionaryListDrawer.ts"],"sourcesContent":["import { useRightDrawerStore } from '@intlayer/design-system';\n\nexport const dictionaryListDrawerIdentifier = 'dictionaryList';\n\nexport const useDictionaryListDrawer = () =>\n useRightDrawerStore(dictionaryListDrawerIdentifier)();\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAE7B,MAAM,iCAAiC;AAEvC,MAAM,0BAA0B,UACrC,0CAAoB,8BAA8B,EAAE;","names":[]}
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+ "use client";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+ var IntlayerEditorProvider_exports = {};
21
+ __export(IntlayerEditorProvider_exports, {
22
+ IntlayerEditorContext: () => IntlayerEditorContext,
23
+ IntlayerEditorProvider: () => IntlayerEditorProvider,
24
+ useIntlayerEditorContext: () => useIntlayerEditorContext
25
+ });
26
+ module.exports = __toCommonJS(IntlayerEditorProvider_exports);
27
+ var import_jsx_runtime = require("react/jsx-runtime");
28
+ var import_client = require("@intlayer/config/client");
29
+ var import_DictionaryEditionDrawer = require('./DictionaryEditionDrawer/index.cjs');
30
+ var import_DictionaryListDrawer = require('./DictionaryListDrawer/index.cjs');
31
+ var import_react_intlayer = require("react-intlayer");
32
+ var import_editor = require("react-intlayer/editor");
33
+ var import_ContentSelectorWrapper = require('./ContentSelectorWrapper.cjs');
34
+ var import_react = require("react");
35
+ const IntlayerEditorContext = (0, import_react.createContext)({
36
+ isEditorEnabled: false
37
+ });
38
+ const useIntlayerEditorContext = () => (0, import_react.useContext)(IntlayerEditorContext);
39
+ const IntlayerEditorProvider = ({
40
+ children,
41
+ isEnabled = true
42
+ }) => {
43
+ const { editor, internationalization } = (0, import_client.getConfiguration)();
44
+ const { setState } = (0, import_editor.useContentSelectorContext)();
45
+ const { locale, setLocale } = (0, import_react_intlayer.useIntlayerContext)();
46
+ const isEditorEnabled = (0, import_react.useMemo)(
47
+ () => Boolean(
48
+ editor.enabled && editor.clientId && editor.clientSecret && isEnabled
49
+ ),
50
+ [editor.enabled && editor.clientId && editor.clientSecret && isEnabled]
51
+ );
52
+ (0, import_react.useEffect)(() => {
53
+ setState({
54
+ ContentSelectorWrapper: import_ContentSelectorWrapper.ContentSelectorWrapper
55
+ });
56
+ }, [setState]);
57
+ (0, import_react.useEffect)(() => {
58
+ if (isEnabled && editor.enabled) {
59
+ if (!editor.clientId) {
60
+ console.error(
61
+ "Editor is enabled but clientId is not set. Please set it in the editor configuration. See http://localhost:3000/doc/concept/editor."
62
+ );
63
+ }
64
+ if (!editor.clientSecret) {
65
+ console.error(
66
+ "Editor is enabled but clientSecret is not set. Please set it in the editor configuration. See http://localhost:3000/doc/concept/editor."
67
+ );
68
+ }
69
+ }
70
+ }, [isEnabled, editor.enabled, editor.clientId, editor.clientSecret]);
71
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(IntlayerEditorContext.Provider, { value: { isEditorEnabled }, children: [
72
+ children,
73
+ isEditorEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
74
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
+ import_DictionaryEditionDrawer.DictionaryEditionDrawerController,
76
+ {
77
+ locale,
78
+ localeList: internationalization.locales,
79
+ setLocale
80
+ }
81
+ ),
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DictionaryListDrawer.DictionaryListDrawer, {})
83
+ ] })
84
+ ] });
85
+ };
86
+ // Annotate the CommonJS export names for ESM import in node:
87
+ 0 && (module.exports = {
88
+ IntlayerEditorContext,
89
+ IntlayerEditorProvider,
90
+ useIntlayerEditorContext
91
+ });
92
+ //# sourceMappingURL=IntlayerEditorProvider.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/IntlayerEditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport { DictionaryEditionDrawerController } from './DictionaryEditionDrawer/index';\nimport { DictionaryListDrawer } from './DictionaryListDrawer/index';\nimport { useIntlayerContext } from 'react-intlayer';\nimport { useContentSelectorContext } from 'react-intlayer/editor';\nimport { ContentSelectorWrapper } from './ContentSelectorWrapper';\nimport {\n type FC,\n type PropsWithChildren,\n createContext,\n useContext,\n useEffect,\n useMemo,\n} from 'react';\n\ntype IntlayerEditorValue = {\n isEditorEnabled: boolean;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const IntlayerEditorContext = createContext<IntlayerEditorValue>({\n isEditorEnabled: false,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useIntlayerEditorContext = () => useContext(IntlayerEditorContext);\n\nexport type IntlayerEditorProviderProps = PropsWithChildren<{\n isEnabled?: boolean;\n}>;\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const IntlayerEditorProvider: FC<IntlayerEditorProviderProps> = ({\n children,\n isEnabled = true,\n}) => {\n const { editor, internationalization } = getConfiguration();\n\n const { setState } = useContentSelectorContext();\n\n const { locale, setLocale } = useIntlayerContext();\n\n const isEditorEnabled = useMemo(\n () =>\n Boolean(\n editor.enabled && editor.clientId && editor.clientSecret && isEnabled\n ),\n [editor.enabled && editor.clientId && editor.clientSecret && isEnabled]\n );\n\n useEffect(() => {\n setState({\n ContentSelectorWrapper,\n });\n }, [setState]);\n\n useEffect(() => {\n if (isEnabled && editor.enabled) {\n if (!editor.clientId) {\n console.error(\n 'Editor is enabled but clientId is not set. Please set it in the editor configuration. See http://localhost:3000/doc/concept/editor.'\n );\n }\n\n if (!editor.clientSecret) {\n console.error(\n 'Editor is enabled but clientSecret is not set. Please set it in the editor configuration. See http://localhost:3000/doc/concept/editor.'\n );\n }\n }\n }, [isEnabled, editor.enabled, editor.clientId, editor.clientSecret]);\n\n return (\n <IntlayerEditorContext.Provider value={{ isEditorEnabled }}>\n {children}\n\n {isEditorEnabled && (\n <>\n <DictionaryEditionDrawerController\n locale={locale}\n localeList={internationalization.locales}\n setLocale={setLocale}\n />\n <DictionaryListDrawer />\n </>\n )}\n </IntlayerEditorContext.Provider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqFQ;AAnFR,oBAAiC;AACjC,qCAAkD;AAClD,kCAAqC;AACrC,4BAAmC;AACnC,oBAA0C;AAC1C,oCAAuC;AACvC,mBAOO;AASA,MAAM,4BAAwB,4BAAmC;AAAA,EACtE,iBAAiB;AACnB,CAAC;AAKM,MAAM,2BAA2B,UAAM,yBAAW,qBAAqB;AASvE,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA,YAAY;AACd,MAAM;AACJ,QAAM,EAAE,QAAQ,qBAAqB,QAAI,gCAAiB;AAE1D,QAAM,EAAE,SAAS,QAAI,yCAA0B;AAE/C,QAAM,EAAE,QAAQ,UAAU,QAAI,0CAAmB;AAEjD,QAAM,sBAAkB;AAAA,IACtB,MACE;AAAA,MACE,OAAO,WAAW,OAAO,YAAY,OAAO,gBAAgB;AAAA,IAC9D;AAAA,IACF,CAAC,OAAO,WAAW,OAAO,YAAY,OAAO,gBAAgB,SAAS;AAAA,EACxE;AAEA,8BAAU,MAAM;AACd,aAAS;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACd,QAAI,aAAa,OAAO,SAAS;AAC/B,UAAI,CAAC,OAAO,UAAU;AACpB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAEA,UAAI,CAAC,OAAO,cAAc;AACxB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,SAAS,OAAO,UAAU,OAAO,YAAY,CAAC;AAEpE,SACE,6CAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,gBAAgB,GACtD;AAAA;AAAA,IAEA,mBACC,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,YAAY,qBAAqB;AAAA,UACjC;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,oDAAqB;AAAA,OACxB;AAAA,KAEJ;AAEJ;","names":[]}
@@ -13,21 +13,15 @@ var __copyProps = (to, from, except, desc) => {
13
13
  };
14
14
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
15
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
16
- var client_exports = {};
17
- module.exports = __toCommonJS(client_exports);
18
- __reExport(client_exports, require('./DictionaryEditionDrawer/index.cjs'), module.exports);
19
- __reExport(client_exports, require('./DictionaryListDrawer/index.cjs'), module.exports);
20
- __reExport(client_exports, require('./ContentEditionLayout.cjs'), module.exports);
21
- __reExport(client_exports, require('./useEditorServer.cjs'), module.exports);
22
- __reExport(client_exports, require('./renderContentEditor.cjs'), module.exports);
23
- __reExport(client_exports, require('./ContentEditorProvider.cjs'), module.exports);
16
+ var src_exports = {};
17
+ module.exports = __toCommonJS(src_exports);
18
+ __reExport(src_exports, require('./DictionaryEditionDrawer/index.cjs'), module.exports);
19
+ __reExport(src_exports, require('./DictionaryListDrawer/index.cjs'), module.exports);
20
+ __reExport(src_exports, require('./IntlayerEditorProvider.cjs'), module.exports);
24
21
  // Annotate the CommonJS export names for ESM import in node:
25
22
  0 && (module.exports = {
26
23
  ...require('./DictionaryEditionDrawer/index.cjs'),
27
24
  ...require('./DictionaryListDrawer/index.cjs'),
28
- ...require('./ContentEditionLayout.cjs'),
29
- ...require('./useEditorServer.cjs'),
30
- ...require('./renderContentEditor.cjs'),
31
- ...require('./ContentEditorProvider.cjs')
25
+ ...require('./IntlayerEditorProvider.cjs')
32
26
  });
33
27
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer/index';\nexport * from './DictionaryListDrawer/index';\nexport * from './ContentEditionLayout';\nexport * from './useEditorServer';\nexport * from './renderContentEditor';\nexport * from './ContentEditorProvider';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,4CAAd;AACA,2BAAc,yCADd;AAEA,2BAAc,mCAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,kCAJd;AAKA,2BAAc,oCALd;","names":[]}
1
+ {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './DictionaryEditionDrawer/index';\nexport * from './DictionaryListDrawer/index';\nexport * from './IntlayerEditorProvider';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,4CAAd;AACA,wBAAc,yCADd;AAEA,wBAAc,qCAFd;","names":[]}
@@ -4,11 +4,10 @@ import { isSameKeyPath } from "@intlayer/core";
4
4
  import { ContentSelector } from "@intlayer/design-system";
5
5
  import {
6
6
  useCallback,
7
- useContext,
8
7
  useEffect,
9
8
  useState
10
9
  } from "react";
11
- import { IntlayerEditorContext } from './ContentEditorProvider.mjs';
10
+ import { useIntlayerEditorContext } from './IntlayerEditorProvider.mjs';
12
11
  import { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs';
13
12
  const ContentSelectorWrapper = ({
14
13
  children,
@@ -18,7 +17,7 @@ const ContentSelectorWrapper = ({
18
17
  }) => {
19
18
  const { open, getEditedContentValue, focusedContent, isOpen } = useDictionaryEditionDrawer(dictionaryId);
20
19
  const editedValue = getEditedContentValue(dictionaryId, keyPath);
21
- const { editorEnabled } = useContext(IntlayerEditorContext);
20
+ const { isEditorEnabled } = useIntlayerEditorContext();
22
21
  const [displayedChildren, setDisplayedChildren] = useState(children);
23
22
  const handleSelect = useCallback(
24
23
  () => open({
@@ -30,11 +29,11 @@ const ContentSelectorWrapper = ({
30
29
  );
31
30
  const isSelected = (isOpen && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false;
32
31
  useEffect(() => {
33
- if (editorEnabled && editedValue && typeof editedValue === "string") {
32
+ if (isEditorEnabled && editedValue && typeof editedValue === "string") {
34
33
  setDisplayedChildren(editedValue);
35
34
  }
36
- }, [editedValue, editorEnabled]);
37
- if (!editorEnabled) {
35
+ }, [editedValue, isEditorEnabled]);
36
+ if (!isEditorEnabled) {
38
37
  return children;
39
38
  }
40
39
  return /* @__PURE__ */ jsx(ContentSelector, { onSelect: handleSelect, isSelecting: isSelected, children: displayedChildren });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/client/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n useCallback,\n useContext,\n useEffect,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\nimport { IntlayerEditorContext } from './ContentEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n children: ReactNode;\n dictionaryId: string;\n dictionaryPath: string;\n keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n children,\n dictionaryId,\n dictionaryPath,\n keyPath,\n}) => {\n const { open, getEditedContentValue, focusedContent, isOpen } =\n useDictionaryEditionDrawer(dictionaryId);\n const editedValue = getEditedContentValue(dictionaryId, keyPath);\n const { editorEnabled } = useContext(IntlayerEditorContext);\n const [displayedChildren, setDisplayedChildren] =\n useState<ReactNode>(children);\n\n const handleSelect = useCallback(\n () =>\n open({\n dictionaryId,\n dictionaryPath,\n keyPath,\n }),\n [dictionaryId, dictionaryPath, keyPath, open]\n );\n\n const isSelected =\n (isOpen &&\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n false;\n\n useEffect(() => {\n // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n if (editorEnabled && editedValue && typeof editedValue === 'string') {\n setDisplayedChildren(editedValue);\n }\n }, [editedValue, editorEnabled]);\n\n if (!editorEnabled) {\n return children;\n }\n\n return (\n <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n {displayedChildren}\n </ContentSelector>\n );\n};\n"],"mappings":";AA+DI;AA7DJ,SAAS,qBAAmC;AAC5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,6BAA6B;AACtC,SAAS,kCAAkC;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,IAC1D,2BAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,cAAc,IAAI,WAAW,qBAAqB;AAC1D,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,YAAU,MAAM;AAEd,QAAI,iBAAiB,eAAe,OAAO,gBAAgB,UAAU;AACnE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,mBAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type KeyPath } from '@intlayer/core';\nimport { ContentSelector } from '@intlayer/design-system';\nimport {\n useCallback,\n useEffect,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\nimport { useIntlayerEditorContext } from './IntlayerEditorProvider';\nimport { useDictionaryEditionDrawer } from './DictionaryEditionDrawer/useDictionaryEditionDrawer';\n\ntype ContentSelectorWrapperProps = {\n children: ReactNode;\n dictionaryId: string;\n dictionaryPath: string;\n keyPath: KeyPath[];\n};\n\nexport const ContentSelectorWrapper: FC<ContentSelectorWrapperProps> = ({\n children,\n dictionaryId,\n dictionaryPath,\n keyPath,\n}) => {\n const { open, getEditedContentValue, focusedContent, isOpen } =\n useDictionaryEditionDrawer(dictionaryId);\n const editedValue = getEditedContentValue(dictionaryId, keyPath);\n const { isEditorEnabled } = useIntlayerEditorContext();\n const [displayedChildren, setDisplayedChildren] =\n useState<ReactNode>(children);\n\n const handleSelect = useCallback(\n () =>\n open({\n dictionaryId,\n dictionaryPath,\n keyPath,\n }),\n [dictionaryId, dictionaryPath, keyPath, open]\n );\n\n const isSelected =\n (isOpen &&\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ??\n false;\n\n useEffect(() => {\n // Use useEffect to avoid 'Text content does not match server-rendered HTML' error\n if (isEditorEnabled && editedValue && typeof editedValue === 'string') {\n setDisplayedChildren(editedValue);\n }\n }, [editedValue, isEditorEnabled]);\n\n if (!isEditorEnabled) {\n return children;\n }\n\n return (\n <ContentSelector onSelect={handleSelect} isSelecting={isSelected}>\n {displayedChildren}\n </ContentSelector>\n );\n};\n"],"mappings":";AA8DI;AA5DJ,SAAS,qBAAmC;AAC5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AASpC,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,uBAAuB,gBAAgB,OAAO,IAC1D,2BAA2B,YAAY;AACzC,QAAM,cAAc,sBAAsB,cAAc,OAAO;AAC/D,QAAM,EAAE,gBAAgB,IAAI,yBAAyB;AACrD,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAoB,QAAQ;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,KAAK;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,cAAc,gBAAgB,SAAS,IAAI;AAAA,EAC9C;AAEA,QAAM,cACH,WACE,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,CAAC,GAAG,OAAO,MACtD;AAEF,YAAU,MAAM;AAEd,QAAI,mBAAmB,eAAe,OAAO,gBAAgB,UAAU;AACrE,2BAAqB,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,mBAAgB,UAAU,cAAc,aAAa,YACnD,6BACH;AAEJ;","names":[]}