@payloadcms/richtext-slate 3.0.0-canary.a192632 → 3.0.0-canary.a5aaf21
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/index.d.ts.map +1 -1
- package/dist/cell/index.js +23 -2
- package/dist/cell/index.js.map +1 -1
- package/dist/data/validation.d.ts.map +1 -1
- package/dist/data/validation.js +3 -1
- package/dist/data/validation.js.map +1 -1
- package/dist/exports/client/index.d.ts +3 -2
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +3 -2
- package/dist/exports/client/index.js.map +1 -1
- package/dist/field/RichText.d.ts.map +1 -1
- package/dist/field/RichText.js +12 -7
- package/dist/field/RichText.js.map +1 -1
- package/dist/field/createFeatureMap.d.ts.map +1 -1
- package/dist/field/createFeatureMap.js +12 -4
- package/dist/field/createFeatureMap.js.map +1 -1
- package/dist/field/elements/h3/Heading3.d.ts.map +1 -1
- package/dist/field/elements/h3/Heading3.js.map +1 -1
- package/dist/field/elements/h4/Heading4.d.ts.map +1 -1
- package/dist/field/elements/h4/Heading4.js.map +1 -1
- package/dist/field/elements/h5/Heading5.d.ts.map +1 -1
- package/dist/field/elements/h5/Heading5.js.map +1 -1
- package/dist/field/elements/h6/Heading6.d.ts.map +1 -1
- package/dist/field/elements/h6/Heading6.js.map +1 -1
- package/dist/field/elements/isActive.d.ts.map +1 -1
- package/dist/field/elements/isActive.js +3 -1
- package/dist/field/elements/isActive.js.map +1 -1
- package/dist/field/elements/isLastSelectedElementEmpty.d.ts.map +1 -1
- package/dist/field/elements/isLastSelectedElementEmpty.js +3 -1
- package/dist/field/elements/isLastSelectedElementEmpty.js.map +1 -1
- package/dist/field/elements/isListActive.d.ts.map +1 -1
- package/dist/field/elements/isListActive.js +6 -2
- package/dist/field/elements/isListActive.js.map +1 -1
- package/dist/field/elements/link/Button/index.js +1 -1
- package/dist/field/elements/link/Button/index.js.map +1 -1
- package/dist/field/elements/link/Element/index.d.ts.map +1 -1
- package/dist/field/elements/link/Element/index.js +7 -3
- package/dist/field/elements/link/Element/index.js.map +1 -1
- package/dist/field/elements/link/Element/index.scss +3 -7
- package/dist/field/elements/link/LinkDrawer/index.d.ts.map +1 -1
- package/dist/field/elements/link/LinkDrawer/index.js +2 -1
- package/dist/field/elements/link/LinkDrawer/index.js.map +1 -1
- package/dist/field/elements/textAlign/index.js +1 -1
- package/dist/field/elements/textAlign/index.js.map +1 -1
- package/dist/field/elements/toggleList.d.ts.map +1 -1
- package/dist/field/elements/toggleList.js +6 -2
- package/dist/field/elements/toggleList.js.map +1 -1
- package/dist/field/elements/upload/Element/UploadDrawer/index.d.ts.map +1 -1
- package/dist/field/elements/upload/Element/UploadDrawer/index.js +3 -2
- package/dist/field/elements/upload/Element/UploadDrawer/index.js.map +1 -1
- package/dist/field/elements/upload/Element/index.d.ts.map +1 -1
- package/dist/field/elements/upload/Element/index.js +1 -1
- package/dist/field/elements/upload/Element/index.js.map +1 -1
- package/dist/field/index.js +1 -1
- package/dist/field/index.js.map +1 -1
- package/dist/field/index.scss +31 -14
- package/dist/generateComponentMap.d.ts.map +1 -1
- package/dist/generateComponentMap.js +3 -1
- package/dist/generateComponentMap.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/scss/app.scss +4 -4
- package/dist/scss/toasts.scss +15 -14
- package/dist/scss/type.scss +4 -4
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +16 -15
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { Editor, Element } from 'slate';
|
|
2
2
|
import { getCommonBlock } from './getCommonBlock.js';
|
|
3
3
|
export const isListActive = (editor, format)=>{
|
|
4
|
-
if (!editor.selection)
|
|
4
|
+
if (!editor.selection) {
|
|
5
|
+
return false;
|
|
6
|
+
}
|
|
5
7
|
const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor);
|
|
6
|
-
if (Editor.isEditor(topmostSelectedNode))
|
|
8
|
+
if (Editor.isEditor(topmostSelectedNode)) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
7
11
|
const [match] = Array.from(Editor.nodes(editor, {
|
|
8
12
|
at: topmostSelectedNodePath,
|
|
9
13
|
match: (node, path)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/field/elements/isListActive.ts"],"sourcesContent":["import { Editor, Element } from 'slate'\n\nimport { getCommonBlock } from './getCommonBlock.js'\n\nexport const isListActive = (editor: Editor, format: string): boolean => {\n if (!editor.selection) return false\n const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor)\n\n if (Editor.isEditor(topmostSelectedNode)) return false\n\n const [match] = Array.from(\n Editor.nodes(editor, {\n at: topmostSelectedNodePath,\n match: (node, path) => {\n return (\n !Editor.isEditor(node) &&\n Element.isElement(node) &&\n node.type === format &&\n path.length >= topmostSelectedNodePath.length - 2\n )\n },\n mode: 'lowest',\n }),\n )\n\n return !!match\n}\n"],"names":["Editor","Element","getCommonBlock","isListActive","editor","format","selection","topmostSelectedNode","topmostSelectedNodePath","isEditor","match","Array","from","nodes","at","node","path","isElement","type","length","mode"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,QAAQ,QAAO;AAEvC,SAASC,cAAc,QAAQ,sBAAqB;AAEpD,OAAO,MAAMC,eAAe,CAACC,QAAgBC;IAC3C,IAAI,CAACD,OAAOE,SAAS,EAAE,OAAO;
|
|
1
|
+
{"version":3,"sources":["../../../src/field/elements/isListActive.ts"],"sourcesContent":["import { Editor, Element } from 'slate'\n\nimport { getCommonBlock } from './getCommonBlock.js'\n\nexport const isListActive = (editor: Editor, format: string): boolean => {\n if (!editor.selection) {\n return false\n }\n const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor)\n\n if (Editor.isEditor(topmostSelectedNode)) {\n return false\n }\n\n const [match] = Array.from(\n Editor.nodes(editor, {\n at: topmostSelectedNodePath,\n match: (node, path) => {\n return (\n !Editor.isEditor(node) &&\n Element.isElement(node) &&\n node.type === format &&\n path.length >= topmostSelectedNodePath.length - 2\n )\n },\n mode: 'lowest',\n }),\n )\n\n return !!match\n}\n"],"names":["Editor","Element","getCommonBlock","isListActive","editor","format","selection","topmostSelectedNode","topmostSelectedNodePath","isEditor","match","Array","from","nodes","at","node","path","isElement","type","length","mode"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,QAAQ,QAAO;AAEvC,SAASC,cAAc,QAAQ,sBAAqB;AAEpD,OAAO,MAAMC,eAAe,CAACC,QAAgBC;IAC3C,IAAI,CAACD,OAAOE,SAAS,EAAE;QACrB,OAAO;IACT;IACA,MAAM,CAACC,qBAAqBC,wBAAwB,GAAGN,eAAeE;IAEtE,IAAIJ,OAAOS,QAAQ,CAACF,sBAAsB;QACxC,OAAO;IACT;IAEA,MAAM,CAACG,MAAM,GAAGC,MAAMC,IAAI,CACxBZ,OAAOa,KAAK,CAACT,QAAQ;QACnBU,IAAIN;QACJE,OAAO,CAACK,MAAMC;YACZ,OACE,CAAChB,OAAOS,QAAQ,CAACM,SACjBd,QAAQgB,SAAS,CAACF,SAClBA,KAAKG,IAAI,KAAKb,UACdW,KAAKG,MAAM,IAAIX,wBAAwBW,MAAM,GAAG;QAEpD;QACAC,MAAM;IACR;IAGF,OAAO,CAAC,CAACV;AACX,EAAC"}
|
|
@@ -86,7 +86,7 @@ export const LinkButton = ()=>{
|
|
|
86
86
|
const data = {
|
|
87
87
|
text: editor.selection ? Editor.string(editor, editor.selection) : ''
|
|
88
88
|
};
|
|
89
|
-
const state = await getFormState({
|
|
89
|
+
const { state } = await getFormState({
|
|
90
90
|
apiRoute: config.routes.api,
|
|
91
91
|
body: {
|
|
92
92
|
data,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/elements/link/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormState } from 'payload'\n\nimport { useConfig, useDrawerSlug, useFieldProps, useModal, useTranslation } from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { Fragment, useState } from 'react'\nimport { Editor, Range, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { LinkIcon } from '../../../icons/Link/index.js'\nimport { useElementButton } from '../../../providers/ElementButtonProvider.js'\nimport { ElementButton } from '../../Button.js'\nimport { isElementActive } from '../../isActive.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\n\n/**\n * This function is called when a new link is created - not when an existing link is edited.\n */\nconst insertLink = (editor, fields) => {\n const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n const data = reduceFieldsToValues(fields, true)\n\n const newLink = {\n type: 'link',\n children: [],\n doc: data.doc,\n fields: data.fields, // Any custom user-added fields are part of data.fields\n linkType: data.linkType,\n newTab: data.newTab,\n url: data.url,\n }\n\n if (isCollapsed || !editor.selection) {\n // If selection anchor and focus are the same,\n // Just inject a new node with children already set\n Transforms.insertNodes(editor, {\n ...newLink,\n children: [{ text: String(data.text) }],\n })\n } else if (editor.selection) {\n // Otherwise we need to wrap the selected node in a link,\n // Delete its old text,\n // Move the selection one position forward into the link,\n // And insert the text back into the new link\n Transforms.wrapNodes(editor, newLink, { split: true })\n Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' })\n Transforms.move(editor, { distance: 1, unit: 'offset' })\n Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n }\n\n ReactEditor.focus(editor)\n}\n\nexport const LinkButton: React.FC = () => {\n const { fieldProps } = useElementButton()\n const [initialState, setInitialState] = useState<FormState>({})\n\n const { t } = useTranslation()\n const editor = useSlate()\n const { config } = useConfig()\n\n const { closeModal, openModal } = useModal()\n const drawerSlug = useDrawerSlug('rich-text-link')\n const { schemaPath } = useFieldProps()\n\n const {\n field: { richTextComponentMap },\n } = fieldProps\n\n const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n return (\n <Fragment>\n <ElementButton\n className=\"link\"\n format=\"link\"\n onClick={async () => {\n if (isElementActive(editor, 'link')) {\n unwrapLink(editor)\n } else {\n openModal(drawerSlug)\n const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n\n if (!isCollapsed) {\n const data = {\n text: editor.selection ? Editor.string(editor, editor.selection) : '',\n }\n\n const state = await getFormState({\n apiRoute: config.routes.api,\n body: {\n data,\n operation: 'update',\n schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n }\n }}\n tooltip={t('fields:addLink')}\n >\n <LinkIcon />\n </ElementButton>\n <LinkDrawer\n drawerSlug={drawerSlug}\n fields={Array.isArray(fields) ? fields : []}\n handleClose={() => {\n closeModal(drawerSlug)\n }}\n handleModalSubmit={(fields) => {\n insertLink(editor, fields)\n closeModal(drawerSlug)\n }}\n initialState={initialState}\n />\n </Fragment>\n )\n}\n"],"names":["useConfig","useDrawerSlug","useFieldProps","useModal","useTranslation","getFormState","reduceFieldsToValues","React","Fragment","useState","Editor","Range","Transforms","ReactEditor","useSlate","LinkIcon","useElementButton","ElementButton","isElementActive","LinkDrawer","linkFieldsSchemaPath","unwrapLink","insertLink","editor","fields","isCollapsed","selection","data","newLink","type","children","doc","linkType","newTab","url","insertNodes","text","String","wrapNodes","split","delete","at","focus","path","unit","move","distance","insertText","LinkButton","fieldProps","initialState","setInitialState","t","config","closeModal","openModal","drawerSlug","schemaPath","field","richTextComponentMap","get","className","format","onClick","string","state","apiRoute","routes","api","body","operation","serverURL","tooltip","Array","isArray","handleClose","handleModalSubmit"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/elements/link/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormState } from 'payload'\n\nimport { useConfig, useDrawerSlug, useFieldProps, useModal, useTranslation } from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { Fragment, useState } from 'react'\nimport { Editor, Range, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { LinkIcon } from '../../../icons/Link/index.js'\nimport { useElementButton } from '../../../providers/ElementButtonProvider.js'\nimport { ElementButton } from '../../Button.js'\nimport { isElementActive } from '../../isActive.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\n\n/**\n * This function is called when a new link is created - not when an existing link is edited.\n */\nconst insertLink = (editor, fields) => {\n const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n const data = reduceFieldsToValues(fields, true)\n\n const newLink = {\n type: 'link',\n children: [],\n doc: data.doc,\n fields: data.fields, // Any custom user-added fields are part of data.fields\n linkType: data.linkType,\n newTab: data.newTab,\n url: data.url,\n }\n\n if (isCollapsed || !editor.selection) {\n // If selection anchor and focus are the same,\n // Just inject a new node with children already set\n Transforms.insertNodes(editor, {\n ...newLink,\n children: [{ text: String(data.text) }],\n })\n } else if (editor.selection) {\n // Otherwise we need to wrap the selected node in a link,\n // Delete its old text,\n // Move the selection one position forward into the link,\n // And insert the text back into the new link\n Transforms.wrapNodes(editor, newLink, { split: true })\n Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' })\n Transforms.move(editor, { distance: 1, unit: 'offset' })\n Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n }\n\n ReactEditor.focus(editor)\n}\n\nexport const LinkButton: React.FC = () => {\n const { fieldProps } = useElementButton()\n const [initialState, setInitialState] = useState<FormState>({})\n\n const { t } = useTranslation()\n const editor = useSlate()\n const { config } = useConfig()\n\n const { closeModal, openModal } = useModal()\n const drawerSlug = useDrawerSlug('rich-text-link')\n const { schemaPath } = useFieldProps()\n\n const {\n field: { richTextComponentMap },\n } = fieldProps\n\n const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n return (\n <Fragment>\n <ElementButton\n className=\"link\"\n format=\"link\"\n onClick={async () => {\n if (isElementActive(editor, 'link')) {\n unwrapLink(editor)\n } else {\n openModal(drawerSlug)\n const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n\n if (!isCollapsed) {\n const data = {\n text: editor.selection ? Editor.string(editor, editor.selection) : '',\n }\n\n const { state } = await getFormState({\n apiRoute: config.routes.api,\n body: {\n data,\n operation: 'update',\n schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n }\n }}\n tooltip={t('fields:addLink')}\n >\n <LinkIcon />\n </ElementButton>\n <LinkDrawer\n drawerSlug={drawerSlug}\n fields={Array.isArray(fields) ? fields : []}\n handleClose={() => {\n closeModal(drawerSlug)\n }}\n handleModalSubmit={(fields) => {\n insertLink(editor, fields)\n closeModal(drawerSlug)\n }}\n initialState={initialState}\n />\n </Fragment>\n )\n}\n"],"names":["useConfig","useDrawerSlug","useFieldProps","useModal","useTranslation","getFormState","reduceFieldsToValues","React","Fragment","useState","Editor","Range","Transforms","ReactEditor","useSlate","LinkIcon","useElementButton","ElementButton","isElementActive","LinkDrawer","linkFieldsSchemaPath","unwrapLink","insertLink","editor","fields","isCollapsed","selection","data","newLink","type","children","doc","linkType","newTab","url","insertNodes","text","String","wrapNodes","split","delete","at","focus","path","unit","move","distance","insertText","LinkButton","fieldProps","initialState","setInitialState","t","config","closeModal","openModal","drawerSlug","schemaPath","field","richTextComponentMap","get","className","format","onClick","string","state","apiRoute","routes","api","body","operation","serverURL","tooltip","Array","isArray","handleClose","handleModalSubmit"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/Element/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/Element/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,cAAc,CAAA;AAiCrB,eAAO,MAAM,WAAW,+CAwKvB,CAAA"}
|
|
@@ -25,7 +25,9 @@ const baseClass = 'rich-text-link';
|
|
|
25
25
|
newTab: data.newTab,
|
|
26
26
|
url: data.url
|
|
27
27
|
};
|
|
28
|
-
if (data.fields)
|
|
28
|
+
if (data.fields) {
|
|
29
|
+
newNode.fields = data.fields;
|
|
30
|
+
}
|
|
29
31
|
Transforms.setNodes(editor, newNode, {
|
|
30
32
|
at: parentPath
|
|
31
33
|
});
|
|
@@ -73,7 +75,7 @@ export const LinkElement = ()=>{
|
|
|
73
75
|
text: Node.string(element),
|
|
74
76
|
url: element.url
|
|
75
77
|
};
|
|
76
|
-
const state = await getFormState({
|
|
78
|
+
const { state } = await getFormState({
|
|
77
79
|
apiRoute: config.routes.api,
|
|
78
80
|
body: {
|
|
79
81
|
data,
|
|
@@ -193,7 +195,9 @@ export const LinkElement = ()=>{
|
|
|
193
195
|
].filter(Boolean).join(' '),
|
|
194
196
|
onClick: ()=>setRenderPopup(true),
|
|
195
197
|
onKeyDown: (e)=>{
|
|
196
|
-
if (e.key === 'Enter')
|
|
198
|
+
if (e.key === 'Enter') {
|
|
199
|
+
setRenderPopup(true);
|
|
200
|
+
}
|
|
197
201
|
},
|
|
198
202
|
role: "button",
|
|
199
203
|
tabIndex: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/elements/link/Element/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Button,\n Popup,\n Translation,\n useAuth,\n useConfig,\n useDocumentInfo,\n useDrawerSlug,\n useLocale,\n useModal,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Editor, Node, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport type { LinkElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link'\n\n/**\n * This function is called when an existing link is edited.\n * When a link is first created, another function is called: {@link ../Button/index.tsx#insertLink}\n */\nconst insertChange = (editor, fields) => {\n const data = reduceFieldsToValues(fields, true)\n\n const [, parentPath] = Editor.above(editor)\n\n const newNode: Record<string, unknown> = {\n doc: data.doc,\n linkType: data.linkType,\n newTab: data.newTab,\n url: data.url,\n }\n\n if (data.fields) newNode.fields = data.fields\n\n Transforms.setNodes(editor, newNode, { at: parentPath })\n\n Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' })\n Transforms.move(editor, { distance: 1, unit: 'offset' })\n Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n\n ReactEditor.focus(editor)\n}\n\nexport const LinkElement = () => {\n const { attributes, children, editorRef, element, fieldProps, schemaPath } =\n useElement<LinkElementType>()\n\n const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n\n const {\n field: { richTextComponentMap },\n } = fieldProps\n const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n const editor = useSlate()\n const { config } = useConfig()\n const { user } = useAuth()\n const { code: locale } = useLocale()\n const { i18n, t } = useTranslation()\n const { closeModal, openModal, toggleModal } = useModal()\n const [renderModal, setRenderModal] = useState(false)\n const [renderPopup, setRenderPopup] = useState(false)\n const [initialState, setInitialState] = useState<FormState>({})\n const { id, collectionSlug } = useDocumentInfo()\n\n const drawerSlug = useDrawerSlug('rich-text-link')\n\n const handleTogglePopup = useCallback((render) => {\n if (!render) {\n setRenderPopup(render)\n }\n }, [])\n\n useEffect(() => {\n const awaitInitialState = async () => {\n const data = {\n doc: element.doc,\n fields: deepCopyObject(element.fields),\n linkType: element.linkType,\n newTab: element.newTab,\n text: Node.string(element),\n url: element.url,\n }\n\n const state = await getFormState({\n apiRoute: config.routes.api,\n body: {\n data,\n operation: 'update',\n schemaPath: fieldMapPath,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n\n if (renderModal) {\n void awaitInitialState()\n }\n }, [renderModal, element, user, locale, t, collectionSlug, config, id, fieldMapPath])\n\n return (\n <span className={baseClass} {...attributes}>\n <span contentEditable={false} style={{ userSelect: 'none' }}>\n {renderModal && (\n <LinkDrawer\n drawerSlug={drawerSlug}\n fields={Array.isArray(fields) ? fields : []}\n handleClose={() => {\n toggleModal(drawerSlug)\n setRenderModal(false)\n }}\n handleModalSubmit={(fields) => {\n insertChange(editor, fields)\n closeModal(drawerSlug)\n setRenderModal(false)\n }}\n initialState={initialState}\n />\n )}\n <Popup\n boundingRef={editorRef}\n buttonType=\"none\"\n forceOpen={renderPopup}\n horizontalAlign=\"left\"\n onToggleOpen={handleTogglePopup}\n render={() => (\n <div className={`${baseClass}__popup`}>\n {element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && (\n <Translation\n elements={{\n '0': ({ children }) => (\n <a\n className={`${baseClass}__link-label`}\n href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n rel=\"noreferrer\"\n target=\"_blank\"\n title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n >\n {children}\n </a>\n ),\n }}\n i18nKey=\"fields:linkedTo\"\n t={t}\n variables={{\n label: getTranslation(\n config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels\n ?.singular,\n i18n,\n ),\n }}\n />\n )}\n {(element.linkType === 'custom' || !element.linkType) && (\n <a\n className={`${baseClass}__link-label`}\n href={element.url}\n rel=\"noreferrer\"\n target=\"_blank\"\n title={element.url}\n >\n {element.url}\n </a>\n )}\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__link-edit`}\n icon=\"edit\"\n onClick={(e) => {\n e.preventDefault()\n setRenderPopup(false)\n openModal(drawerSlug)\n setRenderModal(true)\n }}\n round\n tooltip={t('general:edit')}\n />\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__link-close`}\n icon=\"x\"\n onClick={(e) => {\n e.preventDefault()\n unwrapLink(editor)\n }}\n round\n tooltip={t('general:remove')}\n />\n </div>\n )}\n size=\"fit-content\"\n verticalAlign=\"bottom\"\n />\n </span>\n <span\n className={[`${baseClass}__popup-toggler`].filter(Boolean).join(' ')}\n onClick={() => setRenderPopup(true)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') setRenderPopup(true)\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </span>\n </span>\n )\n}\n"],"names":["getTranslation","Button","Popup","Translation","useAuth","useConfig","useDocumentInfo","useDrawerSlug","useLocale","useModal","useTranslation","getFormState","deepCopyObject","reduceFieldsToValues","React","useCallback","useEffect","useState","Editor","Node","Transforms","ReactEditor","useSlate","useElement","LinkDrawer","linkFieldsSchemaPath","unwrapLink","baseClass","insertChange","editor","fields","data","parentPath","above","newNode","doc","linkType","newTab","url","setNodes","at","delete","selection","focus","path","unit","move","distance","insertText","String","text","LinkElement","attributes","children","editorRef","element","fieldProps","schemaPath","fieldMapPath","field","richTextComponentMap","get","config","user","code","locale","i18n","t","closeModal","openModal","toggleModal","renderModal","setRenderModal","renderPopup","setRenderPopup","initialState","setInitialState","id","collectionSlug","drawerSlug","handleTogglePopup","render","awaitInitialState","string","state","apiRoute","routes","api","body","operation","serverURL","span","className","contentEditable","style","userSelect","Array","isArray","handleClose","handleModalSubmit","boundingRef","buttonType","forceOpen","horizontalAlign","onToggleOpen","div","relationTo","value","elements","a","href","admin","rel","target","title","i18nKey","variables","label","collections","find","slug","labels","singular","buttonStyle","icon","onClick","e","preventDefault","round","tooltip","size","verticalAlign","filter","Boolean","join","onKeyDown","key","role","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/elements/link/Element/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Button,\n Popup,\n Translation,\n useAuth,\n useConfig,\n useDocumentInfo,\n useDrawerSlug,\n useLocale,\n useModal,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Editor, Node, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport type { LinkElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link'\n\n/**\n * This function is called when an existing link is edited.\n * When a link is first created, another function is called: {@link ../Button/index.tsx#insertLink}\n */\nconst insertChange = (editor, fields) => {\n const data = reduceFieldsToValues(fields, true)\n\n const [, parentPath] = Editor.above(editor)\n\n const newNode: Record<string, unknown> = {\n doc: data.doc,\n linkType: data.linkType,\n newTab: data.newTab,\n url: data.url,\n }\n\n if (data.fields) {\n newNode.fields = data.fields\n }\n\n Transforms.setNodes(editor, newNode, { at: parentPath })\n\n Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' })\n Transforms.move(editor, { distance: 1, unit: 'offset' })\n Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n\n ReactEditor.focus(editor)\n}\n\nexport const LinkElement = () => {\n const { attributes, children, editorRef, element, fieldProps, schemaPath } =\n useElement<LinkElementType>()\n\n const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n\n const {\n field: { richTextComponentMap },\n } = fieldProps\n const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n const editor = useSlate()\n const { config } = useConfig()\n const { user } = useAuth()\n const { code: locale } = useLocale()\n const { i18n, t } = useTranslation()\n const { closeModal, openModal, toggleModal } = useModal()\n const [renderModal, setRenderModal] = useState(false)\n const [renderPopup, setRenderPopup] = useState(false)\n const [initialState, setInitialState] = useState<FormState>({})\n const { id, collectionSlug } = useDocumentInfo()\n\n const drawerSlug = useDrawerSlug('rich-text-link')\n\n const handleTogglePopup = useCallback((render) => {\n if (!render) {\n setRenderPopup(render)\n }\n }, [])\n\n useEffect(() => {\n const awaitInitialState = async () => {\n const data = {\n doc: element.doc,\n fields: deepCopyObject(element.fields),\n linkType: element.linkType,\n newTab: element.newTab,\n text: Node.string(element),\n url: element.url,\n }\n\n const { state } = await getFormState({\n apiRoute: config.routes.api,\n body: {\n data,\n operation: 'update',\n schemaPath: fieldMapPath,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n\n if (renderModal) {\n void awaitInitialState()\n }\n }, [renderModal, element, user, locale, t, collectionSlug, config, id, fieldMapPath])\n\n return (\n <span className={baseClass} {...attributes}>\n <span contentEditable={false} style={{ userSelect: 'none' }}>\n {renderModal && (\n <LinkDrawer\n drawerSlug={drawerSlug}\n fields={Array.isArray(fields) ? fields : []}\n handleClose={() => {\n toggleModal(drawerSlug)\n setRenderModal(false)\n }}\n handleModalSubmit={(fields) => {\n insertChange(editor, fields)\n closeModal(drawerSlug)\n setRenderModal(false)\n }}\n initialState={initialState}\n />\n )}\n <Popup\n boundingRef={editorRef}\n buttonType=\"none\"\n forceOpen={renderPopup}\n horizontalAlign=\"left\"\n onToggleOpen={handleTogglePopup}\n render={() => (\n <div className={`${baseClass}__popup`}>\n {element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && (\n <Translation\n elements={{\n '0': ({ children }) => (\n <a\n className={`${baseClass}__link-label`}\n href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n rel=\"noreferrer\"\n target=\"_blank\"\n title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n >\n {children}\n </a>\n ),\n }}\n i18nKey=\"fields:linkedTo\"\n t={t}\n variables={{\n label: getTranslation(\n config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels\n ?.singular,\n i18n,\n ),\n }}\n />\n )}\n {(element.linkType === 'custom' || !element.linkType) && (\n <a\n className={`${baseClass}__link-label`}\n href={element.url}\n rel=\"noreferrer\"\n target=\"_blank\"\n title={element.url}\n >\n {element.url}\n </a>\n )}\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__link-edit`}\n icon=\"edit\"\n onClick={(e) => {\n e.preventDefault()\n setRenderPopup(false)\n openModal(drawerSlug)\n setRenderModal(true)\n }}\n round\n tooltip={t('general:edit')}\n />\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__link-close`}\n icon=\"x\"\n onClick={(e) => {\n e.preventDefault()\n unwrapLink(editor)\n }}\n round\n tooltip={t('general:remove')}\n />\n </div>\n )}\n size=\"fit-content\"\n verticalAlign=\"bottom\"\n />\n </span>\n <span\n className={[`${baseClass}__popup-toggler`].filter(Boolean).join(' ')}\n onClick={() => setRenderPopup(true)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setRenderPopup(true)\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </span>\n </span>\n )\n}\n"],"names":["getTranslation","Button","Popup","Translation","useAuth","useConfig","useDocumentInfo","useDrawerSlug","useLocale","useModal","useTranslation","getFormState","deepCopyObject","reduceFieldsToValues","React","useCallback","useEffect","useState","Editor","Node","Transforms","ReactEditor","useSlate","useElement","LinkDrawer","linkFieldsSchemaPath","unwrapLink","baseClass","insertChange","editor","fields","data","parentPath","above","newNode","doc","linkType","newTab","url","setNodes","at","delete","selection","focus","path","unit","move","distance","insertText","String","text","LinkElement","attributes","children","editorRef","element","fieldProps","schemaPath","fieldMapPath","field","richTextComponentMap","get","config","user","code","locale","i18n","t","closeModal","openModal","toggleModal","renderModal","setRenderModal","renderPopup","setRenderPopup","initialState","setInitialState","id","collectionSlug","drawerSlug","handleTogglePopup","render","awaitInitialState","string","state","apiRoute","routes","api","body","operation","serverURL","span","className","contentEditable","style","userSelect","Array","isArray","handleClose","handleModalSubmit","boundingRef","buttonType","forceOpen","horizontalAlign","onToggleOpen","div","relationTo","value","elements","a","href","admin","rel","target","title","i18nKey","variables","label","collections","find","slug","labels","singular","buttonStyle","icon","onClick","e","preventDefault","round","tooltip","size","verticalAlign","filter","Boolean","join","onKeyDown","key","role","tabIndex"],"mappings":"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"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
.rich-text-link {
|
|
4
4
|
position: relative;
|
|
5
|
-
text-decoration: underline;
|
|
6
5
|
|
|
7
6
|
.popup {
|
|
8
7
|
position: absolute;
|
|
@@ -35,11 +34,6 @@
|
|
|
35
34
|
font-weight: 600;
|
|
36
35
|
cursor: pointer;
|
|
37
36
|
margin: 0;
|
|
38
|
-
|
|
39
|
-
&:hover,
|
|
40
|
-
&:focus-visible {
|
|
41
|
-
text-decoration: underline;
|
|
42
|
-
}
|
|
43
37
|
}
|
|
44
38
|
}
|
|
45
39
|
|
|
@@ -78,7 +72,9 @@
|
|
|
78
72
|
border: 0;
|
|
79
73
|
background-color: transparent;
|
|
80
74
|
padding: 0;
|
|
81
|
-
|
|
75
|
+
color: var(--theme-success-600);
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
border-bottom: 1px dotted;
|
|
82
78
|
cursor: text;
|
|
83
79
|
|
|
84
80
|
&:focus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6CtC,CAAA"}
|
|
@@ -13,7 +13,7 @@ export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState
|
|
|
13
13
|
const { id } = useDocumentInfo();
|
|
14
14
|
const { config } = useConfig();
|
|
15
15
|
const onChange = useCallback(async ({ formState: prevFormState })=>{
|
|
16
|
-
|
|
16
|
+
const { state } = await getFormState({
|
|
17
17
|
apiRoute: config.routes.api,
|
|
18
18
|
body: {
|
|
19
19
|
id,
|
|
@@ -23,6 +23,7 @@ export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState
|
|
|
23
23
|
},
|
|
24
24
|
serverURL: config.serverURL
|
|
25
25
|
});
|
|
26
|
+
return state;
|
|
26
27
|
}, [
|
|
27
28
|
config.routes.api,
|
|
28
29
|
config.serverURL,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n Drawer,\n Form,\n FormSubmit,\n RenderFields,\n useConfig,\n useDocumentInfo,\n useEditDepth,\n useFieldProps,\n useHotkey,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n drawerSlug,\n fields,\n handleModalSubmit,\n initialState,\n}) => {\n const { t } = useTranslation()\n const { schemaPath } = useFieldProps()\n const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n const { id } = useDocumentInfo()\n const { config } = useConfig()\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n Drawer,\n Form,\n FormSubmit,\n RenderFields,\n useConfig,\n useDocumentInfo,\n useEditDepth,\n useFieldProps,\n useHotkey,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n drawerSlug,\n fields,\n handleModalSubmit,\n initialState,\n}) => {\n const { t } = useTranslation()\n const { schemaPath } = useFieldProps()\n const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n const { id } = useDocumentInfo()\n const { config } = useConfig()\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n const { state } = await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n formState: prevFormState,\n operation: 'update',\n schemaPath: fieldMapPath,\n },\n serverURL: config.serverURL,\n })\n\n return state\n },\n\n [config.routes.api, config.serverURL, fieldMapPath, id],\n )\n\n return (\n <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>\n <Form\n beforeSubmit={[onChange]}\n disableValidationOnSubmit\n initialState={initialState}\n onChange={[onChange]}\n onSubmit={handleModalSubmit}\n >\n <RenderFields fields={fields} forceRender path=\"\" readOnly={false} schemaPath=\"\" />\n <LinkSubmit />\n </Form>\n </Drawer>\n )\n}\n\nconst LinkSubmit: React.FC = () => {\n const { t } = useTranslation()\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return <FormSubmit ref={ref}>{t('general:submit')}</FormSubmit>\n}\n"],"names":["Drawer","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useEditDepth","useFieldProps","useHotkey","useTranslation","getFormState","React","useCallback","useRef","linkFieldsSchemaPath","baseClass","LinkDrawer","drawerSlug","fields","handleModalSubmit","initialState","t","schemaPath","fieldMapPath","id","config","onChange","formState","prevFormState","state","apiRoute","routes","api","body","operation","serverURL","className","slug","title","beforeSubmit","disableValidationOnSubmit","onSubmit","forceRender","path","readOnly","LinkSubmit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click"],"mappings":"AAAA;;AAIA,SACEA,MAAM,EACNC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,SAAS,EACTC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAIlD,SAASC,oBAAoB,QAAQ,eAAc;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAA8B,CAAC,EAC1CC,UAAU,EACVC,MAAM,EACNC,iBAAiB,EACjBC,YAAY,EACb;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IACd,MAAM,EAAEa,UAAU,EAAE,GAAGf;IACvB,MAAMgB,eAAe,CAAC,EAAED,WAAW,CAAC,EAAER,qBAAqB,CAAC;IAC5D,MAAM,EAAEU,EAAE,EAAE,GAAGnB;IACf,MAAM,EAAEoB,MAAM,EAAE,GAAGrB;IAEnB,MAAMsB,WAAqCd,YACzC,OAAO,EAAEe,WAAWC,aAAa,EAAE;QACjC,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMnB,aAAa;YACnCoB,UAAUL,OAAOM,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJT;gBACAG,WAAWC;gBACXM,WAAW;gBACXZ,YAAYC;YACd;YACAY,WAAWV,OAAOU,SAAS;QAC7B;QAEA,OAAON;IACT,GAEA;QAACJ,OAAOM,MAAM,CAACC,GAAG;QAAEP,OAAOU,SAAS;QAAEZ;QAAcC;KAAG;IAGzD,qBACE,KAACxB;QAAOoC,WAAWrB;QAAWsB,MAAMpB;QAAYqB,OAAOjB,EAAE;kBACvD,cAAA,MAACpB;YACCsC,cAAc;gBAACb;aAAS;YACxBc,yBAAyB;YACzBpB,cAAcA;YACdM,UAAU;gBAACA;aAAS;YACpBe,UAAUtB;;8BAEV,KAAChB;oBAAae,QAAQA;oBAAQwB,WAAW;oBAACC,MAAK;oBAAGC,UAAU;oBAAOtB,YAAW;;8BAC9E,KAACuB;;;;AAIT,EAAC;AAED,MAAMA,aAAuB;IAC3B,MAAM,EAAExB,CAAC,EAAE,GAAGZ;IACd,MAAMqC,MAAMjC,OAA0B;IACtC,MAAMkC,YAAYzC;IAElBE,UAAU;QAAEwC,YAAY;QAAMD;QAAWE,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3DA,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIN,KAAKO,SAAS;YAChBP,IAAIO,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBAAO,KAACpD;QAAW4C,KAAKA;kBAAMzB,EAAE;;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nexport const textAlign: RichTextCustomElement = {\n name: 'alignment',\n Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',\n Element:
|
|
1
|
+
{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nexport const textAlign: RichTextCustomElement = {\n name: 'alignment',\n Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',\n Element: false,\n}\n"],"names":["textAlign","name","Button","Element"],"mappings":"AAEA,OAAO,MAAMA,YAAmC;IAC9CC,MAAM;IACNC,QAAQ;IACRC,SAAS;AACX,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,
|
|
1
|
+
{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,IA6F3D,CAAA"}
|
|
@@ -6,8 +6,12 @@ import { listTypes } from './listTypes.js';
|
|
|
6
6
|
import { unwrapList } from './unwrapList.js';
|
|
7
7
|
export const toggleList = (editor, format)=>{
|
|
8
8
|
let currentListFormat;
|
|
9
|
-
if (isListActive(editor, 'ol'))
|
|
10
|
-
|
|
9
|
+
if (isListActive(editor, 'ol')) {
|
|
10
|
+
currentListFormat = 'ol';
|
|
11
|
+
}
|
|
12
|
+
if (isListActive(editor, 'ul')) {
|
|
13
|
+
currentListFormat = 'ul';
|
|
14
|
+
}
|
|
11
15
|
// If the format is currently active,
|
|
12
16
|
// remove the list
|
|
13
17
|
if (currentListFormat === format) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n let currentListFormat: string\n\n if (isListActive(editor, 'ol')) currentListFormat = 'ol'\n if (isListActive(editor, 'ul')) currentListFormat = 'ul'\n\n // If the format is currently active,\n // remove the list\n if (currentListFormat === format) {\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n // If on an empty bullet, leave the above list alone\n // and unwrap only the active bullet\n if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n Transforms.unwrapNodes(editor, {\n match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n mode: 'lowest',\n split: true,\n })\n\n Transforms.setNodes(editor, { type: undefined })\n } else {\n // Otherwise, we need to unset li on all lis in the parent list\n // and unwrap the parent list itself\n const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n unwrapList(editor, listPath)\n }\n\n // Otherwise, if a list is active and we are changing it,\n // change it\n } else if (currentListFormat && currentListFormat !== format) {\n Transforms.setNodes(\n editor,\n {\n type: format,\n },\n {\n match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n mode: 'lowest',\n },\n )\n // Otherwise we can assume that we should just activate the list\n } else {\n Transforms.wrapNodes(editor, { type: format, children: [] })\n\n const [, parentNodePath] = getCommonBlock(\n editor,\n (node) => Element.isElement(node) && node.type === format,\n )\n\n // Only set li on nodes that don't have type\n Transforms.setNodes(\n editor,\n { type: 'li' },\n {\n match: (node, path) => {\n const match =\n Element.isElement(node) &&\n typeof node.type === 'undefined' &&\n path.length === parentNodePath.length + 1\n\n return match\n },\n voids: true,\n },\n )\n\n // Wrap nodes that do have a type with an li\n // so as to not lose their existing formatting\n const nodesToWrap = Array.from(\n Editor.nodes(editor, {\n match: (node, path) => {\n const match =\n Element.isElement(node) &&\n typeof node.type !== 'undefined' &&\n node.type !== 'li' &&\n path.length === parentNodePath.length + 1\n\n return match\n },\n }),\n )\n\n nodesToWrap.forEach(([, path]) => {\n Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n })\n }\n\n ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n let currentListFormat: string\n\n if (isListActive(editor, 'ol')) {\n currentListFormat = 'ol'\n }\n if (isListActive(editor, 'ul')) {\n currentListFormat = 'ul'\n }\n\n // If the format is currently active,\n // remove the list\n if (currentListFormat === format) {\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n // If on an empty bullet, leave the above list alone\n // and unwrap only the active bullet\n if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n Transforms.unwrapNodes(editor, {\n match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n mode: 'lowest',\n split: true,\n })\n\n Transforms.setNodes(editor, { type: undefined })\n } else {\n // Otherwise, we need to unset li on all lis in the parent list\n // and unwrap the parent list itself\n const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n unwrapList(editor, listPath)\n }\n\n // Otherwise, if a list is active and we are changing it,\n // change it\n } else if (currentListFormat && currentListFormat !== format) {\n Transforms.setNodes(\n editor,\n {\n type: format,\n },\n {\n match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n mode: 'lowest',\n },\n )\n // Otherwise we can assume that we should just activate the list\n } else {\n Transforms.wrapNodes(editor, { type: format, children: [] })\n\n const [, parentNodePath] = getCommonBlock(\n editor,\n (node) => Element.isElement(node) && node.type === format,\n )\n\n // Only set li on nodes that don't have type\n Transforms.setNodes(\n editor,\n { type: 'li' },\n {\n match: (node, path) => {\n const match =\n Element.isElement(node) &&\n typeof node.type === 'undefined' &&\n path.length === parentNodePath.length + 1\n\n return match\n },\n voids: true,\n },\n )\n\n // Wrap nodes that do have a type with an li\n // so as to not lose their existing formatting\n const nodesToWrap = Array.from(\n Editor.nodes(editor, {\n match: (node, path) => {\n const match =\n Element.isElement(node) &&\n typeof node.type !== 'undefined' &&\n node.type !== 'li' &&\n path.length === parentNodePath.length + 1\n\n return match\n },\n }),\n )\n\n nodesToWrap.forEach(([, path]) => {\n Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n })\n }\n\n ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IACA,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IAEA,qCAAqC;IACrC,kBAAkB;IAClB,IAAIA,sBAAsBD,QAAQ;QAChC,MAAME,eAAeZ,KAAKa,UAAU,CAACJ,QAAQA,OAAOK,SAAS,CAACC,MAAM,CAACC,IAAI;QAEzE,oDAAoD;QACpD,oCAAoC;QACpC,IAAIf,KAAKgB,MAAM,CAACL,iBAAiBM,OAAON,aAAaO,IAAI,EAAEC,MAAM,KAAK,GAAG;YACvElB,WAAWmB,WAAW,CAACZ,QAAQ;gBAC7Ba,OAAO,CAACC,IAAMxB,QAAQyB,SAAS,CAACD,MAAMjB,UAAUmB,QAAQ,CAACF,EAAEG,IAAI;gBAC/DC,MAAM;gBACNC,OAAO;YACT;YAEA1B,WAAW2B,QAAQ,CAACpB,QAAQ;gBAAEiB,MAAMI;YAAU;QAChD,OAAO;YACL,+DAA+D;YAC/D,oCAAoC;YACpC,MAAM,GAAGC,SAAS,GAAG3B,eAAeK,QAAQ,CAACc,IAAMxB,QAAQyB,SAAS,CAACD,MAAMA,EAAEG,IAAI,KAAKhB;YACtFH,WAAWE,QAAQsB;QACrB;IAEA,yDAAyD;IACzD,YAAY;IACd,OAAO,IAAIpB,qBAAqBA,sBAAsBD,QAAQ;QAC5DR,WAAW2B,QAAQ,CACjBpB,QACA;YACEiB,MAAMhB;QACR,GACA;YACEY,OAAO,CAACU,OAASjC,QAAQyB,SAAS,CAACQ,SAAS1B,UAAUmB,QAAQ,CAACO,KAAKN,IAAI;YACxEC,MAAM;QACR;IAEF,gEAAgE;IAClE,OAAO;QACLzB,WAAW+B,SAAS,CAACxB,QAAQ;YAAEiB,MAAMhB;YAAQwB,UAAU,EAAE;QAAC;QAE1D,MAAM,GAAGC,eAAe,GAAG/B,eACzBK,QACA,CAACuB,OAASjC,QAAQyB,SAAS,CAACQ,SAASA,KAAKN,IAAI,KAAKhB;QAGrD,4CAA4C;QAC5CR,WAAW2B,QAAQ,CACjBpB,QACA;YAAEiB,MAAM;QAAK,GACb;YACEJ,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;YACAc,OAAO;QACT;QAGF,4CAA4C;QAC5C,8CAA8C;QAC9C,MAAMC,cAAcC,MAAMC,IAAI,CAC5BzC,OAAO0C,KAAK,CAAC/B,QAAQ;YACnBa,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBM,KAAKN,IAAI,KAAK,QACdV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;QACF;QAGFe,YAAYI,OAAO,CAAC,CAAC,GAAGzB,KAAK;YAC3Bd,WAAW+B,SAAS,CAACxB,QAAQ;gBAAEiB,MAAM;gBAAMQ,UAAU,EAAE;YAAC,GAAG;gBAAEQ,IAAI1B;YAAK;QACxE;IACF;IAEAb,YAAYwC,KAAK,CAAClC;AACpB,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiBrD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;IACnC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,sBAAsB,CAAA;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiBrD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;IACnC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,sBAAsB,CAAA;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CA6GA,CAAA"}
|
|
@@ -39,7 +39,7 @@ export const UploadDrawer = (props)=>{
|
|
|
39
39
|
useEffect(()=>{
|
|
40
40
|
const data = deepCopyObject(element?.fields || {});
|
|
41
41
|
const awaitInitialState = async ()=>{
|
|
42
|
-
const state = await getFormState({
|
|
42
|
+
const { state } = await getFormState({
|
|
43
43
|
apiRoute: config.routes.api,
|
|
44
44
|
body: {
|
|
45
45
|
id,
|
|
@@ -65,7 +65,7 @@ export const UploadDrawer = (props)=>{
|
|
|
65
65
|
relatedCollection.slug
|
|
66
66
|
]);
|
|
67
67
|
const onChange = useCallback(async ({ formState: prevFormState })=>{
|
|
68
|
-
|
|
68
|
+
const { state } = await getFormState({
|
|
69
69
|
apiRoute: config.routes.api,
|
|
70
70
|
body: {
|
|
71
71
|
id,
|
|
@@ -75,6 +75,7 @@ export const UploadDrawer = (props)=>{
|
|
|
75
75
|
},
|
|
76
76
|
serverURL: config.serverURL
|
|
77
77
|
});
|
|
78
|
+
return state;
|
|
78
79
|
}, [
|
|
79
80
|
config.routes.api,
|
|
80
81
|
config.serverURL,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Drawer,\n Form,\n FormSubmit,\n RenderFields,\n useAuth,\n useConfig,\n useDocumentInfo,\n useLocale,\n useModal,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { LoadedSlateFieldProps } from '../../../../types.js'\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n readonly drawerSlug: string\n readonly element: UploadElementType\n readonly fieldProps: LoadedSlateFieldProps\n readonly relatedCollection: ClientCollectionConfig\n readonly schemaPath: string\n}> = (props) => {\n const editor = useSlateStatic()\n\n const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n const { i18n, t } = useTranslation()\n const { code: locale } = useLocale()\n const { user } = useAuth()\n const { closeModal } = useModal()\n const { id, collectionSlug } = useDocumentInfo()\n const [initialState, setInitialState] = useState({})\n const {\n field: { richTextComponentMap },\n } = fieldProps\n\n const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n const fields = richTextComponentMap.get(relatedFieldSchemaPath)\n\n const { config } = useConfig()\n\n const handleUpdateEditData = useCallback(\n (_, data) => {\n const newNode = {\n fields: data,\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n closeModal(drawerSlug)\n },\n [closeModal, editor, element, drawerSlug],\n )\n\n useEffect(() => {\n const data = deepCopyObject(element?.fields || {})\n\n const awaitInitialState = async () => {\n const state = await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n collectionSlug,\n data,\n operation: 'update',\n schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n\n void awaitInitialState()\n }, [\n config,\n element?.fields,\n user,\n locale,\n t,\n collectionSlug,\n id,\n schemaPath,\n relatedCollection.slug,\n ])\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Drawer,\n Form,\n FormSubmit,\n RenderFields,\n useAuth,\n useConfig,\n useDocumentInfo,\n useLocale,\n useModal,\n useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { LoadedSlateFieldProps } from '../../../../types.js'\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n readonly drawerSlug: string\n readonly element: UploadElementType\n readonly fieldProps: LoadedSlateFieldProps\n readonly relatedCollection: ClientCollectionConfig\n readonly schemaPath: string\n}> = (props) => {\n const editor = useSlateStatic()\n\n const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n const { i18n, t } = useTranslation()\n const { code: locale } = useLocale()\n const { user } = useAuth()\n const { closeModal } = useModal()\n const { id, collectionSlug } = useDocumentInfo()\n const [initialState, setInitialState] = useState({})\n const {\n field: { richTextComponentMap },\n } = fieldProps\n\n const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n const fields = richTextComponentMap.get(relatedFieldSchemaPath)\n\n const { config } = useConfig()\n\n const handleUpdateEditData = useCallback(\n (_, data) => {\n const newNode = {\n fields: data,\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n closeModal(drawerSlug)\n },\n [closeModal, editor, element, drawerSlug],\n )\n\n useEffect(() => {\n const data = deepCopyObject(element?.fields || {})\n\n const awaitInitialState = async () => {\n const { state } = await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n collectionSlug,\n data,\n operation: 'update',\n schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n },\n serverURL: config.serverURL,\n })\n\n setInitialState(state)\n }\n\n void awaitInitialState()\n }, [\n config,\n element?.fields,\n user,\n locale,\n t,\n collectionSlug,\n id,\n schemaPath,\n relatedCollection.slug,\n ])\n\n const onChange: FormProps['onChange'][0] = useCallback(\n async ({ formState: prevFormState }) => {\n const { state } = await getFormState({\n apiRoute: config.routes.api,\n body: {\n id,\n formState: prevFormState,\n operation: 'update',\n schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n },\n serverURL: config.serverURL,\n })\n\n return state\n },\n\n [config.routes.api, config.serverURL, relatedCollection.slug, schemaPath, id],\n )\n\n return (\n <Drawer\n slug={drawerSlug}\n title={t('general:editLabel', {\n label: getTranslation(relatedCollection.labels.singular, i18n),\n })}\n >\n <Form\n beforeSubmit={[onChange]}\n disableValidationOnSubmit\n initialState={initialState}\n onChange={[onChange]}\n onSubmit={handleUpdateEditData}\n >\n <RenderFields\n fields={Array.isArray(fields) ? fields : []}\n path=\"\"\n readOnly={false}\n schemaPath=\"\"\n />\n <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n </Form>\n </Drawer>\n )\n}\n"],"names":["getTranslation","Drawer","Form","FormSubmit","RenderFields","useAuth","useConfig","useDocumentInfo","useLocale","useModal","useTranslation","getFormState","deepCopyObject","React","useCallback","useEffect","useState","Transforms","ReactEditor","useSlateStatic","uploadFieldsSchemaPath","UploadDrawer","props","editor","drawerSlug","element","fieldProps","relatedCollection","schemaPath","i18n","t","code","locale","user","closeModal","id","collectionSlug","initialState","setInitialState","field","richTextComponentMap","relatedFieldSchemaPath","slug","fields","get","config","handleUpdateEditData","_","data","newNode","elementPath","findPath","setNodes","at","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","path","readOnly"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,SAAS,CAAA;AAcpE,OAAO,KAA4C,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,SAAS,CAAA;AAcpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAShE,OAAO,cAAc,CAAA;AASrB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CAAA;AA0LjB,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,KAAK,CAAC,SAMlD,CAAA"}
|
|
@@ -8,8 +8,8 @@ import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-reac
|
|
|
8
8
|
import { useElement } from '../../../providers/ElementProvider.js';
|
|
9
9
|
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js';
|
|
10
10
|
import { uploadFieldsSchemaPath, uploadName } from '../shared.js';
|
|
11
|
-
import { UploadDrawer } from './UploadDrawer/index.js';
|
|
12
11
|
import './index.scss';
|
|
12
|
+
import { UploadDrawer } from './UploadDrawer/index.js';
|
|
13
13
|
const baseClass = 'rich-text-upload';
|
|
14
14
|
const initialParams = {
|
|
15
15
|
depth: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, FormFieldBase } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Button,\n DrawerToggler,\n File,\n useConfig,\n useDocumentDrawer,\n useDrawerSlug,\n useListDrawer,\n usePayloadAPI,\n useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { UploadElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { uploadFieldsSchemaPath, uploadName } from '../shared.js'\nimport { UploadDrawer } from './UploadDrawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-upload'\n\nconst initialParams = {\n depth: 0,\n}\n\ntype Props = {\n name: string\n richTextComponentMap: Map<string, React.ReactNode>\n} & FormFieldBase\n\nconst UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] } & Props> = ({\n enabledCollectionSlugs,\n}) => {\n const {\n attributes,\n children,\n element: { relationTo, value },\n element,\n fieldProps,\n schemaPath,\n } = useElement<UploadElementType>()\n\n const {\n config: {\n collections,\n routes: { api },\n serverURL,\n },\n } = useConfig()\n const { i18n, t } = useTranslation()\n const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n const [relatedCollection, setRelatedCollection] = useState<ClientCollectionConfig>(() =>\n collections.find((coll) => coll.slug === relationTo),\n )\n\n const drawerSlug = useDrawerSlug('upload-drawer')\n\n const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n collectionSlugs: enabledCollectionSlugs,\n selectedCollection: relatedCollection.slug,\n })\n\n const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n id: value?.id,\n collectionSlug: relatedCollection.slug,\n })\n\n const editor = useSlateStatic()\n const selected = useSelected()\n const focused = useFocused()\n\n // Get the referenced document\n const [{ data }, { setParams }] = usePayloadAPI(\n `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n { initialParams },\n )\n\n const thumbnailSRC = data?.thumbnailURL || data?.url\n\n const removeUpload = useCallback(() => {\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.removeNodes(editor, { at: elementPath })\n }, [editor, element])\n\n const updateUpload = useCallback(\n (json) => {\n const { doc } = json\n\n const newNode = {\n fields: doc,\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n\n setParams({\n ...initialParams,\n cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n })\n\n dispatchCacheBust()\n closeDrawer()\n },\n [editor, element, setParams, cacheBust, closeDrawer],\n )\n\n const swapUpload = React.useCallback(\n ({ collectionSlug, docID }) => {\n const newNode = {\n type: uploadName,\n children: [{ text: ' ' }],\n relationTo: collectionSlug,\n value: { id: docID },\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n\n dispatchCacheBust()\n closeListDrawer()\n },\n [closeListDrawer, editor, element, collections],\n )\n\n const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n const customFieldsMap = fieldProps.field.richTextComponentMap.get(relatedFieldSchemaPath)\n\n return (\n <div\n className={[baseClass, selected && focused && `${baseClass}--selected`]\n .filter(Boolean)\n .join(' ')}\n contentEditable={false}\n {...attributes}\n >\n <div className={`${baseClass}__card`}>\n <div className={`${baseClass}__topRow`}>\n {/* TODO: migrate to use Thumbnail component */}\n <div className={`${baseClass}__thumbnail`}>\n {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}\n </div>\n <div className={`${baseClass}__topRowRightPanel`}>\n <div className={`${baseClass}__collectionLabel`}>\n {getTranslation(relatedCollection.labels.singular, i18n)}\n </div>\n <div className={`${baseClass}__actions`}>\n {Boolean(customFieldsMap) && (\n <DrawerToggler\n className={`${baseClass}__upload-drawer-toggler`}\n disabled={fieldProps?.field?.admin?.readOnly}\n slug={drawerSlug}\n >\n <Button\n buttonStyle=\"icon-label\"\n el=\"div\"\n icon=\"edit\"\n onClick={(e) => {\n e.preventDefault()\n }}\n round\n tooltip={t('fields:editRelationship')}\n />\n </DrawerToggler>\n )}\n <ListDrawerToggler\n className={`${baseClass}__list-drawer-toggler`}\n disabled={fieldProps?.field?.admin?.readOnly}\n >\n <Button\n buttonStyle=\"icon-label\"\n disabled={fieldProps?.field?.admin?.readOnly}\n el=\"div\"\n icon=\"swap\"\n onClick={() => {\n // do nothing\n }}\n round\n tooltip={t('fields:swapUpload')}\n />\n </ListDrawerToggler>\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__removeButton`}\n disabled={fieldProps?.field?.admin?.readOnly}\n icon=\"x\"\n onClick={(e) => {\n e.preventDefault()\n removeUpload()\n }}\n round\n tooltip={t('fields:removeUpload')}\n />\n </div>\n </div>\n </div>\n <div className={`${baseClass}__bottomRow`}>\n <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n <strong>{data?.filename}</strong>\n </DocumentDrawerToggler>\n </div>\n </div>\n {children}\n {value?.id && <DocumentDrawer onSave={updateUpload} />}\n <ListDrawer onSelect={swapUpload} />\n <UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />\n </div>\n )\n}\n\nexport const UploadElement = (props: Props): React.ReactNode => {\n return (\n <EnabledRelationshipsCondition {...props} uploads>\n <UploadElementComponent {...props} />\n </EnabledRelationshipsCondition>\n )\n}\n"],"names":["getTranslation","Button","DrawerToggler","File","useConfig","useDocumentDrawer","useDrawerSlug","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","uploadFieldsSchemaPath","uploadName","UploadDrawer","baseClass","initialParams","depth","UploadElementComponent","enabledCollectionSlugs","attributes","children","element","relationTo","value","fieldProps","schemaPath","config","collections","routes","api","serverURL","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","ListDrawer","ListDrawerToggler","closeDrawer","closeListDrawer","collectionSlugs","selectedCollection","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","editor","selected","focused","data","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","elementPath","findPath","removeNodes","at","updateUpload","json","doc","newNode","fields","setNodes","swapUpload","docID","type","text","relatedFieldSchemaPath","customFieldsMap","field","richTextComponentMap","get","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","disabled","admin","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","strong","onSave","onSelect","UploadElement","props","uploads"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SACEC,MAAM,EACNC,aAAa,EACbC,IAAI,EACJC,SAAS,EACTC,iBAAiB,EACjBC,aAAa,EACbC,aAAa,EACbC,aAAa,EACbC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAChE,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,WAAW,EAAEC,UAAU,EAAEC,WAAW,EAAEC,cAAc,QAAQ,cAAa;AAIlF,SAASC,UAAU,QAAQ,wCAAuC;AAClE,SAASC,6BAA6B,QAAQ,yCAAwC;AACtF,SAASC,sBAAsB,EAAEC,UAAU,QAAQ,eAAc;AACjE,SAASC,YAAY,QAAQ,0BAAyB;AACtD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,gBAAgB;IACpBC,OAAO;AACT;AAOA,MAAMC,yBAAkF,CAAC,EACvFC,sBAAsB,EACvB;IACC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAE,EAC9BF,OAAO,EACPG,UAAU,EACVC,UAAU,EACX,GAAGhB;IAEJ,MAAM,EACJiB,QAAQ,EACNC,WAAW,EACXC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,EACF,GAAGpC;IACJ,MAAM,EAAEqC,IAAI,EAAEC,CAAC,EAAE,GAAGjC;IACpB,MAAM,CAACkC,WAAWC,kBAAkB,GAAGhC,WAAW,CAACiC,QAAUA,QAAQ,GAAG;IACxE,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGlC,SAAiC,IACjFwB,YAAYW,IAAI,CAAC,CAACC,OAASA,KAAKC,IAAI,KAAKlB;IAG3C,MAAMmB,aAAa7C,cAAc;IAEjC,MAAM,CAAC8C,YAAYC,mBAAmB,EAAEC,aAAaC,eAAe,EAAE,CAAC,GAAGhD,cAAc;QACtFiD,iBAAiB5B;QACjB6B,oBAAoBX,kBAAkBI,IAAI;IAC5C;IAEA,MAAM,CAACQ,gBAAgBC,uBAAuB,EAAEL,WAAW,EAAE,CAAC,GAAGjD,kBAAkB;QACjFuD,IAAI3B,OAAO2B;QACXC,gBAAgBf,kBAAkBI,IAAI;IACxC;IAEA,MAAMY,SAAS5C;IACf,MAAM6C,WAAW9C;IACjB,MAAM+C,UAAUhD;IAEhB,8BAA8B;IAC9B,MAAM,CAAC,EAAEiD,IAAI,EAAE,EAAE,EAAEC,SAAS,EAAE,CAAC,GAAG1D,cAChC,CAAC,EAAEgC,UAAU,EAAED,IAAI,CAAC,EAAEO,kBAAkBI,IAAI,CAAC,CAAC,EAAEjB,OAAO2B,GAAG,CAAC,EAC3D;QAAEnC;IAAc;IAGlB,MAAM0C,eAAeF,MAAMG,gBAAgBH,MAAMI;IAEjD,MAAMC,eAAe3D,YAAY;QAC/B,MAAM4D,cAAcxD,YAAYyD,QAAQ,CAACV,QAAQ/B;QAEjDjB,WAAW2D,WAAW,CAACX,QAAQ;YAAEY,IAAIH;QAAY;IACnD,GAAG;QAACT;QAAQ/B;KAAQ;IAEpB,MAAM4C,eAAehE,YACnB,CAACiE;QACC,MAAM,EAAEC,GAAG,EAAE,GAAGD;QAEhB,MAAME,UAAU;YACdC,QAAQF;QACV;QAEA,MAAMN,cAAcxD,YAAYyD,QAAQ,CAACV,QAAQ/B;QAEjDjB,WAAWkE,QAAQ,CAAClB,QAAQgB,SAAS;YAAEJ,IAAIH;QAAY;QAEvDL,UAAU;YACR,GAAGzC,aAAa;YAChBkB;QACF;QAEAC;QACAU;IACF,GACA;QAACQ;QAAQ/B;QAASmC;QAAWvB;QAAWW;KAAY;IAGtD,MAAM2B,aAAavE,MAAMC,WAAW,CAClC,CAAC,EAAEkD,cAAc,EAAEqB,KAAK,EAAE;QACxB,MAAMJ,UAAU;YACdK,MAAM7D;YACNQ,UAAU;gBAAC;oBAAEsD,MAAM;gBAAI;aAAE;YACzBpD,YAAY6B;YACZ5B,OAAO;gBAAE2B,IAAIsB;YAAM;QACrB;QAEA,MAAMX,cAAcxD,YAAYyD,QAAQ,CAACV,QAAQ/B;QAEjDgB,qBAAqBV,YAAYW,IAAI,CAAC,CAACC,OAASA,KAAKC,IAAI,KAAKW;QAE9D/C,WAAWkE,QAAQ,CAAClB,QAAQgB,SAAS;YAAEJ,IAAIH;QAAY;QAEvD3B;QACAW;IACF,GACA;QAACA;QAAiBO;QAAQ/B;QAASM;KAAY;IAGjD,MAAMgD,yBAAyB,CAAC,EAAEhE,uBAAuB,CAAC,EAAEyB,kBAAkBI,IAAI,CAAC,CAAC;IACpF,MAAMoC,kBAAkBpD,WAAWqD,KAAK,CAACC,oBAAoB,CAACC,GAAG,CAACJ;IAElE,qBACE,MAACK;QACCC,WAAW;YAACnE;YAAWuC,YAAYC,WAAW,CAAC,EAAExC,UAAU,UAAU,CAAC;SAAC,CACpEoE,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,iBAAiB;QAChB,GAAGlE,UAAU;;0BAEd,MAAC6D;gBAAIC,WAAW,CAAC,EAAEnE,UAAU,MAAM,CAAC;;kCAClC,MAACkE;wBAAIC,WAAW,CAAC,EAAEnE,UAAU,QAAQ,CAAC;;0CAEpC,KAACkE;gCAAIC,WAAW,CAAC,EAAEnE,UAAU,WAAW,CAAC;0CACtC2C,6BAAe,KAAC6B;oCAAIC,KAAKhC,MAAMiC;oCAAUC,KAAKhC;mDAAmB,KAAChE;;0CAErE,MAACuF;gCAAIC,WAAW,CAAC,EAAEnE,UAAU,kBAAkB,CAAC;;kDAC9C,KAACkE;wCAAIC,WAAW,CAAC,EAAEnE,UAAU,iBAAiB,CAAC;kDAC5CxB,eAAe8C,kBAAkBsD,MAAM,CAACC,QAAQ,EAAE5D;;kDAErD,MAACiD;wCAAIC,WAAW,CAAC,EAAEnE,UAAU,SAAS,CAAC;;4CACpCqE,QAAQP,kCACP,KAACpF;gDACCyF,WAAW,CAAC,EAAEnE,UAAU,uBAAuB,CAAC;gDAChD8E,UAAUpE,YAAYqD,OAAOgB,OAAOC;gDACpCtD,MAAMC;0DAEN,cAAA,KAAClD;oDACCwG,aAAY;oDACZC,IAAG;oDACHC,MAAK;oDACLC,SAAS,CAACC;wDACRA,EAAEC,cAAc;oDAClB;oDACAC,KAAK;oDACLC,SAAStE,EAAE;;;0DAIjB,KAACW;gDACCsC,WAAW,CAAC,EAAEnE,UAAU,qBAAqB,CAAC;gDAC9C8E,UAAUpE,YAAYqD,OAAOgB,OAAOC;0DAEpC,cAAA,KAACvG;oDACCwG,aAAY;oDACZH,UAAUpE,YAAYqD,OAAOgB,OAAOC;oDACpCE,IAAG;oDACHC,MAAK;oDACLC,SAAS;oDACP,aAAa;oDACf;oDACAG,KAAK;oDACLC,SAAStE,EAAE;;;0DAGf,KAACzC;gDACCwG,aAAY;gDACZd,WAAW,CAAC,EAAEnE,UAAU,cAAc,CAAC;gDACvC8E,UAAUpE,YAAYqD,OAAOgB,OAAOC;gDACpCG,MAAK;gDACLC,SAAS,CAACC;oDACRA,EAAEC,cAAc;oDAChBxC;gDACF;gDACAyC,KAAK;gDACLC,SAAStE,EAAE;;;;;;;;kCAKnB,KAACgD;wBAAIC,WAAW,CAAC,EAAEnE,UAAU,WAAW,CAAC;kCACvC,cAAA,KAACmC;4BAAsBgC,WAAW,CAAC,EAAEnE,UAAU,oBAAoB,CAAC;sCAClE,cAAA,KAACyF;0CAAQhD,MAAMiC;;;;;;YAIpBpE;YACAG,OAAO2B,oBAAM,KAACF;gBAAewD,QAAQvC;;0BACtC,KAACvB;gBAAW+D,UAAUlC;;0BACtB,KAAC1D;gBAAmB4B;gBAAYpB;gBAASG;gBAAYY;gBAAmBX;;;;AAG9E;AAEA,OAAO,MAAMiF,gBAAgB,CAACC;IAC5B,qBACE,KAACjG;QAA+B,GAAGiG,KAAK;QAAEC,OAAO;kBAC/C,cAAA,KAAC3F;YAAwB,GAAG0F,KAAK;;;AAGvC,EAAC"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, FormFieldBase } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n Button,\n DrawerToggler,\n File,\n useConfig,\n useDocumentDrawer,\n useDrawerSlug,\n useListDrawer,\n usePayloadAPI,\n useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { UploadElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { uploadFieldsSchemaPath, uploadName } from '../shared.js'\nimport './index.scss'\nimport { UploadDrawer } from './UploadDrawer/index.js'\n\nconst baseClass = 'rich-text-upload'\n\nconst initialParams = {\n depth: 0,\n}\n\ntype Props = {\n name: string\n richTextComponentMap: Map<string, React.ReactNode>\n} & FormFieldBase\n\nconst UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] } & Props> = ({\n enabledCollectionSlugs,\n}) => {\n const {\n attributes,\n children,\n element: { relationTo, value },\n element,\n fieldProps,\n schemaPath,\n } = useElement<UploadElementType>()\n\n const {\n config: {\n collections,\n routes: { api },\n serverURL,\n },\n } = useConfig()\n const { i18n, t } = useTranslation()\n const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n const [relatedCollection, setRelatedCollection] = useState<ClientCollectionConfig>(() =>\n collections.find((coll) => coll.slug === relationTo),\n )\n\n const drawerSlug = useDrawerSlug('upload-drawer')\n\n const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n collectionSlugs: enabledCollectionSlugs,\n selectedCollection: relatedCollection.slug,\n })\n\n const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n id: value?.id,\n collectionSlug: relatedCollection.slug,\n })\n\n const editor = useSlateStatic()\n const selected = useSelected()\n const focused = useFocused()\n\n // Get the referenced document\n const [{ data }, { setParams }] = usePayloadAPI(\n `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n { initialParams },\n )\n\n const thumbnailSRC = data?.thumbnailURL || data?.url\n\n const removeUpload = useCallback(() => {\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.removeNodes(editor, { at: elementPath })\n }, [editor, element])\n\n const updateUpload = useCallback(\n (json) => {\n const { doc } = json\n\n const newNode = {\n fields: doc,\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n\n setParams({\n ...initialParams,\n cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n })\n\n dispatchCacheBust()\n closeDrawer()\n },\n [editor, element, setParams, cacheBust, closeDrawer],\n )\n\n const swapUpload = React.useCallback(\n ({ collectionSlug, docID }) => {\n const newNode = {\n type: uploadName,\n children: [{ text: ' ' }],\n relationTo: collectionSlug,\n value: { id: docID },\n }\n\n const elementPath = ReactEditor.findPath(editor, element)\n\n setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n Transforms.setNodes(editor, newNode, { at: elementPath })\n\n dispatchCacheBust()\n closeListDrawer()\n },\n [closeListDrawer, editor, element, collections],\n )\n\n const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n const customFieldsMap = fieldProps.field.richTextComponentMap.get(relatedFieldSchemaPath)\n\n return (\n <div\n className={[baseClass, selected && focused && `${baseClass}--selected`]\n .filter(Boolean)\n .join(' ')}\n contentEditable={false}\n {...attributes}\n >\n <div className={`${baseClass}__card`}>\n <div className={`${baseClass}__topRow`}>\n {/* TODO: migrate to use Thumbnail component */}\n <div className={`${baseClass}__thumbnail`}>\n {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}\n </div>\n <div className={`${baseClass}__topRowRightPanel`}>\n <div className={`${baseClass}__collectionLabel`}>\n {getTranslation(relatedCollection.labels.singular, i18n)}\n </div>\n <div className={`${baseClass}__actions`}>\n {Boolean(customFieldsMap) && (\n <DrawerToggler\n className={`${baseClass}__upload-drawer-toggler`}\n disabled={fieldProps?.field?.admin?.readOnly}\n slug={drawerSlug}\n >\n <Button\n buttonStyle=\"icon-label\"\n el=\"div\"\n icon=\"edit\"\n onClick={(e) => {\n e.preventDefault()\n }}\n round\n tooltip={t('fields:editRelationship')}\n />\n </DrawerToggler>\n )}\n <ListDrawerToggler\n className={`${baseClass}__list-drawer-toggler`}\n disabled={fieldProps?.field?.admin?.readOnly}\n >\n <Button\n buttonStyle=\"icon-label\"\n disabled={fieldProps?.field?.admin?.readOnly}\n el=\"div\"\n icon=\"swap\"\n onClick={() => {\n // do nothing\n }}\n round\n tooltip={t('fields:swapUpload')}\n />\n </ListDrawerToggler>\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__removeButton`}\n disabled={fieldProps?.field?.admin?.readOnly}\n icon=\"x\"\n onClick={(e) => {\n e.preventDefault()\n removeUpload()\n }}\n round\n tooltip={t('fields:removeUpload')}\n />\n </div>\n </div>\n </div>\n <div className={`${baseClass}__bottomRow`}>\n <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n <strong>{data?.filename}</strong>\n </DocumentDrawerToggler>\n </div>\n </div>\n {children}\n {value?.id && <DocumentDrawer onSave={updateUpload} />}\n <ListDrawer onSelect={swapUpload} />\n <UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />\n </div>\n )\n}\n\nexport const UploadElement = (props: Props): React.ReactNode => {\n return (\n <EnabledRelationshipsCondition {...props} uploads>\n <UploadElementComponent {...props} />\n </EnabledRelationshipsCondition>\n )\n}\n"],"names":["getTranslation","Button","DrawerToggler","File","useConfig","useDocumentDrawer","useDrawerSlug","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","uploadFieldsSchemaPath","uploadName","UploadDrawer","baseClass","initialParams","depth","UploadElementComponent","enabledCollectionSlugs","attributes","children","element","relationTo","value","fieldProps","schemaPath","config","collections","routes","api","serverURL","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","ListDrawer","ListDrawerToggler","closeDrawer","closeListDrawer","collectionSlugs","selectedCollection","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","editor","selected","focused","data","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","elementPath","findPath","removeNodes","at","updateUpload","json","doc","newNode","fields","setNodes","swapUpload","docID","type","text","relatedFieldSchemaPath","customFieldsMap","field","richTextComponentMap","get","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","disabled","admin","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","strong","onSave","onSelect","UploadElement","props","uploads"],"mappings":"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"}
|
package/dist/field/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { RenderComponent, ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui';
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { lazy, Suspense, useEffect, useState } from 'react';
|
|
5
5
|
import { createFeatureMap } from './createFeatureMap.js';
|
|
6
6
|
const RichTextEditor = /*#__PURE__*/ lazy(()=>import('./RichText.js').then((module)=>({
|
|
7
7
|
default: module.RichText
|
package/dist/field/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport { RenderComponent, ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'\nimport React, {
|
|
1
|
+
{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport { RenderComponent, ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { RichTextPlugin, SlateFieldProps } from '../types.js'\nimport type { EnabledFeatures } from './types.js'\n\nimport { createFeatureMap } from './createFeatureMap.js'\n\nconst RichTextEditor = lazy(() =>\n import('./RichText.js').then((module) => ({\n default: module.RichText,\n })),\n)\n\nexport const RichTextField: React.FC<SlateFieldProps> = (props) => {\n const {\n field: { richTextComponentMap },\n } = props\n\n const { schemaPath } = useFieldProps()\n const clientFunctions = useClientFunctions()\n const [hasLoadedPlugins, setHasLoadedPlugins] = useState(false)\n\n const [features] = useState<EnabledFeatures>(() => {\n return createFeatureMap(richTextComponentMap as any)\n })\n\n const [plugins, setPlugins] = useState<RichTextPlugin[]>([])\n\n useEffect(() => {\n if (!hasLoadedPlugins) {\n const plugins: RichTextPlugin[] = []\n\n Object.entries(clientFunctions).forEach(([key, plugin]) => {\n if (key.startsWith(`slatePlugin.${schemaPath}.`)) {\n plugins.push(plugin)\n }\n })\n\n if (plugins.length === features.plugins.length) {\n setPlugins(plugins)\n setHasLoadedPlugins(true)\n }\n }\n }, [hasLoadedPlugins, clientFunctions, schemaPath, features.plugins.length])\n\n if (!hasLoadedPlugins) {\n return (\n <React.Fragment>\n {Array.isArray(features.plugins) &&\n features.plugins.map((Plugin, i) => {\n return (\n <React.Fragment key={i}>\n <RenderComponent mappedComponent={Plugin} />\n </React.Fragment>\n )\n })}\n </React.Fragment>\n )\n }\n\n return (\n <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n <RichTextEditor\n {...props}\n elements={features.elements}\n leaves={features.leaves}\n plugins={plugins}\n />\n </Suspense>\n )\n}\n"],"names":["RenderComponent","ShimmerEffect","useClientFunctions","useFieldProps","React","lazy","Suspense","useEffect","useState","createFeatureMap","RichTextEditor","then","module","default","RichText","RichTextField","props","field","richTextComponentMap","schemaPath","clientFunctions","hasLoadedPlugins","setHasLoadedPlugins","features","plugins","setPlugins","Object","entries","forEach","key","plugin","startsWith","push","length","Fragment","Array","isArray","map","Plugin","i","mappedComponent","fallback","height","elements","leaves"],"mappings":"AAAA;;AAEA,SAASA,eAAe,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,aAAa,QAAQ,iBAAgB;AAClG,OAAOC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAKlE,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,MAAMC,+BAAiBL,KAAK,IAC1B,MAAM,CAAC,iBAAiBM,IAAI,CAAC,CAACC,SAAY,CAAA;YACxCC,SAASD,OAAOE,QAAQ;QAC1B,CAAA;AAGF,OAAO,MAAMC,gBAA2C,CAACC;IACvD,MAAM,EACJC,OAAO,EAAEC,oBAAoB,EAAE,EAChC,GAAGF;IAEJ,MAAM,EAAEG,UAAU,EAAE,GAAGhB;IACvB,MAAMiB,kBAAkBlB;IACxB,MAAM,CAACmB,kBAAkBC,oBAAoB,GAAGd,SAAS;IAEzD,MAAM,CAACe,SAAS,GAAGf,SAA0B;QAC3C,OAAOC,iBAAiBS;IAC1B;IAEA,MAAM,CAACM,SAASC,WAAW,GAAGjB,SAA2B,EAAE;IAE3DD,UAAU;QACR,IAAI,CAACc,kBAAkB;YACrB,MAAMG,UAA4B,EAAE;YAEpCE,OAAOC,OAAO,CAACP,iBAAiBQ,OAAO,CAAC,CAAC,CAACC,KAAKC,OAAO;gBACpD,IAAID,IAAIE,UAAU,CAAC,CAAC,YAAY,EAAEZ,WAAW,CAAC,CAAC,GAAG;oBAChDK,QAAQQ,IAAI,CAACF;gBACf;YACF;YAEA,IAAIN,QAAQS,MAAM,KAAKV,SAASC,OAAO,CAACS,MAAM,EAAE;gBAC9CR,WAAWD;gBACXF,oBAAoB;YACtB;QACF;IACF,GAAG;QAACD;QAAkBD;QAAiBD;QAAYI,SAASC,OAAO,CAACS,MAAM;KAAC;IAE3E,IAAI,CAACZ,kBAAkB;QACrB,qBACE,KAACjB,MAAM8B,QAAQ;sBACZC,MAAMC,OAAO,CAACb,SAASC,OAAO,KAC7BD,SAASC,OAAO,CAACa,GAAG,CAAC,CAACC,QAAQC;gBAC5B,qBACE,KAACnC,MAAM8B,QAAQ;8BACb,cAAA,KAAClC;wBAAgBwC,iBAAiBF;;mBADfC;YAIzB;;IAGR;IAEA,qBACE,KAACjC;QAASmC,wBAAU,KAACxC;YAAcyC,QAAO;;kBACxC,cAAA,KAAChC;YACE,GAAGM,KAAK;YACT2B,UAAUpB,SAASoB,QAAQ;YAC3BC,QAAQrB,SAASqB,MAAM;YACvBpB,SAASA;;;AAIjB,EAAC"}
|