react-intlayer/dist/esm/editor/ContentSelectorWrapper.mjs

Easily internationalize i18n your React applications with type-safe multilingual content management.

'use client';

import { useIntlayerContext } from "../client/IntlayerProvider.mjs";
import { ContentSelector } from "../UI/ContentSelector.mjs";
import { useCallback, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { isSameKeyPath } from "@intlayer/core";
import { NodeType } from "@intlayer/types";
import { MessageKey, useCommunicator, useEditorEnabled, useFocusDictionary } from "@intlayer/editor-react";

//#region src/editor/ContentSelectorWrapper.tsx
const ContentSelectorWrapperContent = ({ children, dictionaryKey, keyPath }) => {
	const { focusedContent, setFocusedContent } = useFocusDictionary();
	const { postMessage, senderId } = useCommunicator();
	const filteredKeyPath = useMemo(() => keyPath.filter((key) => key.type !== NodeType.Translation), [keyPath]);
	return /* @__PURE__ */ jsx(ContentSelector, {
		onPress: useCallback(() => setFocusedContent({
			dictionaryKey,
			keyPath: filteredKeyPath
		}), [dictionaryKey, filteredKeyPath]),
		onHover: useCallback(() => postMessage({
			type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
			data: {
				dictionaryKey,
				keyPath: filteredKeyPath
			},
			senderId
		}), [dictionaryKey, filteredKeyPath]),
		onUnhover: useCallback(() => postMessage({
			type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
			data: null,
			senderId
		}), [senderId]),
		isSelecting: useMemo(() => (focusedContent?.dictionaryKey === dictionaryKey && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], filteredKeyPath)) ?? false, [
			focusedContent,
			filteredKeyPath,
			dictionaryKey
		]),
		children
	});
};
const ContentSelectorRenderer = ({ children, ...props }) => {
	const { enabled } = useEditorEnabled();
	const { disableEditor } = useIntlayerContext();
	if (enabled && !disableEditor) return /* @__PURE__ */ jsx(ContentSelectorWrapperContent, {
		...props,
		children
	});
	return children;
};

//#endregion
export { ContentSelectorRenderer };
//# sourceMappingURL=ContentSelectorWrapper.mjs.map