@payloadcms/richtext-lexical 3.68.0-internal-debug.35482da → 3.68.0-internal-debug.e9b66ee
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/cell/rscEntry.js +2 -21
- package/dist/cell/rscEntry.js.map +1 -1
- package/dist/features/blocks/client/component/BlockContent.js +13 -48
- package/dist/features/blocks/client/component/BlockContent.js.map +1 -1
- package/dist/features/blocks/client/component/components/BlockCollapsible.js +1 -10
- package/dist/features/blocks/client/component/components/BlockCollapsible.js.map +1 -1
- package/dist/features/blocks/client/component/components/BlockEditButton.js +1 -7
- package/dist/features/blocks/client/component/components/BlockEditButton.js.map +1 -1
- package/dist/features/blocks/client/component/components/BlockRemoveButton.js +1 -7
- package/dist/features/blocks/client/component/components/BlockRemoveButton.js.map +1 -1
- package/dist/features/blocks/client/component/index.js +81 -247
- package/dist/features/blocks/client/component/index.js.map +1 -1
- package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js +1 -9
- package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js.map +1 -1
- package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js +1 -7
- package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js.map +1 -1
- package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js +1 -7
- package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js.map +1 -1
- package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js +1 -7
- package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js.map +1 -1
- package/dist/features/blocks/client/componentInline/index.js +68 -217
- package/dist/features/blocks/client/componentInline/index.js.map +1 -1
- package/dist/features/blocks/client/getBlockImageComponent.js +4 -15
- package/dist/features/blocks/client/getBlockImageComponent.js.map +1 -1
- package/dist/features/blocks/client/nodes/BlocksNode.js +1 -12
- package/dist/features/blocks/client/nodes/BlocksNode.js.map +1 -1
- package/dist/features/blocks/client/nodes/InlineBlocksNode.js +2 -12
- package/dist/features/blocks/client/nodes/InlineBlocksNode.js.map +1 -1
- package/dist/features/blocks/premade/CodeBlock/Component/Block.js +26 -127
- package/dist/features/blocks/premade/CodeBlock/Component/Block.js.map +1 -1
- package/dist/features/blocks/premade/CodeBlock/Component/Code.js +49 -65
- package/dist/features/blocks/premade/CodeBlock/Component/Code.js.map +1 -1
- package/dist/features/blocks/premade/CodeBlock/Component/Collapse/index.js +3 -16
- package/dist/features/blocks/premade/CodeBlock/Component/Collapse/index.js.map +1 -1
- package/dist/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.js +4 -25
- package/dist/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.js.map +1 -1
- package/dist/features/blocks/server/nodes/BlocksNode.js.map +1 -1
- package/dist/features/blocks/server/nodes/InlineBlocksNode.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/Component/index.js +2 -13
- package/dist/features/converters/lexicalToJSX/Component/index.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/blockquote.js +1 -8
- package/dist/features/converters/lexicalToJSX/converter/converters/blockquote.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/heading.js +1 -8
- package/dist/features/converters/lexicalToJSX/converter/converters/heading.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/horizontalRule.js +1 -6
- package/dist/features/converters/lexicalToJSX/converter/converters/horizontalRule.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/linebreak.js +1 -6
- package/dist/features/converters/lexicalToJSX/converter/converters/linebreak.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/link.js +10 -19
- package/dist/features/converters/lexicalToJSX/converter/converters/link.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/list.js +16 -63
- package/dist/features/converters/lexicalToJSX/converter/converters/list.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/paragraph.js +4 -19
- package/dist/features/converters/lexicalToJSX/converter/converters/paragraph.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/table.js +12 -45
- package/dist/features/converters/lexicalToJSX/converter/converters/table.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/text.js +11 -57
- package/dist/features/converters/lexicalToJSX/converter/converters/text.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/converters/upload.js +7 -46
- package/dist/features/converters/lexicalToJSX/converter/converters/upload.js.map +1 -1
- package/dist/features/converters/lexicalToJSX/converter/index.js +5 -12
- package/dist/features/converters/lexicalToJSX/converter/index.js.map +1 -1
- package/dist/features/debug/jsxConverter/client/plugin/index.js +3 -16
- package/dist/features/debug/jsxConverter/client/plugin/index.js.map +1 -1
- package/dist/features/debug/testRecorder/client/plugin/index.js +38 -113
- package/dist/features/debug/testRecorder/client/plugin/index.js.map +1 -1
- package/dist/features/debug/treeView/client/plugin/index.js +1 -15
- package/dist/features/debug/treeView/client/plugin/index.js.map +1 -1
- package/dist/features/experimental_table/client/plugins/TableActionMenuPlugin/index.js +79 -357
- package/dist/features/experimental_table/client/plugins/TableActionMenuPlugin/index.js.map +1 -1
- package/dist/features/experimental_table/client/plugins/TableCellResizerPlugin/index.js +7 -41
- package/dist/features/experimental_table/client/plugins/TableCellResizerPlugin/index.js.map +1 -1
- package/dist/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.js +9 -39
- package/dist/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.js.map +1 -1
- package/dist/features/experimental_table/client/plugins/TablePlugin/index.js +28 -59
- package/dist/features/experimental_table/client/plugins/TablePlugin/index.js.map +1 -1
- package/dist/features/horizontalRule/client/nodes/HorizontalRuleNode.js +0 -1
- package/dist/features/horizontalRule/client/nodes/HorizontalRuleNode.js.map +1 -1
- package/dist/features/indent/client/IndentPlugin.js +1 -6
- package/dist/features/indent/client/IndentPlugin.js.map +1 -1
- package/dist/features/link/client/plugins/clickableLink/index.js +1 -7
- package/dist/features/link/client/plugins/clickableLink/index.js.map +1 -1
- package/dist/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.js +59 -151
- package/dist/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.js.map +1 -1
- package/dist/features/link/client/plugins/floatingLinkEditor/index.js +1 -9
- package/dist/features/link/client/plugins/floatingLinkEditor/index.js.map +1 -1
- package/dist/features/link/nodes/LinkNode.js.map +1 -1
- package/dist/features/lists/checklist/client/plugin/index.js +1 -7
- package/dist/features/lists/checklist/client/plugin/index.js.map +1 -1
- package/dist/features/lists/plugin/index.js +1 -7
- package/dist/features/lists/plugin/index.js.map +1 -1
- package/dist/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/Component.js +3 -18
- package/dist/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/Component.js.map +1 -1
- package/dist/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.js +2 -9
- package/dist/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.js.map +1 -1
- package/dist/features/migrations/slateToLexical/nodes/unknownConvertedNode/Component.js +3 -18
- package/dist/features/migrations/slateToLexical/nodes/unknownConvertedNode/Component.js.map +1 -1
- package/dist/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.js +2 -9
- package/dist/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.js.map +1 -1
- package/dist/features/relationship/client/components/RelationshipComponent.js +31 -100
- package/dist/features/relationship/client/components/RelationshipComponent.js.map +1 -1
- package/dist/features/relationship/client/drawer/index.js +4 -21
- package/dist/features/relationship/client/drawer/index.js.map +1 -1
- package/dist/features/relationship/client/nodes/RelationshipNode.js +2 -12
- package/dist/features/relationship/client/nodes/RelationshipNode.js.map +1 -1
- package/dist/features/relationship/client/plugins/index.js +1 -8
- package/dist/features/relationship/client/plugins/index.js.map +1 -1
- package/dist/features/relationship/server/nodes/RelationshipNode.js.map +1 -1
- package/dist/features/textState/feature.client.js +5 -22
- package/dist/features/textState/feature.client.js.map +1 -1
- package/dist/features/toolbars/fixed/client/Toolbar/index.js +27 -123
- package/dist/features/toolbars/fixed/client/Toolbar/index.js.map +1 -1
- package/dist/features/toolbars/inline/client/Toolbar/index.js +18 -111
- package/dist/features/toolbars/inline/client/Toolbar/index.js.map +1 -1
- package/dist/features/toolbars/shared/ToolbarButton/index.js +4 -14
- package/dist/features/toolbars/shared/ToolbarButton/index.js.map +1 -1
- package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js +56 -135
- package/dist/features/toolbars/shared/ToolbarDropdown/DropDown.js.map +1 -1
- package/dist/features/toolbars/shared/ToolbarDropdown/index.js +16 -70
- package/dist/features/toolbars/shared/ToolbarDropdown/index.js.map +1 -1
- package/dist/features/upload/client/component/index.js +43 -167
- package/dist/features/upload/client/component/index.js.map +1 -1
- package/dist/features/upload/client/component/pending/index.js +3 -16
- package/dist/features/upload/client/component/pending/index.js.map +1 -1
- package/dist/features/upload/client/drawer/index.js +4 -21
- package/dist/features/upload/client/drawer/index.js.map +1 -1
- package/dist/features/upload/client/nodes/UploadNode.js +3 -17
- package/dist/features/upload/client/nodes/UploadNode.js.map +1 -1
- package/dist/features/upload/client/plugin/index.js +2 -9
- package/dist/features/upload/client/plugin/index.js.map +1 -1
- package/dist/features/upload/server/nodes/UploadNode.js.map +1 -1
- package/dist/field/Diff/converters/listitem/index.js +11 -54
- package/dist/field/Diff/converters/listitem/index.js.map +1 -1
- package/dist/field/Diff/converters/relationship/index.js +18 -60
- package/dist/field/Diff/converters/relationship/index.js.map +1 -1
- package/dist/field/Diff/converters/unknown/index.js +7 -42
- package/dist/field/Diff/converters/unknown/index.js.map +1 -1
- package/dist/field/Diff/converters/upload/index.js +21 -91
- package/dist/field/Diff/converters/upload/index.js.map +1 -1
- package/dist/field/Diff/index.js +4 -17
- package/dist/field/Diff/index.js.map +1 -1
- package/dist/field/Field.js +25 -124
- package/dist/field/Field.js.map +1 -1
- package/dist/field/RenderLexical/index.js +15 -47
- package/dist/field/RenderLexical/index.js.map +1 -1
- package/dist/field/index.js +5 -24
- package/dist/field/index.js.map +1 -1
- package/dist/field/rscEntry.js +1 -9
- package/dist/field/rscEntry.js.map +1 -1
- package/dist/lexical/EditorPlugin.js +2 -17
- package/dist/lexical/EditorPlugin.js.map +1 -1
- package/dist/lexical/LexicalEditor.js +69 -232
- package/dist/lexical/LexicalEditor.js.map +1 -1
- package/dist/lexical/LexicalProvider.js +13 -64
- package/dist/lexical/LexicalProvider.js.map +1 -1
- package/dist/lexical/config/client/EditorConfigProvider.js +2 -11
- package/dist/lexical/config/client/EditorConfigProvider.js.map +1 -1
- package/dist/lexical/plugins/InsertParagraphAtEnd/index.js +5 -28
- package/dist/lexical/plugins/InsertParagraphAtEnd/index.js.map +1 -1
- package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js +1 -14
- package/dist/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js.map +1 -1
- package/dist/lexical/plugins/SlashMenu/index.js +31 -98
- package/dist/lexical/plugins/SlashMenu/index.js.map +1 -1
- package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js +7 -27
- package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js.map +1 -1
- package/dist/lexical/plugins/handles/DraggableBlockPlugin/index.js +7 -45
- package/dist/lexical/plugins/handles/DraggableBlockPlugin/index.js.map +1 -1
- package/dist/lexical/ui/ContentEditable.js +3 -18
- package/dist/lexical/ui/ContentEditable.js.map +1 -1
- package/dist/lexical/ui/icons/AI/index.js +10 -58
- package/dist/lexical/ui/icons/AI/index.js.map +1 -1
- package/dist/lexical/ui/icons/Add/index.js +4 -31
- package/dist/lexical/ui/icons/Add/index.js.map +1 -1
- package/dist/lexical/ui/icons/AlignCenter/index.js +5 -45
- package/dist/lexical/ui/icons/AlignCenter/index.js.map +1 -1
- package/dist/lexical/ui/icons/AlignJustify/index.js +5 -45
- package/dist/lexical/ui/icons/AlignJustify/index.js.map +1 -1
- package/dist/lexical/ui/icons/AlignLeft/index.js +5 -45
- package/dist/lexical/ui/icons/AlignLeft/index.js.map +1 -1
- package/dist/lexical/ui/icons/AlignRight/index.js +5 -45
- package/dist/lexical/ui/icons/AlignRight/index.js.map +1 -1
- package/dist/lexical/ui/icons/Block/index.js +5 -54
- package/dist/lexical/ui/icons/Block/index.js.map +1 -1
- package/dist/lexical/ui/icons/Blockquote/index.js +3 -24
- package/dist/lexical/ui/icons/Blockquote/index.js.map +1 -1
- package/dist/lexical/ui/icons/Bold/index.js +3 -24
- package/dist/lexical/ui/icons/Bold/index.js.map +1 -1
- package/dist/lexical/ui/icons/Checklist/index.js +4 -39
- package/dist/lexical/ui/icons/Checklist/index.js.map +1 -1
- package/dist/lexical/ui/icons/Code/index.js +4 -34
- package/dist/lexical/ui/icons/Code/index.js.map +1 -1
- package/dist/lexical/ui/icons/CodeBlock/index.js +3 -22
- package/dist/lexical/ui/icons/CodeBlock/index.js.map +1 -1
- package/dist/lexical/ui/icons/Collapse/index.js +3 -23
- package/dist/lexical/ui/icons/Collapse/index.js.map +1 -1
- package/dist/lexical/ui/icons/H1/index.js +3 -24
- package/dist/lexical/ui/icons/H1/index.js.map +1 -1
- package/dist/lexical/ui/icons/H2/index.js +3 -24
- package/dist/lexical/ui/icons/H2/index.js.map +1 -1
- package/dist/lexical/ui/icons/H3/index.js +3 -24
- package/dist/lexical/ui/icons/H3/index.js.map +1 -1
- package/dist/lexical/ui/icons/H4/index.js +3 -24
- package/dist/lexical/ui/icons/H4/index.js.map +1 -1
- package/dist/lexical/ui/icons/H5/index.js +3 -24
- package/dist/lexical/ui/icons/H5/index.js.map +1 -1
- package/dist/lexical/ui/icons/H6/index.js +3 -24
- package/dist/lexical/ui/icons/H6/index.js.map +1 -1
- package/dist/lexical/ui/icons/HorizontalRule/index.js +3 -27
- package/dist/lexical/ui/icons/HorizontalRule/index.js.map +1 -1
- package/dist/lexical/ui/icons/IndentDecrease/index.js +6 -53
- package/dist/lexical/ui/icons/IndentDecrease/index.js.map +1 -1
- package/dist/lexical/ui/icons/IndentIncrease/index.js +6 -53
- package/dist/lexical/ui/icons/IndentIncrease/index.js.map +1 -1
- package/dist/lexical/ui/icons/InlineBlocks/index.js +3 -26
- package/dist/lexical/ui/icons/InlineBlocks/index.js.map +1 -1
- package/dist/lexical/ui/icons/Italic/index.js +3 -24
- package/dist/lexical/ui/icons/Italic/index.js.map +1 -1
- package/dist/lexical/ui/icons/Link/index.js +3 -25
- package/dist/lexical/ui/icons/Link/index.js.map +1 -1
- package/dist/lexical/ui/icons/Meatballs/index.js +5 -39
- package/dist/lexical/ui/icons/Meatballs/index.js.map +1 -1
- package/dist/lexical/ui/icons/OrderedList/index.js +7 -61
- package/dist/lexical/ui/icons/OrderedList/index.js.map +1 -1
- package/dist/lexical/ui/icons/Relationship/index.js +10 -58
- package/dist/lexical/ui/icons/Relationship/index.js.map +1 -1
- package/dist/lexical/ui/icons/Strikethrough/index.js +4 -34
- package/dist/lexical/ui/icons/Strikethrough/index.js.map +1 -1
- package/dist/lexical/ui/icons/Subscript/index.js +3 -24
- package/dist/lexical/ui/icons/Subscript/index.js.map +1 -1
- package/dist/lexical/ui/icons/Superscript/index.js +3 -24
- package/dist/lexical/ui/icons/Superscript/index.js.map +1 -1
- package/dist/lexical/ui/icons/Table/index.js +3 -24
- package/dist/lexical/ui/icons/Table/index.js.map +1 -1
- package/dist/lexical/ui/icons/Text/index.js +3 -24
- package/dist/lexical/ui/icons/Text/index.js.map +1 -1
- package/dist/lexical/ui/icons/TextState/index.js +12 -18
- package/dist/lexical/ui/icons/TextState/index.js.map +1 -1
- package/dist/lexical/ui/icons/Underline/index.js +4 -34
- package/dist/lexical/ui/icons/Underline/index.js.map +1 -1
- package/dist/lexical/ui/icons/UnorderedList/index.js +8 -81
- package/dist/lexical/ui/icons/UnorderedList/index.js.map +1 -1
- package/dist/lexical/ui/icons/Upload/index.js +5 -48
- package/dist/lexical/ui/icons/Upload/index.js.map +1 -1
- package/dist/lexical/utils/point.js.map +1 -1
- package/dist/lexical/utils/rect.js.map +1 -1
- package/dist/utilities/fieldsDrawer/Drawer.js +16 -41
- package/dist/utilities/fieldsDrawer/Drawer.js.map +1 -1
- package/dist/utilities/fieldsDrawer/DrawerContent.js +10 -42
- package/dist/utilities/fieldsDrawer/DrawerContent.js.map +1 -1
- package/dist/utilities/fieldsDrawer/useLexicalDocumentDrawer.js +1 -9
- package/dist/utilities/fieldsDrawer/useLexicalDocumentDrawer.js.map +1 -1
- package/dist/utilities/fieldsDrawer/useLexicalListDrawer.js +3 -11
- package/dist/utilities/fieldsDrawer/useLexicalListDrawer.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n i18n: I18nClient\n req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {\n return {\n upload: async ({ node, populate, providedCSSString }) => {\n const uploadNode = node as UploadDataImproved\n\n let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n // If there's no valid upload data, populate return an empty string\n if (typeof uploadNode.value !== 'object') {\n if (!populate) {\n return ''\n }\n uploadDoc = await populate<FileData & TypeWithID>({\n id: uploadNode.value,\n collectionSlug: uploadNode.relationTo,\n })\n } else {\n uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n }\n\n if (!uploadDoc) {\n return ''\n }\n\n const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config\n\n const thumbnailSRC: string =\n ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n const ReactDOMServer = (await import('react-dom/server')).default\n\n // hash fields to ensure they are diffed if they change\n const nodeFieldsHash = createHash('sha256')\n .update(JSON.stringify(node.fields ?? {}))\n .digest('hex')\n\n const JSX = (\n <div\n className={`${baseClass}${providedCSSString}`}\n data-enable-match=\"true\"\n data-fields-hash={`${nodeFieldsHash}`}\n data-filename={uploadDoc?.filename}\n data-lexical-upload-id={uploadNode.value}\n data-lexical-upload-relation-to={uploadNode.relationTo}\n data-src={thumbnailSRC}\n >\n <div className={`${baseClass}__card`}>\n <div className={`${baseClass}__thumbnail`}>\n {thumbnailSRC?.length ? (\n <img alt={uploadDoc?.filename} src={thumbnailSRC} />\n ) : (\n <File />\n )}\n </div>\n <div className={`${baseClass}__info`} data-enable-match=\"false\">\n <strong>{uploadDoc?.filename}</strong>\n <div className={`${baseClass}__meta`}>\n {formatFilesize(uploadDoc?.filesize)}\n {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n <React.Fragment>\n - \n {uploadDoc?.width}x{uploadDoc?.height}\n </React.Fragment>\n )}\n {uploadDoc?.mimeType && (\n <React.Fragment>\n - \n {uploadDoc?.mimeType}\n </React.Fragment>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n\n // Render to HTML\n const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n return html\n },\n }\n}\n"],"names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","i18n","req","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","relatedCollection","payload","collections","config","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","fields","digest","JSX","div","className","data-enable-match","data-fields-hash","data-filename","filename","data-lexical-upload-id","data-lexical-upload-relation-to","data-src","length","img","alt","src","strong","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n i18n: I18nClient\n req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {\n return {\n upload: async ({ node, populate, providedCSSString }) => {\n const uploadNode = node as UploadDataImproved\n\n let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n // If there's no valid upload data, populate return an empty string\n if (typeof uploadNode.value !== 'object') {\n if (!populate) {\n return ''\n }\n uploadDoc = await populate<FileData & TypeWithID>({\n id: uploadNode.value,\n collectionSlug: uploadNode.relationTo,\n })\n } else {\n uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n }\n\n if (!uploadDoc) {\n return ''\n }\n\n const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config\n\n const thumbnailSRC: string =\n ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n const ReactDOMServer = (await import('react-dom/server')).default\n\n // hash fields to ensure they are diffed if they change\n const nodeFieldsHash = createHash('sha256')\n .update(JSON.stringify(node.fields ?? {}))\n .digest('hex')\n\n const JSX = (\n <div\n className={`${baseClass}${providedCSSString}`}\n data-enable-match=\"true\"\n data-fields-hash={`${nodeFieldsHash}`}\n data-filename={uploadDoc?.filename}\n data-lexical-upload-id={uploadNode.value}\n data-lexical-upload-relation-to={uploadNode.relationTo}\n data-src={thumbnailSRC}\n >\n <div className={`${baseClass}__card`}>\n <div className={`${baseClass}__thumbnail`}>\n {thumbnailSRC?.length ? (\n <img alt={uploadDoc?.filename} src={thumbnailSRC} />\n ) : (\n <File />\n )}\n </div>\n <div className={`${baseClass}__info`} data-enable-match=\"false\">\n <strong>{uploadDoc?.filename}</strong>\n <div className={`${baseClass}__meta`}>\n {formatFilesize(uploadDoc?.filesize)}\n {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n <React.Fragment>\n - \n {uploadDoc?.width}x{uploadDoc?.height}\n </React.Fragment>\n )}\n {uploadDoc?.mimeType && (\n <React.Fragment>\n - \n {uploadDoc?.mimeType}\n </React.Fragment>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n\n // Render to HTML\n const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n return html\n },\n }\n}\n"],"names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","i18n","req","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","relatedCollection","payload","collections","config","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","fields","digest","JSX","div","className","data-enable-match","data-fields-hash","data-filename","filename","data-lexical-upload-id","data-lexical-upload-relation-to","data-src","length","img","alt","src","strong","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"mappings":"AAGA,SAASA,IAAI,QAAQ,qBAAoB;AACzC,SAASC,UAAU,QAAQ,SAAQ;AAEnC,OAAO,eAAc;AAErB,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAMzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,+BAGqC,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IAC9D,OAAO;QACLC,QAAQ,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YAClD,MAAMC,aAAaH;YAEnB,IAAII,YAAiDC;YAErD,mEAAmE;YACnE,IAAI,OAAOF,WAAWG,KAAK,KAAK,UAAU;gBACxC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAG,YAAY,MAAMH,SAAgC;oBAChDM,IAAIJ,WAAWG,KAAK;oBACpBE,gBAAgBL,WAAWM,UAAU;gBACvC;YACF,OAAO;gBACLL,YAAYD,WAAWG,KAAK;YAC9B;YAEA,IAAI,CAACF,WAAW;gBACd,OAAO;YACT;YAEA,MAAMM,oBAAoBZ,IAAIa,OAAO,CAACC,WAAW,CAACT,WAAWM,UAAU,CAAC,EAAEI;YAE1E,MAAMC,eACJ,AAAC,kBAAkBV,aAAcA,WAAWW,gBAA4BX,WAAWY,OAAO;YAE5F,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiB3B,WAAW,UAC/B4B,MAAM,CAACC,KAAKC,SAAS,CAACtB,KAAKuB,MAAM,IAAI,CAAC,IACtCC,MAAM,CAAC;YAEV,MAAMC,OACHC,IACCC,WAAW,GAAGhC,YAAYO,mBAAmB,EAC7C0B,kBAAkB,OAClBC,kBAAkB,GAAGV,gBAAgB,EACrCW,eAAe1B,WAAW2B,UAC1BC,wBAAwB7B,WAAWG,KAAK,EACxC2B,iCAAiC9B,WAAWM,UAAU,EACtDyB,UAAUpB,cACX;UACC,CAACY,IAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC,EAAE;YACpC,CAAC+B,IAAIC,WAAW,GAAGhC,UAAU,WAAW,CAAC,EAAE;cACzC,CAACmB,cAAcqB,UACZC,IAAIC,KAAKjC,WAAW2B,UAAUO,KAAKxB,mBAEnCvB,OACD;YACJ,EAAEmC,IAAI;YACN,CAACA,IAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC,EAAEiC,kBAAkB,QAAQ;cAC9D,CAACW,QAAQnC,WAAW2B,WAAWQ,OAAO;cACtC,CAACb,IAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC,EAAE;gBACpC,CAACF,eAAeW,WAAWoC,UAAU;gBACrC,CAAC,OAAOpC,WAAWqC,UAAU,YAAY,OAAOrC,WAAWsC,WAAW,aACnEhD,MAAMiD,SAAS;;oBAEd,CAACvC,WAAWqC,MAAM,CAAC,CAACrC,WAAWsC,OAAO;kBACxC,EAAEhD,MAAMiD,UACR;gBACF,CAACvC,WAAWwC,aACTlD,MAAMiD,SAAS;;oBAEd,CAACvC,WAAWwC,SAAS;kBACvB,EAAElD,MAAMiD,UACR;cACJ,EAAEjB,IAAI;YACR,EAAEA,IAAI;UACR,EAAEA,IAAI;QACR,EAAEA;YAGJ,iBAAiB;YACjB,MAAMmB,OAAO5B,eAAe6B,oBAAoB,CAACrB;YAEjD,OAAOoB;QACT;IACF;AACF,EAAC"}
|
package/dist/field/Diff/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
2
1
|
import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc';
|
|
3
2
|
import './index.scss';
|
|
4
3
|
import '../bundled.css';
|
|
5
|
-
import React from 'react';
|
|
6
4
|
import { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js';
|
|
7
5
|
import { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js';
|
|
8
6
|
import { LinkDiffHTMLConverterAsync } from './converters/link.js';
|
|
@@ -52,21 +50,10 @@ export const LexicalDiffComponent = async (args)=>{
|
|
|
52
50
|
fromHTML: fromHTML?.length ? fromHTML : '<p></p>',
|
|
53
51
|
toHTML: toHTML?.length ? toHTML : '<p></p>'
|
|
54
52
|
});
|
|
55
|
-
return
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
label: {
|
|
60
|
-
label: field.label,
|
|
61
|
-
locale
|
|
62
|
-
},
|
|
63
|
-
nestingLevel: nestingLevel,
|
|
64
|
-
To: To
|
|
65
|
-
}, void 0, false, {
|
|
66
|
-
fileName: "src/field/Diff/index.tsx",
|
|
67
|
-
lineNumber: 69,
|
|
68
|
-
columnNumber: 5
|
|
69
|
-
}, this);
|
|
53
|
+
return <FieldDiffContainer className={baseClass} From={From} i18n={i18n} label={{
|
|
54
|
+
label: field.label,
|
|
55
|
+
locale
|
|
56
|
+
}} nestingLevel={nestingLevel} To={To}/>;
|
|
70
57
|
};
|
|
71
58
|
|
|
72
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n const {\n comparisonValue: valueFrom,\n field,\n i18n,\n locale,\n nestingLevel,\n req,\n versionValue: valueTo,\n } = args\n\n const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n ...defaultConverters,\n ...LinkDiffHTMLConverterAsync({}),\n ...ListItemDiffHTMLConverterAsync,\n ...UploadDiffHTMLConverterAsync({ i18n, req }),\n ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n })\n\n const payloadPopulateFn = await getPayloadPopulateFn({\n currentDepth: 0,\n depth: 1,\n req,\n })\n const fromHTML = await convertLexicalToHTMLAsync({\n converters,\n data: valueFrom as SerializedEditorState,\n disableContainer: true,\n populate: payloadPopulateFn,\n })\n\n const toHTML = await convertLexicalToHTMLAsync({\n converters,\n data: valueTo as SerializedEditorState,\n disableContainer: true,\n populate: payloadPopulateFn,\n })\n\n const { From, To } = getHTMLDiffComponents({\n // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n toHTML: toHTML?.length ? toHTML : '<p></p>',\n })\n\n return (\n <FieldDiffContainer\n className={baseClass}\n From={From}\n i18n={i18n}\n label={{\n label: field.label,\n locale,\n }}\n nestingLevel={nestingLevel}\n To={To}\n />\n )\n}\n"],"names":["FieldDiffContainer","getHTMLDiffComponents","
|
|
1
|
+
{"version":3,"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n const {\n comparisonValue: valueFrom,\n field,\n i18n,\n locale,\n nestingLevel,\n req,\n versionValue: valueTo,\n } = args\n\n const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n ...defaultConverters,\n ...LinkDiffHTMLConverterAsync({}),\n ...ListItemDiffHTMLConverterAsync,\n ...UploadDiffHTMLConverterAsync({ i18n, req }),\n ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n })\n\n const payloadPopulateFn = await getPayloadPopulateFn({\n currentDepth: 0,\n depth: 1,\n req,\n })\n const fromHTML = await convertLexicalToHTMLAsync({\n converters,\n data: valueFrom as SerializedEditorState,\n disableContainer: true,\n populate: payloadPopulateFn,\n })\n\n const toHTML = await convertLexicalToHTMLAsync({\n converters,\n data: valueTo as SerializedEditorState,\n disableContainer: true,\n populate: payloadPopulateFn,\n })\n\n const { From, To } = getHTMLDiffComponents({\n // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n toHTML: toHTML?.length ? toHTML : '<p></p>',\n })\n\n return (\n <FieldDiffContainer\n className={baseClass}\n From={From}\n i18n={i18n}\n label={{\n label: field.label,\n locale,\n }}\n nestingLevel={nestingLevel}\n To={To}\n />\n )\n}\n"],"names":["FieldDiffContainer","getHTMLDiffComponents","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","populate","toHTML","From","To","length","className","label"],"mappings":"AAGA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,qBAAoB;AAE9E,OAAO,eAAc;AACrB,OAAO,iBAAgB;AAMvB,SAASC,yBAAyB,QAAQ,yDAAwD;AAClG,SAASC,oBAAoB,QAAQ,2DAA0D;AAC/F,SAASC,0BAA0B,QAAQ,uBAAsB;AACjE,SAASC,8BAA8B,QAAQ,iCAAgC;AAC/E,SAASC,kCAAkC,QAAQ,qCAAoC;AACvF,SAASC,6BAA6B,QAAQ,gCAA+B;AAC7E,SAASC,4BAA4B,QAAQ,+BAA8B;AAE3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAAyD,OAAOC;IAC3E,MAAM,EACJC,iBAAiBC,SAAS,EAC1BC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,GAAG,EACHC,cAAcC,OAAO,EACtB,GAAGT;IAEJ,MAAMU,aAA0C,CAAC,EAAEC,iBAAiB,EAAE,GAAM,CAAA;YAC1E,GAAGA,iBAAiB;YACpB,GAAGlB,2BAA2B,CAAC,EAAE;YACjC,GAAGC,8BAA8B;YACjC,GAAGG,6BAA6B;gBAAEO;gBAAMG;YAAI,EAAE;YAC9C,GAAGZ,mCAAmC;gBAAES;gBAAMG;YAAI,EAAE;YACpD,GAAGX,8BAA8B;gBAAEQ;gBAAMG;YAAI,EAAE;QACjD,CAAA;IAEA,MAAMK,oBAAoB,MAAMpB,qBAAqB;QACnDqB,cAAc;QACdC,OAAO;QACPP;IACF;IACA,MAAMQ,WAAW,MAAMxB,0BAA0B;QAC/CmB;QACAM,MAAMd;QACNe,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAMO,SAAS,MAAM5B,0BAA0B;QAC7CmB;QACAM,MAAMP;QACNQ,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAM,EAAEQ,IAAI,EAAEC,EAAE,EAAE,GAAG/B,sBAAsB;QACzC,0HAA0H;QAC1HyB,UAAUA,UAAUO,SAASP,WAAW;QACxCI,QAAQA,QAAQG,SAASH,SAAS;IACpC;IAEA,QACG9B,mBACCkC,WAAWzB,WACXsB,MAAMA,MACNhB,MAAMA,MACNoB,OAAO;QACLA,OAAOrB,MAAMqB,KAAK;QAClBnB;IACF,GACAC,cAAcA,cACde,IAAIA;AAGV,EAAC"}
|
package/dist/field/Field.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
3
2
|
import { BulkUploadProvider, FieldDescription, FieldError, FieldLabel, RenderCustomComponent, useEditDepth, useEffectEvent, useField } from '@payloadcms/ui';
|
|
4
3
|
import { mergeFieldStyles } from '@payloadcms/ui/shared';
|
|
5
4
|
import { dequal } from 'dequal/lite';
|
|
@@ -109,132 +108,34 @@ const RichTextComponent = // With rendered features n stuff
|
|
|
109
108
|
}, [
|
|
110
109
|
initialValue
|
|
111
110
|
]);
|
|
112
|
-
return
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
Label || /*#__PURE__*/ _jsxDEV(FieldLabel, {
|
|
132
|
-
label: label,
|
|
133
|
-
localized: localized,
|
|
134
|
-
path: path,
|
|
135
|
-
required: required
|
|
136
|
-
}, void 0, false, {
|
|
137
|
-
fileName: "src/field/Field.tsx",
|
|
138
|
-
lineNumber: 181,
|
|
139
|
-
columnNumber: 17
|
|
140
|
-
}, this),
|
|
141
|
-
/*#__PURE__*/ _jsxDEV("div", {
|
|
142
|
-
className: `${baseClass}__wrap`,
|
|
143
|
-
children: [
|
|
144
|
-
/*#__PURE__*/ _jsxDEV(ErrorBoundary, {
|
|
145
|
-
fallbackRender: fallbackRender,
|
|
146
|
-
onReset: ()=>{},
|
|
147
|
-
children: [
|
|
148
|
-
BeforeInput,
|
|
149
|
-
/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer
|
|
150
|
-
is rendered in the correct depth (not displayed *behind* the current drawer)*/ /*#__PURE__*/ _jsxDEV(BulkUploadProvider, {
|
|
151
|
-
drawerSlugPrefix: path,
|
|
152
|
-
children: /*#__PURE__*/ _jsxDEV(LexicalProvider, {
|
|
153
|
-
composerKey: pathWithEditDepth,
|
|
154
|
-
editorConfig: editorConfig,
|
|
155
|
-
fieldProps: props,
|
|
156
|
-
isSmallWidthViewport: isSmallWidthViewport,
|
|
157
|
-
// makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)
|
|
158
|
-
onChange: handleChange,
|
|
159
|
-
readOnly: disabled,
|
|
160
|
-
value: value
|
|
161
|
-
}, JSON.stringify({
|
|
162
|
-
path,
|
|
163
|
-
rerenderProviderKey
|
|
164
|
-
}), false, {
|
|
165
|
-
fileName: "src/field/Field.tsx",
|
|
166
|
-
lineNumber: 188,
|
|
167
|
-
columnNumber: 13
|
|
168
|
-
}, this)
|
|
169
|
-
}, void 0, false, {
|
|
170
|
-
fileName: "src/field/Field.tsx",
|
|
171
|
-
lineNumber: 187,
|
|
172
|
-
columnNumber: 11
|
|
173
|
-
}, this),
|
|
174
|
-
AfterInput
|
|
175
|
-
]
|
|
176
|
-
}, void 0, true, {
|
|
177
|
-
fileName: "src/field/Field.tsx",
|
|
178
|
-
lineNumber: 183,
|
|
179
|
-
columnNumber: 9
|
|
180
|
-
}, this),
|
|
181
|
-
/*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
|
|
182
|
-
CustomComponent: Description,
|
|
183
|
-
Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
|
|
184
|
-
description: description,
|
|
185
|
-
path: path
|
|
186
|
-
}, void 0, false, {
|
|
187
|
-
fileName: "src/field/Field.tsx",
|
|
188
|
-
lineNumber: 203,
|
|
189
|
-
columnNumber: 21
|
|
190
|
-
}, void 0)
|
|
191
|
-
}, void 0, false, {
|
|
192
|
-
fileName: "src/field/Field.tsx",
|
|
193
|
-
lineNumber: 201,
|
|
194
|
-
columnNumber: 9
|
|
195
|
-
}, this)
|
|
196
|
-
]
|
|
197
|
-
}, void 0, true, {
|
|
198
|
-
fileName: "src/field/Field.tsx",
|
|
199
|
-
lineNumber: 182,
|
|
200
|
-
columnNumber: 7
|
|
201
|
-
}, this)
|
|
202
|
-
]
|
|
203
|
-
}, pathWithEditDepth, true, {
|
|
204
|
-
fileName: "src/field/Field.tsx",
|
|
205
|
-
lineNumber: 176,
|
|
206
|
-
columnNumber: 5
|
|
207
|
-
}, this);
|
|
111
|
+
return <div className={classes} key={pathWithEditDepth} style={styles}>
|
|
112
|
+
<RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
|
|
113
|
+
{Label || <FieldLabel label={label} localized={localized} path={path} required={required}/>}
|
|
114
|
+
<div className={`${baseClass}__wrap`}>
|
|
115
|
+
<ErrorBoundary fallbackRender={fallbackRender} onReset={()=>{}}>
|
|
116
|
+
{BeforeInput}
|
|
117
|
+
{}
|
|
118
|
+
<BulkUploadProvider drawerSlugPrefix={path}>
|
|
119
|
+
<LexicalProvider composerKey={pathWithEditDepth} editorConfig={editorConfig} fieldProps={props} isSmallWidthViewport={isSmallWidthViewport} key={JSON.stringify({
|
|
120
|
+
path,
|
|
121
|
+
rerenderProviderKey
|
|
122
|
+
})} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)
|
|
123
|
+
onChange={handleChange} readOnly={disabled} value={value}/>
|
|
124
|
+
</BulkUploadProvider>
|
|
125
|
+
{AfterInput}
|
|
126
|
+
</ErrorBoundary>
|
|
127
|
+
<RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
|
|
128
|
+
</div>
|
|
129
|
+
</div>;
|
|
208
130
|
};
|
|
209
131
|
function fallbackRender({ error }) {
|
|
210
132
|
// Call resetErrorBoundary() to reset the error boundary and retry the render.
|
|
211
|
-
return
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}, void 0, false, {
|
|
218
|
-
fileName: "src/field/Field.tsx",
|
|
219
|
-
lineNumber: 215,
|
|
220
|
-
columnNumber: 7
|
|
221
|
-
}, this),
|
|
222
|
-
/*#__PURE__*/ _jsxDEV("pre", {
|
|
223
|
-
style: {
|
|
224
|
-
color: 'red'
|
|
225
|
-
},
|
|
226
|
-
children: error.message
|
|
227
|
-
}, void 0, false, {
|
|
228
|
-
fileName: "src/field/Field.tsx",
|
|
229
|
-
lineNumber: 216,
|
|
230
|
-
columnNumber: 7
|
|
231
|
-
}, this)
|
|
232
|
-
]
|
|
233
|
-
}, void 0, true, {
|
|
234
|
-
fileName: "src/field/Field.tsx",
|
|
235
|
-
lineNumber: 214,
|
|
236
|
-
columnNumber: 5
|
|
237
|
-
}, this);
|
|
133
|
+
return <div className="errorBoundary" role="alert">
|
|
134
|
+
<p>Something went wrong:</p>
|
|
135
|
+
<pre style={{
|
|
136
|
+
color: 'red'
|
|
137
|
+
}}>{error.message}</pre>
|
|
138
|
+
</div>;
|
|
238
139
|
}
|
|
239
140
|
export const RichText = RichTextComponent;
|
|
240
141
|
|
package/dist/field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n BulkUploadProvider,\n FieldDescription,\n FieldError,\n FieldLabel,\n RenderCustomComponent,\n useEditDepth,\n useEffectEvent,\n useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n {\n readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n } & LexicalRichTextFieldProps\n> = (props) => {\n const {\n editorConfig,\n field,\n field: {\n admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n label,\n localized,\n required,\n },\n path: pathFromProps,\n readOnly: readOnlyFromTopLevelProps,\n validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n } = props\n\n const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n const editDepth = useEditDepth()\n\n const memoizedValidate = useCallback<Validate>(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n return validate(value, { ...validationOptions, required })\n }\n return true\n },\n // Important: do not add props to the dependencies array.\n // This would cause an infinite loop and endless re-rendering.\n // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n [validate, required],\n )\n\n const {\n customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n disabled: disabledFromField,\n initialValue,\n path,\n setValue,\n showError,\n value,\n } = useField<SerializedEditorState>({\n potentiallyStalePath: pathFromProps,\n validate: memoizedValidate,\n })\n\n const disabled = readOnlyFromProps || disabledFromField\n\n const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\n\n useEffect(() => {\n const updateViewPortWidth = () => {\n const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n setIsSmallWidthViewport(isNextSmallWidthViewport)\n }\n }\n updateViewPortWidth()\n window.addEventListener('resize', updateViewPortWidth)\n\n return () => {\n window.removeEventListener('resize', updateViewPortWidth)\n }\n }, [isSmallWidthViewport])\n\n const classes = [\n baseClass,\n 'field-type',\n className,\n showError && 'error',\n disabled && `${baseClass}--read-only`,\n editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n ? `${baseClass}--show-gutter`\n : null,\n ]\n .filter(Boolean)\n .join(' ')\n\n const pathWithEditDepth = `${path}.${editDepth}`\n\n const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n const handleChange = useCallback(\n (editorState: EditorState) => {\n // Capture `editorState` in the closure so we can safely run later.\n const updateFieldValue = () => {\n const newState = editorState.toJSON()\n prevValueRef.current = newState\n setValue(newState)\n }\n\n // Queue the update for the browser’s idle time (or Safari shim)\n // and let the hook handle debouncing/cancellation.\n void runDeprioritized(updateFieldValue)\n },\n [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n )\n\n const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n const handleInitialValueChange = useEffectEvent(\n (initialValue: SerializedEditorState | undefined) => {\n // Object deep equality check here, as re-mounting the editor if\n // the new value is the same as the old one is not necessary.\n // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n // so we need to do a deep equality check here that does not care about key order => we use dequal.\n // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n if (\n prevValueRef.current !== value &&\n !dequal(\n prevValueRef.current != null\n ? JSON.parse(JSON.stringify(prevValueRef.current))\n : prevValueRef.current,\n value,\n )\n ) {\n prevInitialValueRef.current = initialValue\n prevValueRef.current = value\n setRerenderProviderKey(new Date())\n }\n },\n )\n\n useEffect(() => {\n // Needs to trigger for object reference changes - otherwise,\n // reacting to the same initial value change twice will cause\n // the second change to be ignored, even though the value has changed.\n // That's because initialValue is not kept up-to-date\n if (!Object.is(initialValue, prevInitialValueRef.current)) {\n handleInitialValueChange(initialValue)\n }\n }, [initialValue])\n\n return (\n <div className={classes} key={pathWithEditDepth} style={styles}>\n <RenderCustomComponent\n CustomComponent={Error}\n Fallback={<FieldError path={path} showError={showError} />}\n />\n {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n <div className={`${baseClass}__wrap`}>\n <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n {BeforeInput}\n {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n <BulkUploadProvider drawerSlugPrefix={path}>\n <LexicalProvider\n composerKey={pathWithEditDepth}\n editorConfig={editorConfig}\n fieldProps={props}\n isSmallWidthViewport={isSmallWidthViewport}\n key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n onChange={handleChange}\n readOnly={disabled}\n value={value}\n />\n </BulkUploadProvider>\n {AfterInput}\n </ErrorBoundary>\n <RenderCustomComponent\n CustomComponent={Description}\n Fallback={<FieldDescription description={description} path={path} />}\n />\n </div>\n </div>\n )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n return (\n <div className=\"errorBoundary\" role=\"alert\">\n <p>Something went wrong:</p>\n <pre style={{ color: 'red' }}>{error.message}</pre>\n </div>\n )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","div","style","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","p","pre","color","message","RichText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n BulkUploadProvider,\n FieldDescription,\n FieldError,\n FieldLabel,\n RenderCustomComponent,\n useEditDepth,\n useEffectEvent,\n useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n {\n readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n } & LexicalRichTextFieldProps\n> = (props) => {\n const {\n editorConfig,\n field,\n field: {\n admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n label,\n localized,\n required,\n },\n path: pathFromProps,\n readOnly: readOnlyFromTopLevelProps,\n validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n } = props\n\n const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n const editDepth = useEditDepth()\n\n const memoizedValidate = useCallback<Validate>(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n return validate(value, { ...validationOptions, required })\n }\n return true\n },\n // Important: do not add props to the dependencies array.\n // This would cause an infinite loop and endless re-rendering.\n // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n [validate, required],\n )\n\n const {\n customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n disabled: disabledFromField,\n initialValue,\n path,\n setValue,\n showError,\n value,\n } = useField<SerializedEditorState>({\n potentiallyStalePath: pathFromProps,\n validate: memoizedValidate,\n })\n\n const disabled = readOnlyFromProps || disabledFromField\n\n const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\n\n useEffect(() => {\n const updateViewPortWidth = () => {\n const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n setIsSmallWidthViewport(isNextSmallWidthViewport)\n }\n }\n updateViewPortWidth()\n window.addEventListener('resize', updateViewPortWidth)\n\n return () => {\n window.removeEventListener('resize', updateViewPortWidth)\n }\n }, [isSmallWidthViewport])\n\n const classes = [\n baseClass,\n 'field-type',\n className,\n showError && 'error',\n disabled && `${baseClass}--read-only`,\n editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n ? `${baseClass}--show-gutter`\n : null,\n ]\n .filter(Boolean)\n .join(' ')\n\n const pathWithEditDepth = `${path}.${editDepth}`\n\n const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n const handleChange = useCallback(\n (editorState: EditorState) => {\n // Capture `editorState` in the closure so we can safely run later.\n const updateFieldValue = () => {\n const newState = editorState.toJSON()\n prevValueRef.current = newState\n setValue(newState)\n }\n\n // Queue the update for the browser’s idle time (or Safari shim)\n // and let the hook handle debouncing/cancellation.\n void runDeprioritized(updateFieldValue)\n },\n [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n )\n\n const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n const handleInitialValueChange = useEffectEvent(\n (initialValue: SerializedEditorState | undefined) => {\n // Object deep equality check here, as re-mounting the editor if\n // the new value is the same as the old one is not necessary.\n // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n // so we need to do a deep equality check here that does not care about key order => we use dequal.\n // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n if (\n prevValueRef.current !== value &&\n !dequal(\n prevValueRef.current != null\n ? JSON.parse(JSON.stringify(prevValueRef.current))\n : prevValueRef.current,\n value,\n )\n ) {\n prevInitialValueRef.current = initialValue\n prevValueRef.current = value\n setRerenderProviderKey(new Date())\n }\n },\n )\n\n useEffect(() => {\n // Needs to trigger for object reference changes - otherwise,\n // reacting to the same initial value change twice will cause\n // the second change to be ignored, even though the value has changed.\n // That's because initialValue is not kept up-to-date\n if (!Object.is(initialValue, prevInitialValueRef.current)) {\n handleInitialValueChange(initialValue)\n }\n }, [initialValue])\n\n return (\n <div className={classes} key={pathWithEditDepth} style={styles}>\n <RenderCustomComponent\n CustomComponent={Error}\n Fallback={<FieldError path={path} showError={showError} />}\n />\n {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n <div className={`${baseClass}__wrap`}>\n <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n {BeforeInput}\n {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n <BulkUploadProvider drawerSlugPrefix={path}>\n <LexicalProvider\n composerKey={pathWithEditDepth}\n editorConfig={editorConfig}\n fieldProps={props}\n isSmallWidthViewport={isSmallWidthViewport}\n key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n onChange={handleChange}\n readOnly={disabled}\n value={value}\n />\n </BulkUploadProvider>\n {AfterInput}\n </ErrorBoundary>\n <RenderCustomComponent\n CustomComponent={Description}\n Fallback={<FieldDescription description={description} path={path} />}\n />\n </div>\n </div>\n )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n return (\n <div className=\"errorBoundary\" role=\"alert\">\n <p>Something went wrong:</p>\n <pre style={{ color: 'red' }}>{error.message}</pre>\n </div>\n )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","div","key","style","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","p","pre","color","message","RichText"],"mappings":"AAAA;AAGA,SACEA,kBAAkB,EAClBC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,qBAAqB,EACrBC,YAAY,EACZC,cAAc,EACdC,QAAQ,QACH,iBAAgB;AACvB,SAASC,gBAAgB,QAAQ,wBAAuB;AACxD,SAASC,MAAM,QAAQ,cAAa;AAEpC,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACxE,SAASC,aAAa,QAAQ,uBAAsB;AAIpD,OAAO,oCAAmC;AAC1C,OAAO,gBAAe;AACtB,OAAO,eAAc;AAIrB,SAASC,eAAe,QAAQ,gCAA+B;AAC/D,SAASC,mBAAmB,QAAQ,sCAAqC;AAEzE,MAAMC,YAAY;AAElB,MAAMC,oBAEiD,iCAAiC;AAEpF,CAACC;IACH,MAAM,EACJC,YAAY,EACZC,KAAK,EACLA,OAAO,EACLC,OAAO,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAUC,iBAAiB,EAAE,GAAG,CAAC,CAAC,EACnEC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACT,EACDC,MAAMC,aAAa,EACnBN,UAAUO,yBAAyB,EACnCC,QAAQ,EACT,GADW,0FAA0F;IAClGd;IAEJ,MAAMe,oBAAoBF,6BAA6BN;IAEvD,MAAMS,YAAY/B;IAElB,MAAMgC,mBAAmB1B,YACvB,CAAC2B,OAAOC;QACN,IAAI,OAAOL,aAAa,YAAY;YAClC,oFAAoF;YACpF,OAAOA,SAASI,OAAO;gBAAE,GAAGC,iBAAiB;gBAAET;YAAS;QAC1D;QACA,OAAO;IACT,GACA,yDAAyD;IACzD,8DAA8D;IAC9D,iHAAiH;IACjH;QAACI;QAAUJ;KAAS;IAGtB,MAAM,EACJU,kBAAkB,EAAEC,UAAU,EAAEC,WAAW,EAAEC,WAAW,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAG,CAAC,CAAC,EAC7EC,UAAUC,iBAAiB,EAC3BC,YAAY,EACZjB,IAAI,EACJkB,QAAQ,EACRC,SAAS,EACTZ,KAAK,EACN,GAAG/B,SAAgC;QAClC4C,sBAAsBnB;QACtBE,UAAUG;IACZ;IAEA,MAAMS,WAAWX,qBAAqBY;IAEtC,MAAM,CAACK,sBAAsBC,wBAAwB,GAAGvC,SAAkB;IAC1E,MAAM,CAACwC,qBAAqBC,uBAAuB,GAAGzC;IAEtD,MAAM0C,sBAAsB9C,MAAM+C,MAAM,CAAoCT;IAC5E,MAAMU,eAAehD,MAAM+C,MAAM,CAAoCnB;IAErE1B,UAAU;QACR,MAAM+C,sBAAsB;YAC1B,MAAMC,2BAA2BC,OAAOC,UAAU,CAAC,sBAAsBC,OAAO;YAEhF,IAAIH,6BAA6BR,sBAAsB;gBACrDC,wBAAwBO;YAC1B;QACF;QACAD;QACAE,OAAOG,gBAAgB,CAAC,UAAUL;QAElC,OAAO;YACLE,OAAOI,mBAAmB,CAAC,UAAUN;QACvC;IACF,GAAG;QAACP;KAAqB;IAEzB,MAAMc,UAAU;QACdhD;QACA;QACAM;QACA0B,aAAa;QACbJ,YAAY,GAAG5B,UAAU,WAAW,CAAC;QACrCG,cAAcE,OAAO4C,eAAe,QAAQ,CAACf,uBACzC,GAAGlC,UAAU,aAAa,CAAC,GAC3B;KACL,CACEkD,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,MAAMC,oBAAoB,GAAGxC,KAAK,CAAC,EAAEK,WAAW;IAEhD,MAAMoC,mBAAmBvD;IAAsB,6BAA6B;IAE5E,MAAMwD,eAAe9D,YACnB,CAAC+D;QACC,mEAAmE;QACnE,MAAMC,mBAAmB;YACvB,MAAMC,WAAWF,YAAYG,MAAM;YACnCnB,aAAaoB,OAAO,GAAGF;YACvB3B,SAAS2B;QACX;QAEA,gEAAgE;QAChE,mDAAmD;QACnD,KAAKJ,iBAAiBG;IACxB,GACA;QAAC1B;QAAUuB;KAAiB;IAAE,yDAAyD;IAGzF,MAAMO,SAASlE,QAAQ,IAAML,iBAAiBc,QAAQ;QAACA;KAAM;IAE7D,MAAM0D,2BAA2B1E,eAC/B,CAAC0C;QACC,gEAAgE;QAChE,6DAA6D;QAC7D,oFAAoF;QACpF,mGAAmG;QACnG,sJAAsJ;QACtJ,IACEU,aAAaoB,OAAO,KAAKxC,SACzB,CAAC7B,OACCiD,aAAaoB,OAAO,IAAI,OACpBG,KAAKC,KAAK,CAACD,KAAKE,SAAS,CAACzB,aAAaoB,OAAO,KAC9CpB,aAAaoB,OAAO,EACxBxC,QAEF;YACAkB,oBAAoBsB,OAAO,GAAG9B;YAC9BU,aAAaoB,OAAO,GAAGxC;YACvBiB,uBAAuB,IAAI6B;QAC7B;IACF;IAGFxE,UAAU;QACR,6DAA6D;QAC7D,6DAA6D;QAC7D,sEAAsE;QACtE,qDAAqD;QACrD,IAAI,CAACyE,OAAOC,EAAE,CAACtC,cAAcQ,oBAAoBsB,OAAO,GAAG;YACzDE,yBAAyBhC;QAC3B;IACF,GAAG;QAACA;KAAa;IAEjB,QACGuC,IAAI/D,WAAW0C,SAASsB,KAAKjB,mBAAmBkB,OAAOV,QAAQ;MAC9D,CAAC3E,sBACCsF,iBAAiB9C,OACjB+C,WAAWzF,WAAW6B,MAAMA,MAAMmB,WAAWA,eAC7C;MACF,CAACL,UAAU1C,WAAWyB,OAAOA,OAAOC,WAAWA,WAAWE,MAAMA,MAAMD,UAAUA,YAAa;MAC7F,CAACyD,IAAI/D,WAAW,GAAGN,UAAU,MAAM,CAAC,EAAE;QACpC,CAACH,cAAc6E,gBAAgBA,gBAAgBC,SAAS,KAAO,GAAG;UAChE,CAACnD,YAAY;UACb,EAC+E;UAC/E,CAAC1C,mBAAmB8F,kBAAkB/D,MAAM;YAC1C,CAACf,gBACC+E,aAAaxB,mBACblD,cAAcA,cACd2E,YAAY5E,OACZgC,sBAAsBA,sBACtBoC,KAAKP,KAAKE,SAAS,CAAC;QAAEpD;QAAMuB;IAAoB,IAAI,0QAA0Q;IAC9T2C,UAAUxB,cACV/C,UAAUoB,UACVR,OAAOA,QACP;UACJ,EAAEtC,mBAAmB;UACrB,CAACyC,WAAW;QACd,EAAE1B,cAAc;QAChB,CAACX,sBACCsF,iBAAiB/C,aACjBgD,WAAW1F,iBAAiBwB,aAAaA,aAAaM,MAAMA,UAC5D;MACJ,EAAEwD,IAAI;IACR,EAAEA;AAEN;AAEA,SAASK,eAAe,EAAEM,KAAK,EAAoB;IACjD,8EAA8E;IAE9E,QACGX,IAAI/D,UAAU,gBAAgB2E,KAAK,QAAQ;MAC1C,CAACC,EAAE,qBAAqB,EAAEA,EAAE;MAC5B,CAACC,IAAIZ,OAAO;QAAEa,OAAO;IAAM,IAAIJ,MAAMK,OAAO,GAAGF,IAAI;IACrD,EAAEd;AAEN;AAEA,OAAO,MAAMiB,WAAqCrF,kBAAiB"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
3
2
|
import { FieldContext, FieldPathContext, ServerFunctionsContext, ShimmerEffect, useServerFunctions } from '@payloadcms/ui';
|
|
4
3
|
import React, { useCallback, useEffect, useRef } from 'react';
|
|
5
4
|
/**
|
|
@@ -56,11 +55,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
|
|
|
56
55
|
renderLexical
|
|
57
56
|
]);
|
|
58
57
|
if (!Component) {
|
|
59
|
-
return typeof Loading !== 'undefined' ? Loading :
|
|
60
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
61
|
-
lineNumber: 82,
|
|
62
|
-
columnNumber: 55
|
|
63
|
-
}, this);
|
|
58
|
+
return typeof Loading !== 'undefined' ? Loading : <ShimmerEffect/>;
|
|
64
59
|
}
|
|
65
60
|
/**
|
|
66
61
|
* By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments
|
|
@@ -77,23 +72,13 @@ import React, { useCallback, useEffect, useRef } from 'react';
|
|
|
77
72
|
}
|
|
78
73
|
};
|
|
79
74
|
if (typeof value === 'undefined' && !setValue) {
|
|
80
|
-
return
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}, fieldPath, false, {
|
|
88
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
89
|
-
lineNumber: 104,
|
|
90
|
-
columnNumber: 9
|
|
91
|
-
}, this)
|
|
92
|
-
}, void 0, false, {
|
|
93
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
94
|
-
lineNumber: 103,
|
|
95
|
-
columnNumber: 7
|
|
96
|
-
}, this);
|
|
75
|
+
return <ServerFunctionsContext value={{
|
|
76
|
+
...adjustedServerFunctionContext
|
|
77
|
+
}}>
|
|
78
|
+
<FieldPathContext key={fieldPath} value={fieldPath}>
|
|
79
|
+
{Component}
|
|
80
|
+
</FieldPathContext>
|
|
81
|
+
</ServerFunctionsContext>;
|
|
97
82
|
}
|
|
98
83
|
const fieldValue = {
|
|
99
84
|
disabled: false,
|
|
@@ -106,30 +91,13 @@ import React, { useCallback, useEffect, useRef } from 'react';
|
|
|
106
91
|
showError: false,
|
|
107
92
|
value
|
|
108
93
|
};
|
|
109
|
-
return
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
value: fieldValue,
|
|
117
|
-
children: Component
|
|
118
|
-
}, void 0, false, {
|
|
119
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
120
|
-
lineNumber: 126,
|
|
121
|
-
columnNumber: 9
|
|
122
|
-
}, this)
|
|
123
|
-
}, fieldPath, false, {
|
|
124
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
125
|
-
lineNumber: 125,
|
|
126
|
-
columnNumber: 7
|
|
127
|
-
}, this)
|
|
128
|
-
}, void 0, false, {
|
|
129
|
-
fileName: "src/field/RenderLexical/index.tsx",
|
|
130
|
-
lineNumber: 124,
|
|
131
|
-
columnNumber: 5
|
|
132
|
-
}, this);
|
|
94
|
+
return <ServerFunctionsContext value={{
|
|
95
|
+
...adjustedServerFunctionContext
|
|
96
|
+
}}>
|
|
97
|
+
<FieldPathContext key={fieldPath} value={fieldPath}>
|
|
98
|
+
<FieldContext value={fieldValue}>{Component}</FieldContext>
|
|
99
|
+
</FieldPathContext>
|
|
100
|
+
</ServerFunctionsContext>;
|
|
133
101
|
};
|
|
134
102
|
|
|
135
103
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/field/RenderLexical/index.tsx"],"sourcesContent":["'use client'\nimport type { RichTextField } from 'payload'\n\nimport {\n FieldContext,\n FieldPathContext,\n type FieldType,\n type RenderFieldServerFnArgs,\n ServerFunctionsContext,\n type ServerFunctionsContextType,\n ShimmerEffect,\n useServerFunctions,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type { DefaultTypedEditorState } from '../../nodeTypes.js'\nimport type { LexicalRichTextField } from '../../types.js'\n\n/**\n * Utility to render a lexical editor on the client.\n *\n * @experimental - may break in minor releases\n * @todo - replace this with a general utility that works for all fields. Maybe merge with packages/ui/src/forms/RenderFields/RenderField.tsx\n */\nexport const RenderLexical: React.FC<\n /**\n * If value or setValue, or both, is provided, this component will manage its own value.\n * If neither is passed, it will rely on the parent form to manage the value.\n */\n {\n /**\n * Override the loading state while the field component is being fetched and rendered.\n */\n Loading?: React.ReactElement\n\n setValue?: FieldType<DefaultTypedEditorState | undefined>['setValue']\n value?: FieldType<DefaultTypedEditorState | undefined>['value']\n } & RenderFieldServerFnArgs<LexicalRichTextField>\n> = (args) => {\n const { field, initialValue, Loading, path, schemaPath, setValue, value } = args\n const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n const serverFunctionContext = useServerFunctions()\n const { _internal_renderField } = serverFunctionContext\n\n const [entityType, entitySlug] = schemaPath.split('.', 2)\n\n const fieldPath = path ?? (field && 'name' in field ? field?.name : '') ?? ''\n\n const renderLexical = useCallback(() => {\n async function render() {\n const { Field } = await _internal_renderField({\n field: {\n ...((field as RichTextField) || {}),\n type: 'richText',\n admin: {\n ...((field as RichTextField)?.admin || {}),\n // When using \"fake\" anchor fields, hidden is often set to true. We need to override that here to ensure the field is rendered.\n hidden: false,\n },\n },\n initialValue: initialValue ?? undefined,\n path,\n schemaPath,\n })\n\n setComponent(Field)\n }\n void render()\n }, [_internal_renderField, schemaPath, path, field, initialValue])\n\n const mounted = useRef(false)\n\n useEffect(() => {\n if (mounted.current) {\n return\n }\n mounted.current = true\n void renderLexical()\n }, [renderLexical])\n\n if (!Component) {\n return typeof Loading !== 'undefined' ? Loading : <ShimmerEffect />\n }\n\n /**\n * By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments\n * of the current field. However, we need to override those arguments to get it to make requests based on the\n * *target* field. The server only knows the schema map of the target field.\n */\n const adjustedServerFunctionContext: ServerFunctionsContextType = {\n ...serverFunctionContext,\n getFormState: async (getFormStateArgs) => {\n return serverFunctionContext.getFormState({\n ...getFormStateArgs,\n collectionSlug: entityType === 'collection' ? entitySlug : undefined,\n globalSlug: entityType === 'global' ? entitySlug : undefined,\n })\n },\n }\n\n if (typeof value === 'undefined' && !setValue) {\n return (\n <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n <FieldPathContext key={fieldPath} value={fieldPath}>\n {Component}\n </FieldPathContext>\n </ServerFunctionsContext>\n )\n }\n\n const fieldValue: FieldType<DefaultTypedEditorState | undefined> = {\n disabled: false,\n formInitializing: false,\n formProcessing: false,\n formSubmitted: false,\n initialValue: value,\n path: fieldPath,\n setValue: setValue ?? (() => undefined),\n showError: false,\n value,\n }\n\n return (\n <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n <FieldPathContext key={fieldPath} value={fieldPath}>\n <FieldContext value={fieldValue}>{Component}</FieldContext>\n </FieldPathContext>\n </ServerFunctionsContext>\n )\n}\n"],"names":["FieldContext","FieldPathContext","ServerFunctionsContext","ShimmerEffect","useServerFunctions","React","useCallback","useEffect","useRef","RenderLexical","args","field","initialValue","Loading","path","schemaPath","setValue","value","Component","setComponent","useState","serverFunctionContext","_internal_renderField","entityType","entitySlug","split","fieldPath","name","renderLexical","render","Field","type","admin","hidden","undefined","mounted","current","adjustedServerFunctionContext","getFormState","getFormStateArgs","collectionSlug","globalSlug","fieldValue","disabled","formInitializing","formProcessing","formSubmitted","showError"],"mappings":"AAAA
|
|
1
|
+
{"version":3,"sources":["../../../src/field/RenderLexical/index.tsx"],"sourcesContent":["'use client'\nimport type { RichTextField } from 'payload'\n\nimport {\n FieldContext,\n FieldPathContext,\n type FieldType,\n type RenderFieldServerFnArgs,\n ServerFunctionsContext,\n type ServerFunctionsContextType,\n ShimmerEffect,\n useServerFunctions,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\n\nimport type { DefaultTypedEditorState } from '../../nodeTypes.js'\nimport type { LexicalRichTextField } from '../../types.js'\n\n/**\n * Utility to render a lexical editor on the client.\n *\n * @experimental - may break in minor releases\n * @todo - replace this with a general utility that works for all fields. Maybe merge with packages/ui/src/forms/RenderFields/RenderField.tsx\n */\nexport const RenderLexical: React.FC<\n /**\n * If value or setValue, or both, is provided, this component will manage its own value.\n * If neither is passed, it will rely on the parent form to manage the value.\n */\n {\n /**\n * Override the loading state while the field component is being fetched and rendered.\n */\n Loading?: React.ReactElement\n\n setValue?: FieldType<DefaultTypedEditorState | undefined>['setValue']\n value?: FieldType<DefaultTypedEditorState | undefined>['value']\n } & RenderFieldServerFnArgs<LexicalRichTextField>\n> = (args) => {\n const { field, initialValue, Loading, path, schemaPath, setValue, value } = args\n const [Component, setComponent] = React.useState<null | React.ReactNode>(null)\n const serverFunctionContext = useServerFunctions()\n const { _internal_renderField } = serverFunctionContext\n\n const [entityType, entitySlug] = schemaPath.split('.', 2)\n\n const fieldPath = path ?? (field && 'name' in field ? field?.name : '') ?? ''\n\n const renderLexical = useCallback(() => {\n async function render() {\n const { Field } = await _internal_renderField({\n field: {\n ...((field as RichTextField) || {}),\n type: 'richText',\n admin: {\n ...((field as RichTextField)?.admin || {}),\n // When using \"fake\" anchor fields, hidden is often set to true. We need to override that here to ensure the field is rendered.\n hidden: false,\n },\n },\n initialValue: initialValue ?? undefined,\n path,\n schemaPath,\n })\n\n setComponent(Field)\n }\n void render()\n }, [_internal_renderField, schemaPath, path, field, initialValue])\n\n const mounted = useRef(false)\n\n useEffect(() => {\n if (mounted.current) {\n return\n }\n mounted.current = true\n void renderLexical()\n }, [renderLexical])\n\n if (!Component) {\n return typeof Loading !== 'undefined' ? Loading : <ShimmerEffect />\n }\n\n /**\n * By default, the lexical will make form state requests (e.g. to get drawer fields), passing in the arguments\n * of the current field. However, we need to override those arguments to get it to make requests based on the\n * *target* field. The server only knows the schema map of the target field.\n */\n const adjustedServerFunctionContext: ServerFunctionsContextType = {\n ...serverFunctionContext,\n getFormState: async (getFormStateArgs) => {\n return serverFunctionContext.getFormState({\n ...getFormStateArgs,\n collectionSlug: entityType === 'collection' ? entitySlug : undefined,\n globalSlug: entityType === 'global' ? entitySlug : undefined,\n })\n },\n }\n\n if (typeof value === 'undefined' && !setValue) {\n return (\n <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n <FieldPathContext key={fieldPath} value={fieldPath}>\n {Component}\n </FieldPathContext>\n </ServerFunctionsContext>\n )\n }\n\n const fieldValue: FieldType<DefaultTypedEditorState | undefined> = {\n disabled: false,\n formInitializing: false,\n formProcessing: false,\n formSubmitted: false,\n initialValue: value,\n path: fieldPath,\n setValue: setValue ?? (() => undefined),\n showError: false,\n value,\n }\n\n return (\n <ServerFunctionsContext value={{ ...adjustedServerFunctionContext }}>\n <FieldPathContext key={fieldPath} value={fieldPath}>\n <FieldContext value={fieldValue}>{Component}</FieldContext>\n </FieldPathContext>\n </ServerFunctionsContext>\n )\n}\n"],"names":["FieldContext","FieldPathContext","ServerFunctionsContext","ShimmerEffect","useServerFunctions","React","useCallback","useEffect","useRef","RenderLexical","args","field","initialValue","Loading","path","schemaPath","setValue","value","Component","setComponent","useState","serverFunctionContext","_internal_renderField","entityType","entitySlug","split","fieldPath","name","renderLexical","render","Field","type","admin","hidden","undefined","mounted","current","adjustedServerFunctionContext","getFormState","getFormStateArgs","collectionSlug","globalSlug","key","fieldValue","disabled","formInitializing","formProcessing","formSubmitted","showError"],"mappings":"AAAA;AAGA,SACEA,YAAY,EACZC,gBAAgB,EAGhBC,sBAAsB,EAEtBC,aAAa,EACbC,kBAAkB,QACb,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAK7D;;;;;CAKC,GACD,OAAO,MAAMC,gBACX;;;GAGC,GAEC;;KAEC,GAMD,CAACC;IACH,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGP;IAC5E,MAAM,CAACQ,WAAWC,aAAa,GAAGd,MAAMe,QAAQ,CAAyB;IACzE,MAAMC,wBAAwBjB;IAC9B,MAAM,EAAEkB,qBAAqB,EAAE,GAAGD;IAElC,MAAM,CAACE,YAAYC,WAAW,GAAGT,WAAWU,KAAK,CAAC,KAAK;IAEvD,MAAMC,YAAYZ,QAASH,CAAAA,SAAS,UAAUA,QAAQA,OAAOgB,OAAO,EAAC,KAAM;IAE3E,MAAMC,gBAAgBtB,YAAY;QAChC,eAAeuB;YACb,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMR,sBAAsB;gBAC5CX,OAAO;oBACL,GAAI,AAACA,SAA2B,CAAC,CAAC;oBAClCoB,MAAM;oBACNC,OAAO;wBACL,GAAI,AAACrB,OAAyBqB,SAAS,CAAC,CAAC;wBACzC,+HAA+H;wBAC/HC,QAAQ;oBACV;gBACF;gBACArB,cAAcA,gBAAgBsB;gBAC9BpB;gBACAC;YACF;YAEAI,aAAaW;QACf;QACA,KAAKD;IACP,GAAG;QAACP;QAAuBP;QAAYD;QAAMH;QAAOC;KAAa;IAEjE,MAAMuB,UAAU3B,OAAO;IAEvBD,UAAU;QACR,IAAI4B,QAAQC,OAAO,EAAE;YACnB;QACF;QACAD,QAAQC,OAAO,GAAG;QAClB,KAAKR;IACP,GAAG;QAACA;KAAc;IAElB,IAAI,CAACV,WAAW;QACd,OAAO,OAAOL,YAAY,cAAcA,WAAWV;IACrD;IAEA;;;;GAIC,GACD,MAAMkC,gCAA4D;QAChE,GAAGhB,qBAAqB;QACxBiB,cAAc,OAAOC;YACnB,OAAOlB,sBAAsBiB,YAAY,CAAC;gBACxC,GAAGC,gBAAgB;gBACnBC,gBAAgBjB,eAAe,eAAeC,aAAaU;gBAC3DO,YAAYlB,eAAe,WAAWC,aAAaU;YACrD;QACF;IACF;IAEA,IAAI,OAAOjB,UAAU,eAAe,CAACD,UAAU;QAC7C,QACGd,uBAAuBe,OAAO;YAAE,GAAGoB,6BAA6B;QAAC,GAAG;QACnE,CAACpC,iBAAiByC,KAAKhB,WAAWT,OAAOS,WAAW;UAClD,CAACR,UAAU;QACb,EAAEjB,iBAAiB;MACrB,EAAEC;IAEN;IAEA,MAAMyC,aAA6D;QACjEC,UAAU;QACVC,kBAAkB;QAClBC,gBAAgB;QAChBC,eAAe;QACfnC,cAAcK;QACdH,MAAMY;QACNV,UAAUA,YAAa,CAAA,IAAMkB,SAAQ;QACrCc,WAAW;QACX/B;IACF;IAEA,QACGf,uBAAuBe,OAAO;QAAE,GAAGoB,6BAA6B;IAAC,GAAG;MACnE,CAACpC,iBAAiByC,KAAKhB,WAAWT,OAAOS,WAAW;QAClD,CAAC1B,aAAaiB,OAAO0B,aAAazB,YAAYlB,aAAa;MAC7D,EAAEC,iBAAiB;IACrB,EAAEC;AAEN,EAAC"}
|
package/dist/field/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
3
2
|
import { ShimmerEffect, useConfig } from '@payloadcms/ui';
|
|
4
|
-
import
|
|
3
|
+
import { lazy, Suspense, useEffect, useState } from 'react';
|
|
5
4
|
import { defaultEditorLexicalConfig } from '../lexical/config/client/default.js';
|
|
6
5
|
import { loadClientFeatures } from '../lexical/config/client/loader.js';
|
|
7
6
|
import { sanitizeClientEditorConfig } from '../lexical/config/client/sanitize.js';
|
|
8
|
-
const RichTextEditor =
|
|
7
|
+
const RichTextEditor = lazy(()=>import('./Field.js').then((module)=>({
|
|
9
8
|
default: module.RichText
|
|
10
9
|
})));
|
|
11
10
|
export const RichTextField = (props)=>{
|
|
@@ -48,27 +47,9 @@ export const RichTextField = (props)=>{
|
|
|
48
47
|
schemaPath
|
|
49
48
|
]);
|
|
50
49
|
// TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate
|
|
51
|
-
return
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, void 0, false, {
|
|
55
|
-
fileName: "src/field/index.tsx",
|
|
56
|
-
lineNumber: 79,
|
|
57
|
-
columnNumber: 25
|
|
58
|
-
}, void 0),
|
|
59
|
-
children: finalSanitizedEditorConfig && /*#__PURE__*/ _jsxDEV(RichTextEditor, {
|
|
60
|
-
...props,
|
|
61
|
-
editorConfig: finalSanitizedEditorConfig
|
|
62
|
-
}, void 0, false, {
|
|
63
|
-
fileName: "src/field/index.tsx",
|
|
64
|
-
lineNumber: 81,
|
|
65
|
-
columnNumber: 9
|
|
66
|
-
}, this)
|
|
67
|
-
}, void 0, false, {
|
|
68
|
-
fileName: "src/field/index.tsx",
|
|
69
|
-
lineNumber: 79,
|
|
70
|
-
columnNumber: 5
|
|
71
|
-
}, this);
|
|
50
|
+
return <Suspense fallback={<ShimmerEffect height="35vh"/>}>
|
|
51
|
+
{finalSanitizedEditorConfig && <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig}/>}
|
|
52
|
+
</Suspense>;
|
|
72
53
|
};
|
|
73
54
|
|
|
74
55
|
//# sourceMappingURL=index.js.map
|
package/dist/field/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RichTextFieldClient } from 'payload'\n\nimport { ShimmerEffect, useConfig } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../features/typesClient.js'\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../lexical/config/client/default.js'\nimport { loadClientFeatures } from '../lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<LexicalRichTextFieldProps> = (props) => {\n const {\n admin = {},\n clientFeatures,\n featureClientImportMap = {},\n featureClientSchemaMap,\n field,\n lexicalEditorConfig = defaultEditorLexicalConfig,\n schemaPath,\n } = props\n\n const { config } = useConfig()\n\n const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n useState<null | SanitizedClientEditorConfig>(null)\n\n useEffect(() => {\n if (finalSanitizedEditorConfig) {\n return\n }\n\n const featureProvidersLocal: FeatureProviderClient<any, any>[] = []\n for (const clientFeature of Object.values(clientFeatures)) {\n if (!clientFeature.clientFeatureProvider) {\n continue\n }\n featureProvidersLocal.push(\n clientFeature.clientFeatureProvider(clientFeature.clientFeatureProps),\n ) // Execute the clientFeatureProvider function here, as the server cannot execute functions imported from use client files\n }\n\n const resolvedClientFeatures = loadClientFeatures({\n config,\n featureClientImportMap,\n featureClientSchemaMap,\n field: field as RichTextFieldClient,\n schemaPath: schemaPath ?? field.name,\n unSanitizedEditorConfig: {\n features: featureProvidersLocal,\n lexical: lexicalEditorConfig,\n },\n })\n\n setFinalSanitizedEditorConfig(\n sanitizeClientEditorConfig(resolvedClientFeatures, lexicalEditorConfig, admin),\n )\n }, [\n admin,\n clientFeatures,\n config,\n featureClientImportMap,\n featureClientSchemaMap,\n field,\n finalSanitizedEditorConfig,\n lexicalEditorConfig,\n schemaPath,\n ]) // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate\n\n return (\n <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n {finalSanitizedEditorConfig && (\n <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n )}\n </Suspense>\n )\n}\n"],"names":["ShimmerEffect","useConfig","
|
|
1
|
+
{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport type { RichTextFieldClient } from 'payload'\n\nimport { ShimmerEffect, useConfig } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../features/typesClient.js'\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../lexical/config/client/default.js'\nimport { loadClientFeatures } from '../lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<LexicalRichTextFieldProps> = (props) => {\n const {\n admin = {},\n clientFeatures,\n featureClientImportMap = {},\n featureClientSchemaMap,\n field,\n lexicalEditorConfig = defaultEditorLexicalConfig,\n schemaPath,\n } = props\n\n const { config } = useConfig()\n\n const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n useState<null | SanitizedClientEditorConfig>(null)\n\n useEffect(() => {\n if (finalSanitizedEditorConfig) {\n return\n }\n\n const featureProvidersLocal: FeatureProviderClient<any, any>[] = []\n for (const clientFeature of Object.values(clientFeatures)) {\n if (!clientFeature.clientFeatureProvider) {\n continue\n }\n featureProvidersLocal.push(\n clientFeature.clientFeatureProvider(clientFeature.clientFeatureProps),\n ) // Execute the clientFeatureProvider function here, as the server cannot execute functions imported from use client files\n }\n\n const resolvedClientFeatures = loadClientFeatures({\n config,\n featureClientImportMap,\n featureClientSchemaMap,\n field: field as RichTextFieldClient,\n schemaPath: schemaPath ?? field.name,\n unSanitizedEditorConfig: {\n features: featureProvidersLocal,\n lexical: lexicalEditorConfig,\n },\n })\n\n setFinalSanitizedEditorConfig(\n sanitizeClientEditorConfig(resolvedClientFeatures, lexicalEditorConfig, admin),\n )\n }, [\n admin,\n clientFeatures,\n config,\n featureClientImportMap,\n featureClientSchemaMap,\n field,\n finalSanitizedEditorConfig,\n lexicalEditorConfig,\n schemaPath,\n ]) // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate\n\n return (\n <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n {finalSanitizedEditorConfig && (\n <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n )}\n </Suspense>\n )\n}\n"],"names":["ShimmerEffect","useConfig","lazy","Suspense","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","admin","clientFeatures","featureClientImportMap","featureClientSchemaMap","field","lexicalEditorConfig","schemaPath","config","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProvidersLocal","clientFeature","Object","values","clientFeatureProvider","push","clientFeatureProps","resolvedClientFeatures","name","unSanitizedEditorConfig","features","lexical","fallback","height","editorConfig"],"mappings":"AAAA;AAIA,SAASA,aAAa,EAAEC,SAAS,QAAQ,iBAAgB;AACzD,SAAgBC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAMlE,SAASC,0BAA0B,QAAQ,sCAAqC;AAChF,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,0BAA0B,QAAQ,uCAAsC;AAEjF,MAAMC,iBAAiBP,KAAK,IAC1B,MAAM,CAAC,cAAcQ,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,QAAQ;QAAC,CAAA;AAGpE,OAAO,MAAMC,gBAAqD,CAACC;IACjE,MAAM,EACJC,QAAQ,CAAC,CAAC,EACVC,cAAc,EACdC,yBAAyB,CAAC,CAAC,EAC3BC,sBAAsB,EACtBC,KAAK,EACLC,sBAAsBf,0BAA0B,EAChDgB,UAAU,EACX,GAAGP;IAEJ,MAAM,EAAEQ,MAAM,EAAE,GAAGtB;IAEnB,MAAM,CAACuB,4BAA4BC,8BAA8B,GAC/DpB,SAA6C;IAE/CD,UAAU;QACR,IAAIoB,4BAA4B;YAC9B;QACF;QAEA,MAAME,wBAA2D,EAAE;QACnE,KAAK,MAAMC,iBAAiBC,OAAOC,MAAM,CAACZ,gBAAiB;YACzD,IAAI,CAACU,cAAcG,qBAAqB,EAAE;gBACxC;YACF;YACAJ,sBAAsBK,IAAI,CACxBJ,cAAcG,qBAAqB,CAACH,cAAcK,kBAAkB;QAExE;QADI,yHAAyH;QAG7H,MAAMC,yBAAyB1B,mBAAmB;YAChDgB;YACAL;YACAC;YACAC,OAAOA;YACPE,YAAYA,cAAcF,MAAMc,IAAI;YACpCC,yBAAyB;gBACvBC,UAAUV;gBACVW,SAAShB;YACX;QACF;QAEAI,8BACEjB,2BAA2ByB,wBAAwBZ,qBAAqBL;IAE5E,GAAG;QACDA;QACAC;QACAM;QACAL;QACAC;QACAC;QACAI;QACAH;QACAC;KACD;IAAE,gJAAgJ;IAEnJ,QACGnB,SAASmC,WAAWtC,cAAcuC,OAAO,UAAW;MACnD,CAACf,+BACEf,gBAAgB,GAAGM,KAAK,EAAEyB,cAAchB,8BACzC;IACJ,EAAErB;AAEN,EAAC"}
|
package/dist/field/rscEntry.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
2
1
|
import { getTranslation } from '@payloadcms/translations';
|
|
3
2
|
import { renderField } from '@payloadcms/ui/forms/renderField';
|
|
4
|
-
import React from 'react';
|
|
5
3
|
// eslint-disable-next-line payload/no-imports-from-exports-dir
|
|
6
4
|
import { RichTextField } from '../exports/client/index.js';
|
|
7
5
|
import { buildInitialState } from '../utilities/buildInitialState.js';
|
|
@@ -87,13 +85,7 @@ export const RscEntryLexicalField = async (args)=>{
|
|
|
87
85
|
delete props[key];
|
|
88
86
|
}
|
|
89
87
|
}
|
|
90
|
-
return
|
|
91
|
-
...props
|
|
92
|
-
}, void 0, false, {
|
|
93
|
-
fileName: "src/field/rscEntry.tsx",
|
|
94
|
-
lineNumber: 124,
|
|
95
|
-
columnNumber: 10
|
|
96
|
-
}, this);
|
|
88
|
+
return <RichTextField {...props}/>;
|
|
97
89
|
};
|
|
98
90
|
|
|
99
91
|
//# sourceMappingURL=rscEntry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/field/rscEntry.tsx"],"sourcesContent":["import type { SerializedLexicalNode } from 'lexical'\nimport type {\n ClientComponentProps,\n FieldPaths,\n RichTextFieldClient,\n RichTextField as RichTextFieldType,\n ServerComponentProps,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { renderField } from '@payloadcms/ui/forms/renderField'\nimport React from 'react'\n\nimport type { SanitizedServerEditorConfig } from '../lexical/config/types.js'\nimport type {\n LexicalEditorProps,\n LexicalFieldAdminClientProps,\n LexicalRichTextFieldProps,\n} from '../types.js'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport { RichTextField } from '../exports/client/index.js'\nimport { buildInitialState } from '../utilities/buildInitialState.js'\nimport { initLexicalFeatures } from '../utilities/initLexicalFeatures.js'\n\nexport const RscEntryLexicalField: React.FC<\n {\n sanitizedEditorConfig: SanitizedServerEditorConfig\n } & ClientComponentProps &\n Pick<FieldPaths, 'path'> &\n Pick<LexicalEditorProps, 'admin'> &\n ServerComponentProps\n> = async (args) => {\n const field: RichTextFieldType = args.field as RichTextFieldType\n const path = args.path ?? (args.clientField as RichTextFieldClient).name\n const schemaPath = args.schemaPath ?? path\n\n const disabled = args?.readOnly || field?.admin?.readOnly\n\n if (!(args?.clientField as RichTextFieldClient)?.name) {\n throw new Error('Initialized lexical RSC field without a field name')\n }\n\n const { clientFeatures, featureClientImportMap, featureClientSchemaMap } = initLexicalFeatures({\n clientFieldSchemaMap: args.clientFieldSchemaMap,\n fieldSchemaMap: args.fieldSchemaMap,\n i18n: args.i18n,\n path,\n payload: args.payload,\n sanitizedEditorConfig: args.sanitizedEditorConfig,\n schemaPath,\n })\n\n let initialLexicalFormState = {}\n if (args.siblingData?.[field.name]?.root?.children?.length) {\n initialLexicalFormState = await buildInitialState({\n context: {\n id: args.id,\n clientFieldSchemaMap: args.clientFieldSchemaMap,\n collectionSlug: args.collectionSlug,\n disabled,\n documentData: args.data,\n field,\n fieldSchemaMap: args.fieldSchemaMap,\n lexicalFieldSchemaPath: schemaPath,\n operation: args.operation,\n permissions: args.permissions,\n preferences: args.preferences,\n renderFieldFn: renderField,\n req: args.req,\n },\n nodeData: args.siblingData?.[field.name]?.root?.children as SerializedLexicalNode[],\n })\n }\n\n const placeholderFromArgs = args.admin?.placeholder\n const placeholder = placeholderFromArgs\n ? getTranslation(placeholderFromArgs, args.i18n)\n : undefined\n\n const admin: LexicalFieldAdminClientProps = {}\n if (placeholder) {\n admin.placeholder = placeholder\n }\n if (args.admin?.hideGutter) {\n admin.hideGutter = true\n }\n if (args.admin?.hideInsertParagraphAtEnd) {\n admin.hideInsertParagraphAtEnd = true\n }\n if (args.admin?.hideAddBlockButton) {\n admin.hideAddBlockButton = true\n }\n if (args.admin?.hideDraggableBlockElement) {\n admin.hideDraggableBlockElement = true\n }\n\n const props: LexicalRichTextFieldProps = {\n clientFeatures,\n featureClientSchemaMap, // TODO: Does client need this? Why cant this just live in the server\n field: args.clientField as RichTextFieldClient,\n forceRender: args.forceRender,\n initialLexicalFormState,\n lexicalEditorConfig: args.sanitizedEditorConfig.lexical,\n path,\n permissions: args.permissions,\n readOnly: args.readOnly,\n renderedBlocks: args.renderedBlocks,\n schemaPath,\n }\n if (Object.keys(admin).length) {\n props.admin = admin\n }\n if (Object.keys(featureClientImportMap).length) {\n props.featureClientImportMap = featureClientImportMap\n }\n\n for (const key in props) {\n if (props[key as keyof LexicalRichTextFieldProps] === undefined) {\n delete props[key as keyof LexicalRichTextFieldProps]\n }\n }\n\n return <RichTextField {...props} />\n}\n"],"names":["getTranslation","renderField","
|
|
1
|
+
{"version":3,"sources":["../../src/field/rscEntry.tsx"],"sourcesContent":["import type { SerializedLexicalNode } from 'lexical'\nimport type {\n ClientComponentProps,\n FieldPaths,\n RichTextFieldClient,\n RichTextField as RichTextFieldType,\n ServerComponentProps,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { renderField } from '@payloadcms/ui/forms/renderField'\nimport React from 'react'\n\nimport type { SanitizedServerEditorConfig } from '../lexical/config/types.js'\nimport type {\n LexicalEditorProps,\n LexicalFieldAdminClientProps,\n LexicalRichTextFieldProps,\n} from '../types.js'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport { RichTextField } from '../exports/client/index.js'\nimport { buildInitialState } from '../utilities/buildInitialState.js'\nimport { initLexicalFeatures } from '../utilities/initLexicalFeatures.js'\n\nexport const RscEntryLexicalField: React.FC<\n {\n sanitizedEditorConfig: SanitizedServerEditorConfig\n } & ClientComponentProps &\n Pick<FieldPaths, 'path'> &\n Pick<LexicalEditorProps, 'admin'> &\n ServerComponentProps\n> = async (args) => {\n const field: RichTextFieldType = args.field as RichTextFieldType\n const path = args.path ?? (args.clientField as RichTextFieldClient).name\n const schemaPath = args.schemaPath ?? path\n\n const disabled = args?.readOnly || field?.admin?.readOnly\n\n if (!(args?.clientField as RichTextFieldClient)?.name) {\n throw new Error('Initialized lexical RSC field without a field name')\n }\n\n const { clientFeatures, featureClientImportMap, featureClientSchemaMap } = initLexicalFeatures({\n clientFieldSchemaMap: args.clientFieldSchemaMap,\n fieldSchemaMap: args.fieldSchemaMap,\n i18n: args.i18n,\n path,\n payload: args.payload,\n sanitizedEditorConfig: args.sanitizedEditorConfig,\n schemaPath,\n })\n\n let initialLexicalFormState = {}\n if (args.siblingData?.[field.name]?.root?.children?.length) {\n initialLexicalFormState = await buildInitialState({\n context: {\n id: args.id,\n clientFieldSchemaMap: args.clientFieldSchemaMap,\n collectionSlug: args.collectionSlug,\n disabled,\n documentData: args.data,\n field,\n fieldSchemaMap: args.fieldSchemaMap,\n lexicalFieldSchemaPath: schemaPath,\n operation: args.operation,\n permissions: args.permissions,\n preferences: args.preferences,\n renderFieldFn: renderField,\n req: args.req,\n },\n nodeData: args.siblingData?.[field.name]?.root?.children as SerializedLexicalNode[],\n })\n }\n\n const placeholderFromArgs = args.admin?.placeholder\n const placeholder = placeholderFromArgs\n ? getTranslation(placeholderFromArgs, args.i18n)\n : undefined\n\n const admin: LexicalFieldAdminClientProps = {}\n if (placeholder) {\n admin.placeholder = placeholder\n }\n if (args.admin?.hideGutter) {\n admin.hideGutter = true\n }\n if (args.admin?.hideInsertParagraphAtEnd) {\n admin.hideInsertParagraphAtEnd = true\n }\n if (args.admin?.hideAddBlockButton) {\n admin.hideAddBlockButton = true\n }\n if (args.admin?.hideDraggableBlockElement) {\n admin.hideDraggableBlockElement = true\n }\n\n const props: LexicalRichTextFieldProps = {\n clientFeatures,\n featureClientSchemaMap, // TODO: Does client need this? Why cant this just live in the server\n field: args.clientField as RichTextFieldClient,\n forceRender: args.forceRender,\n initialLexicalFormState,\n lexicalEditorConfig: args.sanitizedEditorConfig.lexical,\n path,\n permissions: args.permissions,\n readOnly: args.readOnly,\n renderedBlocks: args.renderedBlocks,\n schemaPath,\n }\n if (Object.keys(admin).length) {\n props.admin = admin\n }\n if (Object.keys(featureClientImportMap).length) {\n props.featureClientImportMap = featureClientImportMap\n }\n\n for (const key in props) {\n if (props[key as keyof LexicalRichTextFieldProps] === undefined) {\n delete props[key as keyof LexicalRichTextFieldProps]\n }\n }\n\n return <RichTextField {...props} />\n}\n"],"names":["getTranslation","renderField","RichTextField","buildInitialState","initLexicalFeatures","RscEntryLexicalField","args","field","path","clientField","name","schemaPath","disabled","readOnly","admin","Error","clientFeatures","featureClientImportMap","featureClientSchemaMap","clientFieldSchemaMap","fieldSchemaMap","i18n","payload","sanitizedEditorConfig","initialLexicalFormState","siblingData","root","children","length","context","id","collectionSlug","documentData","data","lexicalFieldSchemaPath","operation","permissions","preferences","renderFieldFn","req","nodeData","placeholderFromArgs","placeholder","undefined","hideGutter","hideInsertParagraphAtEnd","hideAddBlockButton","hideDraggableBlockElement","props","forceRender","lexicalEditorConfig","lexical","renderedBlocks","Object","keys","key"],"mappings":"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"}
|