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

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

{"version":3,"file":"ContentSelectorWrapper.mjs","names":["ContentSelectorWrapperContent: FC<ContentSelectorWrapperProps>","ContentSelectorRenderer: FC<ContentSelectorWrapperProps>"],"sources":["../../../src/editor/ContentSelectorWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { isSameKeyPath, type NodeProps } from '@intlayer/core';\nimport {\n  MessageKey,\n  useCommunicator,\n  useEditorEnabled,\n  useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { NodeType } from '@intlayer/types';\nimport { type FC, type HTMLAttributes, useCallback, useMemo } from 'react';\nimport { useIntlayerContext } from '../client';\nimport { ContentSelector } from '../UI/ContentSelector';\n\nexport type ContentSelectorWrapperProps = NodeProps &\n  Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\nconst ContentSelectorWrapperContent: FC<ContentSelectorWrapperProps> = ({\n  children,\n  dictionaryKey,\n  keyPath,\n}) => {\n  const { focusedContent, setFocusedContent } = useFocusDictionary();\n  const { postMessage, senderId } = useCommunicator();\n\n  // Filter out translation nodes for more flexibility with the editor that can have different format\n  const filteredKeyPath = useMemo(\n    () => keyPath.filter((key) => key.type !== NodeType.Translation),\n    [keyPath]\n  );\n\n  const handleSelect = useCallback(\n    () =>\n      setFocusedContent({\n        dictionaryKey,\n        keyPath: filteredKeyPath,\n      }),\n    [dictionaryKey, filteredKeyPath]\n  );\n\n  const handleHover = useCallback(\n    () =>\n      postMessage({\n        type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n        data: {\n          dictionaryKey,\n          keyPath: filteredKeyPath,\n        },\n        senderId,\n      }),\n    [dictionaryKey, filteredKeyPath]\n  );\n\n  const handleUnhover = useCallback(\n    () =>\n      postMessage({\n        type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n        data: null,\n        senderId,\n      }),\n    [senderId]\n  );\n\n  const isSelected = useMemo(\n    () =>\n      (focusedContent?.dictionaryKey === dictionaryKey &&\n        (focusedContent?.keyPath?.length ?? 0) > 0 &&\n        isSameKeyPath(focusedContent?.keyPath ?? [], filteredKeyPath)) ??\n      false,\n    [focusedContent, filteredKeyPath, dictionaryKey]\n  );\n\n  return (\n    <ContentSelector\n      onPress={handleSelect}\n      onHover={handleHover}\n      onUnhover={handleUnhover}\n      isSelecting={isSelected}\n    >\n      {children}\n    </ContentSelector>\n  );\n};\n\nexport const ContentSelectorRenderer: FC<ContentSelectorWrapperProps> = ({\n  children,\n  ...props\n}) => {\n  const { enabled } = useEditorEnabled();\n  const { disableEditor } = useIntlayerContext();\n\n  if (enabled && !disableEditor) {\n    return (\n      <ContentSelectorWrapperContent {...props}>\n        {children}\n      </ContentSelectorWrapperContent>\n    );\n  }\n\n  return children;\n};\n"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,iCAAkE,EACtE,UACA,eACA,cACI;CACJ,MAAM,EAAE,gBAAgB,sBAAsB,oBAAoB;CAClE,MAAM,EAAE,aAAa,aAAa,iBAAiB;CAGnD,MAAM,kBAAkB,cAChB,QAAQ,QAAQ,QAAQ,IAAI,SAAS,SAAS,YAAY,EAChE,CAAC,QAAQ,CACV;AA2CD,QACE,oBAAC;EACC,SA3CiB,kBAEjB,kBAAkB;GAChB;GACA,SAAS;GACV,CAAC,EACJ,CAAC,eAAe,gBAAgB,CACjC;EAqCG,SAnCgB,kBAEhB,YAAY;GACV,MAAM,GAAG,WAAW,iCAAiC;GACrD,MAAM;IACJ;IACA,SAAS;IACV;GACD;GACD,CAAC,EACJ,CAAC,eAAe,gBAAgB,CACjC;EAyBG,WAvBkB,kBAElB,YAAY;GACV,MAAM,GAAG,WAAW,iCAAiC;GACrD,MAAM;GACN;GACD,CAAC,EACJ,CAAC,SAAS,CACX;EAgBG,aAde,eAEd,gBAAgB,kBAAkB,kBAChC,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAc,gBAAgB,WAAW,EAAE,EAAE,gBAAgB,KAC/D,OACF;GAAC;GAAgB;GAAiB;GAAc,CACjD;EASI;GACe;;AAItB,MAAaC,2BAA4D,EACvE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;AAE9C,KAAI,WAAW,CAAC,cACd,QACE,oBAAC;EAA8B,GAAI;EAChC;GAC6B;AAIpC,QAAO"}