@payloadcms/richtext-lexical 3.0.0-beta.42 → 3.0.0-beta.44
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/field/features/blocks/drawer/index.d.ts.map +1 -1
- package/dist/field/features/blocks/drawer/index.js +1 -2
- package/dist/field/features/blocks/drawer/index.js.map +1 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.d.ts.map +1 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.js +1 -2
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.js.map +1 -1
- package/dist/field/features/upload/component/ExtraFieldsDrawer/index.d.ts.map +1 -1
- package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js +1 -2
- package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js.map +1 -1
- package/package.json +14 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,SAAS,CAAA;AAS5D,OAAO,KAA2C,MAAM,OAAO,CAAA;AAU/D,eAAO,MAAM,gCAAgC,EAAE,cAAc,CAAC;IAC5D,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;CACrC,CAAqD,CAAA;AAiCtD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,SAAS,CAAA;AAS5D,OAAO,KAA2C,MAAM,OAAO,CAAA;AAU/D,eAAO,MAAM,gCAAgC,EAAE,cAAc,CAAC;IAC5D,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;CACrC,CAAqD,CAAA;AAiCtD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA0DzC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { useModal } from '@faceless-ui/modal';
|
|
4
4
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
|
|
5
5
|
import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer';
|
|
6
6
|
import { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer';
|
|
@@ -34,7 +34,6 @@ const insertBlock = ({ blockType, editor, replaceNodeKey })=>{
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
export const BlocksDrawerComponent = ()=>{
|
|
37
|
-
const { useModal } = facelessUIImport;
|
|
38
37
|
const [editor] = useLexicalComposerContext();
|
|
39
38
|
const { editorConfig, uuid } = useEditorConfigContext();
|
|
40
39
|
const [replaceNodeKey, setReplaceNodeKey] = useState(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { $createBlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from '../plugin/commands.js'\nconst baseClass = 'lexical-blocks-drawer'\n\nexport const INSERT_BLOCK_WITH_DRAWER_COMMAND: LexicalCommand<{\n replace: { nodeKey: string } | false\n}> = createCommand('INSERT_BLOCK_WITH_DRAWER_COMMAND')\n\nconst insertBlock = ({\n blockType,\n editor,\n replaceNodeKey,\n}: {\n blockType: string\n editor: LexicalEditor\n replaceNodeKey: null | string\n}) => {\n if (!replaceNodeKey) {\n editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n id: null,\n blockName: '',\n blockType,\n })\n } else {\n editor.update(() => {\n const node = $getNodeByKey(replaceNodeKey)\n if (node) {\n node.replace(\n $createBlockNode({\n id: null,\n blockName: '',\n blockType,\n }),\n )\n }\n })\n }\n}\n\nexport const BlocksDrawerComponent: React.FC = () => {\n const [editor] = useLexicalComposerContext()\n const { editorConfig, uuid } = useEditorConfigContext()\n\n const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n const editDepth = useEditDepth()\n const { t } = useTranslation()\n const { openModal } = useModal()\n\n const labels = {\n plural: t('fields:blocks') || 'Blocks',\n singular: t('fields:block') || 'Block',\n }\n\n const addRow = useCallback(\n (rowIndex: number, blockType: string) => {\n insertBlock({\n blockType,\n editor,\n replaceNodeKey,\n })\n },\n [editor, replaceNodeKey],\n )\n\n const drawerSlug = formatDrawerSlug({\n slug: `lexical-rich-text-blocks-` + uuid,\n depth: editDepth,\n })\n\n const reducedBlocks = (\n editorConfig?.resolvedFeatureMap?.get('blocks')\n ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n )?.reducedBlocks\n\n useEffect(() => {\n return editor.registerCommand<{\n replace: { nodeKey: string } | false\n }>(\n INSERT_BLOCK_WITH_DRAWER_COMMAND,\n (payload) => {\n setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n openModal(drawerSlug)\n return true\n },\n COMMAND_PRIORITY_EDITOR,\n )\n }, [editor, drawerSlug, openModal])\n\n return (\n <BlocksDrawer\n addRow={addRow}\n addRowIndex={0}\n blocks={reducedBlocks}\n drawerSlug={drawerSlug}\n labels={labels}\n />\n )\n}\n"],"names":["useModal","useLexicalComposerContext","formatDrawerSlug","BlocksDrawer","useEditDepth","useTranslation","$getNodeByKey","COMMAND_PRIORITY_EDITOR","createCommand","React","useCallback","useEffect","useState","useEditorConfigContext","$createBlockNode","INSERT_BLOCK_COMMAND","baseClass","INSERT_BLOCK_WITH_DRAWER_COMMAND","insertBlock","blockType","editor","replaceNodeKey","dispatchCommand","id","blockName","update","node","replace","BlocksDrawerComponent","editorConfig","uuid","setReplaceNodeKey","editDepth","t","openModal","labels","plural","singular","addRow","rowIndex","drawerSlug","slug","depth","reducedBlocks","resolvedFeatureMap","get","clientFeatureProps","registerCommand","payload","nodeKey","addRowIndex","blocks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,gBAAgB,QAAQ,iCAAgC;AACjE,SAASC,YAAY,QAAQ,4CAA2C;AACxE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,EAAEC,aAAa,QAAQ,UAAS;AAC/E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/D,SAASC,sBAAsB,QAAQ,yDAAwD;AAC/F,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,MAAMC,YAAY;AAElB,OAAO,MAAMC,mCAERT,cAAc,oCAAmC;AAEtD,MAAMU,cAAc,CAAC,EACnBC,SAAS,EACTC,MAAM,EACNC,cAAc,EAKf;IACC,IAAI,CAACA,gBAAgB;QACnBD,OAAOE,eAAe,CAACP,sBAAsB;YAC3CQ,IAAI;YACJC,WAAW;YACXL;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOpB,cAAce;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVb,iBAAiB;oBACfS,IAAI;oBACJC,WAAW;oBACXL;gBACF;YAEJ;QACF;IACF;AACF;AAEA,OAAO,MAAMS,wBAAkC;IAC7C,MAAM,CAACR,OAAO,GAAGnB;IACjB,MAAM,EAAE4B,YAAY,EAAEC,IAAI,EAAE,GAAGjB;IAE/B,MAAM,CAACQ,gBAAgBU,kBAAkB,GAAGnB,SAAwB;IACpE,MAAMoB,YAAY5B;IAClB,MAAM,EAAE6B,CAAC,EAAE,GAAG5B;IACd,MAAM,EAAE6B,SAAS,EAAE,GAAGlC;IAEtB,MAAMmC,SAAS;QACbC,QAAQH,EAAE,oBAAoB;QAC9BI,UAAUJ,EAAE,mBAAmB;IACjC;IAEA,MAAMK,SAAS5B,YACb,CAAC6B,UAAkBpB;QACjBD,YAAY;YACVC;YACAC;YACAC;QACF;IACF,GACA;QAACD;QAAQC;KAAe;IAG1B,MAAMmB,aAAatC,iBAAiB;QAClCuC,MAAM,CAAC,yBAAyB,CAAC,GAAGX;QACpCY,OAAOV;IACT;IAEA,MAAMW,gBACJd,cAAce,oBAAoBC,IAAI,WAClCC,oBACHH;IAEHhC,UAAU;QACR,OAAOS,OAAO2B,eAAe,CAG3B9B,kCACA,CAAC+B;YACCjB,kBAAkBiB,SAASrB,UAAUqB,SAASrB,QAAQsB,UAAU;YAChEf,UAAUM;YACV,OAAO;QACT,GACAjC;IAEJ,GAAG;QAACa;QAAQoB;QAAYN;KAAU;IAElC,qBACE,KAAC/B;QACCmC,QAAQA;QACRY,aAAa;QACbC,QAAQR;QACRH,YAAYA;QACZL,QAAQA;;AAGd,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAevE,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,WAAW,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAevE,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,WAAW,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAwUvF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { useModal } from '@faceless-ui/modal';
|
|
4
4
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
|
|
5
5
|
import { $findMatchingParent, mergeRegister } from '@lexical/utils';
|
|
6
6
|
import { getTranslation } from '@payloadcms/translations';
|
|
@@ -20,7 +20,6 @@ import { $createLinkNode } from '../../../nodes/LinkNode.js';
|
|
|
20
20
|
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js';
|
|
21
21
|
import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js';
|
|
22
22
|
export function LinkEditor({ anchorElem }) {
|
|
23
|
-
const { useModal } = facelessUIImport;
|
|
24
23
|
const [editor] = useLexicalComposerContext();
|
|
25
24
|
const editorRef = useRef(null);
|
|
26
25
|
const [linkUrl, setLinkUrl] = useState(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalNode } from 'lexical'\nimport type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $isLineBreakNode } from 'lexical'\nimport {\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_HIGH,\n COMMAND_PRIORITY_LOW,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { LinkNode } from '../../../nodes/LinkNode.js'\nimport type { LinkFields } from '../../../nodes/types.js'\nimport type { LinkPayload } from '../types.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getSelectedNode } from '../../../../../lexical/utils/getSelectedNode.js'\nimport { setFloatingElemPositionForLinkEditor } from '../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js'\nimport { LinkDrawer } from '../../../drawer/index.js'\nimport { $isAutoLinkNode } from '../../../nodes/AutoLinkNode.js'\nimport { $createLinkNode } from '../../../nodes/LinkNode.js'\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'\nimport { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'\n\nexport function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {\n const { useModal } = facelessUIImport\n\n const [editor] = useLexicalComposerContext()\n\n const editorRef = useRef<HTMLDivElement | null>(null)\n const [linkUrl, setLinkUrl] = useState(null)\n const [linkLabel, setLinkLabel] = useState(null)\n\n const { uuid } = useEditorConfigContext()\n\n const config = useConfig()\n\n const { i18n, t } = useTranslation()\n\n const [stateData, setStateData] = useState<{} | (LinkFields & { text: string })>({})\n\n const { closeModal, isModalOpen, toggleModal } = useModal()\n const editDepth = useEditDepth()\n const [isLink, setIsLink] = useState(false)\n const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])\n\n const [isAutoLink, setIsAutoLink] = useState(false)\n\n const drawerSlug = formatDrawerSlug({\n slug: `lexical-rich-text-link-` + uuid,\n depth: editDepth,\n })\n\n const setNotLink = useCallback(() => {\n setIsLink(false)\n if (editorRef && editorRef.current) {\n editorRef.current.style.opacity = '0'\n editorRef.current.style.transform = 'translate(-10000px, -10000px)'\n }\n setIsAutoLink(false)\n setLinkUrl(null)\n setLinkLabel(null)\n setSelectedNodes([])\n setStateData({})\n }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])\n\n const $updateLinkEditor = useCallback(() => {\n const selection = $getSelection()\n let selectedNodeDomRect: DOMRect | undefined = null\n\n if (!$isRangeSelection(selection) || !selection) {\n setNotLink()\n return\n }\n\n // Handle the data displayed in the floating link editor & drawer when you click on a link node\n\n const focusNode = getSelectedNode(selection)\n selectedNodeDomRect = editor.getElementByKey(focusNode.getKey())?.getBoundingClientRect()\n const focusLinkParent: LinkNode = $findMatchingParent(focusNode, $isLinkNode)\n\n // Prevent link modal from showing if selection spans further than the link: https://github.com/facebook/lexical/issues/4064\n const badNode = selection\n .getNodes()\n .filter((node) => !$isLineBreakNode(node))\n .find((node) => {\n const linkNode = $findMatchingParent(node, $isLinkNode)\n return (\n (focusLinkParent && !focusLinkParent.is(linkNode)) ||\n (linkNode && !linkNode.is(focusLinkParent))\n )\n })\n\n if (focusLinkParent == null || badNode) {\n setNotLink()\n return\n }\n\n // Initial state:\n const data: LinkFields & { text: string } = {\n doc: undefined,\n linkType: undefined,\n newTab: undefined,\n url: '',\n ...focusLinkParent.getFields(),\n text: focusLinkParent.getTextContent(),\n }\n\n if (focusLinkParent.getFields()?.linkType === 'custom') {\n setLinkUrl(focusLinkParent.getFields()?.url ?? null)\n setLinkLabel(null)\n } else {\n // internal link\n setLinkUrl(\n `/admin/collections/${focusLinkParent.getFields()?.doc?.relationTo}/${\n focusLinkParent.getFields()?.doc?.value\n }`,\n )\n\n const relatedField = config.collections.find(\n (coll) => coll.slug === focusLinkParent.getFields()?.doc?.relationTo,\n )\n if (!relatedField) {\n // Usually happens if the user removed all default fields. In this case, we let them specify the label or do not display the label at all.\n // label could be a virtual field the user added. This is useful if they want to use the link feature for things other than links.\n setLinkLabel(\n focusLinkParent.getFields()?.label ? String(focusLinkParent.getFields()?.label) : null,\n )\n setLinkUrl(\n focusLinkParent.getFields()?.url ? String(focusLinkParent.getFields()?.url) : null,\n )\n } else {\n const label = t('fields:linkedTo', {\n label: getTranslation(relatedField.labels.singular, i18n),\n }).replace(/<[^>]*>?/g, '')\n setLinkLabel(label)\n }\n }\n\n setStateData(data)\n setIsLink(true)\n setSelectedNodes(selection ? selection?.getNodes() : [])\n\n if ($isAutoLinkNode(focusLinkParent)) {\n setIsAutoLink(true)\n } else {\n setIsAutoLink(false)\n }\n\n const editorElem = editorRef.current\n const nativeSelection = window.getSelection()\n const { activeElement } = document\n\n if (editorElem === null) {\n return\n }\n\n const rootElement = editor.getRootElement()\n\n if (\n nativeSelection !== null &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n if (!selectedNodeDomRect) {\n // Get the DOM rect of the selected node using the native selection. This sometimes produces the wrong\n // result, which is why we use lexical's selection preferably.\n selectedNodeDomRect = nativeSelection.getRangeAt(0).getBoundingClientRect()\n }\n\n if (selectedNodeDomRect != null) {\n selectedNodeDomRect.y += 40\n setFloatingElemPositionForLinkEditor(selectedNodeDomRect, editorElem, anchorElem)\n }\n } else if (activeElement == null || activeElement.className !== 'link-input') {\n if (rootElement !== null) {\n setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem)\n }\n setLinkUrl(null)\n setLinkLabel(null)\n }\n\n return true\n }, [editor, setNotLink, config.collections, t, i18n, anchorElem])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerCommand(\n TOGGLE_LINK_WITH_MODAL_COMMAND,\n (payload: LinkPayload) => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload)\n\n // Now, open the modal\n $updateLinkEditor()\n toggleModal(drawerSlug)\n\n return true\n },\n COMMAND_PRIORITY_LOW,\n ),\n )\n }, [editor, $updateLinkEditor, toggleModal, drawerSlug])\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement\n\n const update = (): void => {\n editor.getEditorState().read(() => {\n void $updateLinkEditor()\n })\n }\n\n window.addEventListener('resize', update)\n\n if (scrollerElem != null) {\n scrollerElem.addEventListener('scroll', update)\n }\n\n return () => {\n window.removeEventListener('resize', update)\n\n if (scrollerElem != null) {\n scrollerElem.removeEventListener('scroll', update)\n }\n }\n }, [anchorElem.parentElement, editor, $updateLinkEditor])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n void $updateLinkEditor()\n })\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n void $updateLinkEditor()\n return true\n },\n COMMAND_PRIORITY_LOW,\n ),\n editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n () => {\n if (isLink) {\n setNotLink()\n\n return true\n }\n return false\n },\n COMMAND_PRIORITY_HIGH,\n ),\n )\n }, [editor, $updateLinkEditor, isLink, setNotLink])\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n void $updateLinkEditor()\n })\n }, [editor, $updateLinkEditor])\n\n return (\n <React.Fragment>\n <div className=\"link-editor\" ref={editorRef}>\n <div className=\"link-input\">\n {linkUrl && linkUrl.length > 0 ? (\n <a href={linkUrl} rel=\"noopener noreferrer\" target=\"_blank\">\n {linkLabel != null && linkLabel.length > 0 ? linkLabel : linkUrl}\n </a>\n ) : linkLabel != null && linkLabel.length > 0 ? (\n <span className=\"link-input__label-pure\">{linkLabel}</span>\n ) : null}\n\n {editor.isEditable() && (\n <React.Fragment>\n <button\n aria-label=\"Edit link\"\n className=\"link-edit\"\n onClick={() => {\n toggleModal(drawerSlug)\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n }}\n tabIndex={0}\n type=\"button\"\n />\n {!isAutoLink && (\n <button\n aria-label=\"Remove link\"\n className=\"link-trash\"\n onClick={() => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n }}\n tabIndex={0}\n type=\"button\"\n />\n )}\n </React.Fragment>\n )}\n </div>\n </div>\n {isModalOpen(drawerSlug) && (\n <LinkDrawer\n drawerSlug={drawerSlug}\n handleModalSubmit={(fields: FormState, data: Data) => {\n closeModal(drawerSlug)\n\n const newLinkPayload = data as LinkFields & { text: string }\n\n const bareLinkFields: LinkFields = {\n ...newLinkPayload,\n }\n delete bareLinkFields.text\n\n // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).\n editor.update(() => {\n const selection = $getSelection()\n let linkParent = null\n if ($isRangeSelection(selection)) {\n linkParent = getSelectedNode(selection).getParent()\n } else {\n if (selectedNodes.length) {\n linkParent = selectedNodes[0].getParent()\n }\n }\n\n if (linkParent && $isAutoLinkNode(linkParent)) {\n const linkNode = $createLinkNode({\n fields: bareLinkFields,\n })\n linkParent.replace(linkNode, true)\n }\n })\n\n // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to\n // it being applied to the auto link node instead of the link node.\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, {\n fields: bareLinkFields,\n selectedNodes,\n text: newLinkPayload.text,\n })\n }}\n stateData={stateData}\n />\n )}\n </React.Fragment>\n )\n}\n"],"names":["facelessUIImport","useLexicalComposerContext","$findMatchingParent","mergeRegister","getTranslation","formatDrawerSlug","useConfig","useEditDepth","useTranslation","$isLineBreakNode","$getSelection","$isRangeSelection","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","React","useCallback","useEffect","useRef","useState","useEditorConfigContext","getSelectedNode","setFloatingElemPositionForLinkEditor","LinkDrawer","$isAutoLinkNode","$createLinkNode","$isLinkNode","TOGGLE_LINK_COMMAND","TOGGLE_LINK_WITH_MODAL_COMMAND","LinkEditor","anchorElem","useModal","editor","editorRef","linkUrl","setLinkUrl","linkLabel","setLinkLabel","uuid","config","i18n","t","stateData","setStateData","closeModal","isModalOpen","toggleModal","editDepth","isLink","setIsLink","selectedNodes","setSelectedNodes","isAutoLink","setIsAutoLink","drawerSlug","slug","depth","setNotLink","current","style","opacity","transform","$updateLinkEditor","selection","selectedNodeDomRect","focusNode","getElementByKey","getKey","getBoundingClientRect","focusLinkParent","badNode","getNodes","filter","node","find","linkNode","is","data","doc","undefined","linkType","newTab","url","getFields","text","getTextContent","relationTo","value","relatedField","collections","coll","label","String","labels","singular","replace","editorElem","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","getRangeAt","y","className","registerCommand","payload","dispatchCommand","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","registerUpdateListener","editorState","Fragment","div","ref","length","a","href","rel","target","span","isEditable","button","aria-label","onClick","onMouseDown","event","preventDefault","tabIndex","type","handleModalSubmit","fields","newLinkPayload","bareLinkFields","linkParent","getParent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalNode } from 'lexical'\nimport type { FormState } from 'payload/types'\nimport type { Data } from 'payload/types'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $isLineBreakNode } from 'lexical'\nimport {\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_HIGH,\n COMMAND_PRIORITY_LOW,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { LinkNode } from '../../../nodes/LinkNode.js'\nimport type { LinkFields } from '../../../nodes/types.js'\nimport type { LinkPayload } from '../types.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getSelectedNode } from '../../../../../lexical/utils/getSelectedNode.js'\nimport { setFloatingElemPositionForLinkEditor } from '../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js'\nimport { LinkDrawer } from '../../../drawer/index.js'\nimport { $isAutoLinkNode } from '../../../nodes/AutoLinkNode.js'\nimport { $createLinkNode } from '../../../nodes/LinkNode.js'\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'\nimport { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'\n\nexport function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {\n const [editor] = useLexicalComposerContext()\n\n const editorRef = useRef<HTMLDivElement | null>(null)\n const [linkUrl, setLinkUrl] = useState(null)\n const [linkLabel, setLinkLabel] = useState(null)\n\n const { uuid } = useEditorConfigContext()\n\n const config = useConfig()\n\n const { i18n, t } = useTranslation()\n\n const [stateData, setStateData] = useState<{} | (LinkFields & { text: string })>({})\n\n const { closeModal, isModalOpen, toggleModal } = useModal()\n const editDepth = useEditDepth()\n const [isLink, setIsLink] = useState(false)\n const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])\n\n const [isAutoLink, setIsAutoLink] = useState(false)\n\n const drawerSlug = formatDrawerSlug({\n slug: `lexical-rich-text-link-` + uuid,\n depth: editDepth,\n })\n\n const setNotLink = useCallback(() => {\n setIsLink(false)\n if (editorRef && editorRef.current) {\n editorRef.current.style.opacity = '0'\n editorRef.current.style.transform = 'translate(-10000px, -10000px)'\n }\n setIsAutoLink(false)\n setLinkUrl(null)\n setLinkLabel(null)\n setSelectedNodes([])\n setStateData({})\n }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])\n\n const $updateLinkEditor = useCallback(() => {\n const selection = $getSelection()\n let selectedNodeDomRect: DOMRect | undefined = null\n\n if (!$isRangeSelection(selection) || !selection) {\n setNotLink()\n return\n }\n\n // Handle the data displayed in the floating link editor & drawer when you click on a link node\n\n const focusNode = getSelectedNode(selection)\n selectedNodeDomRect = editor.getElementByKey(focusNode.getKey())?.getBoundingClientRect()\n const focusLinkParent: LinkNode = $findMatchingParent(focusNode, $isLinkNode)\n\n // Prevent link modal from showing if selection spans further than the link: https://github.com/facebook/lexical/issues/4064\n const badNode = selection\n .getNodes()\n .filter((node) => !$isLineBreakNode(node))\n .find((node) => {\n const linkNode = $findMatchingParent(node, $isLinkNode)\n return (\n (focusLinkParent && !focusLinkParent.is(linkNode)) ||\n (linkNode && !linkNode.is(focusLinkParent))\n )\n })\n\n if (focusLinkParent == null || badNode) {\n setNotLink()\n return\n }\n\n // Initial state:\n const data: LinkFields & { text: string } = {\n doc: undefined,\n linkType: undefined,\n newTab: undefined,\n url: '',\n ...focusLinkParent.getFields(),\n text: focusLinkParent.getTextContent(),\n }\n\n if (focusLinkParent.getFields()?.linkType === 'custom') {\n setLinkUrl(focusLinkParent.getFields()?.url ?? null)\n setLinkLabel(null)\n } else {\n // internal link\n setLinkUrl(\n `/admin/collections/${focusLinkParent.getFields()?.doc?.relationTo}/${\n focusLinkParent.getFields()?.doc?.value\n }`,\n )\n\n const relatedField = config.collections.find(\n (coll) => coll.slug === focusLinkParent.getFields()?.doc?.relationTo,\n )\n if (!relatedField) {\n // Usually happens if the user removed all default fields. In this case, we let them specify the label or do not display the label at all.\n // label could be a virtual field the user added. This is useful if they want to use the link feature for things other than links.\n setLinkLabel(\n focusLinkParent.getFields()?.label ? String(focusLinkParent.getFields()?.label) : null,\n )\n setLinkUrl(\n focusLinkParent.getFields()?.url ? String(focusLinkParent.getFields()?.url) : null,\n )\n } else {\n const label = t('fields:linkedTo', {\n label: getTranslation(relatedField.labels.singular, i18n),\n }).replace(/<[^>]*>?/g, '')\n setLinkLabel(label)\n }\n }\n\n setStateData(data)\n setIsLink(true)\n setSelectedNodes(selection ? selection?.getNodes() : [])\n\n if ($isAutoLinkNode(focusLinkParent)) {\n setIsAutoLink(true)\n } else {\n setIsAutoLink(false)\n }\n\n const editorElem = editorRef.current\n const nativeSelection = window.getSelection()\n const { activeElement } = document\n\n if (editorElem === null) {\n return\n }\n\n const rootElement = editor.getRootElement()\n\n if (\n nativeSelection !== null &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n if (!selectedNodeDomRect) {\n // Get the DOM rect of the selected node using the native selection. This sometimes produces the wrong\n // result, which is why we use lexical's selection preferably.\n selectedNodeDomRect = nativeSelection.getRangeAt(0).getBoundingClientRect()\n }\n\n if (selectedNodeDomRect != null) {\n selectedNodeDomRect.y += 40\n setFloatingElemPositionForLinkEditor(selectedNodeDomRect, editorElem, anchorElem)\n }\n } else if (activeElement == null || activeElement.className !== 'link-input') {\n if (rootElement !== null) {\n setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem)\n }\n setLinkUrl(null)\n setLinkLabel(null)\n }\n\n return true\n }, [editor, setNotLink, config.collections, t, i18n, anchorElem])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerCommand(\n TOGGLE_LINK_WITH_MODAL_COMMAND,\n (payload: LinkPayload) => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload)\n\n // Now, open the modal\n $updateLinkEditor()\n toggleModal(drawerSlug)\n\n return true\n },\n COMMAND_PRIORITY_LOW,\n ),\n )\n }, [editor, $updateLinkEditor, toggleModal, drawerSlug])\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement\n\n const update = (): void => {\n editor.getEditorState().read(() => {\n void $updateLinkEditor()\n })\n }\n\n window.addEventListener('resize', update)\n\n if (scrollerElem != null) {\n scrollerElem.addEventListener('scroll', update)\n }\n\n return () => {\n window.removeEventListener('resize', update)\n\n if (scrollerElem != null) {\n scrollerElem.removeEventListener('scroll', update)\n }\n }\n }, [anchorElem.parentElement, editor, $updateLinkEditor])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n void $updateLinkEditor()\n })\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n void $updateLinkEditor()\n return true\n },\n COMMAND_PRIORITY_LOW,\n ),\n editor.registerCommand(\n KEY_ESCAPE_COMMAND,\n () => {\n if (isLink) {\n setNotLink()\n\n return true\n }\n return false\n },\n COMMAND_PRIORITY_HIGH,\n ),\n )\n }, [editor, $updateLinkEditor, isLink, setNotLink])\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n void $updateLinkEditor()\n })\n }, [editor, $updateLinkEditor])\n\n return (\n <React.Fragment>\n <div className=\"link-editor\" ref={editorRef}>\n <div className=\"link-input\">\n {linkUrl && linkUrl.length > 0 ? (\n <a href={linkUrl} rel=\"noopener noreferrer\" target=\"_blank\">\n {linkLabel != null && linkLabel.length > 0 ? linkLabel : linkUrl}\n </a>\n ) : linkLabel != null && linkLabel.length > 0 ? (\n <span className=\"link-input__label-pure\">{linkLabel}</span>\n ) : null}\n\n {editor.isEditable() && (\n <React.Fragment>\n <button\n aria-label=\"Edit link\"\n className=\"link-edit\"\n onClick={() => {\n toggleModal(drawerSlug)\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n }}\n tabIndex={0}\n type=\"button\"\n />\n {!isAutoLink && (\n <button\n aria-label=\"Remove link\"\n className=\"link-trash\"\n onClick={() => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n }}\n onMouseDown={(event) => {\n event.preventDefault()\n }}\n tabIndex={0}\n type=\"button\"\n />\n )}\n </React.Fragment>\n )}\n </div>\n </div>\n {isModalOpen(drawerSlug) && (\n <LinkDrawer\n drawerSlug={drawerSlug}\n handleModalSubmit={(fields: FormState, data: Data) => {\n closeModal(drawerSlug)\n\n const newLinkPayload = data as LinkFields & { text: string }\n\n const bareLinkFields: LinkFields = {\n ...newLinkPayload,\n }\n delete bareLinkFields.text\n\n // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).\n editor.update(() => {\n const selection = $getSelection()\n let linkParent = null\n if ($isRangeSelection(selection)) {\n linkParent = getSelectedNode(selection).getParent()\n } else {\n if (selectedNodes.length) {\n linkParent = selectedNodes[0].getParent()\n }\n }\n\n if (linkParent && $isAutoLinkNode(linkParent)) {\n const linkNode = $createLinkNode({\n fields: bareLinkFields,\n })\n linkParent.replace(linkNode, true)\n }\n })\n\n // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to\n // it being applied to the auto link node instead of the link node.\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, {\n fields: bareLinkFields,\n selectedNodes,\n text: newLinkPayload.text,\n })\n }}\n stateData={stateData}\n />\n )}\n </React.Fragment>\n )\n}\n"],"names":["useModal","useLexicalComposerContext","$findMatchingParent","mergeRegister","getTranslation","formatDrawerSlug","useConfig","useEditDepth","useTranslation","$isLineBreakNode","$getSelection","$isRangeSelection","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","React","useCallback","useEffect","useRef","useState","useEditorConfigContext","getSelectedNode","setFloatingElemPositionForLinkEditor","LinkDrawer","$isAutoLinkNode","$createLinkNode","$isLinkNode","TOGGLE_LINK_COMMAND","TOGGLE_LINK_WITH_MODAL_COMMAND","LinkEditor","anchorElem","editor","editorRef","linkUrl","setLinkUrl","linkLabel","setLinkLabel","uuid","config","i18n","t","stateData","setStateData","closeModal","isModalOpen","toggleModal","editDepth","isLink","setIsLink","selectedNodes","setSelectedNodes","isAutoLink","setIsAutoLink","drawerSlug","slug","depth","setNotLink","current","style","opacity","transform","$updateLinkEditor","selection","selectedNodeDomRect","focusNode","getElementByKey","getKey","getBoundingClientRect","focusLinkParent","badNode","getNodes","filter","node","find","linkNode","is","data","doc","undefined","linkType","newTab","url","getFields","text","getTextContent","relationTo","value","relatedField","collections","coll","label","String","labels","singular","replace","editorElem","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","getRangeAt","y","className","registerCommand","payload","dispatchCommand","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","registerUpdateListener","editorState","Fragment","div","ref","length","a","href","rel","target","span","isEditable","button","aria-label","onClick","onMouseDown","event","preventDefault","tabIndex","type","handleModalSubmit","fields","newLinkPayload","bareLinkFields","linkParent","getParent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAa,MAAM,eAAe,CAAA;AAgBtE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI/C;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,YAAY,GAAG;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,EAAE,sBAAsB,CAAA;CAC1C,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAa,MAAM,eAAe,CAAA;AAgBtE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI/C;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,YAAY,GAAG;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,EAAE,sBAAsB,CAAA;CAC1C,CAgHF,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { useModal } from '@faceless-ui/modal';
|
|
4
4
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
|
|
5
5
|
import { getTranslation } from '@payloadcms/translations';
|
|
6
6
|
import { Drawer } from '@payloadcms/ui/elements/Drawer';
|
|
@@ -21,7 +21,6 @@ import { useEditorConfigContext } from '../../../../lexical/config/client/Editor
|
|
|
21
21
|
* This handles the extra fields, e.g. captions or alt text, which are
|
|
22
22
|
* potentially added to the upload feature.
|
|
23
23
|
*/ export const ExtraFieldsUploadDrawer = (props)=>{
|
|
24
|
-
const { useModal } = facelessUIImport;
|
|
25
24
|
const { data: { fields, relationTo, value }, drawerSlug, nodeKey, relatedCollection } = props;
|
|
26
25
|
const [editor] = useLexicalComposerContext();
|
|
27
26
|
const { closeModal } = useModal();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\nimport type { ClientCollectionConfig, FormState } from 'payload/types'\n\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\nimport type { ClientCollectionConfig, FormState } from 'payload/types'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Drawer } from '@payloadcms/ui/elements/Drawer'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport { RenderFields } from '@payloadcms/ui/forms/RenderFields'\nimport { FormSubmit } from '@payloadcms/ui/forms/Submit'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { getFormState } from '@payloadcms/ui/utilities/getFormState'\nimport { $getNodeByKey } from 'lexical'\nimport { deepCopyObject } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { UploadData, UploadNode } from '../../nodes/UploadNode.js'\nimport type { ElementProps } from '../index.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\n\n/**\n * This handles the extra fields, e.g. captions or alt text, which are\n * potentially added to the upload feature.\n */\nexport const ExtraFieldsUploadDrawer: React.FC<\n ElementProps & {\n drawerSlug: string\n relatedCollection: ClientCollectionConfig\n }\n> = (props) => {\n const {\n data: { fields, relationTo, value },\n drawerSlug,\n nodeKey,\n relatedCollection,\n } = props\n\n const [editor] = useLexicalComposerContext()\n\n const { closeModal } = useModal()\n\n const { i18n, t } = useTranslation()\n const { id } = useDocumentInfo()\n const { schemaPath } = useFieldProps()\n const config = useConfig()\n const [initialState, setInitialState] = useState<FormState | false>(false)\n const {\n field: { richTextComponentMap },\n } = useEditorConfigContext()\n\n const componentMapRenderedFieldsPath = `feature.upload.fields.${relatedCollection.slug}`\n const schemaFieldsPath = `${schemaPath}.feature.upload.${relatedCollection.slug}`\n\n const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema\n\n useEffect(() => {\n const awaitInitialState = async () => {\n const state = await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n data: deepCopyObject(fields || {}),\n operation: 'update',\n schemaPath: schemaFieldsPath,\n },\n serverURL: config.serverURL,\n }) // Form State\n\n setInitialState(state)\n }\n\n void awaitInitialState()\n }, [config.routes.api, config.serverURL, schemaFieldsPath, id, fields])\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n return await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n formState: prevFormState,\n operation: 'update',\n schemaPath: schemaFieldsPath,\n },\n serverURL: config.serverURL,\n })\n },\n\n [config.routes.api, config.serverURL, schemaFieldsPath, id],\n )\n\n const handleUpdateEditData = useCallback(\n (_, data) => {\n // Update lexical node (with key nodeKey) with new data\n editor.update(() => {\n const uploadNode: UploadNode | null = $getNodeByKey(nodeKey)\n if (uploadNode) {\n const newData: UploadData = {\n ...uploadNode.getData(),\n fields: data,\n }\n uploadNode.setData(newData)\n }\n })\n\n closeModal(drawerSlug)\n },\n [closeModal, editor, drawerSlug, nodeKey],\n )\n\n return (\n <Drawer\n slug={drawerSlug}\n title={t('general:editLabel', {\n label: getTranslation(relatedCollection.labels.singular, i18n),\n })}\n >\n {initialState !== false && (\n <Form\n beforeSubmit={[onChange]}\n disableValidationOnSubmit\n // @ts-expect-error TODO: Fix this\n fields={fieldMap}\n initialState={initialState}\n onChange={[onChange]}\n onSubmit={handleUpdateEditData}\n uuid={uuid()}\n >\n <RenderFields\n fieldMap={Array.isArray(fieldMap) ? fieldMap : []}\n forceRender\n path=\"\" // See Blocks feature path for details as for why this is empty\n readOnly={false}\n schemaPath={schemaFieldsPath}\n />\n <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n </Form>\n )}\n </Drawer>\n )\n}\n"],"names":["useModal","useLexicalComposerContext","getTranslation","Drawer","useFieldProps","Form","RenderFields","FormSubmit","useConfig","useDocumentInfo","useTranslation","getFormState","$getNodeByKey","deepCopyObject","React","useCallback","useEffect","useState","v4","uuid","useEditorConfigContext","ExtraFieldsUploadDrawer","props","data","fields","relationTo","value","drawerSlug","nodeKey","relatedCollection","editor","closeModal","i18n","t","id","schemaPath","config","initialState","setInitialState","field","richTextComponentMap","componentMapRenderedFieldsPath","slug","schemaFieldsPath","fieldMap","get","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","handleUpdateEditData","_","update","uploadNode","newData","getData","setData","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","forceRender","path","readOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAIA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,cAAc,QAAQ,2BAA0B;AACzD,SAASC,MAAM,QAAQ,iCAAgC;AACvD,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,YAAY,QAAQ,wCAAuC;AACpE,SAASC,aAAa,QAAQ,UAAS;AACvC,SAASC,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAC/D,SAASC,MAAMC,IAAI,QAAQ,OAAM;AAKjC,SAASC,sBAAsB,QAAQ,4DAA2D;AAElG;;;CAGC,GACD,OAAO,MAAMC,0BAKT,CAACC;IACH,MAAM,EACJC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAE,EACnCC,UAAU,EACVC,OAAO,EACPC,iBAAiB,EAClB,GAAGP;IAEJ,MAAM,CAACQ,OAAO,GAAG7B;IAEjB,MAAM,EAAE8B,UAAU,EAAE,GAAG/B;IAEvB,MAAM,EAAEgC,IAAI,EAAEC,CAAC,EAAE,GAAGvB;IACpB,MAAM,EAAEwB,EAAE,EAAE,GAAGzB;IACf,MAAM,EAAE0B,UAAU,EAAE,GAAG/B;IACvB,MAAMgC,SAAS5B;IACf,MAAM,CAAC6B,cAAcC,gBAAgB,GAAGrB,SAA4B;IACpE,MAAM,EACJsB,OAAO,EAAEC,oBAAoB,EAAE,EAChC,GAAGpB;IAEJ,MAAMqB,iCAAiC,CAAC,sBAAsB,EAAEZ,kBAAkBa,IAAI,CAAC,CAAC;IACxF,MAAMC,mBAAmB,CAAC,EAAER,WAAW,gBAAgB,EAAEN,kBAAkBa,IAAI,CAAC,CAAC;IAEjF,MAAME,WAAWJ,qBAAqBK,GAAG,CAACJ,gCAAgC,eAAe;;IAEzFzB,UAAU;QACR,MAAM8B,oBAAoB;YACxB,MAAMC,QAAQ,MAAMpC,aAAa;gBAC/BqC,UAAUZ,OAAOa,MAAM,CAACC,GAAG;gBAC3BC,MAAM;oBACJjB;oBACAX,MAAMV,eAAeW,UAAU,CAAC;oBAChC4B,WAAW;oBACXjB,YAAYQ;gBACd;gBACAU,WAAWjB,OAAOiB,SAAS;YAC7B,GAAG,aAAa;;YAEhBf,gBAAgBS;QAClB;QAEA,KAAKD;IACP,GAAG;QAACV,OAAOa,MAAM,CAACC,GAAG;QAAEd,OAAOiB,SAAS;QAAEV;QAAkBT;QAAIV;KAAO;IAEtE,MAAM8B,WAAqCvC,YACzC,OAAO,EAAEwC,WAAWC,aAAa,EAAE;QACjC,OAAO,MAAM7C,aAAa;YACxBqC,UAAUZ,OAAOa,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJjB;gBACAqB,WAAWC;gBACXJ,WAAW;gBACXjB,YAAYQ;YACd;YACAU,WAAWjB,OAAOiB,SAAS;QAC7B;IACF,GAEA;QAACjB,OAAOa,MAAM,CAACC,GAAG;QAAEd,OAAOiB,SAAS;QAAEV;QAAkBT;KAAG;IAG7D,MAAMuB,uBAAuB1C,YAC3B,CAAC2C,GAAGnC;QACF,uDAAuD;QACvDO,OAAO6B,MAAM,CAAC;YACZ,MAAMC,aAAgChD,cAAcgB;YACpD,IAAIgC,YAAY;gBACd,MAAMC,UAAsB;oBAC1B,GAAGD,WAAWE,OAAO,EAAE;oBACvBtC,QAAQD;gBACV;gBACAqC,WAAWG,OAAO,CAACF;YACrB;QACF;QAEA9B,WAAWJ;IACb,GACA;QAACI;QAAYD;QAAQH;QAAYC;KAAQ;IAG3C,qBACE,KAACzB;QACCuC,MAAMf;QACNqC,OAAO/B,EAAE,qBAAqB;YAC5BgC,OAAO/D,eAAe2B,kBAAkBqC,MAAM,CAACC,QAAQ,EAAEnC;QAC3D;kBAECK,iBAAiB,uBAChB,MAAChC;YACC+D,cAAc;gBAACd;aAAS;YACxBe,yBAAyB;YACzB,kCAAkC;YAClC7C,QAAQoB;YACRP,cAAcA;YACdiB,UAAU;gBAACA;aAAS;YACpBgB,UAAUb;YACVtC,MAAMA;;8BAEN,KAACb;oBACCsC,UAAU2B,MAAMC,OAAO,CAAC5B,YAAYA,WAAW,EAAE;oBACjD6B,WAAW;oBACXC,MAAK,GAAG,+DAA+D;;oBACvEC,UAAU;oBACVxC,YAAYQ;;8BAEd,KAACpC;8BAAY0B,EAAE;;;;;AAKzB,EAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payloadcms/richtext-lexical",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.44",
|
|
4
4
|
"description": "The officially supported Lexical richtext adapter for Payload",
|
|
5
5
|
"homepage": "https://payloadcms.com",
|
|
6
6
|
"repository": {
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"components.d.ts"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@faceless-ui/modal": "
|
|
35
|
-
"@faceless-ui/scroll-info": "
|
|
34
|
+
"@faceless-ui/modal": "3.0.0-beta.0",
|
|
35
|
+
"@faceless-ui/scroll-info": "2.0.0-beta.0",
|
|
36
36
|
"@lexical/headless": "0.16.0",
|
|
37
37
|
"@lexical/link": "0.16.0",
|
|
38
38
|
"@lexical/list": "0.16.0",
|
|
@@ -59,14 +59,14 @@
|
|
|
59
59
|
"@types/react": "npm:types-react@19.0.0-beta.2",
|
|
60
60
|
"@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
|
|
61
61
|
"@payloadcms/eslint-config": "1.1.1",
|
|
62
|
-
"@payloadcms/next": "3.0.0-beta.
|
|
63
|
-
"@payloadcms/translations": "3.0.0-beta.
|
|
64
|
-
"
|
|
65
|
-
"
|
|
62
|
+
"@payloadcms/next": "3.0.0-beta.44",
|
|
63
|
+
"@payloadcms/translations": "3.0.0-beta.44",
|
|
64
|
+
"payload": "3.0.0-beta.44",
|
|
65
|
+
"@payloadcms/ui": "3.0.0-beta.44"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
|
-
"@faceless-ui/modal": "
|
|
69
|
-
"@faceless-ui/scroll-info": "
|
|
68
|
+
"@faceless-ui/modal": "3.0.0-beta.0",
|
|
69
|
+
"@faceless-ui/scroll-info": "2.0.0-beta.0",
|
|
70
70
|
"@lexical/headless": "0.16.0",
|
|
71
71
|
"@lexical/link": "0.16.0",
|
|
72
72
|
"@lexical/list": "0.16.0",
|
|
@@ -79,13 +79,13 @@
|
|
|
79
79
|
"lexical": "0.16.0",
|
|
80
80
|
"react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
|
|
81
81
|
"react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
|
|
82
|
-
"@payloadcms/next": "3.0.0-beta.
|
|
83
|
-
"@payloadcms/translations": "3.0.0-beta.
|
|
84
|
-
"@payloadcms/ui": "3.0.0-beta.
|
|
85
|
-
"payload": "3.0.0-beta.
|
|
82
|
+
"@payloadcms/next": "3.0.0-beta.44",
|
|
83
|
+
"@payloadcms/translations": "3.0.0-beta.44",
|
|
84
|
+
"@payloadcms/ui": "3.0.0-beta.44",
|
|
85
|
+
"payload": "3.0.0-beta.44"
|
|
86
86
|
},
|
|
87
87
|
"engines": {
|
|
88
|
-
"node": "
|
|
88
|
+
"node": "^18.20.2 || >=20.9.0"
|
|
89
89
|
},
|
|
90
90
|
"publishConfig": {
|
|
91
91
|
"registry": "https://registry.npmjs.org/"
|