@intlayer/editor-react 6.1.6 → 7.0.0-canary.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/dist/cjs/CommunicatorContext.cjs +43 -65
- package/dist/cjs/CommunicatorContext.cjs.map +1 -1
- package/dist/cjs/ConfigurationContext.cjs +26 -47
- package/dist/cjs/ConfigurationContext.cjs.map +1 -1
- package/dist/cjs/DictionariesRecordContext.cjs +48 -74
- package/dist/cjs/DictionariesRecordContext.cjs.map +1 -1
- package/dist/cjs/EditedContentContext.cjs +164 -225
- package/dist/cjs/EditedContentContext.cjs.map +1 -1
- package/dist/cjs/EditorEnabledContext.cjs +34 -59
- package/dist/cjs/EditorEnabledContext.cjs.map +1 -1
- package/dist/cjs/EditorProvider.cjs +65 -66
- package/dist/cjs/EditorProvider.cjs.map +1 -1
- package/dist/cjs/FocusDictionaryContext.cjs +51 -75
- package/dist/cjs/FocusDictionaryContext.cjs.map +1 -1
- package/dist/cjs/_virtual/rolldown_runtime.cjs +25 -0
- package/dist/cjs/index.cjs +46 -44
- package/dist/cjs/useCrossFrameMessageListener.cjs +73 -50
- package/dist/cjs/useCrossFrameMessageListener.cjs.map +1 -1
- package/dist/cjs/useCrossFrameState.cjs +106 -73
- package/dist/cjs/useCrossFrameState.cjs.map +1 -1
- package/dist/cjs/useCrossURLPathState.cjs +67 -66
- package/dist/cjs/useCrossURLPathState.cjs.map +1 -1
- package/dist/cjs/useIframeClickInterceptor.cjs +24 -47
- package/dist/cjs/useIframeClickInterceptor.cjs.map +1 -1
- package/dist/esm/CommunicatorContext.mjs +34 -32
- package/dist/esm/CommunicatorContext.mjs.map +1 -1
- package/dist/esm/ConfigurationContext.mjs +19 -23
- package/dist/esm/ConfigurationContext.mjs.map +1 -1
- package/dist/esm/DictionariesRecordContext.mjs +37 -47
- package/dist/esm/DictionariesRecordContext.mjs.map +1 -1
- package/dist/esm/EditedContentContext.mjs +150 -201
- package/dist/esm/EditedContentContext.mjs.map +1 -1
- package/dist/esm/EditorEnabledContext.mjs +22 -32
- package/dist/esm/EditorEnabledContext.mjs.map +1 -1
- package/dist/esm/EditorProvider.mjs +60 -54
- package/dist/esm/EditorProvider.mjs.map +1 -1
- package/dist/esm/FocusDictionaryContext.mjs +41 -48
- package/dist/esm/FocusDictionaryContext.mjs.map +1 -1
- package/dist/esm/index.mjs +15 -13
- package/dist/esm/useCrossFrameMessageListener.mjs +69 -25
- package/dist/esm/useCrossFrameMessageListener.mjs.map +1 -1
- package/dist/esm/useCrossFrameState.mjs +102 -47
- package/dist/esm/useCrossFrameState.mjs.map +1 -1
- package/dist/esm/useCrossURLPathState.mjs +61 -41
- package/dist/esm/useCrossURLPathState.mjs.map +1 -1
- package/dist/esm/useIframeClickInterceptor.mjs +19 -21
- package/dist/esm/useIframeClickInterceptor.mjs.map +1 -1
- package/dist/types/CommunicatorContext.d.ts +12 -8
- package/dist/types/CommunicatorContext.d.ts.map +1 -1
- package/dist/types/ConfigurationContext.d.ts +12 -7
- package/dist/types/ConfigurationContext.d.ts.map +1 -1
- package/dist/types/DictionariesRecordContext.d.ts +15 -12
- package/dist/types/DictionariesRecordContext.d.ts.map +1 -1
- package/dist/types/EditedContentContext.d.ts +33 -30
- package/dist/types/EditedContentContext.d.ts.map +1 -1
- package/dist/types/EditorEnabledContext.d.ts +14 -9
- package/dist/types/EditorEnabledContext.d.ts.map +1 -1
- package/dist/types/EditorProvider.d.ts +10 -6
- package/dist/types/EditorProvider.d.ts.map +1 -1
- package/dist/types/FocusDictionaryContext.d.ts +18 -15
- package/dist/types/FocusDictionaryContext.d.ts.map +1 -1
- package/dist/types/index.d.ts +13 -13
- package/dist/types/useCrossFrameMessageListener.d.ts +7 -2
- package/dist/types/useCrossFrameMessageListener.d.ts.map +1 -1
- package/dist/types/useCrossFrameState.d.ts +10 -6
- package/dist/types/useCrossFrameState.d.ts.map +1 -1
- package/dist/types/useCrossURLPathState.d.ts +8 -3
- package/dist/types/useCrossURLPathState.d.ts.map +1 -1
- package/dist/types/useIframeClickInterceptor.d.ts +5 -2
- package/dist/types/useIframeClickInterceptor.d.ts.map +1 -1
- package/package.json +34 -40
- package/LICENSE +0 -202
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/types/index.d.ts.map +0 -1
|
@@ -1,71 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
__export(EditorProvider_exports, {
|
|
22
|
-
EditorProvider: () => EditorProvider
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(EditorProvider_exports);
|
|
25
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
var import_react = require("react");
|
|
27
|
-
var import_CommunicatorContext = require('./CommunicatorContext.cjs');
|
|
28
|
-
var import_ConfigurationContext = require('./ConfigurationContext.cjs');
|
|
29
|
-
var import_DictionariesRecordContext = require('./DictionariesRecordContext.cjs');
|
|
30
|
-
var import_EditedContentContext = require('./EditedContentContext.cjs');
|
|
31
|
-
var import_EditorEnabledContext = require('./EditorEnabledContext.cjs');
|
|
32
|
-
var import_FocusDictionaryContext = require('./FocusDictionaryContext.cjs');
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
const require_CommunicatorContext = require('./CommunicatorContext.cjs');
|
|
6
|
+
const require_ConfigurationContext = require('./ConfigurationContext.cjs');
|
|
7
|
+
const require_DictionariesRecordContext = require('./DictionariesRecordContext.cjs');
|
|
8
|
+
const require_EditedContentContext = require('./EditedContentContext.cjs');
|
|
9
|
+
const require_EditorEnabledContext = require('./EditorEnabledContext.cjs');
|
|
10
|
+
const require_FocusDictionaryContext = require('./FocusDictionaryContext.cjs');
|
|
11
|
+
let react = require("react");
|
|
12
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
13
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
14
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
15
|
+
|
|
16
|
+
//#region src/EditorProvider.tsx
|
|
17
|
+
/**
|
|
18
|
+
* This component add all the providers needed by the editor.
|
|
19
|
+
* It is used to wrap the application, or the editor to work together.
|
|
20
|
+
*/
|
|
33
21
|
const EditorProvidersWrapper = ({ children }) => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
22
|
+
const getEditedContentState = require_EditedContentContext.useGetEditedContentState();
|
|
23
|
+
(0, react.useEffect)(() => {
|
|
24
|
+
getEditedContentState();
|
|
25
|
+
}, []);
|
|
26
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DictionariesRecordContext.DictionariesRecordProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EditedContentContext.EditedContentProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusDictionaryContext.FocusDictionaryProvider, { children }) }) });
|
|
39
27
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}) => {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
28
|
+
/**
|
|
29
|
+
* This component check if the editor is enabled to render the editor providers.
|
|
30
|
+
*/
|
|
31
|
+
const EditorEnabledCheckRenderer = ({ children, fallback }) => {
|
|
32
|
+
const getEditorEnabled = require_EditorEnabledContext.useGetEditorEnabledState();
|
|
33
|
+
const { enabled } = require_EditorEnabledContext.useEditorEnabled();
|
|
34
|
+
(0, react.useEffect)(() => {
|
|
35
|
+
if (enabled) return;
|
|
36
|
+
getEditorEnabled();
|
|
37
|
+
}, [enabled]);
|
|
38
|
+
return enabled ? children : fallback;
|
|
51
39
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
40
|
+
/**
|
|
41
|
+
* This component is used to check if the editor is wrapping the application.
|
|
42
|
+
* It avoid to send window.postMessage to the application if the editor is not wrapping the application.
|
|
43
|
+
*/
|
|
44
|
+
const IframeCheckRenderer = ({ children, fallback }) => {
|
|
45
|
+
const [isInIframe, setIsInIframe] = (0, react.useState)(false);
|
|
46
|
+
(0, react.useEffect)(() => {
|
|
47
|
+
setIsInIframe(window.self !== window.top);
|
|
48
|
+
}, []);
|
|
49
|
+
return isInIframe ? children : fallback;
|
|
61
50
|
};
|
|
62
|
-
const EditorProvider = ({
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
51
|
+
const EditorProvider = ({ children, configuration,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EditorEnabledContext.EditorEnabledProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConfigurationContext.ConfigurationProvider, {
|
|
52
|
+
configuration,
|
|
53
|
+
children: props.mode === "editor" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommunicatorContext.CommunicatorProvider, {
|
|
54
|
+
...props,
|
|
55
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditorProvidersWrapper, { children })
|
|
56
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IframeCheckRenderer, {
|
|
57
|
+
fallback: children,
|
|
58
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommunicatorContext.CommunicatorProvider, {
|
|
59
|
+
...props,
|
|
60
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditorEnabledCheckRenderer, {
|
|
61
|
+
fallback: children,
|
|
62
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditorProvidersWrapper, { children })
|
|
63
|
+
})
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
}) });
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
exports.EditorProvider = EditorProvider;
|
|
71
70
|
//# sourceMappingURL=EditorProvider.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type PropsWithChildren,\n ReactNode,\n useEffect,\n useState,\n} from 'react';\nimport {\n type CommunicatorProviderProps,\n
|
|
1
|
+
{"version":3,"file":"EditorProvider.cjs","names":["EditorProvidersWrapper: FC<PropsWithChildren>","useGetEditedContentState","DictionariesRecordProvider","EditedContentProvider","FocusDictionaryProvider","EditorEnabledCheckRenderer: FC<PropsWithChildren<FallbackProps>>","useGetEditorEnabledState","useEditorEnabled","IframeCheckRenderer: FC<PropsWithChildren<FallbackProps>>","EditorProvider: FC<PropsWithChildren<EditorProviderProps>>","EditorEnabledProvider","ConfigurationProvider","CommunicatorProvider"],"sources":["../../src/EditorProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type PropsWithChildren,\n type ReactNode,\n useEffect,\n useState,\n} from 'react';\nimport {\n CommunicatorProvider,\n type CommunicatorProviderProps,\n} from './CommunicatorContext';\nimport {\n ConfigurationProvider,\n type ConfigurationProviderProps,\n} from './ConfigurationContext';\nimport { DictionariesRecordProvider } from './DictionariesRecordContext';\nimport {\n EditedContentProvider,\n useGetEditedContentState,\n} from './EditedContentContext';\nimport {\n EditorEnabledProvider,\n useEditorEnabled,\n useGetEditorEnabledState,\n} from './EditorEnabledContext';\nimport { FocusDictionaryProvider } from './FocusDictionaryContext';\n\n/**\n * This component add all the providers needed by the editor.\n * It is used to wrap the application, or the editor to work together.\n */\nconst EditorProvidersWrapper: FC<PropsWithChildren> = ({ children }) => {\n const getEditedContentState = useGetEditedContentState();\n\n useEffect(() => {\n getEditedContentState();\n }, []);\n\n return (\n <DictionariesRecordProvider>\n <EditedContentProvider>\n <FocusDictionaryProvider>{children}</FocusDictionaryProvider>\n </EditedContentProvider>\n </DictionariesRecordProvider>\n );\n};\n\ntype FallbackProps = {\n fallback: ReactNode;\n};\n\n/**\n * This component check if the editor is enabled to render the editor providers.\n */\nconst EditorEnabledCheckRenderer: FC<PropsWithChildren<FallbackProps>> = ({\n children,\n fallback,\n}) => {\n const getEditorEnabled = useGetEditorEnabledState();\n\n const { enabled } = useEditorEnabled();\n\n useEffect(() => {\n if (enabled) return;\n\n // Check if the editor is wrapping the application\n getEditorEnabled();\n }, [enabled]);\n\n return enabled ? children : fallback;\n};\n\n/**\n * This component is used to check if the editor is wrapping the application.\n * It avoid to send window.postMessage to the application if the editor is not wrapping the application.\n */\nconst IframeCheckRenderer: FC<PropsWithChildren<FallbackProps>> = ({\n children,\n fallback,\n}) => {\n const [isInIframe, setIsInIframe] = useState(false);\n\n useEffect(() => {\n setIsInIframe(window.self !== window.top);\n }, []);\n\n return isInIframe ? children : fallback;\n};\n\nexport type EditorProviderProps = CommunicatorProviderProps &\n ConfigurationProviderProps & {\n mode: 'editor' | 'client';\n };\n\nexport const EditorProvider: FC<PropsWithChildren<EditorProviderProps>> = ({\n children,\n configuration,\n ...props\n}) => (\n <EditorEnabledProvider>\n <ConfigurationProvider configuration={configuration}>\n {props.mode === 'editor' ? (\n <CommunicatorProvider {...props}>\n <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n </CommunicatorProvider>\n ) : (\n <IframeCheckRenderer fallback={children}>\n <CommunicatorProvider {...props}>\n <EditorEnabledCheckRenderer fallback={children}>\n <EditorProvidersWrapper>{children}</EditorProvidersWrapper>\n </EditorEnabledCheckRenderer>\n </CommunicatorProvider>\n </IframeCheckRenderer>\n )}\n </ConfigurationProvider>\n </EditorEnabledProvider>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,0BAAiD,EAAE,eAAe;CACtE,MAAM,wBAAwBC,uDAA0B;AAExD,4BAAgB;AACd,yBAAuB;IACtB,EAAE,CAAC;AAEN,QACE,2CAACC,0EACC,2CAACC,gEACC,2CAACC,0DAAyB,WAAmC,GACvC,GACG;;;;;AAWjC,MAAMC,8BAAoE,EACxE,UACA,eACI;CACJ,MAAM,mBAAmBC,uDAA0B;CAEnD,MAAM,EAAE,YAAYC,+CAAkB;AAEtC,4BAAgB;AACd,MAAI,QAAS;AAGb,oBAAkB;IACjB,CAAC,QAAQ,CAAC;AAEb,QAAO,UAAU,WAAW;;;;;;AAO9B,MAAMC,uBAA6D,EACjE,UACA,eACI;CACJ,MAAM,CAAC,YAAY,qCAA0B,MAAM;AAEnD,4BAAgB;AACd,gBAAc,OAAO,SAAS,OAAO,IAAI;IACxC,EAAE,CAAC;AAEN,QAAO,aAAa,WAAW;;AAQjC,MAAaC,kBAA8D,EACzE,UACA,cACA,GAAG,YAEH,2CAACC,gEACC,2CAACC;CAAqC;WACnC,MAAM,SAAS,WACd,2CAACC;EAAqB,GAAI;YACxB,2CAAC,0BAAwB,WAAkC;GACtC,GAEvB,2CAAC;EAAoB,UAAU;YAC7B,2CAACA;GAAqB,GAAI;aACxB,2CAAC;IAA2B,UAAU;cACpC,2CAAC,0BAAwB,WAAkC;KAChC;IACR;GACH;EAEF,GACF"}
|
|
@@ -1,81 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
import_editor.MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED,
|
|
38
|
-
null
|
|
39
|
-
);
|
|
40
|
-
const setFocusedContentKeyPath = (keyPath) => {
|
|
41
|
-
setFocusedContent((prev) => {
|
|
42
|
-
if (!prev) {
|
|
43
|
-
return prev;
|
|
44
|
-
}
|
|
45
|
-
return { ...prev, keyPath };
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusDictionaryStateContext.Provider, { value: { focusedContent }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
-
FocusDictionaryActionsContext.Provider,
|
|
50
|
-
{
|
|
51
|
-
value: { setFocusedContent, setFocusedContentKeyPath },
|
|
52
|
-
children
|
|
53
|
-
}
|
|
54
|
-
) });
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
const require_useCrossFrameState = require('./useCrossFrameState.cjs');
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
10
|
+
let __intlayer_editor = require("@intlayer/editor");
|
|
11
|
+
__intlayer_editor = require_rolldown_runtime.__toESM(__intlayer_editor);
|
|
12
|
+
|
|
13
|
+
//#region src/FocusDictionaryContext.tsx
|
|
14
|
+
const FocusDictionaryStateContext = (0, react.createContext)(void 0);
|
|
15
|
+
const FocusDictionaryActionsContext = (0, react.createContext)(void 0);
|
|
16
|
+
const FocusDictionaryProvider = ({ children }) => {
|
|
17
|
+
const [focusedContent, setFocusedContent] = require_useCrossFrameState.useCrossFrameState(__intlayer_editor.MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED, null);
|
|
18
|
+
const setFocusedContentKeyPath = (keyPath) => {
|
|
19
|
+
setFocusedContent((prev) => {
|
|
20
|
+
if (!prev) return prev;
|
|
21
|
+
return {
|
|
22
|
+
...prev,
|
|
23
|
+
keyPath
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusDictionaryStateContext.Provider, {
|
|
28
|
+
value: { focusedContent },
|
|
29
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusDictionaryActionsContext.Provider, {
|
|
30
|
+
value: {
|
|
31
|
+
setFocusedContent,
|
|
32
|
+
setFocusedContentKeyPath
|
|
33
|
+
},
|
|
34
|
+
children
|
|
35
|
+
})
|
|
36
|
+
});
|
|
55
37
|
};
|
|
56
38
|
const useFocusDictionaryActions = () => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"useFocusDictionaryActions must be used within a FocusDictionaryProvider"
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
return context;
|
|
39
|
+
const context = (0, react.useContext)(FocusDictionaryActionsContext);
|
|
40
|
+
if (context === void 0) throw new Error("useFocusDictionaryActions must be used within a FocusDictionaryProvider");
|
|
41
|
+
return context;
|
|
64
42
|
};
|
|
65
43
|
const useFocusDictionary = () => {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return { ...stateContext, ...actionContext };
|
|
44
|
+
const actionContext = useFocusDictionaryActions();
|
|
45
|
+
const stateContext = (0, react.useContext)(FocusDictionaryStateContext);
|
|
46
|
+
if (stateContext === void 0) throw new Error("useFocusDictionaryState must be used within a FocusDictionaryProvider");
|
|
47
|
+
return {
|
|
48
|
+
...stateContext,
|
|
49
|
+
...actionContext
|
|
50
|
+
};
|
|
74
51
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
});
|
|
52
|
+
|
|
53
|
+
//#endregion
|
|
54
|
+
exports.FocusDictionaryProvider = FocusDictionaryProvider;
|
|
55
|
+
exports.useFocusDictionary = useFocusDictionary;
|
|
56
|
+
exports.useFocusDictionaryActions = useFocusDictionaryActions;
|
|
81
57
|
//# sourceMappingURL=FocusDictionaryContext.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"version":3,"file":"FocusDictionaryContext.cjs","names":["FocusDictionaryProvider: FC<PropsWithChildren>","useCrossFrameState","MessageKey"],"sources":["../../src/FocusDictionaryContext.tsx"],"sourcesContent":["'use client';\n\nimport { MessageKey } from '@intlayer/editor';\nimport type { KeyPath } from '@intlayer/types';\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n} from 'react';\nimport { useCrossFrameState } from './useCrossFrameState';\n\nexport type FileContent = {\n dictionaryKey: string;\n dictionaryLocalId?: string;\n keyPath?: KeyPath[];\n};\n\ntype FocusDictionaryState = {\n focusedContent: FileContent | null;\n};\n\ntype FocusDictionaryActions = {\n setFocusedContent: Dispatch<SetStateAction<FileContent | null>>;\n setFocusedContentKeyPath: (keyPath: KeyPath[]) => void;\n};\n\nconst FocusDictionaryStateContext = createContext<\n FocusDictionaryState | undefined\n>(undefined);\nconst FocusDictionaryActionsContext = createContext<\n FocusDictionaryActions | undefined\n>(undefined);\n\nexport const FocusDictionaryProvider: FC<PropsWithChildren> = ({\n children,\n}) => {\n const [focusedContent, setFocusedContent] =\n useCrossFrameState<FileContent | null>(\n MessageKey.INTLAYER_FOCUSED_CONTENT_CHANGED,\n null\n );\n\n const setFocusedContentKeyPath = (keyPath: KeyPath[]) => {\n setFocusedContent((prev) => {\n if (!prev) {\n return prev; // nothing to update if there's no focused content\n }\n return { ...prev, keyPath };\n });\n };\n\n return (\n <FocusDictionaryStateContext.Provider value={{ focusedContent }}>\n <FocusDictionaryActionsContext.Provider\n value={{ setFocusedContent, setFocusedContentKeyPath }}\n >\n {children}\n </FocusDictionaryActionsContext.Provider>\n </FocusDictionaryStateContext.Provider>\n );\n};\n\nexport const useFocusDictionaryActions = () => {\n const context = useContext(FocusDictionaryActionsContext);\n if (context === undefined) {\n throw new Error(\n 'useFocusDictionaryActions must be used within a FocusDictionaryProvider'\n );\n }\n return context;\n};\n\nexport const useFocusDictionary = () => {\n const actionContext = useFocusDictionaryActions();\n const stateContext = useContext(FocusDictionaryStateContext);\n\n if (stateContext === undefined) {\n throw new Error(\n 'useFocusDictionaryState must be used within a FocusDictionaryProvider'\n );\n }\n\n return { ...stateContext, ...actionContext };\n};\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAM,uDAEJ,OAAU;AACZ,MAAM,yDAEJ,OAAU;AAEZ,MAAaA,2BAAkD,EAC7D,eACI;CACJ,MAAM,CAAC,gBAAgB,qBACrBC,8CACEC,6BAAW,kCACX,KACD;CAEH,MAAM,4BAA4B,YAAuB;AACvD,qBAAmB,SAAS;AAC1B,OAAI,CAAC,KACH,QAAO;AAET,UAAO;IAAE,GAAG;IAAM;IAAS;IAC3B;;AAGJ,QACE,2CAAC,4BAA4B;EAAS,OAAO,EAAE,gBAAgB;YAC7D,2CAAC,8BAA8B;GAC7B,OAAO;IAAE;IAAmB;IAA0B;GAErD;IACsC;GACJ;;AAI3C,MAAa,kCAAkC;CAC7C,MAAM,gCAAqB,8BAA8B;AACzD,KAAI,YAAY,OACd,OAAM,IAAI,MACR,0EACD;AAEH,QAAO;;AAGT,MAAa,2BAA2B;CACtC,MAAM,gBAAgB,2BAA2B;CACjD,MAAM,qCAA0B,4BAA4B;AAE5D,KAAI,iBAAiB,OACnB,OAAM,IAAI,MACR,wEACD;AAGH,QAAO;EAAE,GAAG;EAAc,GAAG;EAAe"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
//#region rolldown:runtime
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
+
key = keys[i];
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
+
get: ((k) => from[k]).bind(null, key),
|
|
13
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
value: mod,
|
|
20
|
+
enumerable: true
|
|
21
|
+
}) : target, mod));
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
|
|
25
|
+
exports.__toESM = __toESM;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,45 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
1
|
+
const require_CommunicatorContext = require('./CommunicatorContext.cjs');
|
|
2
|
+
const require_useCrossFrameMessageListener = require('./useCrossFrameMessageListener.cjs');
|
|
3
|
+
const require_useCrossFrameState = require('./useCrossFrameState.cjs');
|
|
4
|
+
const require_ConfigurationContext = require('./ConfigurationContext.cjs');
|
|
5
|
+
const require_DictionariesRecordContext = require('./DictionariesRecordContext.cjs');
|
|
6
|
+
const require_EditedContentContext = require('./EditedContentContext.cjs');
|
|
7
|
+
const require_EditorEnabledContext = require('./EditorEnabledContext.cjs');
|
|
8
|
+
const require_FocusDictionaryContext = require('./FocusDictionaryContext.cjs');
|
|
9
|
+
const require_EditorProvider = require('./EditorProvider.cjs');
|
|
10
|
+
const require_useCrossURLPathState = require('./useCrossURLPathState.cjs');
|
|
11
|
+
const require_useIframeClickInterceptor = require('./useIframeClickInterceptor.cjs');
|
|
12
|
+
|
|
13
|
+
exports.CommunicatorProvider = require_CommunicatorContext.CommunicatorProvider;
|
|
14
|
+
exports.ConfigurationProvider = require_ConfigurationContext.ConfigurationProvider;
|
|
15
|
+
exports.DictionariesRecordProvider = require_DictionariesRecordContext.DictionariesRecordProvider;
|
|
16
|
+
exports.EditedContentProvider = require_EditedContentContext.EditedContentProvider;
|
|
17
|
+
exports.EditorEnabledProvider = require_EditorEnabledContext.EditorEnabledProvider;
|
|
18
|
+
exports.EditorProvider = require_EditorProvider.EditorProvider;
|
|
19
|
+
exports.FocusDictionaryProvider = require_FocusDictionaryContext.FocusDictionaryProvider;
|
|
20
|
+
exports.useCommunicator = require_CommunicatorContext.useCommunicator;
|
|
21
|
+
exports.useConfiguration = require_ConfigurationContext.useConfiguration;
|
|
22
|
+
exports.useConfigurationState = require_ConfigurationContext.useConfigurationState;
|
|
23
|
+
exports.useCrossFrameMessageListener = require_useCrossFrameMessageListener.useCrossFrameMessageListener;
|
|
24
|
+
exports.useCrossFrameState = require_useCrossFrameState.useCrossFrameState;
|
|
25
|
+
exports.useCrossURLPathSetter = require_useCrossURLPathState.useCrossURLPathSetter;
|
|
26
|
+
exports.useCrossURLPathState = require_useCrossURLPathState.useCrossURLPathState;
|
|
27
|
+
exports.useDictionariesRecord = require_DictionariesRecordContext.useDictionariesRecord;
|
|
28
|
+
exports.useDictionariesRecordActions = require_DictionariesRecordContext.useDictionariesRecordActions;
|
|
29
|
+
exports.useEditedContent = require_EditedContentContext.useEditedContent;
|
|
30
|
+
exports.useEditedContentActions = require_EditedContentContext.useEditedContentActions;
|
|
31
|
+
exports.useEditorEnabled = require_EditorEnabledContext.useEditorEnabled;
|
|
32
|
+
exports.useEditorEnabledState = require_EditorEnabledContext.useEditorEnabledState;
|
|
33
|
+
exports.useFocusDictionary = require_FocusDictionaryContext.useFocusDictionary;
|
|
34
|
+
exports.useFocusDictionaryActions = require_FocusDictionaryContext.useFocusDictionaryActions;
|
|
35
|
+
exports.useGetEditedContentState = require_EditedContentContext.useGetEditedContentState;
|
|
36
|
+
exports.useGetEditorEnabledState = require_EditorEnabledContext.useGetEditorEnabledState;
|
|
37
|
+
exports.useIframeClickInterceptor = require_useIframeClickInterceptor.useIframeClickInterceptor;
|
|
38
|
+
exports.useIframeClickMerger = require_useIframeClickInterceptor.useIframeClickMerger;
|
|
39
|
+
exports.usePostEditedContentState = require_EditedContentContext.usePostEditedContentState;
|
|
40
|
+
exports.usePostEditorEnabledState = require_EditorEnabledContext.usePostEditorEnabledState;
|
|
41
|
+
var __intlayer_editor = require("@intlayer/editor");
|
|
42
|
+
Object.keys(__intlayer_editor).forEach(function (k) {
|
|
43
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () { return __intlayer_editor[k]; }
|
|
46
|
+
});
|
|
44
47
|
});
|
|
45
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,53 +1,76 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
5
|
+
const require_CommunicatorContext = require('./CommunicatorContext.cjs');
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
8
|
+
let __intlayer_editor = require("@intlayer/editor");
|
|
9
|
+
__intlayer_editor = require_rolldown_runtime.__toESM(__intlayer_editor);
|
|
10
|
+
|
|
11
|
+
//#region src/useCrossFrameMessageListener.tsx
|
|
12
|
+
/**
|
|
13
|
+
* useCrossFrameMessageListener
|
|
14
|
+
*
|
|
15
|
+
* This React hook listens for messages sent via the `postMessage` API and triggers a callback
|
|
16
|
+
* whenever a message of the specified type (`key`) is received. It is useful for synchronizing
|
|
17
|
+
* state or events across different windows, iframes, or contexts.
|
|
18
|
+
*
|
|
19
|
+
* @template S - The type of the data payload in the message.
|
|
20
|
+
* @param key - A unique identifier for the message type to listen for.
|
|
21
|
+
* @param [onEventTriggered] - A callback function triggered when a message
|
|
22
|
+
* @param [revalidator] - A function that re-suscribes the listener. Could be usefull if onEventTriggered depend of some state
|
|
23
|
+
* with the specified key is received. The callback receives the message data as its argument.
|
|
24
|
+
*
|
|
25
|
+
* @returns {{ postMessage: (data: S) => void }} An object containing a `postMessage` function
|
|
26
|
+
* that allows broadcasting messages with the specified key and data.
|
|
27
|
+
*/
|
|
28
28
|
const useCrossFrameMessageListener = (key, onEventTriggered, revalidator) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
29
|
+
const { allowedOrigins, postMessage, senderId } = require_CommunicatorContext.useCommunicator();
|
|
30
|
+
(0, react.useEffect)(() => {
|
|
31
|
+
if (onEventTriggered) {
|
|
32
|
+
/**
|
|
33
|
+
* Message handler to process incoming messages.
|
|
34
|
+
*
|
|
35
|
+
* - **Message Filtering:** Ensures only messages with the specified `key` are processed.
|
|
36
|
+
* - **Origin Validation:** Checks that the origin of the message is within the allowed origins.
|
|
37
|
+
*
|
|
38
|
+
* @param {MessageEvent<{ type: string; data: S }>} event - The incoming message event object.
|
|
39
|
+
*/
|
|
40
|
+
const handleMessage = (event) => {
|
|
41
|
+
const { type, data, senderId: msgSenderId } = event.data;
|
|
42
|
+
if (type !== key) return;
|
|
43
|
+
if (msgSenderId === senderId) return;
|
|
44
|
+
if (typeof allowedOrigins === "undefined" || allowedOrigins?.some((url) => (0, __intlayer_editor.compareUrls)(url, event.origin)) || allowedOrigins?.includes("*")) onEventTriggered(data);
|
|
45
|
+
};
|
|
46
|
+
window.addEventListener("message", handleMessage);
|
|
47
|
+
return () => window.removeEventListener("message", handleMessage);
|
|
48
|
+
}
|
|
49
|
+
}, [
|
|
50
|
+
allowedOrigins,
|
|
51
|
+
postMessage,
|
|
52
|
+
senderId,
|
|
53
|
+
revalidator
|
|
54
|
+
]);
|
|
55
|
+
/**
|
|
56
|
+
* A wrapper function around the `postMessage` function to broadcast messages efficiently.
|
|
57
|
+
*
|
|
58
|
+
* - **Encapsulation:** Ensures the `postMessage` function is scoped to the provided key.
|
|
59
|
+
* - **Ease of Use:** Simplifies broadcasting messages with consistent type and format.
|
|
60
|
+
*
|
|
61
|
+
* @param {S} data - The data payload to include in the message.
|
|
62
|
+
* @returns {void}
|
|
63
|
+
*/
|
|
64
|
+
const postMessageWrapper = (data) => {
|
|
65
|
+
postMessage({
|
|
66
|
+
type: key,
|
|
67
|
+
data,
|
|
68
|
+
senderId
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
return postMessageWrapper;
|
|
48
72
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
});
|
|
73
|
+
|
|
74
|
+
//#endregion
|
|
75
|
+
exports.useCrossFrameMessageListener = useCrossFrameMessageListener;
|
|
53
76
|
//# sourceMappingURL=useCrossFrameMessageListener.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { type MessageKey
|
|
1
|
+
{"version":3,"file":"useCrossFrameMessageListener.cjs","names":["useCommunicator","postMessageWrapper: (data?: S) => void"],"sources":["../../src/useCrossFrameMessageListener.tsx"],"sourcesContent":["'use client';\n\nimport { compareUrls, type MessageKey } from '@intlayer/editor';\nimport { useEffect } from 'react';\nimport { useCommunicator } from './CommunicatorContext';\n\n/**\n * useCrossFrameMessageListener\n *\n * This React hook listens for messages sent via the `postMessage` API and triggers a callback\n * whenever a message of the specified type (`key`) is received. It is useful for synchronizing\n * state or events across different windows, iframes, or contexts.\n *\n * @template S - The type of the data payload in the message.\n * @param key - A unique identifier for the message type to listen for.\n * @param [onEventTriggered] - A callback function triggered when a message\n * @param [revalidator] - A function that re-suscribes the listener. Could be usefull if onEventTriggered depend of some state\n * with the specified key is received. The callback receives the message data as its argument.\n *\n * @returns {{ postMessage: (data: S) => void }} An object containing a `postMessage` function\n * that allows broadcasting messages with the specified key and data.\n */\nexport const useCrossFrameMessageListener = <S,>(\n key: `${MessageKey}` | `${MessageKey}/post` | `${MessageKey}/get`,\n onEventTriggered?: (data: S) => void,\n revalidator?: any\n) => {\n const { allowedOrigins, postMessage, senderId } = useCommunicator();\n\n useEffect(() => {\n if (onEventTriggered) {\n /**\n * Message handler to process incoming messages.\n *\n * - **Message Filtering:** Ensures only messages with the specified `key` are processed.\n * - **Origin Validation:** Checks that the origin of the message is within the allowed origins.\n *\n * @param {MessageEvent<{ type: string; data: S }>} event - The incoming message event object.\n */\n const handleMessage = (\n event: MessageEvent<{ type: string; data: S; senderId: string }>\n ) => {\n const { type, data, senderId: msgSenderId } = event.data;\n\n // Ignore messages that do not match the current key\n if (type !== key) return;\n\n // Ignore messages from myself\n if (msgSenderId === senderId) return;\n\n // Check if the message origin is allowed\n if (\n typeof allowedOrigins === 'undefined' ||\n allowedOrigins?.some((url) => compareUrls(url, event.origin)) ||\n allowedOrigins?.includes('*')\n ) {\n // Update the local state with the received data\n onEventTriggered(data);\n }\n };\n\n window.addEventListener('message', handleMessage);\n\n // Clean up the event listener on unmount\n return () => window.removeEventListener('message', handleMessage);\n }\n }, [allowedOrigins, postMessage, senderId, revalidator]);\n\n /**\n * A wrapper function around the `postMessage` function to broadcast messages efficiently.\n *\n * - **Encapsulation:** Ensures the `postMessage` function is scoped to the provided key.\n * - **Ease of Use:** Simplifies broadcasting messages with consistent type and format.\n *\n * @param {S} data - The data payload to include in the message.\n * @returns {void}\n */\n const postMessageWrapper: (data?: S) => void = (data) => {\n postMessage({ type: key, data, senderId });\n };\n\n return postMessageWrapper;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,gCACX,KACA,kBACA,gBACG;CACH,MAAM,EAAE,gBAAgB,aAAa,aAAaA,6CAAiB;AAEnE,4BAAgB;AACd,MAAI,kBAAkB;;;;;;;;;GASpB,MAAM,iBACJ,UACG;IACH,MAAM,EAAE,MAAM,MAAM,UAAU,gBAAgB,MAAM;AAGpD,QAAI,SAAS,IAAK;AAGlB,QAAI,gBAAgB,SAAU;AAG9B,QACE,OAAO,mBAAmB,eAC1B,gBAAgB,MAAM,2CAAoB,KAAK,MAAM,OAAO,CAAC,IAC7D,gBAAgB,SAAS,IAAI,CAG7B,kBAAiB,KAAK;;AAI1B,UAAO,iBAAiB,WAAW,cAAc;AAGjD,gBAAa,OAAO,oBAAoB,WAAW,cAAc;;IAElE;EAAC;EAAgB;EAAa;EAAU;EAAY,CAAC;;;;;;;;;;CAWxD,MAAMC,sBAA0C,SAAS;AACvD,cAAY;GAAE,MAAM;GAAK;GAAM;GAAU,CAAC;;AAG5C,QAAO"}
|