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.
- package/README.md +46 -24
- package/dist/cjs/ContentSelectorWrapper.cjs +5 -5
- package/dist/cjs/ContentSelectorWrapper.cjs.map +1 -1
- package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs +16 -18
- package/dist/cjs/DictionaryEditionDrawer/DictionaryEditionDrawer.cjs.map +1 -1
- package/dist/cjs/DictionaryEditionDrawer/index.cjs.map +1 -1
- package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs +4 -20
- package/dist/cjs/DictionaryEditionDrawer/useDictionaryEditionDrawer.cjs.map +1 -1
- package/dist/cjs/DictionaryListDrawer/DictionaryListDrawer.cjs.map +1 -1
- package/dist/cjs/DictionaryListDrawer/index.cjs.map +1 -1
- package/dist/cjs/DictionaryListDrawer/useDictionaryListDrawer.cjs.map +1 -1
- package/dist/cjs/IntlayerEditorProvider.cjs +92 -0
- package/dist/cjs/IntlayerEditorProvider.cjs.map +1 -0
- package/dist/cjs/index.cjs +6 -12
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/ContentSelectorWrapper.mjs +5 -6
- package/dist/esm/ContentSelectorWrapper.mjs.map +1 -1
- package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs +17 -19
- package/dist/esm/DictionaryEditionDrawer/DictionaryEditionDrawer.mjs.map +1 -1
- package/dist/esm/DictionaryEditionDrawer/index.mjs.map +1 -1
- package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs +4 -20
- package/dist/esm/DictionaryEditionDrawer/useDictionaryEditionDrawer.mjs.map +1 -1
- package/dist/esm/DictionaryListDrawer/DictionaryListDrawer.mjs.map +1 -1
- package/dist/esm/DictionaryListDrawer/index.mjs.map +1 -1
- package/dist/esm/DictionaryListDrawer/useDictionaryListDrawer.mjs.map +1 -1
- package/dist/esm/IntlayerEditorProvider.mjs +71 -0
- package/dist/esm/IntlayerEditorProvider.mjs.map +1 -0
- package/dist/esm/index.mjs +1 -4
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/ContentSelectorWrapper.d.ts.map +1 -1
- package/dist/types/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts +1 -0
- package/dist/types/DictionaryEditionDrawer/DictionaryEditionDrawer.d.ts.map +1 -1
- package/dist/types/DictionaryEditionDrawer/index.d.ts.map +1 -1
- package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts +0 -6
- package/dist/types/DictionaryEditionDrawer/useDictionaryEditionDrawer.d.ts.map +1 -1
- package/dist/types/DictionaryListDrawer/DictionaryListDrawer.d.ts.map +1 -1
- package/dist/types/DictionaryListDrawer/index.d.ts.map +1 -1
- package/dist/types/DictionaryListDrawer/useDictionaryListDrawer.d.ts.map +1 -1
- package/dist/types/{ContentEditorProvider.d.ts → IntlayerEditorProvider.d.ts} +4 -4
- package/dist/types/IntlayerEditorProvider.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -4
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +30 -29
- package/bin/start-server.js +0 -16
- package/dist/cjs/ContentEditionLayout.cjs +0 -54
- package/dist/cjs/ContentEditionLayout.cjs.map +0 -1
- package/dist/cjs/ContentEditorProvider.cjs +0 -55
- package/dist/cjs/ContentEditorProvider.cjs.map +0 -1
- package/dist/cjs/renderContentEditor.cjs +0 -54
- package/dist/cjs/renderContentEditor.cjs.map +0 -1
- package/dist/cjs/useEditorServer.cjs +0 -56
- package/dist/cjs/useEditorServer.cjs.map +0 -1
- package/dist/esm/ContentEditionLayout.mjs +0 -30
- package/dist/esm/ContentEditionLayout.mjs.map +0 -1
- package/dist/esm/ContentEditorProvider.mjs +0 -33
- package/dist/esm/ContentEditorProvider.mjs.map +0 -1
- package/dist/esm/renderContentEditor.mjs +0 -30
- package/dist/esm/renderContentEditor.mjs.map +0 -1
- package/dist/esm/useEditorServer.mjs +0 -32
- package/dist/esm/useEditorServer.mjs.map +0 -1
- package/dist/types/ContentEditionLayout.d.ts +0 -11
- package/dist/types/ContentEditionLayout.d.ts.map +0 -1
- package/dist/types/ContentEditorProvider.d.ts.map +0 -1
- package/dist/types/renderContentEditor.d.ts +0 -14
- package/dist/types/renderContentEditor.d.ts.map +0 -1
- package/dist/types/useEditorServer.d.ts +0 -4
- 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
|
-

|
|
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
|
|
53
|
+
npm install intlayer-editor
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
|
-
yarn add intlayer-editor
|
|
57
|
+
yarn add intlayer-editor
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
```bash
|
|
61
|
-
pnpm add intlayer-editor
|
|
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.
|
|
71
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
88
|
+
### 2. Insert the Intlayer Editor Provider in your application
|
|
81
89
|
|
|
82
|
-
|
|
90
|
+
To enable the editor, you need to insert the Intlayer Editor Provider in your application.
|
|
83
91
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
{
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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
|
|
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 {
|
|
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 (
|
|
51
|
+
if (isEditorEnabled && editedValue && typeof editedValue === "string") {
|
|
52
52
|
setDisplayedChildren(editedValue);
|
|
53
53
|
}
|
|
54
|
-
}, [editedValue,
|
|
55
|
-
if (!
|
|
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/
|
|
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
|
-
|
|
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/
|
|
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/
|
|
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
|
-
|
|
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
|
-
|
|
71
|
-
|
|
72
|
-
addEditedContent,
|
|
73
|
-
clearEditedDictionaryContent
|
|
56
|
+
open: openDictionaryEditionDrawer,
|
|
57
|
+
close
|
|
74
58
|
};
|
|
75
59
|
};
|
|
76
60
|
const useDictionaryEditionDrawerControl = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/
|
|
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/
|
|
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/
|
|
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/
|
|
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":[]}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -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
|
|
17
|
-
module.exports = __toCommonJS(
|
|
18
|
-
__reExport(
|
|
19
|
-
__reExport(
|
|
20
|
-
__reExport(
|
|
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('./
|
|
29
|
-
...require('./useEditorServer.cjs'),
|
|
30
|
-
...require('./renderContentEditor.cjs'),
|
|
31
|
-
...require('./ContentEditorProvider.cjs')
|
|
25
|
+
...require('./IntlayerEditorProvider.cjs')
|
|
32
26
|
});
|
|
33
27
|
//# sourceMappingURL=index.cjs.map
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/
|
|
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 {
|
|
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 {
|
|
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 (
|
|
32
|
+
if (isEditorEnabled && editedValue && typeof editedValue === "string") {
|
|
34
33
|
setDisplayedChildren(editedValue);
|
|
35
34
|
}
|
|
36
|
-
}, [editedValue,
|
|
37
|
-
if (!
|
|
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/
|
|
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":[]}
|