@payloadcms/ui 3.59.0-internal.cb85185 → 3.59.0-internal.cf8cc72
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/elements/CodeEditor/CodeEditor.d.ts.map +1 -1
- package/dist/elements/CodeEditor/CodeEditor.js +2 -2
- package/dist/elements/CodeEditor/CodeEditor.js.map +1 -1
- package/dist/elements/Collapsible/index.d.ts +2 -15
- package/dist/elements/Collapsible/index.d.ts.map +1 -1
- package/dist/elements/Collapsible/index.js +60 -59
- package/dist/elements/Collapsible/index.js.map +1 -1
- package/dist/elements/Collapsible/index.scss +2 -6
- package/dist/elements/DocumentLocked/index.js +1 -1
- package/dist/elements/DocumentLocked/index.js.map +1 -1
- package/dist/elements/GroupByBuilder/index.js +1 -1
- package/dist/elements/GroupByBuilder/index.js.map +1 -1
- package/dist/elements/LivePreview/Toggler/index.d.ts.map +1 -1
- package/dist/elements/LivePreview/Toggler/index.js +5 -1
- package/dist/elements/LivePreview/Toggler/index.js.map +1 -1
- package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
- package/dist/elements/RelationshipTable/index.js +3 -2
- package/dist/elements/RelationshipTable/index.js.map +1 -1
- package/dist/elements/Table/index.scss +1 -0
- package/dist/exports/client/{CodeEditor-R4I2K7IG.js → CodeEditor-2AHTKKBE.js} +2 -2
- package/dist/exports/client/{chunk-F5UB7KI3.js → chunk-6UH4KUYK.js} +4 -4
- package/dist/exports/client/chunk-6UH4KUYK.js.map +7 -0
- package/dist/exports/client/index.d.ts +2 -0
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +12 -12
- package/dist/exports/client/index.js.map +3 -3
- package/dist/fields/Code/index.d.ts.map +1 -1
- package/dist/fields/Code/index.js +1 -3
- package/dist/fields/Code/index.js.map +1 -1
- package/dist/fields/Upload/RelationshipContent/index.js +1 -1
- package/dist/fields/Upload/RelationshipContent/index.js.map +1 -1
- package/dist/providers/LivePreview/context.d.ts +2 -2
- package/dist/providers/LivePreview/context.d.ts.map +1 -1
- package/dist/providers/LivePreview/context.js.map +1 -1
- package/dist/providers/LivePreview/index.d.ts.map +1 -1
- package/dist/providers/LivePreview/index.js +10 -2
- package/dist/providers/LivePreview/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/dateLocales.d.ts +1 -0
- package/dist/utilities/dateLocales.d.ts.map +1 -1
- package/dist/utilities/dateLocales.js +2 -0
- package/dist/utilities/dateLocales.js.map +1 -1
- package/dist/utilities/getColumns.js +1 -1
- package/dist/utilities/getColumns.js.map +1 -1
- package/dist/utilities/handleLivePreview.d.ts +3 -3
- package/dist/utilities/handleLivePreview.d.ts.map +1 -1
- package/dist/utilities/handleLivePreview.js.map +1 -1
- package/dist/views/Edit/index.d.ts +1 -1
- package/dist/views/Edit/index.d.ts.map +1 -1
- package/dist/views/Edit/index.js +17 -9
- package/dist/views/Edit/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/exports/client/chunk-F5UB7KI3.js.map +0 -7
- /package/dist/exports/client/{CodeEditor-R4I2K7IG.js.map → CodeEditor-2AHTKKBE.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Code/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAWxE,OAAO,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Code/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAWxE,OAAO,cAAc,CAAA;AAkIrB,eAAO,MAAM,SAAS;;;;;;;+EAAoC,CAAA"}
|
|
@@ -25,7 +25,6 @@ const CodeFieldComponent = props => {
|
|
|
25
25
|
className,
|
|
26
26
|
description,
|
|
27
27
|
editorOptions,
|
|
28
|
-
editorProps,
|
|
29
28
|
language = 'javascript'
|
|
30
29
|
} = {},
|
|
31
30
|
label,
|
|
@@ -116,8 +115,7 @@ const CodeFieldComponent = props => {
|
|
|
116
115
|
value: stringValueRef.current,
|
|
117
116
|
wrapperProps: {
|
|
118
117
|
id: `field-${path?.replace(/\./g, '__')}`
|
|
119
|
-
}
|
|
120
|
-
...(editorProps || {})
|
|
118
|
+
}
|
|
121
119
|
}), AfterInput]
|
|
122
120
|
}), /*#__PURE__*/_jsx(RenderCustomComponent, {
|
|
123
121
|
CustomComponent: Description,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","CodeEditor","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useField","withCondition","mergeFieldStyles","fieldBaseClass","prismToMonacoLanguageMap","js","ts","baseClass","CodeFieldComponent","props","field","admin","className","description","editorOptions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","CodeEditor","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useField","withCondition","mergeFieldStyles","fieldBaseClass","prismToMonacoLanguageMap","js","ts","baseClass","CodeFieldComponent","props","field","admin","className","description","editorOptions","language","label","localized","required","onMount","path","pathFromProps","readOnly","validate","inputChangeFromRef","useRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","undefined","handleChange","val","current","e","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","defaultLanguage","onChange","wrapperProps","id","replace","CodeField"],"sources":["../../../src/fields/Code/index.tsx"],"sourcesContent":["'use client'\nimport type { CodeFieldClientComponent } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst prismToMonacoLanguageMap = {\n js: 'javascript',\n ts: 'typescript',\n}\n\nconst baseClass = 'code-field'\n\nconst CodeFieldComponent: CodeFieldClientComponent = (props) => {\n const {\n field,\n field: {\n admin: { className, description, editorOptions, language = 'javascript' } = {},\n label,\n localized,\n required,\n },\n onMount,\n path: pathFromProps,\n readOnly,\n validate,\n } = props\n\n const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n const memoizedValidate = useCallback(\n (value, options) => {\n if (typeof validate === 'function') {\n return validate(value, { ...options, required })\n }\n },\n [validate, required],\n )\n\n const {\n customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n disabled,\n initialValue,\n path,\n setValue,\n showError,\n value,\n } = useField<string>({\n potentiallyStalePath: pathFromProps,\n validate: memoizedValidate,\n })\n\n const stringValueRef = React.useRef<string>(\n (value || initialValue) !== undefined ? (value ?? initialValue) : undefined,\n )\n\n const handleChange = useCallback(\n (val: string) => {\n if (readOnly || disabled) {\n return\n }\n inputChangeFromRef.current = 'internalEditor'\n\n try {\n setValue(val ? val : null)\n stringValueRef.current = val\n } catch (e) {\n setValue(val ? val : null)\n stringValueRef.current = val\n }\n },\n [readOnly, disabled, setValue],\n )\n\n useEffect(() => {\n if (inputChangeFromRef.current === 'formState') {\n stringValueRef.current =\n (value || initialValue) !== undefined ? (value ?? initialValue) : undefined\n setRecalculatedHeightAt(Date.now())\n }\n\n inputChangeFromRef.current = 'formState'\n }, [initialValue, path, value])\n\n const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n return (\n <div\n className={[\n fieldBaseClass,\n baseClass,\n className,\n showError && 'error',\n (readOnly || disabled) && 'read-only',\n ]\n .filter(Boolean)\n .join(' ')}\n style={styles}\n >\n <RenderCustomComponent\n CustomComponent={Label}\n Fallback={\n <FieldLabel label={label} localized={localized} path={path} required={required} />\n }\n />\n <div className={`${fieldBaseClass}__wrap`}>\n <RenderCustomComponent\n CustomComponent={Error}\n Fallback={<FieldError path={path} showError={showError} />}\n />\n {BeforeInput}\n <CodeEditor\n defaultLanguage={prismToMonacoLanguageMap[language] || language}\n onChange={handleChange}\n onMount={onMount}\n options={editorOptions}\n readOnly={readOnly || disabled}\n recalculatedHeightAt={recalculatedHeightAt}\n value={stringValueRef.current}\n wrapperProps={{\n id: `field-${path?.replace(/\\./g, '__')}`,\n }}\n />\n {AfterInput}\n </div>\n <RenderCustomComponent\n CustomComponent={Description}\n Fallback={<FieldDescription description={description} path={path} />}\n />\n </div>\n )\n}\n\nexport const CodeField = withCondition(CodeFieldComponent)\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -91,7 +91,7 @@ export function RelationshipContent(props) {
|
|
|
91
91
|
}
|
|
92
92
|
const generateMetaText = t5;
|
|
93
93
|
const metaText = withMeta ? generateMetaText(mimeType, byteSize) : "";
|
|
94
|
-
const previewAllowed = displayPreview ?? collectionConfig
|
|
94
|
+
const previewAllowed = displayPreview ?? collectionConfig?.upload?.displayPreview ?? true;
|
|
95
95
|
let t6;
|
|
96
96
|
if ($[9] !== className) {
|
|
97
97
|
t6 = [baseClass, className].filter(Boolean);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","Button","useDocumentDrawer","ThumbnailComponent","useConfig","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","displayPreview","filename","mimeType","onRemove","reloadDoc","src","thumbnailSrc","withMeta","t0","x","y","undefined","config","collectionConfig","collections","find","collection","slug","t1","t2","DocumentDrawer","t3","openDrawer","t4","t5","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","previewAllowed","upload","t6","filter","Boolean","_jsxs","children","_jsx","fileSrc","href","target","buttonStyle","icon","iconStyle","onClick"],"sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TypeWithID } from 'payload'\n\nimport { formatFilesize, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'\nimport { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload-relationship-details'\n\ntype Props = {\n readonly allowEdit?: boolean\n readonly allowRemove?: boolean\n readonly alt: string\n readonly byteSize: number\n readonly className?: string\n readonly collectionSlug: string\n readonly displayPreview?: boolean\n readonly filename: string\n readonly id?: number | string\n readonly mimeType: string\n readonly onRemove: () => void\n readonly reloadDoc: ReloadDoc\n readonly src: string\n readonly thumbnailSrc: string\n readonly withMeta?: boolean\n readonly x?: number\n readonly y?: number\n}\nexport function RelationshipContent(props: Props) {\n const {\n id,\n allowEdit,\n allowRemove,\n alt,\n byteSize,\n className,\n collectionSlug,\n displayPreview,\n filename,\n mimeType,\n onRemove,\n reloadDoc,\n src,\n thumbnailSrc,\n withMeta = true,\n x,\n y,\n } = props\n\n const { config } = useConfig()\n const collectionConfig =\n 'collections' in config\n ? config.collections.find((collection) => collection.slug === collectionSlug)\n : undefined\n\n const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({\n id: src ? id : undefined,\n collectionSlug,\n })\n\n const onSave = React.useCallback(\n async ({ doc }: { doc: TypeWithID }) => reloadDoc(doc.id, collectionSlug),\n [reloadDoc, collectionSlug],\n )\n\n function generateMetaText(mimeType: string, size: number): string {\n const sections: string[] = []\n if (size) {\n sections.push(formatFilesize(size))\n }\n\n if (x && y) {\n sections.push(`${x}x${y}`)\n }\n\n if (mimeType) {\n sections.push(mimeType)\n }\n\n return sections.join(' — ')\n }\n\n const metaText = withMeta ? generateMetaText(mimeType, byteSize) : ''\n const previewAllowed = displayPreview ?? collectionConfig
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","Button","useDocumentDrawer","ThumbnailComponent","useConfig","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","displayPreview","filename","mimeType","onRemove","reloadDoc","src","thumbnailSrc","withMeta","t0","x","y","undefined","config","collectionConfig","collections","find","collection","slug","t1","t2","DocumentDrawer","t3","openDrawer","t4","t5","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","previewAllowed","upload","t6","filter","Boolean","_jsxs","children","_jsx","fileSrc","href","target","buttonStyle","icon","iconStyle","onClick"],"sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TypeWithID } from 'payload'\n\nimport { formatFilesize, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'\nimport { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload-relationship-details'\n\ntype Props = {\n readonly allowEdit?: boolean\n readonly allowRemove?: boolean\n readonly alt: string\n readonly byteSize: number\n readonly className?: string\n readonly collectionSlug: string\n readonly displayPreview?: boolean\n readonly filename: string\n readonly id?: number | string\n readonly mimeType: string\n readonly onRemove: () => void\n readonly reloadDoc: ReloadDoc\n readonly src: string\n readonly thumbnailSrc: string\n readonly withMeta?: boolean\n readonly x?: number\n readonly y?: number\n}\nexport function RelationshipContent(props: Props) {\n const {\n id,\n allowEdit,\n allowRemove,\n alt,\n byteSize,\n className,\n collectionSlug,\n displayPreview,\n filename,\n mimeType,\n onRemove,\n reloadDoc,\n src,\n thumbnailSrc,\n withMeta = true,\n x,\n y,\n } = props\n\n const { config } = useConfig()\n const collectionConfig =\n 'collections' in config\n ? config.collections.find((collection) => collection.slug === collectionSlug)\n : undefined\n\n const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({\n id: src ? id : undefined,\n collectionSlug,\n })\n\n const onSave = React.useCallback(\n async ({ doc }: { doc: TypeWithID }) => reloadDoc(doc.id, collectionSlug),\n [reloadDoc, collectionSlug],\n )\n\n function generateMetaText(mimeType: string, size: number): string {\n const sections: string[] = []\n if (size) {\n sections.push(formatFilesize(size))\n }\n\n if (x && y) {\n sections.push(`${x}x${y}`)\n }\n\n if (mimeType) {\n sections.push(mimeType)\n }\n\n return sections.join(' — ')\n }\n\n const metaText = withMeta ? generateMetaText(mimeType, byteSize) : ''\n const previewAllowed = displayPreview ?? collectionConfig?.upload?.displayPreview ?? true\n\n return (\n <div className={[baseClass, className].filter(Boolean).join(' ')}>\n <div className={`${baseClass}__imageAndDetails`}>\n {previewAllowed && (\n <ThumbnailComponent\n alt={alt}\n className={`${baseClass}__thumbnail`}\n filename={filename}\n fileSrc={thumbnailSrc}\n size=\"small\"\n />\n )}\n <div className={`${baseClass}__details`}>\n <p className={`${baseClass}__filename`}>\n {src ? (\n <a href={src} target=\"_blank\">\n {filename}\n </a>\n ) : (\n filename\n )}\n </p>\n {withMeta ? <p className={`${baseClass}__meta`}>{metaText}</p> : null}\n </div>\n </div>\n\n {allowEdit !== false || allowRemove !== false ? (\n <div className={`${baseClass}__actions`}>\n {allowEdit !== false ? (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__edit`}\n icon=\"edit\"\n iconStyle=\"none\"\n onClick={openDrawer}\n />\n ) : null}\n {allowRemove !== false ? (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__remove`}\n icon=\"x\"\n iconStyle=\"none\"\n onClick={() => onRemove()}\n />\n ) : null}\n <DocumentDrawer onSave={onSave} />\n </div>\n ) : null}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { LivePreviewConfig } from 'payload';
|
|
1
|
+
import type { LivePreviewConfig, LivePreviewURLType } from 'payload';
|
|
2
2
|
import type { Dispatch } from 'react';
|
|
3
3
|
import type React from 'react';
|
|
4
4
|
import type { usePopupWindow } from '../../hooks/usePopupWindow.js';
|
|
@@ -60,7 +60,7 @@ export interface LivePreviewContextType {
|
|
|
60
60
|
* It is important to know which one it is, so that we can opt in/out of certain behaviors, e.g. calling the server to get the URL.
|
|
61
61
|
*/
|
|
62
62
|
typeofLivePreviewURL?: 'function' | 'string';
|
|
63
|
-
url:
|
|
63
|
+
url: LivePreviewURLType;
|
|
64
64
|
zoom: number;
|
|
65
65
|
}
|
|
66
66
|
export declare const LivePreviewContext: React.Context<LivePreviewContextType>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACpD,oBAAoB,EAAE,OAAO,CAAA;IAC7B,gBAAgB,EAAE,OAAO,CAAA;IACzB,WAAW,EAAE,OAAO,CAAA;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,EAAE;QAClB,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,CAAA;IACrC,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,aAAa,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACrF,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,qBAAqB,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACxE,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACrE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IACpC,kBAAkB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,EAAE;QACf,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;KACV,CAAA;IACD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC5C,GAAG,EAAE,kBAAkB,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,kBAAkB,uCAsC7B,CAAA;AAEF,eAAO,MAAM,qBAAqB,8BAAgC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":["createContext","use","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","iframeRef","isLivePreviewEnabled","isLivePreviewing","isPopupOpen","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIsLivePreviewing","setLoadedURL","setMeasuredDeviceSize","setPreviewWindowType","setSize","setToolbarPosition","setURL","setWidth","setZoom","size","toolbarPosition","x","y","typeofLivePreviewURL","url","zoom","useLivePreviewContext"],"sources":["../../../src/providers/LivePreview/context.ts"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig } from 'payload'\nimport type { Dispatch } from 'react'\nimport type React from 'react'\n\nimport { createContext, use } from 'react'\n\nimport type { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n appIsReady: boolean\n breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n breakpoints: LivePreviewConfig['breakpoints']\n iframeRef: React.RefObject<HTMLIFrameElement | null>\n isLivePreviewEnabled: boolean\n isLivePreviewing: boolean\n isPopupOpen: boolean\n listeningForMessages?: boolean\n /**\n * The URL that has finished loading in the iframe or popup.\n * For example, if you set the `url`, it will begin to load into the iframe,\n * but `loadedURL` will not be set until the iframe's `onLoad` event fires.\n */\n loadedURL?: string\n measuredDeviceSize: {\n height: number\n width: number\n }\n openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n popupRef?: React.RefObject<null | Window>\n previewWindowType: 'iframe' | 'popup'\n setAppIsReady: (appIsReady: boolean) => void\n setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n setHeight: (height: number) => void\n setIsLivePreviewing: (isLivePreviewing: boolean) => void\n setLoadedURL: (loadedURL: string) => void\n setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n setSize: Dispatch<SizeReducerAction>\n setToolbarPosition: (position: { x: number; y: number }) => void\n /**\n * Sets the URL of the preview (either iframe or popup).\n * Will trigger a reload of the window.\n */\n setURL: (url: string) => void\n setWidth: (width: number) => void\n setZoom: (zoom: number) => void\n size: {\n height: number\n width: number\n }\n toolbarPosition: {\n x: number\n y: number\n }\n /**\n * The live preview url property can be either a string or a function that returns a string.\n * It is important to know which one it is, so that we can opt in/out of certain behaviors, e.g. calling the server to get the URL.\n */\n typeofLivePreviewURL?: 'function' | 'string'\n url:
|
|
1
|
+
{"version":3,"file":"context.js","names":["createContext","use","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","iframeRef","isLivePreviewEnabled","isLivePreviewing","isPopupOpen","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIsLivePreviewing","setLoadedURL","setMeasuredDeviceSize","setPreviewWindowType","setSize","setToolbarPosition","setURL","setWidth","setZoom","size","toolbarPosition","x","y","typeofLivePreviewURL","url","zoom","useLivePreviewContext"],"sources":["../../../src/providers/LivePreview/context.ts"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig, LivePreviewURLType } from 'payload'\nimport type { Dispatch } from 'react'\nimport type React from 'react'\n\nimport { createContext, use } from 'react'\n\nimport type { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n appIsReady: boolean\n breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n breakpoints: LivePreviewConfig['breakpoints']\n iframeRef: React.RefObject<HTMLIFrameElement | null>\n isLivePreviewEnabled: boolean\n isLivePreviewing: boolean\n isPopupOpen: boolean\n listeningForMessages?: boolean\n /**\n * The URL that has finished loading in the iframe or popup.\n * For example, if you set the `url`, it will begin to load into the iframe,\n * but `loadedURL` will not be set until the iframe's `onLoad` event fires.\n */\n loadedURL?: string\n measuredDeviceSize: {\n height: number\n width: number\n }\n openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n popupRef?: React.RefObject<null | Window>\n previewWindowType: 'iframe' | 'popup'\n setAppIsReady: (appIsReady: boolean) => void\n setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n setHeight: (height: number) => void\n setIsLivePreviewing: (isLivePreviewing: boolean) => void\n setLoadedURL: (loadedURL: string) => void\n setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n setSize: Dispatch<SizeReducerAction>\n setToolbarPosition: (position: { x: number; y: number }) => void\n /**\n * Sets the URL of the preview (either iframe or popup).\n * Will trigger a reload of the window.\n */\n setURL: (url: string) => void\n setWidth: (width: number) => void\n setZoom: (zoom: number) => void\n size: {\n height: number\n width: number\n }\n toolbarPosition: {\n x: number\n y: number\n }\n /**\n * The live preview url property can be either a string or a function that returns a string.\n * It is important to know which one it is, so that we can opt in/out of certain behaviors, e.g. calling the server to get the URL.\n */\n typeofLivePreviewURL?: 'function' | 'string'\n url: LivePreviewURLType\n zoom: number\n}\n\nexport const LivePreviewContext = createContext<LivePreviewContextType>({\n appIsReady: false,\n breakpoint: undefined,\n breakpoints: undefined,\n iframeRef: undefined,\n isLivePreviewEnabled: undefined,\n isLivePreviewing: false,\n isPopupOpen: false,\n measuredDeviceSize: {\n height: 0,\n width: 0,\n },\n openPopupWindow: () => {},\n popupRef: undefined,\n previewWindowType: 'iframe',\n setAppIsReady: () => {},\n setBreakpoint: () => {},\n setHeight: () => {},\n setIsLivePreviewing: () => {},\n setLoadedURL: () => {},\n setMeasuredDeviceSize: () => {},\n setPreviewWindowType: () => {},\n setSize: () => {},\n setToolbarPosition: () => {},\n setURL: () => {},\n setWidth: () => {},\n setZoom: () => {},\n size: {\n height: 0,\n width: 0,\n },\n toolbarPosition: {\n x: 0,\n y: 0,\n },\n typeofLivePreviewURL: undefined,\n url: undefined,\n zoom: 1,\n})\n\nexport const useLivePreviewContext = () => use(LivePreviewContext)\n"],"mappings":"AAAA;;AAKA,SAASA,aAAa,EAAEC,GAAG,QAAQ;AA4DnC,OAAO,MAAMC,kBAAA,GAAqBF,aAAA,CAAsC;EACtEG,UAAA,EAAY;EACZC,UAAA,EAAYC,SAAA;EACZC,WAAA,EAAaD,SAAA;EACbE,SAAA,EAAWF,SAAA;EACXG,oBAAA,EAAsBH,SAAA;EACtBI,gBAAA,EAAkB;EAClBC,WAAA,EAAa;EACbC,kBAAA,EAAoB;IAClBC,MAAA,EAAQ;IACRC,KAAA,EAAO;EACT;EACAC,eAAA,EAAiBA,CAAA,MAAO;EACxBC,QAAA,EAAUV,SAAA;EACVW,iBAAA,EAAmB;EACnBC,aAAA,EAAeA,CAAA,MAAO;EACtBC,aAAA,EAAeA,CAAA,MAAO;EACtBC,SAAA,EAAWA,CAAA,MAAO;EAClBC,mBAAA,EAAqBA,CAAA,MAAO;EAC5BC,YAAA,EAAcA,CAAA,MAAO;EACrBC,qBAAA,EAAuBA,CAAA,MAAO;EAC9BC,oBAAA,EAAsBA,CAAA,MAAO;EAC7BC,OAAA,EAASA,CAAA,MAAO;EAChBC,kBAAA,EAAoBA,CAAA,MAAO;EAC3BC,MAAA,EAAQA,CAAA,MAAO;EACfC,QAAA,EAAUA,CAAA,MAAO;EACjBC,OAAA,EAASA,CAAA,MAAO;EAChBC,IAAA,EAAM;IACJjB,MAAA,EAAQ;IACRC,KAAA,EAAO;EACT;EACAiB,eAAA,EAAiB;IACfC,CAAA,EAAG;IACHC,CAAA,EAAG;EACL;EACAC,oBAAA,EAAsB5B,SAAA;EACtB6B,GAAA,EAAK7B,SAAA;EACL8B,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,qBAAA,GAAwBA,CAAA,KAAMnC,GAAA,CAAIC,kBAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAyB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAyB,iBAAiB,EAAsB,MAAM,SAAS,CAAA;AAG3F,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAU1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,gBAAgB,EAAE,OAAO,CAAA;CAC1B,GAAG,IAAI,CAAC,sBAAsB,EAAE,sBAAsB,GAAG,KAAK,CAAC,CAAA;AAEhE,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2PlE,CAAA"}
|
|
@@ -68,7 +68,13 @@ export const LivePreviewProvider = ({
|
|
|
68
68
|
* - resets `appIsReady` to `false` while the new URL is loading
|
|
69
69
|
*/
|
|
70
70
|
const setLivePreviewURL = useCallback(_incomingURL => {
|
|
71
|
-
|
|
71
|
+
let incomingURL;
|
|
72
|
+
if (typeof _incomingURL === 'string') {
|
|
73
|
+
incomingURL = formatAbsoluteURL(_incomingURL);
|
|
74
|
+
}
|
|
75
|
+
if (!incomingURL) {
|
|
76
|
+
setIsLivePreviewing(false);
|
|
77
|
+
}
|
|
72
78
|
if (incomingURL !== url) {
|
|
73
79
|
setAppIsReady(false);
|
|
74
80
|
setURL(incomingURL);
|
|
@@ -78,7 +84,9 @@ export const LivePreviewProvider = ({
|
|
|
78
84
|
* `url` needs to be relative to the window, which cannot be done on initial render.
|
|
79
85
|
*/
|
|
80
86
|
useEffect(() => {
|
|
81
|
-
|
|
87
|
+
if (typeof urlFromProps === 'string') {
|
|
88
|
+
setURL(formatAbsoluteURL(urlFromProps));
|
|
89
|
+
}
|
|
82
90
|
}, [urlFromProps]);
|
|
83
91
|
// The toolbar needs to freely drag and drop around the page
|
|
84
92
|
const handleDragEnd = ev => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n appIsReady?: boolean\n breakpoints?: LivePreviewConfig['breakpoints']\n children: React.ReactNode\n deviceSize?: {\n height: number\n width: number\n }\n isLivePreviewEnabled?: boolean\n isLivePreviewing: boolean\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n breakpoints: incomingBreakpoints,\n children,\n isLivePreviewEnabled,\n isLivePreviewing: incomingIsLivePreviewing,\n typeofLivePreviewURL,\n url: urlFromProps,\n}) => {\n const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n () => [\n ...(incomingBreakpoints || []),\n {\n name: 'responsive',\n height: '100%',\n label: 'Responsive',\n width: '100%',\n },\n ],\n [incomingBreakpoints],\n )\n\n const [url, setURL] = useState<string>('')\n\n const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n eventType: 'payload-live-preview',\n url,\n })\n\n const [appIsReady, setAppIsReady] = useState(false)\n const [listeningForMessages, setListeningForMessages] = useState(false)\n\n const { collectionSlug, globalSlug } = useDocumentInfo()\n\n const isFirstRender = useRef(true)\n\n const { setPreference } = usePreferences()\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n const [loadedURL, setLoadedURL] = useState<string>()\n\n const [zoom, setZoom] = useState(1)\n\n const [position, setPosition] = useState({ x: 0, y: 0 })\n\n const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n height: 0,\n width: 0,\n })\n\n const [breakpoint, setBreakpoint] =\n React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n /**\n * A \"middleware\" callback fn that does some additional work before `setURL`.\n * This is what we provide through context, bc it:\n * - ensures the URL is absolute\n * - resets `appIsReady` to `false` while the new URL is loading\n */\n const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n (_incomingURL) => {\n const incomingURL = formatAbsoluteURL(_incomingURL)\n\n if (incomingURL !== url) {\n setAppIsReady(false)\n setURL(incomingURL)\n }\n },\n [url],\n )\n\n /**\n * `url` needs to be relative to the window, which cannot be done on initial render.\n */\n useEffect(() => {\n setURL(formatAbsoluteURL(urlFromProps))\n }, [urlFromProps])\n\n // The toolbar needs to freely drag and drop around the page\n const handleDragEnd = (ev) => {\n // only update position if the toolbar is completely within the preview area\n // otherwise reset it back to the previous position\n // TODO: reset to the nearest edge of the preview area\n if (ev.over && ev.over.id === 'live-preview-area') {\n const newPos = {\n x: position.x + ev.delta.x,\n y: position.y + ev.delta.y,\n }\n\n setPosition(newPos)\n } else {\n // reset\n }\n }\n\n const setWidth = useCallback(\n (width) => {\n setSize({ type: 'width', value: width })\n },\n [setSize],\n )\n\n const setHeight = useCallback(\n (height) => {\n setSize({ type: 'height', value: height })\n },\n [setSize],\n )\n\n // explicitly set new width and height when as new breakpoints are selected\n // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n useEffect(() => {\n const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n if (\n foundBreakpoint &&\n breakpoint !== 'responsive' &&\n breakpoint !== 'custom' &&\n typeof foundBreakpoint?.width === 'number' &&\n typeof foundBreakpoint?.height === 'number'\n ) {\n setSize({\n type: 'reset',\n value: {\n height: foundBreakpoint.height,\n width: foundBreakpoint.width,\n },\n })\n }\n }, [breakpoint, breakpoints])\n\n /**\n * Receive the `ready` message from the popup window\n * This indicates that the app is ready to receive `window.postMessage` events\n * This is also the only cross-origin way of detecting when a popup window has loaded\n * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n */\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (\n url?.startsWith(event.origin) &&\n event.data &&\n typeof event.data === 'object' &&\n event.data.type === 'payload-live-preview'\n ) {\n if (event.data.ready) {\n setAppIsReady(true)\n }\n }\n }\n\n window.addEventListener('message', handleMessage)\n\n setListeningForMessages(true)\n\n return () => {\n window.removeEventListener('message', handleMessage)\n }\n }, [url, listeningForMessages])\n\n const handleWindowChange = useCallback(\n (type: 'iframe' | 'popup') => {\n setAppIsReady(false)\n setPreviewWindowType(type)\n if (type === 'popup') {\n openPopupWindow()\n }\n },\n [openPopupWindow],\n )\n\n // when the user closes the popup window, switch back to the iframe\n // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n useEffect(() => {\n const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n if (newPreviewWindowType !== previewWindowType) {\n handleWindowChange('iframe')\n }\n }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false\n return\n }\n\n void setPreference<CollectionPreferences>(\n collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n {\n editViewType: isLivePreviewing ? 'live-preview' : 'default',\n },\n true,\n )\n }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n return (\n <LivePreviewContext\n value={{\n appIsReady,\n breakpoint,\n breakpoints,\n iframeRef,\n isLivePreviewEnabled,\n isLivePreviewing,\n isPopupOpen,\n listeningForMessages,\n loadedURL,\n measuredDeviceSize,\n openPopupWindow,\n popupRef,\n previewWindowType,\n setAppIsReady,\n setBreakpoint,\n setHeight,\n setIsLivePreviewing,\n setLoadedURL,\n setMeasuredDeviceSize,\n setPreviewWindowType: handleWindowChange,\n setSize,\n setToolbarPosition: setPosition,\n setURL: setLivePreviewURL,\n setWidth,\n setZoom,\n size,\n toolbarPosition: position,\n typeofLivePreviewURL,\n url,\n zoom,\n }}\n >\n <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n {children}\n </DndContext>\n </LivePreviewContext>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig, LivePreviewURLType } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n appIsReady?: boolean\n breakpoints?: LivePreviewConfig['breakpoints']\n children: React.ReactNode\n deviceSize?: {\n height: number\n width: number\n }\n isLivePreviewEnabled?: boolean\n isLivePreviewing: boolean\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n breakpoints: incomingBreakpoints,\n children,\n isLivePreviewEnabled,\n isLivePreviewing: incomingIsLivePreviewing,\n typeofLivePreviewURL,\n url: urlFromProps,\n}) => {\n const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n () => [\n ...(incomingBreakpoints || []),\n {\n name: 'responsive',\n height: '100%',\n label: 'Responsive',\n width: '100%',\n },\n ],\n [incomingBreakpoints],\n )\n\n const [url, setURL] = useState<string>('')\n\n const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n eventType: 'payload-live-preview',\n url,\n })\n\n const [appIsReady, setAppIsReady] = useState(false)\n const [listeningForMessages, setListeningForMessages] = useState(false)\n\n const { collectionSlug, globalSlug } = useDocumentInfo()\n\n const isFirstRender = useRef(true)\n\n const { setPreference } = usePreferences()\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n const [loadedURL, setLoadedURL] = useState<string>()\n\n const [zoom, setZoom] = useState(1)\n\n const [position, setPosition] = useState({ x: 0, y: 0 })\n\n const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n height: 0,\n width: 0,\n })\n\n const [breakpoint, setBreakpoint] =\n React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n /**\n * A \"middleware\" callback fn that does some additional work before `setURL`.\n * This is what we provide through context, bc it:\n * - ensures the URL is absolute\n * - resets `appIsReady` to `false` while the new URL is loading\n */\n const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n (_incomingURL) => {\n let incomingURL: LivePreviewURLType\n\n if (typeof _incomingURL === 'string') {\n incomingURL = formatAbsoluteURL(_incomingURL)\n }\n\n if (!incomingURL) {\n setIsLivePreviewing(false)\n }\n\n if (incomingURL !== url) {\n setAppIsReady(false)\n setURL(incomingURL)\n }\n },\n [url],\n )\n\n /**\n * `url` needs to be relative to the window, which cannot be done on initial render.\n */\n useEffect(() => {\n if (typeof urlFromProps === 'string') {\n setURL(formatAbsoluteURL(urlFromProps))\n }\n }, [urlFromProps])\n\n // The toolbar needs to freely drag and drop around the page\n const handleDragEnd = (ev) => {\n // only update position if the toolbar is completely within the preview area\n // otherwise reset it back to the previous position\n // TODO: reset to the nearest edge of the preview area\n if (ev.over && ev.over.id === 'live-preview-area') {\n const newPos = {\n x: position.x + ev.delta.x,\n y: position.y + ev.delta.y,\n }\n\n setPosition(newPos)\n } else {\n // reset\n }\n }\n\n const setWidth = useCallback(\n (width) => {\n setSize({ type: 'width', value: width })\n },\n [setSize],\n )\n\n const setHeight = useCallback(\n (height) => {\n setSize({ type: 'height', value: height })\n },\n [setSize],\n )\n\n // explicitly set new width and height when as new breakpoints are selected\n // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n useEffect(() => {\n const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n if (\n foundBreakpoint &&\n breakpoint !== 'responsive' &&\n breakpoint !== 'custom' &&\n typeof foundBreakpoint?.width === 'number' &&\n typeof foundBreakpoint?.height === 'number'\n ) {\n setSize({\n type: 'reset',\n value: {\n height: foundBreakpoint.height,\n width: foundBreakpoint.width,\n },\n })\n }\n }, [breakpoint, breakpoints])\n\n /**\n * Receive the `ready` message from the popup window\n * This indicates that the app is ready to receive `window.postMessage` events\n * This is also the only cross-origin way of detecting when a popup window has loaded\n * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n */\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (\n url?.startsWith(event.origin) &&\n event.data &&\n typeof event.data === 'object' &&\n event.data.type === 'payload-live-preview'\n ) {\n if (event.data.ready) {\n setAppIsReady(true)\n }\n }\n }\n\n window.addEventListener('message', handleMessage)\n\n setListeningForMessages(true)\n\n return () => {\n window.removeEventListener('message', handleMessage)\n }\n }, [url, listeningForMessages])\n\n const handleWindowChange = useCallback(\n (type: 'iframe' | 'popup') => {\n setAppIsReady(false)\n setPreviewWindowType(type)\n if (type === 'popup') {\n openPopupWindow()\n }\n },\n [openPopupWindow],\n )\n\n // when the user closes the popup window, switch back to the iframe\n // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n useEffect(() => {\n const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n if (newPreviewWindowType !== previewWindowType) {\n handleWindowChange('iframe')\n }\n }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false\n return\n }\n\n void setPreference<CollectionPreferences>(\n collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n {\n editViewType: isLivePreviewing ? 'live-preview' : 'default',\n },\n true,\n )\n }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n return (\n <LivePreviewContext\n value={{\n appIsReady,\n breakpoint,\n breakpoints,\n iframeRef,\n isLivePreviewEnabled,\n isLivePreviewing,\n isPopupOpen,\n listeningForMessages,\n loadedURL,\n measuredDeviceSize,\n openPopupWindow,\n popupRef,\n previewWindowType,\n setAppIsReady,\n setBreakpoint,\n setHeight,\n setIsLivePreviewing,\n setLoadedURL,\n setMeasuredDeviceSize,\n setPreviewWindowType: handleWindowChange,\n setSize,\n setToolbarPosition: setPosition,\n setURL: setLivePreviewURL,\n setWidth,\n setZoom,\n size,\n toolbarPosition: position,\n typeofLivePreviewURL,\n url,\n zoom,\n }}\n >\n <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n {children}\n </DndContext>\n </LivePreviewContext>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|