@intlayer/editor-react 8.4.4 → 8.4.6
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/dist/cjs/CommunicatorContext.cjs +19 -1
- package/dist/cjs/CommunicatorContext.cjs.map +1 -1
- package/dist/cjs/ConfigurationContext.cjs +40 -1
- package/dist/cjs/ConfigurationContext.cjs.map +1 -1
- package/dist/cjs/DictionariesRecordContext.cjs +33 -1
- package/dist/cjs/DictionariesRecordContext.cjs.map +1 -1
- package/dist/cjs/EditedContentContext.cjs +55 -1
- package/dist/cjs/EditedContentContext.cjs.map +1 -1
- package/dist/cjs/EditorEnabledContext.cjs +66 -1
- package/dist/cjs/EditorEnabledContext.cjs.map +1 -1
- package/dist/cjs/EditorProvider.cjs +41 -1
- package/dist/cjs/EditorProvider.cjs.map +1 -1
- package/dist/cjs/EditorStateContext.cjs +17 -1
- package/dist/cjs/EditorStateContext.cjs.map +1 -1
- package/dist/cjs/FocusDictionaryContext.cjs +36 -1
- package/dist/cjs/FocusDictionaryContext.cjs.map +1 -1
- package/dist/cjs/index.cjs +52 -1
- package/dist/cjs/useCrossFrameMessageListener.cjs +30 -1
- package/dist/cjs/useCrossFrameMessageListener.cjs.map +1 -1
- package/dist/cjs/useCrossFrameState.cjs +63 -1
- package/dist/cjs/useCrossFrameState.cjs.map +1 -1
- package/dist/cjs/useCrossURLPathState.cjs +18 -1
- package/dist/cjs/useCrossURLPathState.cjs.map +1 -1
- package/dist/cjs/useEditorLocale.cjs +26 -1
- package/dist/cjs/useEditorLocale.cjs.map +1 -1
- package/dist/cjs/useFocusUnmergedDictionary.cjs +50 -1
- package/dist/cjs/useFocusUnmergedDictionary.cjs.map +1 -1
- package/dist/cjs/useIframeClickInterceptor.cjs +27 -1
- package/dist/cjs/useIframeClickInterceptor.cjs.map +1 -1
- package/dist/esm/CommunicatorContext.mjs +18 -1
- package/dist/esm/CommunicatorContext.mjs.map +1 -1
- package/dist/esm/ConfigurationContext.mjs +37 -1
- package/dist/esm/ConfigurationContext.mjs.map +1 -1
- package/dist/esm/DictionariesRecordContext.mjs +31 -1
- package/dist/esm/DictionariesRecordContext.mjs.map +1 -1
- package/dist/esm/EditedContentContext.mjs +51 -1
- package/dist/esm/EditedContentContext.mjs.map +1 -1
- package/dist/esm/EditorEnabledContext.mjs +61 -1
- package/dist/esm/EditorEnabledContext.mjs.map +1 -1
- package/dist/esm/EditorProvider.mjs +40 -1
- package/dist/esm/EditorProvider.mjs.map +1 -1
- package/dist/esm/EditorStateContext.mjs +15 -1
- package/dist/esm/EditorStateContext.mjs.map +1 -1
- package/dist/esm/FocusDictionaryContext.mjs +34 -1
- package/dist/esm/FocusDictionaryContext.mjs.map +1 -1
- package/dist/esm/index.mjs +17 -1
- package/dist/esm/useCrossFrameMessageListener.mjs +29 -1
- package/dist/esm/useCrossFrameMessageListener.mjs.map +1 -1
- package/dist/esm/useCrossFrameState.mjs +62 -1
- package/dist/esm/useCrossFrameState.mjs.map +1 -1
- package/dist/esm/useCrossURLPathState.mjs +16 -1
- package/dist/esm/useCrossURLPathState.mjs.map +1 -1
- package/dist/esm/useEditorLocale.mjs +24 -1
- package/dist/esm/useEditorLocale.mjs.map +1 -1
- package/dist/esm/useFocusUnmergedDictionary.mjs +49 -1
- package/dist/esm/useFocusUnmergedDictionary.mjs.map +1 -1
- package/dist/esm/useIframeClickInterceptor.mjs +25 -1
- package/dist/esm/useIframeClickInterceptor.mjs.map +1 -1
- package/dist/types/FocusDictionaryContext.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1,2 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { EditorStateProvider } from "./EditorStateContext.mjs";
|
|
4
|
+
import { useEffect, useRef } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { EditorStateManager, defineIntlayerElements, setGlobalEditorManager } from "@intlayer/editor";
|
|
7
|
+
|
|
8
|
+
//#region src/EditorProvider.tsx
|
|
9
|
+
/**
|
|
10
|
+
* EditorProvider creates and manages the lifecycle of an EditorStateManager,
|
|
11
|
+
* provides it to all descendants, and registers the Lit web components.
|
|
12
|
+
*/
|
|
13
|
+
const EditorProvider = ({ children, configuration, postMessage, allowedOrigins }) => {
|
|
14
|
+
const managerRef = useRef(null);
|
|
15
|
+
if (!managerRef.current) managerRef.current = new EditorStateManager({
|
|
16
|
+
mode: "editor",
|
|
17
|
+
messenger: {
|
|
18
|
+
allowedOrigins,
|
|
19
|
+
postMessageFn: postMessage
|
|
20
|
+
},
|
|
21
|
+
configuration
|
|
22
|
+
});
|
|
23
|
+
const manager = managerRef.current;
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
defineIntlayerElements();
|
|
26
|
+
setGlobalEditorManager(manager);
|
|
27
|
+
manager.start();
|
|
28
|
+
return () => {
|
|
29
|
+
manager.stop();
|
|
30
|
+
setGlobalEditorManager(null);
|
|
31
|
+
};
|
|
32
|
+
}, [manager]);
|
|
33
|
+
return /* @__PURE__ */ jsx(EditorStateProvider, {
|
|
34
|
+
manager,
|
|
35
|
+
children
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
//#endregion
|
|
40
|
+
export { EditorProvider };
|
|
2
41
|
//# sourceMappingURL=EditorProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorProvider.mjs","names":[],"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n defineIntlayerElements,\n EditorStateManager,\n type MessengerConfig,\n setGlobalEditorManager,\n} from '@intlayer/editor';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { type FC, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { EditorStateProvider } from './EditorStateContext';\n\nexport type EditorProviderProps = {\n configuration: IntlayerConfig;\n postMessage: (data: any) => void;\n allowedOrigins: string[];\n};\n\n/**\n * EditorProvider creates and manages the lifecycle of an EditorStateManager,\n * provides it to all descendants, and registers the Lit web components.\n */\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n children,\n configuration,\n postMessage,\n allowedOrigins,\n}) => {\n const managerRef = useRef<EditorStateManager | null>(null);\n\n if (!managerRef.current) {\n const messengerConfig: MessengerConfig = {\n allowedOrigins,\n postMessageFn: postMessage,\n };\n\n managerRef.current = new EditorStateManager({\n mode: 'editor',\n messenger: messengerConfig,\n configuration,\n });\n }\n const manager = managerRef.current;\n\n useEffect(() => {\n defineIntlayerElements();\n setGlobalEditorManager(manager);\n\n manager.start();\n return () => {\n manager.stop();\n setGlobalEditorManager(null);\n };\n }, [manager]);\n\n return (\n <EditorStateProvider manager={manager}>{children}</EditorStateProvider>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorProvider.mjs","names":[],"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n defineIntlayerElements,\n EditorStateManager,\n type MessengerConfig,\n setGlobalEditorManager,\n} from '@intlayer/editor';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { type FC, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { EditorStateProvider } from './EditorStateContext';\n\nexport type EditorProviderProps = {\n configuration: IntlayerConfig;\n postMessage: (data: any) => void;\n allowedOrigins: string[];\n};\n\n/**\n * EditorProvider creates and manages the lifecycle of an EditorStateManager,\n * provides it to all descendants, and registers the Lit web components.\n */\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n children,\n configuration,\n postMessage,\n allowedOrigins,\n}) => {\n const managerRef = useRef<EditorStateManager | null>(null);\n\n if (!managerRef.current) {\n const messengerConfig: MessengerConfig = {\n allowedOrigins,\n postMessageFn: postMessage,\n };\n\n managerRef.current = new EditorStateManager({\n mode: 'editor',\n messenger: messengerConfig,\n configuration,\n });\n }\n const manager = managerRef.current;\n\n useEffect(() => {\n defineIntlayerElements();\n setGlobalEditorManager(manager);\n\n manager.start();\n return () => {\n manager.stop();\n setGlobalEditorManager(null);\n };\n }, [manager]);\n\n return (\n <EditorStateProvider manager={manager}>{children}</EditorStateProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAa,kBAA8D,EACzE,UACA,eACA,aACA,qBACI;CACJ,MAAM,aAAa,OAAkC,KAAK;AAE1D,KAAI,CAAC,WAAW,QAMd,YAAW,UAAU,IAAI,mBAAmB;EAC1C,MAAM;EACN,WAPuC;GACvC;GACA,eAAe;GAChB;EAKC;EACD,CAAC;CAEJ,MAAM,UAAU,WAAW;AAE3B,iBAAgB;AACd,0BAAwB;AACxB,yBAAuB,QAAQ;AAE/B,UAAQ,OAAO;AACf,eAAa;AACX,WAAQ,MAAM;AACd,0BAAuB,KAAK;;IAE7B,CAAC,QAAQ,CAAC;AAEb,QACE,oBAAC,qBAAD;EAA8B;EAAU;EAA+B"}
|
|
@@ -1,2 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/EditorStateContext.tsx
|
|
7
|
+
const EditorStateContext = createContext(null);
|
|
8
|
+
const EditorStateProvider = ({ children, manager }) => /* @__PURE__ */ jsx(EditorStateContext.Provider, {
|
|
9
|
+
value: manager,
|
|
10
|
+
children
|
|
11
|
+
});
|
|
12
|
+
const useEditorStateManager = () => useContext(EditorStateContext);
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { EditorStateProvider, useEditorStateManager };
|
|
2
16
|
//# sourceMappingURL=EditorStateContext.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorStateContext.mjs","names":[],"sources":["../../src/EditorStateContext.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorStateManager } from '@intlayer/editor';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\n\nconst EditorStateContext = createContext<EditorStateManager | null>(null);\n\nexport const EditorStateProvider: FC<\n PropsWithChildren<{ manager: EditorStateManager }>\n> = ({ children, manager }) => (\n <EditorStateContext.Provider value={manager}>\n {children}\n </EditorStateContext.Provider>\n);\n\nexport const useEditorStateManager = (): EditorStateManager | null =>\n useContext(EditorStateContext);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorStateContext.mjs","names":[],"sources":["../../src/EditorStateContext.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorStateManager } from '@intlayer/editor';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\n\nconst EditorStateContext = createContext<EditorStateManager | null>(null);\n\nexport const EditorStateProvider: FC<\n PropsWithChildren<{ manager: EditorStateManager }>\n> = ({ children, manager }) => (\n <EditorStateContext.Provider value={manager}>\n {children}\n </EditorStateContext.Provider>\n);\n\nexport const useEditorStateManager = (): EditorStateManager | null =>\n useContext(EditorStateContext);\n"],"mappings":";;;;;;AAUA,MAAM,qBAAqB,cAAyC,KAAK;AAEzE,MAAa,uBAER,EAAE,UAAU,cACf,oBAAC,mBAAmB,UAApB;CAA6B,OAAO;CACjC;CAC2B;AAGhC,MAAa,8BACX,WAAW,mBAAmB"}
|
|
@@ -1,2 +1,35 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEditorStateManager } from "./EditorStateContext.mjs";
|
|
4
|
+
import { useEffect, useState } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/FocusDictionaryContext.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Returns the focused-content state and setters, backed by EditorStateManager.
|
|
9
|
+
*/
|
|
10
|
+
const useFocusDictionary = () => {
|
|
11
|
+
const manager = useEditorStateManager();
|
|
12
|
+
const [focusedContent, setFocusedContentState] = useState(manager?.focusedContent.value ?? null);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (!manager) return;
|
|
15
|
+
const handler = (e) => setFocusedContentState(e.detail);
|
|
16
|
+
manager.focusedContent.addEventListener("change", handler);
|
|
17
|
+
return () => manager.focusedContent.removeEventListener("change", handler);
|
|
18
|
+
}, [manager]);
|
|
19
|
+
return {
|
|
20
|
+
focusedContent,
|
|
21
|
+
setFocusedContent: (value) => manager?.focusedContent.set(value),
|
|
22
|
+
setFocusedContentKeyPath: (keyPath) => manager?.setFocusedContentKeyPath(keyPath)
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
const useFocusDictionaryActions = () => {
|
|
26
|
+
const { setFocusedContent, setFocusedContentKeyPath } = useFocusDictionary();
|
|
27
|
+
return {
|
|
28
|
+
setFocusedContent,
|
|
29
|
+
setFocusedContentKeyPath
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
export { useFocusDictionary, useFocusDictionaryActions };
|
|
2
35
|
//# sourceMappingURL=FocusDictionaryContext.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusDictionaryContext.mjs","names":[],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport type { FileContent } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { FileContent } from '@intlayer/editor';\n\nexport type FocusDictionaryState = {\n focusedContent: FileContent | null;\n};\n\nexport type FocusDictionaryActions = {\n setFocusedContent: (value: FileContent | null) => void;\n setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\n/**\n * Returns the focused-content state and setters, backed by EditorStateManager.\n */\nexport const useFocusDictionary = (): FocusDictionaryState &\n FocusDictionaryActions => {\n const manager = useEditorStateManager();\n const [focusedContent, setFocusedContentState] = useState<FileContent | null>(\n manager?.focusedContent.value ?? null\n );\n\n useEffect(() => {\n if (!manager) return;\n const handler = (e: Event) =>\n setFocusedContentState((e as CustomEvent<FileContent | null>).detail);\n manager.focusedContent.addEventListener('change', handler);\n return () => manager.focusedContent.removeEventListener('change', handler);\n }, [manager]);\n\n return {\n focusedContent,\n setFocusedContent: (value: FileContent | null) =>\n manager?.focusedContent.set(value),\n setFocusedContentKeyPath: (keyPath: KeyPath[]) =>\n manager?.setFocusedContentKeyPath(keyPath),\n };\n};\n\nexport const useFocusDictionaryActions = (): FocusDictionaryActions => {\n const { setFocusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n return { setFocusedContent, setFocusedContentKeyPath };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FocusDictionaryContext.mjs","names":[],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport type { FileContent } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { FileContent } from '@intlayer/editor';\n\nexport type FocusDictionaryState = {\n focusedContent: FileContent | null;\n};\n\nexport type FocusDictionaryActions = {\n setFocusedContent: (value: FileContent | null) => void;\n setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\n/**\n * Returns the focused-content state and setters, backed by EditorStateManager.\n */\nexport const useFocusDictionary = (): FocusDictionaryState &\n FocusDictionaryActions => {\n const manager = useEditorStateManager();\n const [focusedContent, setFocusedContentState] = useState<FileContent | null>(\n manager?.focusedContent.value ?? null\n );\n\n useEffect(() => {\n if (!manager) return;\n const handler = (e: Event) =>\n setFocusedContentState((e as CustomEvent<FileContent | null>).detail);\n manager.focusedContent.addEventListener('change', handler);\n\n return () => manager.focusedContent.removeEventListener('change', handler);\n }, [manager]);\n\n return {\n focusedContent,\n setFocusedContent: (value: FileContent | null) =>\n manager?.focusedContent.set(value),\n setFocusedContentKeyPath: (keyPath: KeyPath[]) =>\n manager?.setFocusedContentKeyPath(keyPath),\n };\n};\n\nexport const useFocusDictionaryActions = (): FocusDictionaryActions => {\n const { setFocusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n return { setFocusedContent, setFocusedContentKeyPath };\n};\n"],"mappings":";;;;;;;;;AAqBA,MAAa,2BACe;CAC1B,MAAM,UAAU,uBAAuB;CACvC,MAAM,CAAC,gBAAgB,0BAA0B,SAC/C,SAAS,eAAe,SAAS,KAClC;AAED,iBAAgB;AACd,MAAI,CAAC,QAAS;EACd,MAAM,WAAW,MACf,uBAAwB,EAAsC,OAAO;AACvE,UAAQ,eAAe,iBAAiB,UAAU,QAAQ;AAE1D,eAAa,QAAQ,eAAe,oBAAoB,UAAU,QAAQ;IACzE,CAAC,QAAQ,CAAC;AAEb,QAAO;EACL;EACA,oBAAoB,UAClB,SAAS,eAAe,IAAI,MAAM;EACpC,2BAA2B,YACzB,SAAS,yBAAyB,QAAQ;EAC7C;;AAGH,MAAa,kCAA0D;CACrE,MAAM,EAAE,mBAAmB,6BAA6B,oBAAoB;AAC5E,QAAO;EAAE;EAAmB;EAA0B"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1 +1,17 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { EditorStateProvider, useEditorStateManager } from "./EditorStateContext.mjs";
|
|
2
|
+
import { useFocusDictionary, useFocusDictionaryActions } from "./FocusDictionaryContext.mjs";
|
|
3
|
+
import { useCrossFrameState } from "./useCrossFrameState.mjs";
|
|
4
|
+
import { useCrossURLPathSetter, useCrossURLPathState } from "./useCrossURLPathState.mjs";
|
|
5
|
+
import { useDictionariesRecord, useDictionariesRecordActions } from "./DictionariesRecordContext.mjs";
|
|
6
|
+
import { useEditorLocale, useSetEditorLocale } from "./useEditorLocale.mjs";
|
|
7
|
+
import { useFocusUnmergedDictionary } from "./useFocusUnmergedDictionary.mjs";
|
|
8
|
+
import { EditorProvider } from "./EditorProvider.mjs";
|
|
9
|
+
import { useCommunicator } from "./CommunicatorContext.mjs";
|
|
10
|
+
import { ConfigurationProvider, useConfiguration, useConfigurationState } from "./ConfigurationContext.mjs";
|
|
11
|
+
import { useEditedContent, useEditedContentActions, useGetEditedContentState, usePostEditedContentState } from "./EditedContentContext.mjs";
|
|
12
|
+
import { useEditorEnabled, useEditorEnabledState, useEditorPingClient, useGetEditorEnabledState, usePostEditorEnabledState } from "./EditorEnabledContext.mjs";
|
|
13
|
+
import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
|
|
14
|
+
import { useIframeClickInterceptor, useIframeClickMerger } from "./useIframeClickInterceptor.mjs";
|
|
15
|
+
import { MessageKey } from "@intlayer/editor";
|
|
16
|
+
|
|
17
|
+
export { ConfigurationProvider, EditorProvider, EditorStateProvider, MessageKey, useCommunicator, useConfiguration, useConfigurationState, useCrossFrameMessageListener, useCrossFrameState, useCrossURLPathSetter, useCrossURLPathState, useDictionariesRecord, useDictionariesRecordActions, useEditedContent, useEditedContentActions, useEditorEnabled, useEditorEnabledState, useEditorLocale, useEditorPingClient, useEditorStateManager, useFocusDictionary, useFocusDictionaryActions, useFocusUnmergedDictionary, useGetEditedContentState, useGetEditorEnabledState, useIframeClickInterceptor, useIframeClickMerger, usePostEditedContentState, usePostEditorEnabledState, useSetEditorLocale };
|
|
@@ -1,2 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEditorStateManager } from "./EditorStateContext.mjs";
|
|
4
|
+
import { useEffect } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/useCrossFrameMessageListener.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Listens for cross-frame messages of the specified type and calls the callback.
|
|
9
|
+
* Returns a function to manually send a message of the same type.
|
|
10
|
+
*
|
|
11
|
+
* Backed by CrossFrameMessenger from EditorStateManager.
|
|
12
|
+
*/
|
|
13
|
+
const useCrossFrameMessageListener = (key, onEventTriggered, revalidator) => {
|
|
14
|
+
const manager = useEditorStateManager();
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (!onEventTriggered) return;
|
|
17
|
+
return manager?.messenger.subscribe(key, onEventTriggered);
|
|
18
|
+
}, [
|
|
19
|
+
manager,
|
|
20
|
+
key,
|
|
21
|
+
revalidator
|
|
22
|
+
]);
|
|
23
|
+
return (data) => {
|
|
24
|
+
manager?.messenger.send(key, data);
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
export { useCrossFrameMessageListener };
|
|
2
30
|
//# sourceMappingURL=useCrossFrameMessageListener.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCrossFrameMessageListener.mjs","names":[],"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport type { MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\n/**\n * Listens for cross-frame messages of the specified type and calls the callback.\n * Returns a function to manually send a message of the same type.\n *\n * Backed by CrossFrameMessenger from EditorStateManager.\n */\nexport const useCrossFrameMessageListener = <S,>(\n key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`,\n onEventTriggered?: (data: S) => void,\n revalidator?: any\n) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!onEventTriggered) return;\n return manager?.messenger.subscribe<S>(key, onEventTriggered);\n }, [manager, key, revalidator]);\n\n return (data?: S) => {\n manager?.messenger.send(key, data);\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCrossFrameMessageListener.mjs","names":[],"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport type { MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\n/**\n * Listens for cross-frame messages of the specified type and calls the callback.\n * Returns a function to manually send a message of the same type.\n *\n * Backed by CrossFrameMessenger from EditorStateManager.\n */\nexport const useCrossFrameMessageListener = <S,>(\n key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`,\n onEventTriggered?: (data: S) => void,\n revalidator?: any\n) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!onEventTriggered) return;\n return manager?.messenger.subscribe<S>(key, onEventTriggered);\n }, [manager, key, revalidator]);\n\n return (data?: S) => {\n manager?.messenger.send(key, data);\n };\n};\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gCACX,KACA,kBACA,gBACG;CACH,MAAM,UAAU,uBAAuB;AAEvC,iBAAgB;AACd,MAAI,CAAC,iBAAkB;AACvB,SAAO,SAAS,UAAU,UAAa,KAAK,iBAAiB;IAC5D;EAAC;EAAS;EAAK;EAAY,CAAC;AAE/B,SAAQ,SAAa;AACnB,WAAS,UAAU,KAAK,KAAK,KAAK"}
|
|
@@ -1,2 +1,63 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEditorStateManager } from "./EditorStateContext.mjs";
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
|
+
import { CrossFrameStateManager } from "@intlayer/editor";
|
|
6
|
+
|
|
7
|
+
//#region src/useCrossFrameState.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Synchronizes a React state value across frames using CrossFrameStateManager.
|
|
10
|
+
*/
|
|
11
|
+
const useCrossFrameState = (key, initialState, options) => {
|
|
12
|
+
const manager = useEditorStateManager();
|
|
13
|
+
const resolvedInitial = typeof initialState === "function" ? initialState() : initialState;
|
|
14
|
+
const [value, setValueState] = useState(resolvedInitial);
|
|
15
|
+
const valueRef = useRef(resolvedInitial);
|
|
16
|
+
const stateManagerRef = useRef(null);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const { emit = true, receive = true } = options ?? {};
|
|
19
|
+
const stateManager = new CrossFrameStateManager(key, manager?.messenger, {
|
|
20
|
+
emit,
|
|
21
|
+
receive,
|
|
22
|
+
initialValue: resolvedInitial
|
|
23
|
+
});
|
|
24
|
+
stateManagerRef.current = stateManager;
|
|
25
|
+
const handler = (e) => {
|
|
26
|
+
const newValue = e.detail;
|
|
27
|
+
valueRef.current = newValue;
|
|
28
|
+
setValueState(newValue);
|
|
29
|
+
};
|
|
30
|
+
stateManager.addEventListener("change", handler);
|
|
31
|
+
stateManager.start();
|
|
32
|
+
return () => {
|
|
33
|
+
stateManager.removeEventListener("change", handler);
|
|
34
|
+
stateManager.stop();
|
|
35
|
+
stateManagerRef.current = null;
|
|
36
|
+
};
|
|
37
|
+
}, [
|
|
38
|
+
key,
|
|
39
|
+
manager?.messenger,
|
|
40
|
+
options?.emit,
|
|
41
|
+
options?.receive
|
|
42
|
+
]);
|
|
43
|
+
const setValue = (valueOrUpdater) => {
|
|
44
|
+
setValueState((prev) => {
|
|
45
|
+
const newValue = typeof valueOrUpdater === "function" ? valueOrUpdater(prev) : valueOrUpdater;
|
|
46
|
+
valueRef.current = newValue;
|
|
47
|
+
stateManagerRef.current?.set(newValue);
|
|
48
|
+
return newValue;
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
const postState = () => {
|
|
52
|
+
stateManagerRef.current?.postCurrentValue();
|
|
53
|
+
};
|
|
54
|
+
return [
|
|
55
|
+
value,
|
|
56
|
+
setValue,
|
|
57
|
+
postState
|
|
58
|
+
];
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
//#endregion
|
|
62
|
+
export { useCrossFrameState };
|
|
2
63
|
//# sourceMappingURL=useCrossFrameState.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCrossFrameState.mjs","names":[],"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport type { MessageKey } from '@intlayer/editor';\nimport { CrossFrameStateManager } from '@intlayer/editor';\nimport {\n type Dispatch,\n type SetStateAction,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\n/**\n * Synchronizes a React state value across frames using CrossFrameStateManager.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>, () => void] => {\n const manager = useEditorStateManager();\n\n const resolvedInitial =\n typeof initialState === 'function'\n ? (initialState as () => S)()\n : initialState;\n\n const [value, setValueState] = useState<S>(resolvedInitial as S);\n const valueRef = useRef<S>(resolvedInitial as S);\n\n const stateManagerRef = useRef<CrossFrameStateManager<S> | null>(null);\n\n useEffect(() => {\n const { emit = true, receive = true } = options ?? {};\n const stateManager = new CrossFrameStateManager<S>(\n key,\n manager?.messenger,\n {\n emit,\n receive,\n initialValue: resolvedInitial,\n }\n );\n stateManagerRef.current = stateManager;\n\n const handler = (e: Event) => {\n const newValue = (e as CustomEvent<S>).detail;\n valueRef.current = newValue;\n setValueState(newValue);\n };\n stateManager.addEventListener('change', handler);\n stateManager.start();\n\n return () => {\n stateManager.removeEventListener('change', handler);\n stateManager.stop();\n stateManagerRef.current = null;\n };\n }, [key, manager?.messenger, options?.emit, options?.receive]);\n\n const setValue: Dispatch<SetStateAction<S>> = (valueOrUpdater) => {\n setValueState((prev) => {\n const newValue =\n typeof valueOrUpdater === 'function'\n ? (valueOrUpdater as (prev: S) => S)(prev)\n : valueOrUpdater;\n valueRef.current = newValue;\n stateManagerRef.current?.set(newValue);\n return newValue;\n });\n };\n\n const postState = () => {\n stateManagerRef.current?.postCurrentValue();\n };\n\n return [value, setValue, postState];\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCrossFrameState.mjs","names":[],"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport type { MessageKey } from '@intlayer/editor';\nimport { CrossFrameStateManager } from '@intlayer/editor';\nimport {\n type Dispatch,\n type SetStateAction,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\n/**\n * Synchronizes a React state value across frames using CrossFrameStateManager.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>, () => void] => {\n const manager = useEditorStateManager();\n\n const resolvedInitial =\n typeof initialState === 'function'\n ? (initialState as () => S)()\n : initialState;\n\n const [value, setValueState] = useState<S>(resolvedInitial as S);\n const valueRef = useRef<S>(resolvedInitial as S);\n\n const stateManagerRef = useRef<CrossFrameStateManager<S> | null>(null);\n\n useEffect(() => {\n const { emit = true, receive = true } = options ?? {};\n const stateManager = new CrossFrameStateManager<S>(\n key,\n manager?.messenger,\n {\n emit,\n receive,\n initialValue: resolvedInitial,\n }\n );\n stateManagerRef.current = stateManager;\n\n const handler = (e: Event) => {\n const newValue = (e as CustomEvent<S>).detail;\n valueRef.current = newValue;\n setValueState(newValue);\n };\n stateManager.addEventListener('change', handler);\n stateManager.start();\n\n return () => {\n stateManager.removeEventListener('change', handler);\n stateManager.stop();\n stateManagerRef.current = null;\n };\n }, [key, manager?.messenger, options?.emit, options?.receive]);\n\n const setValue: Dispatch<SetStateAction<S>> = (valueOrUpdater) => {\n setValueState((prev) => {\n const newValue =\n typeof valueOrUpdater === 'function'\n ? (valueOrUpdater as (prev: S) => S)(prev)\n : valueOrUpdater;\n valueRef.current = newValue;\n stateManagerRef.current?.set(newValue);\n return newValue;\n });\n };\n\n const postState = () => {\n stateManagerRef.current?.postCurrentValue();\n };\n\n return [value, setValue, postState];\n};\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,sBACX,KACA,cACA,YACiD;CACjD,MAAM,UAAU,uBAAuB;CAEvC,MAAM,kBACJ,OAAO,iBAAiB,aACnB,cAA0B,GAC3B;CAEN,MAAM,CAAC,OAAO,iBAAiB,SAAY,gBAAqB;CAChE,MAAM,WAAW,OAAU,gBAAqB;CAEhD,MAAM,kBAAkB,OAAyC,KAAK;AAEtE,iBAAgB;EACd,MAAM,EAAE,OAAO,MAAM,UAAU,SAAS,WAAW,EAAE;EACrD,MAAM,eAAe,IAAI,uBACvB,KACA,SAAS,WACT;GACE;GACA;GACA,cAAc;GACf,CACF;AACD,kBAAgB,UAAU;EAE1B,MAAM,WAAW,MAAa;GAC5B,MAAM,WAAY,EAAqB;AACvC,YAAS,UAAU;AACnB,iBAAc,SAAS;;AAEzB,eAAa,iBAAiB,UAAU,QAAQ;AAChD,eAAa,OAAO;AAEpB,eAAa;AACX,gBAAa,oBAAoB,UAAU,QAAQ;AACnD,gBAAa,MAAM;AACnB,mBAAgB,UAAU;;IAE3B;EAAC;EAAK,SAAS;EAAW,SAAS;EAAM,SAAS;EAAQ,CAAC;CAE9D,MAAM,YAAyC,mBAAmB;AAChE,iBAAe,SAAS;GACtB,MAAM,WACJ,OAAO,mBAAmB,aACrB,eAAkC,KAAK,GACxC;AACN,YAAS,UAAU;AACnB,mBAAgB,SAAS,IAAI,SAAS;AACtC,UAAO;IACP;;CAGJ,MAAM,kBAAkB;AACtB,kBAAgB,SAAS,kBAAkB;;AAG7C,QAAO;EAAC;EAAO;EAAU;EAAU"}
|
|
@@ -1,2 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useCrossFrameState } from "./useCrossFrameState.mjs";
|
|
4
|
+
import { MessageKey } from "@intlayer/editor";
|
|
5
|
+
|
|
6
|
+
//#region src/useCrossURLPathState.tsx
|
|
7
|
+
const useCrossURLPathState = (initialState, options) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);
|
|
8
|
+
const useCrossURLPathSetter = (initialState) => {
|
|
9
|
+
return useCrossURLPathState(initialState, {
|
|
10
|
+
emit: true,
|
|
11
|
+
receive: false
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
export { useCrossURLPathSetter, useCrossURLPathState };
|
|
2
17
|
//# sourceMappingURL=useCrossURLPathState.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCrossURLPathState.mjs","names":[],"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport {\n type CrossFrameStateOptions,\n useCrossFrameState,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n initialState?: string,\n options?: CrossFrameStateOptions\n) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);\n\nexport const useCrossURLPathSetter = (initialState?: string) => {\n // The EditorStateManager already handles URL tracking in client mode via\n // UrlStateManager.start(). This hook remains for explicit use cases.\n return useCrossURLPathState(initialState, { emit: true, receive: false });\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCrossURLPathState.mjs","names":[],"sources":["../../src/useCrossURLPathState.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport {\n type CrossFrameStateOptions,\n useCrossFrameState,\n} from './useCrossFrameState';\n\nexport const useCrossURLPathState = (\n initialState?: string,\n options?: CrossFrameStateOptions\n) => useCrossFrameState(MessageKey.INTLAYER_URL_CHANGE, initialState, options);\n\nexport const useCrossURLPathSetter = (initialState?: string) => {\n // The EditorStateManager already handles URL tracking in client mode via\n // UrlStateManager.start(). This hook remains for explicit use cases.\n return useCrossURLPathState(initialState, { emit: true, receive: false });\n};\n"],"mappings":";;;;;;AAQA,MAAa,wBACX,cACA,YACG,mBAAmB,WAAW,qBAAqB,cAAc,QAAQ;AAE9E,MAAa,yBAAyB,iBAA0B;AAG9D,QAAO,qBAAqB,cAAc;EAAE,MAAM;EAAM,SAAS;EAAO,CAAC"}
|
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEditorStateManager } from "./EditorStateContext.mjs";
|
|
4
|
+
import { useEffect, useState } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/useEditorLocale.tsx
|
|
7
|
+
const useEditorLocale = () => {
|
|
8
|
+
const manager = useEditorStateManager();
|
|
9
|
+
const [locale, setLocale] = useState(manager?.currentLocale.value);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!manager) return;
|
|
12
|
+
const handler = (e) => setLocale(e.detail);
|
|
13
|
+
manager.currentLocale.addEventListener("change", handler);
|
|
14
|
+
return () => manager.currentLocale.removeEventListener("change", handler);
|
|
15
|
+
}, [manager]);
|
|
16
|
+
return locale;
|
|
17
|
+
};
|
|
18
|
+
const useSetEditorLocale = () => {
|
|
19
|
+
const manager = useEditorStateManager();
|
|
20
|
+
return (locale) => manager?.currentLocale.set(locale);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { useEditorLocale, useSetEditorLocale };
|
|
2
25
|
//# sourceMappingURL=useEditorLocale.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditorLocale.mjs","names":[],"sources":["../../src/useEditorLocale.tsx"],"sourcesContent":["'use client';\n\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport const useEditorLocale = (): Locale | undefined => {\n const manager = useEditorStateManager();\n const [locale, setLocale] = useState<Locale | undefined>(\n manager?.currentLocale.value\n );\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) => setLocale((e as CustomEvent<Locale>).detail);\n manager.currentLocale.addEventListener('change', handler);\n\n return () => manager.currentLocale.removeEventListener('change', handler);\n }, [manager]);\n\n return locale;\n};\n\nexport const useSetEditorLocale = () => {\n const manager = useEditorStateManager();\n return (locale: Locale) => manager?.currentLocale.set(locale);\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useEditorLocale.mjs","names":[],"sources":["../../src/useEditorLocale.tsx"],"sourcesContent":["'use client';\n\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport const useEditorLocale = (): Locale | undefined => {\n const manager = useEditorStateManager();\n const [locale, setLocale] = useState<Locale | undefined>(\n manager?.currentLocale.value\n );\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) => setLocale((e as CustomEvent<Locale>).detail);\n manager.currentLocale.addEventListener('change', handler);\n\n return () => manager.currentLocale.removeEventListener('change', handler);\n }, [manager]);\n\n return locale;\n};\n\nexport const useSetEditorLocale = () => {\n const manager = useEditorStateManager();\n return (locale: Locale) => manager?.currentLocale.set(locale);\n};\n"],"mappings":";;;;;;AAMA,MAAa,wBAA4C;CACvD,MAAM,UAAU,uBAAuB;CACvC,MAAM,CAAC,QAAQ,aAAa,SAC1B,SAAS,cAAc,MACxB;AAED,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,WAAW,MAAa,UAAW,EAA0B,OAAO;AAC1E,UAAQ,cAAc,iBAAiB,UAAU,QAAQ;AAEzD,eAAa,QAAQ,cAAc,oBAAoB,UAAU,QAAQ;IACxE,CAAC,QAAQ,CAAC;AAEb,QAAO;;AAGT,MAAa,2BAA2B;CACtC,MAAM,UAAU,uBAAuB;AACvC,SAAQ,WAAmB,SAAS,cAAc,IAAI,OAAO"}
|
|
@@ -1,2 +1,50 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useFocusDictionary } from "./FocusDictionaryContext.mjs";
|
|
4
|
+
import { useDictionariesRecord } from "./DictionariesRecordContext.mjs";
|
|
5
|
+
import { useEditorLocale } from "./useEditorLocale.mjs";
|
|
6
|
+
import { useMemo } from "react";
|
|
7
|
+
import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
|
|
8
|
+
|
|
9
|
+
//#region src/useFocusUnmergedDictionary.tsx
|
|
10
|
+
/**
|
|
11
|
+
* Converts merged keypath format to unmerged format.
|
|
12
|
+
* Merged: [{type: "translation", key: "fr"}, {type: "object", key: "title"}]
|
|
13
|
+
* Unmerged: [{type: "object", key: "title"}, {type: "translation", key: "fr"}]
|
|
14
|
+
*/
|
|
15
|
+
const mergedKeyPathToUnmergedKeyPath = (keyPath, dictionaries, locale) => {
|
|
16
|
+
for (const dictionary of dictionaries) try {
|
|
17
|
+
if (getContentNodeByKeyPath(dictionary.content, keyPath ?? [], locale)) return {
|
|
18
|
+
keyPath,
|
|
19
|
+
dictionaryLocalId: dictionary.localId
|
|
20
|
+
};
|
|
21
|
+
} catch {}
|
|
22
|
+
};
|
|
23
|
+
const useFocusUnmergedDictionary = () => {
|
|
24
|
+
const { localeDictionaries } = useDictionariesRecord();
|
|
25
|
+
const currentLocale = useEditorLocale();
|
|
26
|
+
const { setFocusedContent, setFocusedContentKeyPath, focusedContent: mergedFocusedContent } = useFocusDictionary();
|
|
27
|
+
return {
|
|
28
|
+
focusedContent: useMemo(() => {
|
|
29
|
+
if (!mergedFocusedContent) return mergedFocusedContent;
|
|
30
|
+
if (!localeDictionaries) return mergedFocusedContent;
|
|
31
|
+
if (mergedFocusedContent.dictionaryLocalId) return mergedFocusedContent;
|
|
32
|
+
const dictionaries = Object.values(localeDictionaries).filter((dictionary) => dictionary.key === mergedFocusedContent.dictionaryKey);
|
|
33
|
+
const unmergedKeyPath = mergedKeyPathToUnmergedKeyPath(mergedFocusedContent.keyPath ?? [], dictionaries, currentLocale);
|
|
34
|
+
return {
|
|
35
|
+
...mergedFocusedContent,
|
|
36
|
+
...unmergedKeyPath
|
|
37
|
+
};
|
|
38
|
+
}, [
|
|
39
|
+
mergedFocusedContent,
|
|
40
|
+
localeDictionaries,
|
|
41
|
+
currentLocale
|
|
42
|
+
]),
|
|
43
|
+
setFocusedContent,
|
|
44
|
+
setFocusedContentKeyPath
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
//#endregion
|
|
49
|
+
export { useFocusUnmergedDictionary };
|
|
2
50
|
//# sourceMappingURL=useFocusUnmergedDictionary.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusUnmergedDictionary.mjs","names":[],"sources":["../../src/useFocusUnmergedDictionary.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core/dictionaryManipulator';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useMemo } from 'react';\nimport { useDictionariesRecord } from './DictionariesRecordContext';\nimport { type FileContent, useFocusDictionary } from './FocusDictionaryContext';\nimport { useEditorLocale } from './useEditorLocale';\n\ntype UnmergedKeyPath = {\n keyPath: KeyPath[];\n dictionaryLocalId?: LocalDictionaryId;\n};\n\n/**\n * Converts merged keypath format to unmerged format.\n * Merged: [{type: \"translation\", key: \"fr\"}, {type: \"object\", key: \"title\"}]\n * Unmerged: [{type: \"object\", key: \"title\"}, {type: \"translation\", key: \"fr\"}]\n */\nconst mergedKeyPathToUnmergedKeyPath = (\n keyPath: KeyPath[],\n dictionaries: Dictionary[],\n locale?: Locale\n): UnmergedKeyPath | undefined => {\n // If we have a dictionary, verify the path exists\n // Try to find the correct position for the translation key\n // by checking which path actually exists in the dictionary\n for (const dictionary of dictionaries) {\n try {\n const result = getContentNodeByKeyPath(\n dictionary.content,\n keyPath ?? [],\n locale\n );\n\n if (result) {\n return { keyPath, dictionaryLocalId: dictionary.localId };\n }\n } catch {\n // Continue to next candidate\n }\n }\n};\n\nexport const useFocusUnmergedDictionary = () => {\n const { localeDictionaries } = useDictionariesRecord();\n const currentLocale = useEditorLocale();\n const {\n setFocusedContent,\n setFocusedContentKeyPath,\n focusedContent: mergedFocusedContent,\n } = useFocusDictionary();\n\n const focusedContent = useMemo<FileContent | null>(() => {\n if (!mergedFocusedContent) return mergedFocusedContent;\n if (!localeDictionaries) return mergedFocusedContent;\n if (mergedFocusedContent.dictionaryLocalId) return mergedFocusedContent;\n\n const dictionaries = Object.values(localeDictionaries).filter(\n (dictionary) => dictionary.key === mergedFocusedContent.dictionaryKey\n );\n\n const unmergedKeyPath = mergedKeyPathToUnmergedKeyPath(\n mergedFocusedContent.keyPath ?? [],\n dictionaries,\n currentLocale\n );\n\n return {\n ...mergedFocusedContent,\n ...unmergedKeyPath,\n };\n }, [mergedFocusedContent, localeDictionaries, currentLocale]);\n\n return {\n focusedContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n };\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFocusUnmergedDictionary.mjs","names":[],"sources":["../../src/useFocusUnmergedDictionary.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core/dictionaryManipulator';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useMemo } from 'react';\nimport { useDictionariesRecord } from './DictionariesRecordContext';\nimport { type FileContent, useFocusDictionary } from './FocusDictionaryContext';\nimport { useEditorLocale } from './useEditorLocale';\n\ntype UnmergedKeyPath = {\n keyPath: KeyPath[];\n dictionaryLocalId?: LocalDictionaryId;\n};\n\n/**\n * Converts merged keypath format to unmerged format.\n * Merged: [{type: \"translation\", key: \"fr\"}, {type: \"object\", key: \"title\"}]\n * Unmerged: [{type: \"object\", key: \"title\"}, {type: \"translation\", key: \"fr\"}]\n */\nconst mergedKeyPathToUnmergedKeyPath = (\n keyPath: KeyPath[],\n dictionaries: Dictionary[],\n locale?: Locale\n): UnmergedKeyPath | undefined => {\n // If we have a dictionary, verify the path exists\n // Try to find the correct position for the translation key\n // by checking which path actually exists in the dictionary\n for (const dictionary of dictionaries) {\n try {\n const result = getContentNodeByKeyPath(\n dictionary.content,\n keyPath ?? [],\n locale\n );\n\n if (result) {\n return { keyPath, dictionaryLocalId: dictionary.localId };\n }\n } catch {\n // Continue to next candidate\n }\n }\n};\n\nexport const useFocusUnmergedDictionary = () => {\n const { localeDictionaries } = useDictionariesRecord();\n const currentLocale = useEditorLocale();\n const {\n setFocusedContent,\n setFocusedContentKeyPath,\n focusedContent: mergedFocusedContent,\n } = useFocusDictionary();\n\n const focusedContent = useMemo<FileContent | null>(() => {\n if (!mergedFocusedContent) return mergedFocusedContent;\n if (!localeDictionaries) return mergedFocusedContent;\n if (mergedFocusedContent.dictionaryLocalId) return mergedFocusedContent;\n\n const dictionaries = Object.values(localeDictionaries).filter(\n (dictionary) => dictionary.key === mergedFocusedContent.dictionaryKey\n );\n\n const unmergedKeyPath = mergedKeyPathToUnmergedKeyPath(\n mergedFocusedContent.keyPath ?? [],\n dictionaries,\n currentLocale\n );\n\n return {\n ...mergedFocusedContent,\n ...unmergedKeyPath,\n };\n }, [mergedFocusedContent, localeDictionaries, currentLocale]);\n\n return {\n focusedContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n };\n};\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,kCACJ,SACA,cACA,WACgC;AAIhC,MAAK,MAAM,cAAc,aACvB,KAAI;AAOF,MANe,wBACb,WAAW,SACX,WAAW,EAAE,EACb,OACD,CAGC,QAAO;GAAE;GAAS,mBAAmB,WAAW;GAAS;SAErD;;AAMZ,MAAa,mCAAmC;CAC9C,MAAM,EAAE,uBAAuB,uBAAuB;CACtD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,EACJ,mBACA,0BACA,gBAAgB,yBACd,oBAAoB;AAuBxB,QAAO;EACL,gBAtBqB,cAAkC;AACvD,OAAI,CAAC,qBAAsB,QAAO;AAClC,OAAI,CAAC,mBAAoB,QAAO;AAChC,OAAI,qBAAqB,kBAAmB,QAAO;GAEnD,MAAM,eAAe,OAAO,OAAO,mBAAmB,CAAC,QACpD,eAAe,WAAW,QAAQ,qBAAqB,cACzD;GAED,MAAM,kBAAkB,+BACtB,qBAAqB,WAAW,EAAE,EAClC,cACA,cACD;AAED,UAAO;IACL,GAAG;IACH,GAAG;IACJ;KACA;GAAC;GAAsB;GAAoB;GAAc,CAAC;EAI3D;EACA;EACD"}
|
|
@@ -1,2 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs";
|
|
4
|
+
import { MessageKey, mergeIframeClick } from "@intlayer/editor";
|
|
5
|
+
|
|
6
|
+
//#region src/useIframeClickInterceptor.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Broadcasts mousedown events from within an iframe to the parent frame.
|
|
9
|
+
* Called in the client application (inside the iframe).
|
|
10
|
+
* Note: EditorStateManager.start() already sets this up in client mode.
|
|
11
|
+
* This hook exists for explicit / standalone use cases.
|
|
12
|
+
*/
|
|
13
|
+
const useIframeClickInterceptor = () => {
|
|
14
|
+
useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED);
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Merges received iframe click events into the parent's DOM event stream.
|
|
18
|
+
* Called in the editor (parent frame).
|
|
19
|
+
*/
|
|
20
|
+
const useIframeClickMerger = () => {
|
|
21
|
+
useCrossFrameMessageListener(MessageKey.INTLAYER_IFRAME_CLICKED, mergeIframeClick);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
//#endregion
|
|
25
|
+
export { useIframeClickInterceptor, useIframeClickMerger };
|
|
2
26
|
//# sourceMappingURL=useIframeClickInterceptor.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIframeClickInterceptor.mjs","names":[],"sources":["../../src/useIframeClickInterceptor.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey, mergeIframeClick } from '@intlayer/editor';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\n/**\n * Broadcasts mousedown events from within an iframe to the parent frame.\n * Called in the client application (inside the iframe).\n * Note: EditorStateManager.start() already sets this up in client mode.\n * This hook exists for explicit / standalone use cases.\n */\nexport const useIframeClickInterceptor = () => {\n useCrossFrameMessageListener<undefined>(MessageKey.INTLAYER_IFRAME_CLICKED);\n};\n\n/**\n * Merges received iframe click events into the parent's DOM event stream.\n * Called in the editor (parent frame).\n */\nexport const useIframeClickMerger = () => {\n useCrossFrameMessageListener<MessageEvent>(\n MessageKey.INTLAYER_IFRAME_CLICKED,\n mergeIframeClick\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useIframeClickInterceptor.mjs","names":[],"sources":["../../src/useIframeClickInterceptor.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey, mergeIframeClick } from '@intlayer/editor';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\n/**\n * Broadcasts mousedown events from within an iframe to the parent frame.\n * Called in the client application (inside the iframe).\n * Note: EditorStateManager.start() already sets this up in client mode.\n * This hook exists for explicit / standalone use cases.\n */\nexport const useIframeClickInterceptor = () => {\n useCrossFrameMessageListener<undefined>(MessageKey.INTLAYER_IFRAME_CLICKED);\n};\n\n/**\n * Merges received iframe click events into the parent's DOM event stream.\n * Called in the editor (parent frame).\n */\nexport const useIframeClickMerger = () => {\n useCrossFrameMessageListener<MessageEvent>(\n MessageKey.INTLAYER_IFRAME_CLICKED,\n mergeIframeClick\n );\n};\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,kCAAkC;AAC7C,8BAAwC,WAAW,wBAAwB;;;;;;AAO7E,MAAa,6BAA6B;AACxC,8BACE,WAAW,yBACX,iBACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusDictionaryContext.d.ts","names":[],"sources":["../../src/FocusDictionaryContext.tsx"],"mappings":";;;;KASY,oBAAA;EACV,cAAA,EAAgB,aAAA;AAAA;AAAA,KAGN,sBAAA;EACV,iBAAA,GAAoB,KAAA,EAAO,aAAA;EAC3B,wBAAA,GAA2B,OAAA,EAAS,OAAA;AAAA;;;;cAMzB,kBAAA,QAAyB,oBAAA,GACpC,sBAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"FocusDictionaryContext.d.ts","names":[],"sources":["../../src/FocusDictionaryContext.tsx"],"mappings":";;;;KASY,oBAAA;EACV,cAAA,EAAgB,aAAA;AAAA;AAAA,KAGN,sBAAA;EACV,iBAAA,GAAoB,KAAA,EAAO,aAAA;EAC3B,wBAAA,GAA2B,OAAA,EAAS,OAAA;AAAA;;;;cAMzB,kBAAA,QAAyB,oBAAA,GACpC,sBAAA;AAAA,cAwBW,yBAAA,QAAgC,sBAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intlayer/editor-react",
|
|
3
|
-
"version": "8.4.
|
|
3
|
+
"version": "8.4.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Provides the states, contexts, hooks and components to interact with the Intlayer editor for a React application",
|
|
6
6
|
"keywords": [
|
|
@@ -70,11 +70,11 @@
|
|
|
70
70
|
"typecheck": "tsc --noEmit --project tsconfig.types.json"
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
|
73
|
-
"@intlayer/config": "8.4.
|
|
74
|
-
"@intlayer/core": "8.4.
|
|
75
|
-
"@intlayer/editor": "8.4.
|
|
76
|
-
"@intlayer/types": "8.4.
|
|
77
|
-
"@intlayer/unmerged-dictionaries-entry": "8.4.
|
|
73
|
+
"@intlayer/config": "8.4.6",
|
|
74
|
+
"@intlayer/core": "8.4.6",
|
|
75
|
+
"@intlayer/editor": "8.4.6",
|
|
76
|
+
"@intlayer/types": "8.4.6",
|
|
77
|
+
"@intlayer/unmerged-dictionaries-entry": "8.4.6"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@types/node": "25.5.0",
|