@intlayer/editor-react 9.3.0 → 9.3.1
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 +24 -24
- package/dist/cjs/ConfigurationContext.cjs.map +1 -1
- package/dist/cjs/DictionariesRecordContext.cjs.map +1 -1
- package/dist/cjs/EditedContentContext.cjs.map +1 -1
- package/dist/cjs/EditorEnabledContext.cjs.map +1 -1
- package/dist/cjs/EditorProvider.cjs.map +1 -1
- package/dist/cjs/EditorStateContext.cjs.map +1 -1
- package/dist/cjs/FocusDictionaryContext.cjs.map +1 -1
- package/dist/cjs/_virtual/_rolldown/runtime.cjs +1 -2
- package/dist/cjs/useCrossFrameState.cjs.map +1 -1
- package/dist/cjs/useEditorLocale.cjs.map +1 -1
- package/dist/cjs/useFocusUnmergedDictionary.cjs.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -47,27 +47,27 @@ With **per-locale content files**, **TypeScript autocompletion**, **tree-shakabl
|
|
|
47
47
|
|
|
48
48
|
## Keys benefits of Intlayer:
|
|
49
49
|
|
|
50
|
-
| Feature | Description
|
|
51
|
-
| --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700"> | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.
|
|
53
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true" alt="Feature" width="700"> | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)
|
|
54
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700"> | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)
|
|
55
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700"> | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler)
|
|
56
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700"> | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)
|
|
57
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700"> | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
58
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700"> | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app)
|
|
59
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true" alt="Feature" width="700"> | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)
|
|
60
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true" alt="Feature" width="700"> | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer)
|
|
61
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700"> | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
62
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700"> | **Markdown Support**<br><br>Import and interpret, locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)
|
|
63
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700"> | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)
|
|
64
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700"> | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)
|
|
65
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700"> | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs)
|
|
66
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700"> | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider / API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill)
|
|
67
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700"> | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)
|
|
68
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700"> | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)
|
|
69
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700"> | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer and vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) |
|
|
70
|
-
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/benchmark.png?raw=true" alt="Feature" width="700"> | **Performances & Benchmark**<br><br>Uses advanced tree-shaking and dynamic loading to boost performances and keep the solution as light as possible. <br><br> - [Performances & Benchmark](https://intlayer.org/doc/benchmark)
|
|
50
|
+
| Feature | Description |
|
|
51
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700"> | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. |
|
|
53
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true" alt="Feature" width="700"> | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content) |
|
|
54
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700"> | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file) |
|
|
55
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700"> | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler) |
|
|
56
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700"> | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
57
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700"> | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
58
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700"> | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app) |
|
|
59
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true" alt="Feature" width="700"> | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
60
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true" alt="Feature" width="700"> | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
61
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700"> | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
62
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700"> | **Markdown Support**<br><br>Import and interpret, locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file) |
|
|
63
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700"> | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
|
|
64
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700"> | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
65
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700"> | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs) |
|
|
66
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700"> | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider / API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill) |
|
|
67
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700"> | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) |
|
|
68
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700"> | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension) |
|
|
69
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700"> | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer and vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) <br> - [Intlayer compat adapters](https://intlayer.org/doc/compatibility) |
|
|
70
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/benchmark.png?raw=true" alt="Feature" width="700"> | **Performances & Benchmark**<br><br>Uses advanced tree-shaking and dynamic loading to boost performances and keep the solution as light as possible. <br><br> - [Performances & Benchmark](https://intlayer.org/doc/benchmark) |
|
|
71
71
|
|
|
72
72
|
---
|
|
73
73
|
|
|
@@ -162,7 +162,7 @@ Explore our comprehensive documentation to get started with Intlayer and learn h
|
|
|
162
162
|
<li><a href="https://intlayer.org/doc/concept/cms" rel=''>Intlayer CMS</a></li>
|
|
163
163
|
<li><a href="https://intlayer.org/doc/concept/content" rel=''>Dictionary</a>
|
|
164
164
|
<ul>
|
|
165
|
-
<li><a href="https://intlayer.org/doc/concept/
|
|
165
|
+
<li><a href="https://intlayer.org/doc/concept/per-locale-file" rel=''>Per-Locale Content Declaration File</a></li>
|
|
166
166
|
<li><a href="https://intlayer.org/doc/concept/content/translation" rel=''>Translation</a></li>
|
|
167
167
|
<li><a href="https://intlayer.org/doc/concept/content/enumeration" rel=''>Enumeration</a></li>
|
|
168
168
|
<li><a href="https://intlayer.org/doc/concept/content/condition" rel=''>Condition</a></li>
|
|
@@ -183,7 +183,7 @@ Explore our comprehensive documentation to get started with Intlayer and learn h
|
|
|
183
183
|
<ul>
|
|
184
184
|
<li><a href="https://intlayer.org/doc/environment/nextjs/15" rel=''>Next.js 15</a></li>
|
|
185
185
|
<li><a href="https://intlayer.org/doc/environment/nextjs/14" rel=''>Next.js 14 (App Router)</a></li>
|
|
186
|
-
<li><a href="https://intlayer.org/doc/environment/nextjs/next-with-
|
|
186
|
+
<li><a href="https://intlayer.org/doc/environment/nextjs/next-with-page-router" rel=''>Next.js Page Router</a></li>
|
|
187
187
|
<li><a href="https://intlayer.org/doc/environment/nextjs/compiler" rel=''>Next.js using Compiler</a></li>
|
|
188
188
|
</ul>
|
|
189
189
|
</li>
|
|
@@ -212,7 +212,7 @@ Explore our comprehensive documentation to get started with Intlayer and learn h
|
|
|
212
212
|
<li><a href="https://intlayer.org/doc/environment/sveltekit" rel=''>SvelteKit</a></li>
|
|
213
213
|
<li><a href="https://intlayer.org/doc/environment/vite-and-preact" rel=''>Vite + Preact</a></li>
|
|
214
214
|
<li><a href="https://intlayer.org/doc/environment/vite-and-vue" rel=''>Vite + Vue</a></li>
|
|
215
|
-
<li><a href="https://intlayer.org/doc/environment/
|
|
215
|
+
<li><a href="https://intlayer.org/doc/environment/nuxt-and-vue" rel=''>Vite + Nuxt</a></li>
|
|
216
216
|
<li><a href="https://intlayer.org/doc/environment/vite-and-solid" rel=''>Vite + Solid</a></li>
|
|
217
217
|
<li><a href="https://intlayer.org/doc/environment/angular" rel=''>Angular</a></li>
|
|
218
218
|
<li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigurationContext.cjs","names":["useEditorStateManager"],"sources":["../../src/ConfigurationContext.tsx"],"sourcesContent":["'use client';\n\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\n// 1. Create a native React context\nconst ConfigurationReactContext = createContext<IntlayerConfig | undefined>(\n undefined\n);\n\nexport type ConfigurationProviderProps = PropsWithChildren<{\n configuration?: IntlayerConfig;\n}>;\n\nexport const ConfigurationProvider: FC<ConfigurationProviderProps> = ({\n configuration,\n children,\n}) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!manager || !configuration) return;\n\n manager.configuration.set(configuration);\n }, [manager, configuration]);\n\n // 2. Wrap children in the native provider\n return (\n <ConfigurationReactContext.Provider value={configuration}>\n {children}\n </ConfigurationReactContext.Provider>\n );\n};\n\nexport const useConfiguration = (): IntlayerConfig | undefined => {\n const manager = useEditorStateManager();\n const reactConfig = useContext(ConfigurationReactContext); // 3. Consume native context\n\n const [config, setConfig] = useState<IntlayerConfig | undefined>(\n manager?.configuration.value ?? reactConfig\n );\n\n useEffect(() => {\n if (!manager) {\n setConfig(reactConfig);\n return;\n }\n\n const handler = (e: Event) => {\n const detail = (e as CustomEvent<IntlayerConfig>).detail;\n setConfig(detail ?? reactConfig);\n };\n\n manager.configuration.addEventListener('change', handler);\n return () => manager.configuration.removeEventListener('change', handler);\n }, [manager, reactConfig]);\n\n // Prefer event-driven config, fallback to React context config\n return config ?? reactConfig;\n};\n\nexport const useConfigurationState = () => {\n const manager = useEditorStateManager();\n const reactConfig = useContext(ConfigurationReactContext);\n\n const [config, setConfig] = useState<IntlayerConfig | undefined>(\n manager?.configuration.value ?? reactConfig\n );\n\n return [\n config ?? reactConfig,\n setConfig,\n () => manager?.configuration.postCurrentValue(),\n ] as const;\n};\n"],"mappings":";;;;;;;;AAcA,MAAM,
|
|
1
|
+
{"version":3,"file":"ConfigurationContext.cjs","names":["createContext","useEditorStateManager","useContext","useState"],"sources":["../../src/ConfigurationContext.tsx"],"sourcesContent":["'use client';\n\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\n// 1. Create a native React context\nconst ConfigurationReactContext = createContext<IntlayerConfig | undefined>(\n undefined\n);\n\nexport type ConfigurationProviderProps = PropsWithChildren<{\n configuration?: IntlayerConfig;\n}>;\n\nexport const ConfigurationProvider: FC<ConfigurationProviderProps> = ({\n configuration,\n children,\n}) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!manager || !configuration) return;\n\n manager.configuration.set(configuration);\n }, [manager, configuration]);\n\n // 2. Wrap children in the native provider\n return (\n <ConfigurationReactContext.Provider value={configuration}>\n {children}\n </ConfigurationReactContext.Provider>\n );\n};\n\nexport const useConfiguration = (): IntlayerConfig | undefined => {\n const manager = useEditorStateManager();\n const reactConfig = useContext(ConfigurationReactContext); // 3. Consume native context\n\n const [config, setConfig] = useState<IntlayerConfig | undefined>(\n manager?.configuration.value ?? reactConfig\n );\n\n useEffect(() => {\n if (!manager) {\n setConfig(reactConfig);\n return;\n }\n\n const handler = (e: Event) => {\n const detail = (e as CustomEvent<IntlayerConfig>).detail;\n setConfig(detail ?? reactConfig);\n };\n\n manager.configuration.addEventListener('change', handler);\n return () => manager.configuration.removeEventListener('change', handler);\n }, [manager, reactConfig]);\n\n // Prefer event-driven config, fallback to React context config\n return config ?? reactConfig;\n};\n\nexport const useConfigurationState = () => {\n const manager = useEditorStateManager();\n const reactConfig = useContext(ConfigurationReactContext);\n\n const [config, setConfig] = useState<IntlayerConfig | undefined>(\n manager?.configuration.value ?? reactConfig\n );\n\n return [\n config ?? reactConfig,\n setConfig,\n () => manager?.configuration.postCurrentValue(),\n ] as const;\n};\n"],"mappings":";;;;;;;;AAcA,MAAM,gCAA4BA,qBAChC,MACF;AAMA,MAAa,yBAAyD,EACpE,eACA,eACI;CACJ,MAAM,UAAUC,iDAAsB;CAEtC,2BAAgB;EACd,IAAI,CAAC,WAAW,CAAC,eAAe;EAEhC,QAAQ,cAAc,IAAI,aAAa;CACzC,GAAG,CAAC,SAAS,aAAa,CAAC;CAG3B,OACE,2CAAC,0BAA0B,UAA3B;EAAoC,OAAO;EACxC;CACiC;AAExC;AAEA,MAAa,yBAAqD;CAChE,MAAM,UAAUA,iDAAsB;CACtC,MAAM,kBAAcC,kBAAW,yBAAyB;CAExD,MAAM,CAAC,QAAQ,iBAAaC,gBAC1B,SAAS,cAAc,SAAS,WAClC;CAEA,2BAAgB;EACd,IAAI,CAAC,SAAS;GACZ,UAAU,WAAW;GACrB;EACF;EAEA,MAAM,WAAW,MAAa;GAC5B,MAAM,SAAU,EAAkC;GAClD,UAAU,UAAU,WAAW;EACjC;EAEA,QAAQ,cAAc,iBAAiB,UAAU,OAAO;EACxD,aAAa,QAAQ,cAAc,oBAAoB,UAAU,OAAO;CAC1E,GAAG,CAAC,SAAS,WAAW,CAAC;CAGzB,OAAO,UAAU;AACnB;AAEA,MAAa,8BAA8B;CACzC,MAAM,UAAUF,iDAAsB;CACtC,MAAM,kBAAcC,kBAAW,yBAAyB;CAExD,MAAM,CAAC,QAAQ,iBAAaC,gBAC1B,SAAS,cAAc,SAAS,WAClC;CAEA,OAAO;EACL,UAAU;EACV;QACM,SAAS,cAAc,iBAAiB;CAChD;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DictionariesRecordContext.cjs","names":["useEditorStateManager"],"sources":["../../src/DictionariesRecordContext.tsx"],"sourcesContent":["'use client';\n\nimport type { DictionaryContent } from '@intlayer/editor';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { useCallback, useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { DictionaryContent } from '@intlayer/editor';\n\ntype DictionariesRecordStatesContextType = {\n localeDictionaries: DictionaryContent;\n};\ntype DictionariesRecordActionsContextType = {\n setLocaleDictionaries: (value: DictionaryContent) => void;\n setLocaleDictionary: (dictionary: Dictionary) => void;\n};\n\nexport const useDictionariesRecord = (): DictionariesRecordStatesContextType &\n DictionariesRecordActionsContextType => {\n const manager = useEditorStateManager();\n const [localeDictionaries, setLocaleDictionariesState] =\n useState<DictionaryContent>(manager?.localeDictionaries.value ?? {});\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) =>\n setLocaleDictionariesState(\n (e as CustomEvent<DictionaryContent>).detail ?? {}\n );\n\n manager.localeDictionaries.addEventListener('change', handler);\n\n return () =>\n manager.localeDictionaries.removeEventListener('change', handler);\n }, [manager]);\n\n const setLocaleDictionaries = useCallback(\n (value: DictionaryContent) => manager?.localeDictionaries.set(value),\n [manager]\n );\n\n const setLocaleDictionary = useCallback(\n (dictionary: Dictionary) => manager?.setLocaleDictionary(dictionary),\n [manager]\n );\n\n return { localeDictionaries, setLocaleDictionaries, setLocaleDictionary };\n};\n\nexport const useDictionariesRecordActions =\n (): DictionariesRecordActionsContextType => {\n const { setLocaleDictionaries, setLocaleDictionary } =\n useDictionariesRecord();\n return { setLocaleDictionaries, setLocaleDictionary };\n };\n"],"mappings":";;;;;;;AAiBA,MAAa,8BAC6B;CACxC,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"DictionariesRecordContext.cjs","names":["useEditorStateManager","useState","useCallback"],"sources":["../../src/DictionariesRecordContext.tsx"],"sourcesContent":["'use client';\n\nimport type { DictionaryContent } from '@intlayer/editor';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { useCallback, useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { DictionaryContent } from '@intlayer/editor';\n\ntype DictionariesRecordStatesContextType = {\n localeDictionaries: DictionaryContent;\n};\ntype DictionariesRecordActionsContextType = {\n setLocaleDictionaries: (value: DictionaryContent) => void;\n setLocaleDictionary: (dictionary: Dictionary) => void;\n};\n\nexport const useDictionariesRecord = (): DictionariesRecordStatesContextType &\n DictionariesRecordActionsContextType => {\n const manager = useEditorStateManager();\n const [localeDictionaries, setLocaleDictionariesState] =\n useState<DictionaryContent>(manager?.localeDictionaries.value ?? {});\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) =>\n setLocaleDictionariesState(\n (e as CustomEvent<DictionaryContent>).detail ?? {}\n );\n\n manager.localeDictionaries.addEventListener('change', handler);\n\n return () =>\n manager.localeDictionaries.removeEventListener('change', handler);\n }, [manager]);\n\n const setLocaleDictionaries = useCallback(\n (value: DictionaryContent) => manager?.localeDictionaries.set(value),\n [manager]\n );\n\n const setLocaleDictionary = useCallback(\n (dictionary: Dictionary) => manager?.setLocaleDictionary(dictionary),\n [manager]\n );\n\n return { localeDictionaries, setLocaleDictionaries, setLocaleDictionary };\n};\n\nexport const useDictionariesRecordActions =\n (): DictionariesRecordActionsContextType => {\n const { setLocaleDictionaries, setLocaleDictionary } =\n useDictionariesRecord();\n return { setLocaleDictionaries, setLocaleDictionary };\n };\n"],"mappings":";;;;;;;AAiBA,MAAa,8BAC6B;CACxC,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,oBAAoB,kCACzBC,gBAA4B,SAAS,mBAAmB,SAAS,CAAC,CAAC;CAErE,2BAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,WAAW,MACf,2BACG,EAAqC,UAAU,CAAC,CACnD;EAEF,QAAQ,mBAAmB,iBAAiB,UAAU,OAAO;EAE7D,aACE,QAAQ,mBAAmB,oBAAoB,UAAU,OAAO;CACpE,GAAG,CAAC,OAAO,CAAC;CAYZ,OAAO;EAAE;EAAoB,2BAVCC,oBAC3B,UAA6B,SAAS,mBAAmB,IAAI,KAAK,GACnE,CAAC,OAAO,CAQuC;EAAG,yBALxBA,oBACzB,eAA2B,SAAS,oBAAoB,UAAU,GACnE,CAAC,OAAO,CAG4D;CAAE;AAC1E;AAEA,MAAa,qCACiC;CAC1C,MAAM,EAAE,uBAAuB,wBAC7B,sBAAsB;CACxB,OAAO;EAAE;EAAuB;CAAoB;AACtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditedContentContext.cjs","names":["useEditorStateManager"],"sources":["../../src/EditedContentContext.tsx"],"sourcesContent":["'use client';\n\nimport type { DictionaryContent } from '@intlayer/editor';\nimport type {\n ContentNode,\n Dictionary,\n LocalDictionaryId,\n} from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { DictionaryContent } from '@intlayer/editor';\n\ntype EditedContentActionsContextType = {\n setEditedContentState: (editedContent: DictionaryContent) => void;\n setEditedDictionary: (dict: Dictionary) => void;\n setEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newValue: Dictionary['content']\n ) => void;\n addEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newValue: ContentNode<any>,\n keyPath?: KeyPath[],\n overwrite?: boolean\n ) => void;\n renameEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newKey: KeyPath['key'],\n keyPath?: KeyPath[]\n ) => void;\n removeEditedContent: (\n localDictionaryId: LocalDictionaryId,\n keyPath: KeyPath[]\n ) => void;\n restoreEditedContent: (localDictionaryId: LocalDictionaryId) => void;\n clearEditedDictionaryContent: (localDictionaryId: LocalDictionaryId) => void;\n clearEditedContent: () => void;\n getEditedContentValue: (\n localDictionaryIdOrKey: LocalDictionaryId | Dictionary['key'] | string,\n keyPath: KeyPath[]\n ) => ContentNode | undefined;\n};\n\nexport const useEditedContentActions = (): EditedContentActionsContextType => {\n const manager = useEditorStateManager();\n\n return {\n setEditedContentState: (value: DictionaryContent) =>\n manager?.editedContent.set(value),\n setEditedDictionary: (dict: Dictionary) =>\n manager?.setEditedDictionary(dict),\n setEditedContent: (\n localId: LocalDictionaryId,\n value: Dictionary['content']\n ) => manager?.setEditedContent(localId, value),\n addEditedContent: (localId, value, keyPath, overwrite) =>\n manager?.addContent(localId, value, keyPath, overwrite),\n renameEditedContent: (localId, newKey, keyPath) =>\n manager?.renameContent(localId, newKey, keyPath),\n removeEditedContent: (localId, keyPath) =>\n manager?.removeContent(localId, keyPath),\n restoreEditedContent: (localId) => manager?.restoreContent(localId),\n clearEditedDictionaryContent: (localId) => manager?.clearContent(localId),\n clearEditedContent: () => manager?.clearAllContent(),\n getEditedContentValue: (localIdOrKey, keyPath) =>\n manager?.getContentValue(localIdOrKey, keyPath),\n };\n};\n\nexport const useEditedContent = () => {\n const manager = useEditorStateManager();\n const [editedContent, setEditedContentState] = useState<\n DictionaryContent | undefined\n >(manager?.editedContent.value);\n\n useEffect(() => {\n if (!manager) return;\n const handler = (e: Event) =>\n setEditedContentState((e as CustomEvent<DictionaryContent>).detail);\n manager.editedContent.addEventListener('change', handler);\n return () => manager.editedContent.removeEventListener('change', handler);\n }, [manager]);\n\n const actions = useEditedContentActions();\n return { editedContent, ...actions };\n};\n\nexport const usePostEditedContentState = <S,>(\n onEventTriggered?: (data: S) => void\n) => {\n const manager = useEditorStateManager();\n useEffect(() => {\n if (!onEventTriggered || !manager) return;\n return manager.messenger.subscribe(\n `INTLAYER_EDITED_CONTENT_CHANGED/post`,\n onEventTriggered as (data: unknown) => void\n );\n }, [manager, onEventTriggered]);\n};\n\nexport const useGetEditedContentState = () => {\n const manager = useEditorStateManager();\n return () => {\n manager?.messenger.send('INTLAYER_EDITED_CONTENT_CHANGED/get');\n };\n};\n"],"mappings":";;;;;;;AA6CA,MAAa,gCAAiE;CAC5E,MAAM,UAAUA,iDAAsB;CAEtC,OAAO;EACL,wBAAwB,UACtB,SAAS,cAAc,IAAI,KAAK;EAClC,sBAAsB,SACpB,SAAS,oBAAoB,IAAI;EACnC,mBACE,SACA,UACG,SAAS,iBAAiB,SAAS,KAAK;EAC7C,mBAAmB,SAAS,OAAO,SAAS,cAC1C,SAAS,WAAW,SAAS,OAAO,SAAS,SAAS;EACxD,sBAAsB,SAAS,QAAQ,YACrC,SAAS,cAAc,SAAS,QAAQ,OAAO;EACjD,sBAAsB,SAAS,YAC7B,SAAS,cAAc,SAAS,OAAO;EACzC,uBAAuB,YAAY,SAAS,eAAe,OAAO;EAClE,+BAA+B,YAAY,SAAS,aAAa,OAAO;EACxE,0BAA0B,SAAS,gBAAgB;EACnD,wBAAwB,cAAc,YACpC,SAAS,gBAAgB,cAAc,OAAO;CAClD;AACF;AAEA,MAAa,yBAAyB;CACpC,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"EditedContentContext.cjs","names":["useEditorStateManager","useState"],"sources":["../../src/EditedContentContext.tsx"],"sourcesContent":["'use client';\n\nimport type { DictionaryContent } from '@intlayer/editor';\nimport type {\n ContentNode,\n Dictionary,\n LocalDictionaryId,\n} from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type { DictionaryContent } from '@intlayer/editor';\n\ntype EditedContentActionsContextType = {\n setEditedContentState: (editedContent: DictionaryContent) => void;\n setEditedDictionary: (dict: Dictionary) => void;\n setEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newValue: Dictionary['content']\n ) => void;\n addEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newValue: ContentNode<any>,\n keyPath?: KeyPath[],\n overwrite?: boolean\n ) => void;\n renameEditedContent: (\n localDictionaryId: LocalDictionaryId,\n newKey: KeyPath['key'],\n keyPath?: KeyPath[]\n ) => void;\n removeEditedContent: (\n localDictionaryId: LocalDictionaryId,\n keyPath: KeyPath[]\n ) => void;\n restoreEditedContent: (localDictionaryId: LocalDictionaryId) => void;\n clearEditedDictionaryContent: (localDictionaryId: LocalDictionaryId) => void;\n clearEditedContent: () => void;\n getEditedContentValue: (\n localDictionaryIdOrKey: LocalDictionaryId | Dictionary['key'] | string,\n keyPath: KeyPath[]\n ) => ContentNode | undefined;\n};\n\nexport const useEditedContentActions = (): EditedContentActionsContextType => {\n const manager = useEditorStateManager();\n\n return {\n setEditedContentState: (value: DictionaryContent) =>\n manager?.editedContent.set(value),\n setEditedDictionary: (dict: Dictionary) =>\n manager?.setEditedDictionary(dict),\n setEditedContent: (\n localId: LocalDictionaryId,\n value: Dictionary['content']\n ) => manager?.setEditedContent(localId, value),\n addEditedContent: (localId, value, keyPath, overwrite) =>\n manager?.addContent(localId, value, keyPath, overwrite),\n renameEditedContent: (localId, newKey, keyPath) =>\n manager?.renameContent(localId, newKey, keyPath),\n removeEditedContent: (localId, keyPath) =>\n manager?.removeContent(localId, keyPath),\n restoreEditedContent: (localId) => manager?.restoreContent(localId),\n clearEditedDictionaryContent: (localId) => manager?.clearContent(localId),\n clearEditedContent: () => manager?.clearAllContent(),\n getEditedContentValue: (localIdOrKey, keyPath) =>\n manager?.getContentValue(localIdOrKey, keyPath),\n };\n};\n\nexport const useEditedContent = () => {\n const manager = useEditorStateManager();\n const [editedContent, setEditedContentState] = useState<\n DictionaryContent | undefined\n >(manager?.editedContent.value);\n\n useEffect(() => {\n if (!manager) return;\n const handler = (e: Event) =>\n setEditedContentState((e as CustomEvent<DictionaryContent>).detail);\n manager.editedContent.addEventListener('change', handler);\n return () => manager.editedContent.removeEventListener('change', handler);\n }, [manager]);\n\n const actions = useEditedContentActions();\n return { editedContent, ...actions };\n};\n\nexport const usePostEditedContentState = <S,>(\n onEventTriggered?: (data: S) => void\n) => {\n const manager = useEditorStateManager();\n useEffect(() => {\n if (!onEventTriggered || !manager) return;\n return manager.messenger.subscribe(\n `INTLAYER_EDITED_CONTENT_CHANGED/post`,\n onEventTriggered as (data: unknown) => void\n );\n }, [manager, onEventTriggered]);\n};\n\nexport const useGetEditedContentState = () => {\n const manager = useEditorStateManager();\n return () => {\n manager?.messenger.send('INTLAYER_EDITED_CONTENT_CHANGED/get');\n };\n};\n"],"mappings":";;;;;;;AA6CA,MAAa,gCAAiE;CAC5E,MAAM,UAAUA,iDAAsB;CAEtC,OAAO;EACL,wBAAwB,UACtB,SAAS,cAAc,IAAI,KAAK;EAClC,sBAAsB,SACpB,SAAS,oBAAoB,IAAI;EACnC,mBACE,SACA,UACG,SAAS,iBAAiB,SAAS,KAAK;EAC7C,mBAAmB,SAAS,OAAO,SAAS,cAC1C,SAAS,WAAW,SAAS,OAAO,SAAS,SAAS;EACxD,sBAAsB,SAAS,QAAQ,YACrC,SAAS,cAAc,SAAS,QAAQ,OAAO;EACjD,sBAAsB,SAAS,YAC7B,SAAS,cAAc,SAAS,OAAO;EACzC,uBAAuB,YAAY,SAAS,eAAe,OAAO;EAClE,+BAA+B,YAAY,SAAS,aAAa,OAAO;EACxE,0BAA0B,SAAS,gBAAgB;EACnD,wBAAwB,cAAc,YACpC,SAAS,gBAAgB,cAAc,OAAO;CAClD;AACF;AAEA,MAAa,yBAAyB;CACpC,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,eAAe,6BAAyBC,gBAE7C,SAAS,cAAc,KAAK;CAE9B,2BAAgB;EACd,IAAI,CAAC,SAAS;EACd,MAAM,WAAW,MACf,sBAAuB,EAAqC,MAAM;EACpE,QAAQ,cAAc,iBAAiB,UAAU,OAAO;EACxD,aAAa,QAAQ,cAAc,oBAAoB,UAAU,OAAO;CAC1E,GAAG,CAAC,OAAO,CAAC;CAGZ,OAAO;EAAE;EAAe,GADR,wBACiB;CAAE;AACrC;AAEA,MAAa,6BACX,qBACG;CACH,MAAM,UAAUD,iDAAsB;CACtC,2BAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,SAAS;EACnC,OAAO,QAAQ,UAAU,UACvB,wCACA,gBACF;CACF,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAChC;AAEA,MAAa,iCAAiC;CAC5C,MAAM,UAAUA,iDAAsB;CACtC,aAAa;EACX,SAAS,UAAU,KAAK,qCAAqC;CAC/D;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorEnabledContext.cjs","names":["useEditorStateManager","MessageKey"],"sources":["../../src/EditorEnabledContext.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type EditorEnabledStateProps = {\n enabled: boolean;\n};\n\n/**\n * Returns the current editor-enabled state, kept in sync with the shared\n * EditorStateManager. Replaces the old EditorEnabledContext + EditorEnabledProvider.\n */\nexport const useEditorEnabled = (): EditorEnabledStateProps => {\n const manager = useEditorStateManager();\n const [enabled, setEnabled] = useState<boolean>(\n manager?.editorEnabled.value ?? false\n );\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) =>\n setEnabled((e as CustomEvent<boolean>).detail);\n manager.editorEnabled.addEventListener('change', handler);\n return () => manager.editorEnabled.removeEventListener('change', handler);\n }, [manager]);\n\n return { enabled };\n};\n\n/**\n * Subscribes to incoming \"get\" requests for editor-enabled state and calls\n * the provided callback so the caller can respond.\n * Used by the editor side to respond when the client asks for the current state.\n */\nexport const useGetEditorEnabledState = (onRequest?: () => void) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!onRequest) return;\n\n return manager?.messenger.subscribe(\n `${MessageKey.INTLAYER_EDITOR_ENABLED}/get`,\n onRequest\n );\n }, [manager, onRequest]);\n};\n\n/**\n * Returns a function that sets the editor-enabled state and broadcasts it.\n */\nexport const usePostEditorEnabledState = () => {\n const manager = useEditorStateManager();\n\n return (value: boolean) => {\n manager?.editorEnabled.set(value);\n manager?.editorEnabled.postCurrentValue();\n };\n};\n\nexport const useEditorEnabledState = () => {\n const { enabled } = useEditorEnabled();\n const manager = useEditorStateManager();\n const setter = (value: boolean) => manager?.editorEnabled.set(value);\n\n return [enabled, setter] as const;\n};\n\n/**\n * Returns a function that re-pings the client via ARE_YOU_THERE.\n * Use this as the onClick for an \"Enable Editor\" / reconnect button.\n */\nexport const useEditorPingClient = (): (() => void) => {\n const manager = useEditorStateManager();\n\n return () => manager?.pingClient();\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,yBAAkD;CAC7D,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"EditorEnabledContext.cjs","names":["useEditorStateManager","useState","MessageKey"],"sources":["../../src/EditorEnabledContext.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport { useEffect, useState } from 'react';\nimport { useEditorStateManager } from './EditorStateContext';\n\nexport type EditorEnabledStateProps = {\n enabled: boolean;\n};\n\n/**\n * Returns the current editor-enabled state, kept in sync with the shared\n * EditorStateManager. Replaces the old EditorEnabledContext + EditorEnabledProvider.\n */\nexport const useEditorEnabled = (): EditorEnabledStateProps => {\n const manager = useEditorStateManager();\n const [enabled, setEnabled] = useState<boolean>(\n manager?.editorEnabled.value ?? false\n );\n\n useEffect(() => {\n if (!manager) return;\n\n const handler = (e: Event) =>\n setEnabled((e as CustomEvent<boolean>).detail);\n manager.editorEnabled.addEventListener('change', handler);\n return () => manager.editorEnabled.removeEventListener('change', handler);\n }, [manager]);\n\n return { enabled };\n};\n\n/**\n * Subscribes to incoming \"get\" requests for editor-enabled state and calls\n * the provided callback so the caller can respond.\n * Used by the editor side to respond when the client asks for the current state.\n */\nexport const useGetEditorEnabledState = (onRequest?: () => void) => {\n const manager = useEditorStateManager();\n\n useEffect(() => {\n if (!onRequest) return;\n\n return manager?.messenger.subscribe(\n `${MessageKey.INTLAYER_EDITOR_ENABLED}/get`,\n onRequest\n );\n }, [manager, onRequest]);\n};\n\n/**\n * Returns a function that sets the editor-enabled state and broadcasts it.\n */\nexport const usePostEditorEnabledState = () => {\n const manager = useEditorStateManager();\n\n return (value: boolean) => {\n manager?.editorEnabled.set(value);\n manager?.editorEnabled.postCurrentValue();\n };\n};\n\nexport const useEditorEnabledState = () => {\n const { enabled } = useEditorEnabled();\n const manager = useEditorStateManager();\n const setter = (value: boolean) => manager?.editorEnabled.set(value);\n\n return [enabled, setter] as const;\n};\n\n/**\n * Returns a function that re-pings the client via ARE_YOU_THERE.\n * Use this as the onClick for an \"Enable Editor\" / reconnect button.\n */\nexport const useEditorPingClient = (): (() => void) => {\n const manager = useEditorStateManager();\n\n return () => manager?.pingClient();\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,yBAAkD;CAC7D,MAAM,UAAUA,iDAAsB;CACtC,MAAM,CAAC,SAAS,kBAAcC,gBAC5B,SAAS,cAAc,SAAS,KAClC;CAEA,2BAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,WAAW,MACf,WAAY,EAA2B,MAAM;EAC/C,QAAQ,cAAc,iBAAiB,UAAU,OAAO;EACxD,aAAa,QAAQ,cAAc,oBAAoB,UAAU,OAAO;CAC1E,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,EAAE,QAAQ;AACnB;;;;;;AAOA,MAAa,4BAA4B,cAA2B;CAClE,MAAM,UAAUD,iDAAsB;CAEtC,2BAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,SAAS,UAAU,UACxB,GAAGE,4BAAW,wBAAwB,OACtC,SACF;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;AACzB;;;;AAKA,MAAa,kCAAkC;CAC7C,MAAM,UAAUF,iDAAsB;CAEtC,QAAQ,UAAmB;EACzB,SAAS,cAAc,IAAI,KAAK;EAChC,SAAS,cAAc,iBAAiB;CAC1C;AACF;AAEA,MAAa,8BAA8B;CACzC,MAAM,EAAE,YAAY,iBAAiB;CACrC,MAAM,UAAUA,iDAAsB;CACtC,MAAM,UAAU,UAAmB,SAAS,cAAc,IAAI,KAAK;CAEnE,OAAO,CAAC,SAAS,MAAM;AACzB;;;;;AAMA,MAAa,4BAA0C;CACrD,MAAM,UAAUA,iDAAsB;CAEtC,aAAa,SAAS,WAAW;AACnC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorProvider.cjs","names":["EditorStateManager","EditorStateProvider"],"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: Pick<IntlayerConfig, 'editor' | 'internationalization'>;\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 useEffect(() => {\n if (!manager || !configuration || Object.keys(configuration).length === 0)\n return;\n\n manager.configuration.set(configuration);\n }, [manager, configuration]);\n\n return (\n <EditorStateProvider manager={manager}>{children}</EditorStateProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,kBAA8D,EACzE,UACA,eACA,aACA,qBACI;CACJ,MAAM
|
|
1
|
+
{"version":3,"file":"EditorProvider.cjs","names":["useRef","EditorStateManager","EditorStateProvider"],"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: Pick<IntlayerConfig, 'editor' | 'internationalization'>;\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 useEffect(() => {\n if (!manager || !configuration || Object.keys(configuration).length === 0)\n return;\n\n manager.configuration.set(configuration);\n }, [manager, configuration]);\n\n return (\n <EditorStateProvider manager={manager}>{children}</EditorStateProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,kBAA8D,EACzE,UACA,eACA,aACA,qBACI;CACJ,MAAM,iBAAaA,cAAkC,IAAI;CAEzD,IAAI,CAAC,WAAW,SAMd,WAAW,UAAU,IAAIC,oCAAmB;EAC1C,MAAM;EACN,WAAW;GANX;GACA,eAAe;EAKU;EACzB;CACF,CAAC;CAEH,MAAM,UAAU,WAAW;CAE3B,2BAAgB;EACd,6CAAuB;EACvB,6CAAuB,OAAO;EAE9B,QAAQ,MAAM;EACd,aAAa;GACX,QAAQ,KAAK;GACb,6CAAuB,IAAI;EAC7B;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,2BAAgB;EACd,IAAI,CAAC,WAAW,CAAC,iBAAiB,OAAO,KAAK,aAAa,CAAC,CAAC,WAAW,GACtE;EAEF,QAAQ,cAAc,IAAI,aAAa;CACzC,GAAG,CAAC,SAAS,aAAa,CAAC;CAE3B,OACE,2CAACC,gDAAD;EAA8B;EAAU;CAA8B;AAE1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorStateContext.cjs","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,
|
|
1
|
+
{"version":3,"file":"EditorStateContext.cjs","names":["createContext","useContext"],"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,yBAAqBA,qBAAyC,IAAI;AAExE,MAAa,uBAER,EAAE,UAAU,cACf,2CAAC,mBAAmB,UAApB;CAA6B,OAAO;CACjC;AAC0B;AAG/B,MAAa,kCACXC,kBAAW,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusDictionaryContext.cjs","names":["useEditorStateManager","NodeTypes"],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport type { CrossFrameStateAction, FileContent } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useState,\n} 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 /** Accepts a value or an updater — `setFocusedContent(prev => …)`. */\n setFocusedContent: (value: CrossFrameStateAction<FileContent | null>) => void;\n setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\ntype FocusDictionaryContextType = FocusDictionaryState & FocusDictionaryActions;\n\n// Create native React context fallback\nconst FocusDictionaryReactContext = createContext<\n FocusDictionaryContextType | undefined\n>(undefined);\n\n// Create the Provider\nexport const FocusDictionaryProvider: FC<PropsWithChildren> = ({\n children,\n}) => {\n const manager = useEditorStateManager();\n const [fallbackContent, setFallbackContent] = useState<FileContent | null>(\n null\n );\n\n const setFocusedContent = useCallback(\n (value: CrossFrameStateAction<FileContent | null>) => {\n if (manager) {\n manager.focusedContent.set(value);\n } else {\n setFallbackContent(value);\n }\n },\n [manager]\n );\n\n const setFocusedContentKeyPath = useCallback(\n (keyPath: KeyPath[]) => {\n if (manager) {\n manager.setFocusedContentKeyPath(keyPath);\n } else {\n setFallbackContent((prev) => {\n if (!prev) return null;\n const filtered = keyPath.filter(\n (key) => key.type !== NodeTypes.TRANSLATION\n );\n return { ...prev, keyPath: filtered };\n });\n }\n },\n [manager]\n );\n\n return (\n <FocusDictionaryReactContext.Provider\n value={{\n focusedContent: manager?.focusedContent.value ?? fallbackContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n }}\n >\n {children}\n </FocusDictionaryReactContext.Provider>\n );\n};\n\n// 3. Update the hook to consume the fallback context\nexport const useFocusDictionary = (): FocusDictionaryState &\n FocusDictionaryActions => {\n const manager = useEditorStateManager();\n const reactContext = useContext(FocusDictionaryReactContext);\n\n const [focusedContent, setFocusedContentState] = useState<FileContent | null>(\n manager?.focusedContent.value ?? reactContext?.focusedContent ?? null\n );\n\n useEffect(() => {\n if (!manager) {\n setFocusedContentState(reactContext?.focusedContent ?? null);\n return;\n }\n\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, reactContext?.focusedContent]);\n\n const setFocusedContent = useCallback(\n (value: CrossFrameStateAction<FileContent | null>) => {\n if (reactContext) {\n reactContext.setFocusedContent(value);\n } else if (manager) {\n manager.focusedContent.set(value);\n }\n },\n [reactContext, manager]\n );\n\n const setFocusedContentKeyPath = useCallback(\n (keyPath: KeyPath[]) => {\n if (reactContext) {\n reactContext.setFocusedContentKeyPath(keyPath);\n } else if (manager) {\n manager.setFocusedContentKeyPath(keyPath);\n }\n },\n [reactContext, manager]\n );\n\n return {\n focusedContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n };\n};\n\nexport const useFocusDictionaryActions = (): FocusDictionaryActions => {\n const { setFocusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n return { setFocusedContent, setFocusedContentKeyPath };\n};\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,
|
|
1
|
+
{"version":3,"file":"FocusDictionaryContext.cjs","names":["createContext","useEditorStateManager","useState","useCallback","NodeTypes","useContext"],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport type { CrossFrameStateAction, FileContent } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useState,\n} 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 /** Accepts a value or an updater — `setFocusedContent(prev => …)`. */\n setFocusedContent: (value: CrossFrameStateAction<FileContent | null>) => void;\n setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\ntype FocusDictionaryContextType = FocusDictionaryState & FocusDictionaryActions;\n\n// Create native React context fallback\nconst FocusDictionaryReactContext = createContext<\n FocusDictionaryContextType | undefined\n>(undefined);\n\n// Create the Provider\nexport const FocusDictionaryProvider: FC<PropsWithChildren> = ({\n children,\n}) => {\n const manager = useEditorStateManager();\n const [fallbackContent, setFallbackContent] = useState<FileContent | null>(\n null\n );\n\n const setFocusedContent = useCallback(\n (value: CrossFrameStateAction<FileContent | null>) => {\n if (manager) {\n manager.focusedContent.set(value);\n } else {\n setFallbackContent(value);\n }\n },\n [manager]\n );\n\n const setFocusedContentKeyPath = useCallback(\n (keyPath: KeyPath[]) => {\n if (manager) {\n manager.setFocusedContentKeyPath(keyPath);\n } else {\n setFallbackContent((prev) => {\n if (!prev) return null;\n const filtered = keyPath.filter(\n (key) => key.type !== NodeTypes.TRANSLATION\n );\n return { ...prev, keyPath: filtered };\n });\n }\n },\n [manager]\n );\n\n return (\n <FocusDictionaryReactContext.Provider\n value={{\n focusedContent: manager?.focusedContent.value ?? fallbackContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n }}\n >\n {children}\n </FocusDictionaryReactContext.Provider>\n );\n};\n\n// 3. Update the hook to consume the fallback context\nexport const useFocusDictionary = (): FocusDictionaryState &\n FocusDictionaryActions => {\n const manager = useEditorStateManager();\n const reactContext = useContext(FocusDictionaryReactContext);\n\n const [focusedContent, setFocusedContentState] = useState<FileContent | null>(\n manager?.focusedContent.value ?? reactContext?.focusedContent ?? null\n );\n\n useEffect(() => {\n if (!manager) {\n setFocusedContentState(reactContext?.focusedContent ?? null);\n return;\n }\n\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, reactContext?.focusedContent]);\n\n const setFocusedContent = useCallback(\n (value: CrossFrameStateAction<FileContent | null>) => {\n if (reactContext) {\n reactContext.setFocusedContent(value);\n } else if (manager) {\n manager.focusedContent.set(value);\n }\n },\n [reactContext, manager]\n );\n\n const setFocusedContentKeyPath = useCallback(\n (keyPath: KeyPath[]) => {\n if (reactContext) {\n reactContext.setFocusedContentKeyPath(keyPath);\n } else if (manager) {\n manager.setFocusedContentKeyPath(keyPath);\n }\n },\n [reactContext, manager]\n );\n\n return {\n focusedContent,\n setFocusedContent,\n setFocusedContentKeyPath,\n };\n};\n\nexport const useFocusDictionaryActions = (): FocusDictionaryActions => {\n const { setFocusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n return { setFocusedContent, setFocusedContentKeyPath };\n};\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,kCAA8BA,qBAElC,MAAS;AAGX,MAAa,2BAAkD,EAC7D,eACI;CACJ,MAAM,UAAUC,iDAAsB;CACtC,MAAM,CAAC,iBAAiB,0BAAsBC,gBAC5C,IACF;CAEA,MAAM,wBAAoBC,oBACvB,UAAqD;EACpD,IAAI,SACF,QAAQ,eAAe,IAAI,KAAK;OAEhC,mBAAmB,KAAK;CAE5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,+BAA2BA,oBAC9B,YAAuB;EACtB,IAAI,SACF,QAAQ,yBAAyB,OAAO;OAExC,oBAAoB,SAAS;GAC3B,IAAI,CAAC,MAAM,OAAO;GAClB,MAAM,WAAW,QAAQ,QACtB,QAAQ,IAAI,SAASC,yBAAU,WAClC;GACA,OAAO;IAAE,GAAG;IAAM,SAAS;GAAS;EACtC,CAAC;CAEL,GACA,CAAC,OAAO,CACV;CAEA,OACE,2CAAC,4BAA4B,UAA7B;EACE,OAAO;GACL,gBAAgB,SAAS,eAAe,SAAS;GACjD;GACA;EACF;EAEC;CACmC;AAE1C;AAGA,MAAa,2BACe;CAC1B,MAAM,UAAUH,iDAAsB;CACtC,MAAM,mBAAeI,kBAAW,2BAA2B;CAE3D,MAAM,CAAC,gBAAgB,8BAA0BH,gBAC/C,SAAS,eAAe,SAAS,cAAc,kBAAkB,IACnE;CAEA,2BAAgB;EACd,IAAI,CAAC,SAAS;GACZ,uBAAuB,cAAc,kBAAkB,IAAI;GAC3D;EACF;EAEA,MAAM,WAAW,MACf,uBAAwB,EAAsC,MAAM;EACtE,QAAQ,eAAe,iBAAiB,UAAU,OAAO;EAEzD,aAAa,QAAQ,eAAe,oBAAoB,UAAU,OAAO;CAC3E,GAAG,CAAC,SAAS,cAAc,cAAc,CAAC;CAwB1C,OAAO;EACL;EACA,uBAxBwBC,oBACvB,UAAqD;GACpD,IAAI,cACF,aAAa,kBAAkB,KAAK;QAC/B,IAAI,SACT,QAAQ,eAAe,IAAI,KAAK;EAEpC,GACA,CAAC,cAAc,OAAO,CAgBN;EAChB,8BAd+BA,oBAC9B,YAAuB;GACtB,IAAI,cACF,aAAa,yBAAyB,OAAO;QACxC,IAAI,SACT,QAAQ,yBAAyB,OAAO;EAE5C,GACA,CAAC,cAAc,OAAO,CAMC;CACzB;AACF;AAEA,MAAa,kCAA0D;CACrE,MAAM,EAAE,mBAAmB,6BAA6B,mBAAmB;CAC3E,OAAO;EAAE;EAAmB;CAAyB;AACvD"}
|
|
@@ -19,11 +19,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
}
|
|
20
20
|
return to;
|
|
21
21
|
};
|
|
22
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
22
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
|
|
23
23
|
value: mod,
|
|
24
24
|
enumerable: true
|
|
25
25
|
}) : target, mod));
|
|
26
26
|
|
|
27
27
|
//#endregion
|
|
28
|
-
|
|
29
28
|
exports.__toESM = __toESM;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCrossFrameState.cjs","names":["useEditorStateManager","CrossFrameStateManager"],"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,UAAUA,iDAAsB;CAEtC,MAAM,kBACJ,OAAO,iBAAiB,aACnB,aAAyB,IAC1B;CAEN,MAAM,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"useCrossFrameState.cjs","names":["useEditorStateManager","useState","useRef","CrossFrameStateManager"],"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,UAAUA,iDAAsB;CAEtC,MAAM,kBACJ,OAAO,iBAAiB,aACnB,aAAyB,IAC1B;CAEN,MAAM,CAAC,OAAO,qBAAiBC,gBAAY,eAAoB;CAC/D,MAAM,eAAWC,cAAU,eAAoB;CAE/C,MAAM,sBAAkBA,cAAyC,IAAI;CAErE,2BAAgB;EACd,MAAM,EAAE,OAAO,MAAM,UAAU,SAAS,WAAW,CAAC;EACpD,MAAM,eAAe,IAAIC,wCACvB,KACA,SAAS,WACT;GACE;GACA;GACA,cAAc;EAChB,CACF;EACA,gBAAgB,UAAU;EAE1B,MAAM,WAAW,MAAa;GAC5B,MAAM,WAAY,EAAqB;GACvC,SAAS,UAAU;GACnB,cAAc,QAAQ;EACxB;EACA,aAAa,iBAAiB,UAAU,OAAO;EAC/C,aAAa,MAAM;EAEnB,aAAa;GACX,aAAa,oBAAoB,UAAU,OAAO;GAClD,aAAa,KAAK;GAClB,gBAAgB,UAAU;EAC5B;CACF,GAAG;EAAC;EAAK,SAAS;EAAW,SAAS;EAAM,SAAS;CAAO,CAAC;CAE7D,MAAM,YAAyC,mBAAmB;EAChE,eAAe,SAAS;GACtB,MAAM,WACJ,OAAO,mBAAmB,aACrB,eAAkC,IAAI,IACvC;GACN,SAAS,UAAU;GACnB,gBAAgB,SAAS,IAAI,QAAQ;GACrC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,kBAAkB;EACtB,gBAAgB,SAAS,iBAAiB;CAC5C;CAEA,OAAO;EAAC;EAAO;EAAU;CAAS;AACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditorLocale.cjs","names":["useEditorStateManager"],"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,UAAUA,iDAAsB;CACtC,MAAM,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"useEditorLocale.cjs","names":["useEditorStateManager","useState"],"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,UAAUA,iDAAsB;CACtC,MAAM,CAAC,QAAQ,iBAAaC,gBAC1B,SAAS,cAAc,KACzB;CAEA,2BAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,WAAW,MAAa,UAAW,EAA0B,MAAM;EACzE,QAAQ,cAAc,iBAAiB,UAAU,OAAO;EAExD,aAAa,QAAQ,cAAc,oBAAoB,UAAU,OAAO;CAC1E,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT;AAEA,MAAa,2BAA2B;CACtC,MAAM,UAAUD,iDAAsB;CACtC,QAAQ,WAAmB,SAAS,cAAc,IAAI,MAAM;AAC9D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusUnmergedDictionary.cjs","names":["useDictionariesRecord","useEditorLocale","useFocusDictionary"],"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;CAIhC,KAAK,MAAM,cAAc,cACvB,IAAI;EAOF,
|
|
1
|
+
{"version":3,"file":"useFocusUnmergedDictionary.cjs","names":["getContentNodeByKeyPath","useDictionariesRecord","useEditorLocale","useFocusDictionary","useMemo"],"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;CAIhC,KAAK,MAAM,cAAc,cACvB,IAAI;EAOF,QANeA,8DACb,WAAW,SACX,WAAW,CAAC,GACZ,MAGO,GACP,OAAO;GAAE;GAAS,mBAAmB,WAAW;EAAQ;CAE5D,QAAQ,CAER;AAEJ;AAEA,MAAa,mCAAmC;CAC9C,MAAM,EAAE,uBAAuBC,wDAAsB;CACrD,MAAM,gBAAgBC,wCAAgB;CACtC,MAAM,EACJ,mBACA,0BACA,gBAAgB,yBACdC,kDAAmB;CAuBvB,OAAO;EACL,oBAtBqBC,qBAAkC;GACvD,IAAI,CAAC,sBAAsB,OAAO;GAClC,IAAI,CAAC,oBAAoB,OAAO;GAChC,IAAI,qBAAqB,mBAAmB,OAAO;GAEnD,MAAM,eAAe,OAAO,OAAO,kBAAkB,CAAC,CAAC,QACpD,eAAe,WAAW,QAAQ,qBAAqB,aAC1D;GAEA,MAAM,kBAAkB,+BACtB,qBAAqB,WAAW,CAAC,GACjC,cACA,aACF;GAEA,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF,GAAG;GAAC;GAAsB;GAAoB;EAAa,CAG5C;EACb;EACA;CACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intlayer/editor-react",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.1",
|
|
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": "9.3.
|
|
74
|
-
"@intlayer/core": "9.3.
|
|
75
|
-
"@intlayer/editor": "9.3.
|
|
76
|
-
"@intlayer/types": "9.3.
|
|
77
|
-
"@intlayer/unmerged-dictionaries-entry": "9.3.
|
|
73
|
+
"@intlayer/config": "9.3.1",
|
|
74
|
+
"@intlayer/core": "9.3.1",
|
|
75
|
+
"@intlayer/editor": "9.3.1",
|
|
76
|
+
"@intlayer/types": "9.3.1",
|
|
77
|
+
"@intlayer/unmerged-dictionaries-entry": "9.3.1"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@types/node": "26.2.0",
|