@payloadcms/richtext-lexical 4.0.0-internal.0b9bec1 → 4.0.0-internal.167c7cd

package/dist/exports/client/component-PHZQBOJE.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/features/upload/client/component/index.tsx"],
-  "sourcesContent": ["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Pill,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  $isRangeSelection,\n  type ElementFormatType,\n} from 'lexical'\nimport { formatAdminURL, isImage } from 'payload/shared'\nimport React, { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/schema.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.css'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [isSelected, setIsSelected] = useState(false)\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    formatAdminURL({ apiRoute: api, path: `/${relatedCollection.slug}/${value}`, serverURL }),\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  useEffect(() => {\n    return editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        const selection = $getSelection()\n\n        if ($isNodeSelection(selection)) {\n          setIsSelected(selection.has(nodeKey))\n        } else if ($isRangeSelection(selection)) {\n          const nodes = selection.getNodes()\n          setIsSelected(nodes.some((node) => node.getKey() === nodeKey))\n        } else {\n          setIsSelected(false)\n        }\n      })\n    })\n  }, [editor, nodeKey])\n\n  useEffect(() => {\n    const outerEl = uploadRef.current?.closest(`.${baseClass}`)\n\n    if (outerEl) {\n      outerEl.classList.toggle(`${baseClass}--selected`, isSelected)\n    }\n  }, [isSelected, baseClass])\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__floater`} data-theme=\"dark\">\n              <Pill className={`${baseClass}__collectionLabel`} pillStyle=\"dark\" size=\"small\">\n                {getTranslation(relatedCollection.labels.singular, i18n)}\n              </Pill>\n\n              <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n                <span className={`${baseClass}__filename`}>\n                  {data?.filename || t('general:untitled')}\n                </span>\n              </DocumentDrawerToggler>\n\n              {hasExtraFields ? (\n                <Button\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__upload-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"write\"\n                  onClick={toggleDrawer}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:editRelationship')}\n                />\n              ) : null}\n\n              <div className={`${baseClass}__divider`} />\n\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__swap-drawer-toggler`}\n                disabled={!isEditable}\n                el=\"button\"\n                icon=\"swap\"\n                onClick={() => {\n                  editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                    replace: { nodeKey },\n                  })\n                }}\n                round\n                size=\"medium\"\n                tooltip={t('fields:swapUpload')}\n              />\n\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__removeButton`}\n                disabled={!isEditable}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  removeUpload()\n                }}\n                round\n                size=\"medium\"\n                tooltip={t('fields:removeUpload')}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["useLexicalComposerContext", "useLexicalEditable", "getTranslation", "Button", "formatDrawerSlug", "Pill", "Thumbnail", "useConfig", "useEditDepth", "usePayloadAPI", "useTranslation", "$getNodeByKey", "$getSelection", "$isNodeSelection", "$isRangeSelection", "formatAdminURL", "isImage", "useCallback", "useEffect", "useId", "useReducer", "useRef", "useState", "initialParams", "UploadComponent", "props", "baseClass", "className", "data", "fields", "relationTo", "format", "nodeKey", "value", "config", "routes", "serverURL", "getEntityConfig", "useConfig", "useRef", "uploadRef", "uuid", "useEditorConfigContext", "editDepth", "useLexicalComposerContext", "editorConfig", "fieldProps", "isEditable", "i18n", "t", "useTranslation", "setIsSelected", "useState", "isSelected", "dispatchCacheBust", "state", "cacheBust", "useReducer", "relatedCollection", "collectionSlug", "componentID", "useId", "formatDrawerSlug", "extraFieldsDrawerSlug", "slug", "toggleDrawer", "useLexicalDrawer", "closeDocumentDrawer", "DocumentDrawer", "DocumentDrawerToggler", "useLexicalDocumentDrawer", "id", "setParams", "usePayloadAPI", "apiRoute", "api", "path", "thumbnailSRC", "useEffect", "editor", "editorState", "$getSelection", "$isNodeSelection", "selection", "nodes", "$isRangeSelection", "getNodes", "node", "outerEl", "removeUpload", "useCallback", "_data", "updateUpload", "hasExtraFields", "resolvedFeatureMap", "update", "$getNodeByKey", "uploadNode", "newData", "aspectRatio", "ref", "_jsx", "_jsxs", "Thumbnail", "fileSrc", "isImage", "height", "size", "width", "Pill", "pillStyle", "getTranslation", "labels", "buttonStyle", "disabled", "el", "icon", "onClick", "round", "tooltip", "INSERT_UPLOAD_WITH_DRAWER_COMMAND", "dispatchCommand", "replace", "Button", "e", "preventDefault", "onSave", "drawerSlug", "drawerTitle", "featureKey", "onExtraFieldsDrawerSubmit", "handleDrawerSubmit", "schemaPath", "schemaPathSuffix"]
-}