diff --git a/docs/cloud/projects.mdx b/docs/cloud/projects.mdx index 491c762272..2f4bb4ff3a 100644 --- a/docs/cloud/projects.mdx +++ b/docs/cloud/projects.mdx @@ -98,7 +98,7 @@ From there, you are ready to make updates to your project. When you are ready to Projects generated from a template will come pre-configured with the official Cloud Plugin, but if you are using your own repository you will need to add this into your project. To do so, add the plugin to your Payload Config: -`yarn add @payloadcms/plugin-cloud` +`yarn add @payloadcms/payload-cloud` ```js import { payloadCloudPlugin } from '@payloadcms/payload-cloud' @@ -115,6 +115,11 @@ export default buildConfig({ over Payload Cloud's email service. + + Good to know: the Payload Cloud Plugin was previously named `@payloadcms/plugin-cloud`. If you are + using this plugin, you should update to the new package name. + + #### **Optional configuration** If you wish to opt-out of any Payload cloud features, the plugin also accepts options to do so. diff --git a/package.json b/package.json index dfe608f1fb..92e961b12d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "payload-monorepo", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "private": true, "type": "module", "scripts": { diff --git a/packages/create-payload-app/package.json b/packages/create-payload-app/package.json index 826b10716a..f00db9117a 100644 --- a/packages/create-payload-app/package.json +++ b/packages/create-payload-app/package.json @@ -1,6 +1,6 @@ { "name": "create-payload-app", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/db-mongodb/package.json b/packages/db-mongodb/package.json index 9ad00b0dbf..6c91da5e3e 100644 --- a/packages/db-mongodb/package.json +++ b/packages/db-mongodb/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-mongodb", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The officially supported MongoDB database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/db-postgres/package.json b/packages/db-postgres/package.json index 6169108525..170a6eb51a 100644 --- a/packages/db-postgres/package.json +++ b/packages/db-postgres/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-postgres", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The officially supported Postgres database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/db-sqlite/package.json b/packages/db-sqlite/package.json index cd7099a8d6..cd2e8aebad 100644 --- a/packages/db-sqlite/package.json +++ b/packages/db-sqlite/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-sqlite", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The officially supported SQLite database adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/db-vercel-postgres/package.json b/packages/db-vercel-postgres/package.json index 003861a36e..954dc56023 100644 --- a/packages/db-vercel-postgres/package.json +++ b/packages/db-vercel-postgres/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/db-vercel-postgres", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Vercel Postgres adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/drizzle/package.json b/packages/drizzle/package.json index d40a16c90d..61f4e76d29 100644 --- a/packages/drizzle/package.json +++ b/packages/drizzle/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/drizzle", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "A library of shared functions used by different payload database adapters", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/email-nodemailer/package.json b/packages/email-nodemailer/package.json index a9d6fb3f21..0aafef4098 100644 --- a/packages/email-nodemailer/package.json +++ b/packages/email-nodemailer/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/email-nodemailer", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Payload Nodemailer Email Adapter", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/email-resend/package.json b/packages/email-resend/package.json index ea07cd06ef..4350f800dd 100644 --- a/packages/email-resend/package.json +++ b/packages/email-resend/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/email-resend", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Payload Resend Email Adapter", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/graphql/package.json b/packages/graphql/package.json index efa5b8992e..cd578e6f7e 100644 --- a/packages/graphql/package.json +++ b/packages/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/graphql", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/live-preview-react/package.json b/packages/live-preview-react/package.json index d1027822e3..6b8d09ae8f 100644 --- a/packages/live-preview-react/package.json +++ b/packages/live-preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview-react", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official React SDK for Payload Live Preview", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/live-preview-vue/package.json b/packages/live-preview-vue/package.json index bec89e5cf1..e2d1234ac0 100644 --- a/packages/live-preview-vue/package.json +++ b/packages/live-preview-vue/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview-vue", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official Vue SDK for Payload Live Preview", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/live-preview/package.json b/packages/live-preview/package.json index c2b4ded2b1..a1abddcb2a 100644 --- a/packages/live-preview/package.json +++ b/packages/live-preview/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/live-preview", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official live preview JavaScript SDK for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/next/package.json b/packages/next/package.json index 754a0e96b1..306e7775bf 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/next", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "homepage": "https://payloadcms.com", "repository": { "type": "git", diff --git a/packages/payload-cloud/package.json b/packages/payload-cloud/package.json index d0804cabef..3bd7ac280c 100644 --- a/packages/payload-cloud/package.json +++ b/packages/payload-cloud/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/payload-cloud", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official Payload Cloud plugin", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/payload/package.json b/packages/payload/package.json index ca768dcee2..45f8b13932 100644 --- a/packages/payload/package.json +++ b/packages/payload/package.json @@ -1,6 +1,6 @@ { "name": "payload", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Node, React, Headless CMS and Application Framework built on Next.js", "keywords": [ "admin panel", diff --git a/packages/plugin-cloud-storage/package.json b/packages/plugin-cloud-storage/package.json index 4191ff4494..19d7ed58eb 100644 --- a/packages/plugin-cloud-storage/package.json +++ b/packages/plugin-cloud-storage/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-cloud-storage", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official cloud storage plugin for Payload CMS", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/plugin-form-builder/package.json b/packages/plugin-form-builder/package.json index f6de0eb2be..a4eead795c 100644 --- a/packages/plugin-form-builder/package.json +++ b/packages/plugin-form-builder/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-form-builder", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Form builder plugin for Payload CMS", "keywords": [ "payload", diff --git a/packages/plugin-nested-docs/package.json b/packages/plugin-nested-docs/package.json index e9ac70ea31..81f6eb3bd1 100644 --- a/packages/plugin-nested-docs/package.json +++ b/packages/plugin-nested-docs/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-nested-docs", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The official Nested Docs plugin for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/plugin-redirects/package.json b/packages/plugin-redirects/package.json index 4b852565d6..bbca25a26d 100644 --- a/packages/plugin-redirects/package.json +++ b/packages/plugin-redirects/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-redirects", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Redirects plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-search/package.json b/packages/plugin-search/package.json index f01878eb90..2b5cdd3ae1 100644 --- a/packages/plugin-search/package.json +++ b/packages/plugin-search/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-search", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Search plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-sentry/package.json b/packages/plugin-sentry/package.json index c1e30cd754..92ce2ee698 100644 --- a/packages/plugin-sentry/package.json +++ b/packages/plugin-sentry/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-sentry", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Sentry plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-seo/package.json b/packages/plugin-seo/package.json index 6c2d6c3db5..152c11d3e1 100644 --- a/packages/plugin-seo/package.json +++ b/packages/plugin-seo/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-seo", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "SEO plugin for Payload", "keywords": [ "payload", diff --git a/packages/plugin-stripe/package.json b/packages/plugin-stripe/package.json index eb75cf5a53..2efc412574 100644 --- a/packages/plugin-stripe/package.json +++ b/packages/plugin-stripe/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/plugin-stripe", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "Stripe plugin for Payload", "keywords": [ "payload", diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json index 49efafa8eb..9730dbc2d0 100644 --- a/packages/richtext-lexical/package.json +++ b/packages/richtext-lexical/package.json @@ -1,6 +1,6 @@ { "name": "@payloadcms/richtext-lexical", - "version": "3.0.0-beta.118", + "version": "3.0.0-beta.119", "description": "The officially supported Lexical richtext adapter for Payload", "homepage": "https://payloadcms.com", "repository": { diff --git a/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx b/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx index cd4b84923f..a3b62216b0 100644 --- a/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx @@ -24,6 +24,7 @@ import { COMMAND_PRIORITY_EDITOR, type RangeSelection, } from 'lexical' +import { useLexicalDrawer } from 'packages/richtext-lexical/src/utilities/fieldsDrawer/useLexicalDrawer.js' import React, { useEffect, useState } from 'react' import type { PluginComponent } from '../../../typesClient.js' @@ -44,7 +45,6 @@ export type InsertBlockPayload = BlockFieldsOptionalID export const BlocksPlugin: PluginComponent = () => { const [editor] = useLexicalComposerContext() - const { closeModal, toggleModal } = useModal() const [blockFields, setBlockFields] = useState(null) const [blockType, setBlockType] = useState('' as any) const [targetNodeKey, setTargetNodeKey] = useState(null) @@ -58,6 +58,8 @@ export const BlocksPlugin: PluginComponent = () => { depth: editDepth, }) + const { toggleDrawer } = useLexicalDrawer(drawerSlug) + const { field: { richTextComponentMap }, } = useEditorConfigContext() @@ -135,7 +137,7 @@ export const BlocksPlugin: PluginComponent = () => { setBlockType(fields?.blockType ?? ('' as any)) if (nodeKey) { - toggleModal(drawerSlug) + toggleDrawer() return true } @@ -150,14 +152,14 @@ export const BlocksPlugin: PluginComponent = () => { if (rangeSelection) { //setLastSelection(rangeSelection) - toggleModal(drawerSlug) + toggleDrawer() } return true }, COMMAND_PRIORITY_EDITOR, ), ) - }, [editor, targetNodeKey, toggleModal, drawerSlug]) + }, [editor, targetNodeKey, toggleDrawer]) if (!blockFields) { return null @@ -192,7 +194,6 @@ export const BlocksPlugin: PluginComponent = () => { featureKey="blocks" fieldMapOverride={clientBlock?.fields} handleDrawerSubmit={(_fields, data) => { - closeModal(drawerSlug) if (!data) { return } diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx index fd96b56c36..d61d2b9dbe 100644 --- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx +++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx @@ -16,6 +16,7 @@ import { INSERT_TABLE_COMMAND, TableNode } from '@lexical/table' import { mergeRegister } from '@lexical/utils' import { formatDrawerSlug, useEditDepth, useModal } from '@payloadcms/ui' import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical' +import { useLexicalDrawer } from 'packages/richtext-lexical/src/utilities/fieldsDrawer/useLexicalDrawer.js' import { createContext, useContext, useEffect, useMemo, useState } from 'react' import * as React from 'react' @@ -83,7 +84,6 @@ export function TableContext({ children }: { children: JSX.Element }) { export const TablePlugin: PluginComponent = () => { const [editor] = useLexicalComposerContext() const cellContext = useContext(CellContext) - const { closeModal, toggleModal } = useModal() const editDepth = useEditDepth() const { uuid } = useEditorConfigContext() @@ -91,6 +91,7 @@ export const TablePlugin: PluginComponent = () => { slug: 'lexical-table-create-' + uuid, depth: editDepth, }) + const { toggleDrawer } = useLexicalDrawer(drawerSlug) useEffect(() => { if (!editor.hasNodes([TableNode])) { @@ -111,14 +112,14 @@ export const TablePlugin: PluginComponent = () => { }) if (rangeSelection) { - toggleModal(drawerSlug) + toggleDrawer() } return true }, COMMAND_PRIORITY_EDITOR, ), ) - }, [cellContext, drawerSlug, editor, toggleModal]) + }, [cellContext, editor, toggleDrawer]) return ( @@ -127,8 +128,6 @@ export const TablePlugin: PluginComponent = () => { drawerTitle="Create Table" featureKey="experimental_table" handleDrawerSubmit={(_fields, data) => { - closeModal(drawerSlug) - if (!data.columns || !data.rows) { return } diff --git a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx index b218bc77cb..f3a686a2e9 100644 --- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx +++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx @@ -33,6 +33,7 @@ import { useEditorConfigContext } from '../../../../../../lexical/config/client/ import { getSelectedNode } from '../../../../../../lexical/utils/getSelectedNode.js' import { setFloatingElemPositionForLinkEditor } from '../../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js' import { FieldsDrawer } from '../../../../../../utilities/fieldsDrawer/Drawer.js' +import { useLexicalDrawer } from '../../../../../../utilities/fieldsDrawer/useLexicalDrawer.js' import { $isAutoLinkNode } from '../../../../nodes/AutoLinkNode.js' import { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../../nodes/LinkNode.js' import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js' @@ -54,7 +55,6 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R ({ id?: string; text: string } & LinkFields) | undefined >() - const { closeModal, toggleModal } = useModal() const editDepth = useEditDepth() const [isLink, setIsLink] = useState(false) const [selectedNodes, setSelectedNodes] = useState([]) @@ -66,6 +66,8 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R depth: editDepth, }) + const { toggleDrawer } = useLexicalDrawer(drawerSlug) + const setNotLink = useCallback(() => { setIsLink(false) if (editorRef && editorRef.current) { @@ -204,14 +206,14 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R // Now, open the modal $updateLinkEditor() - toggleModal(drawerSlug) + toggleDrawer() return true }, COMMAND_PRIORITY_LOW, ), ) - }, [editor, $updateLinkEditor, toggleModal, drawerSlug]) + }, [editor, $updateLinkEditor, toggleDrawer, drawerSlug]) useEffect(() => { const scrollerElem = anchorElem.parentElement @@ -292,7 +294,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R aria-label="Edit link" className="link-edit" onClick={() => { - toggleModal(drawerSlug) + toggleDrawer() }} onMouseDown={(event) => { event.preventDefault() @@ -329,8 +331,6 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R drawerTitle={t('fields:editLink')} featureKey="link" handleDrawerSubmit={(fields: FormState, data: Data) => { - closeModal(drawerSlug) - const newLinkPayload = data as { text: string } & LinkFields const bareLinkFields: LinkFields = { diff --git a/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx b/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx index 9fef40dba9..bb8d294e7e 100644 --- a/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx +++ b/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx @@ -5,7 +5,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js' import { mergeRegister } from '@lexical/utils' import { getTranslation } from '@payloadcms/translations' -import { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui' +import { Button, useConfig, usePayloadAPI, useTranslation } from '@payloadcms/ui' import { $getNodeByKey, $getSelection, @@ -20,6 +20,7 @@ import React, { useCallback, useEffect, useReducer, useRef, useState } from 'rea import type { RelationshipData } from '../../server/nodes/RelationshipNode.js' import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js' +import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js' import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js' import { $isRelationshipNode } from '../nodes/RelationshipNode.js' import './index.scss' @@ -73,7 +74,7 @@ const Component: React.FC = (props) => { { initialParams }, ) - const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({ + const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({ id: value, collectionSlug: relatedCollection.slug, }) @@ -91,10 +92,10 @@ const Component: React.FC = (props) => { cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed }) - closeDrawer() + closeDocumentDrawer() dispatchCacheBust() }, - [cacheBust, setParams, closeDrawer], + [cacheBust, setParams, closeDocumentDrawer], ) const $onDelete = useCallback( @@ -172,7 +173,7 @@ const Component: React.FC = (props) => { buttonStyle="icon-label" className={`${baseClass}__swapButton`} disabled={field?.admin?.readOnly} - el="div" + el="button" icon="swap" onClick={() => { if (nodeKey) { diff --git a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx index ac640c16c3..2b6eae7cba 100644 --- a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx +++ b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx @@ -2,10 +2,10 @@ import type { LexicalEditor } from 'lexical' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js' -import { useListDrawer } from '@payloadcms/ui' import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical' import React, { useCallback, useEffect, useState } from 'react' +import { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js' import { $createRelationshipNode } from '../nodes/RelationshipNode.js' import { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js' import { EnabledRelationshipsCondition } from '../utils/EnabledRelationshipsCondition.js' @@ -48,8 +48,8 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } ) const [replaceNodeKey, setReplaceNodeKey] = useState(null) - const [ListDrawer, ListDrawerToggler, { closeDrawer, isDrawerOpen, openDrawer }] = useListDrawer({ - collectionSlugs: enabledCollectionSlugs!, + const { closeListDrawer, isListDrawerOpen, ListDrawer, openListDrawer } = useLexicalListDrawer({ + collectionSlugs: enabledCollectionSlugs ? enabledCollectionSlugs : undefined, selectedCollection: selectedCollectionSlug, }) @@ -60,12 +60,12 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, (payload) => { setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null) - openDrawer() + openListDrawer() return true }, COMMAND_PRIORITY_EDITOR, ) - }, [editor, openDrawer]) + }, [editor, openListDrawer]) const onSelect = useCallback( ({ collectionSlug, docID }) => { @@ -75,16 +75,16 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } replaceNodeKey, value: docID, }) - closeDrawer() + closeListDrawer() }, - [editor, closeDrawer, replaceNodeKey], + [editor, closeListDrawer, replaceNodeKey], ) useEffect(() => { // always reset back to first option // TODO: this is not working, see the ListDrawer component setSelectedCollectionSlug(enabledCollectionSlugs?.[0]) - }, [isDrawerOpen, enabledCollectionSlugs]) + }, [isListDrawerOpen, enabledCollectionSlugs]) return } diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.tsx b/packages/richtext-lexical/src/features/upload/client/component/index.tsx index 61ed73205a..155080b82d 100644 --- a/packages/richtext-lexical/src/features/upload/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/upload/client/component/index.tsx @@ -1,4 +1,5 @@ 'use client' +import type { BaseSelection } from 'lexical' import type { ClientCollectionConfig, Data } from 'payload' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js' @@ -7,13 +8,10 @@ import { mergeRegister } from '@lexical/utils' import { getTranslation } from '@payloadcms/translations' import { Button, - DrawerToggler, File, formatDrawerSlug, useConfig, - useDocumentDrawer, useEditDepth, - useModal, usePayloadAPI, useTranslation, } from '@payloadcms/ui' @@ -35,6 +33,8 @@ import type { UploadNode } from '../nodes/UploadNode.js' import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js' import { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js' +import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js' +import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js' import { EnabledRelationshipsCondition } from '../../../relationship/client/utils/EnabledRelationshipsCondition.js' import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js' import { $isUploadNode } from '../nodes/UploadNode.js' @@ -71,7 +71,6 @@ const Component: React.FC = (props) => { }, } = useConfig() const uploadRef = useRef(null) - const { closeModal } = useModal() const { uuid } = useEditorConfigContext() const editDepth = useEditDepth() const [editor] = useLexicalComposerContext() @@ -87,12 +86,15 @@ const Component: React.FC = (props) => { const componentID = useId() - const drawerSlug = formatDrawerSlug({ + const extraFieldsDrawerSlug = formatDrawerSlug({ 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 depth: editDepth, }) - const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({ + // Need to use hook to initialize useEffect that restores cursor position + const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true) + + const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({ id: value, collectionSlug: relatedCollection.slug, }) @@ -119,9 +121,9 @@ const Component: React.FC = (props) => { }) dispatchCacheBust() - closeDrawer() + closeDocumentDrawer() }, - [setParams, cacheBust, closeDrawer], + [setParams, cacheBust, closeDocumentDrawer], ) const $onDelete = useCallback( @@ -191,10 +193,8 @@ const Component: React.FC = (props) => { uploadNode.setData(newData) } }) - - closeModal(drawerSlug) }, - [closeModal, editor, drawerSlug, nodeKey], + [editor, nodeKey], ) return ( @@ -225,28 +225,25 @@ const Component: React.FC = (props) => { {editor.isEditable() && (
{hasExtraFields ? ( - -