@payloadcms/richtext-lexical 3.68.0-internal-debug.185cc5f → 3.68.0-internal-debug.dafc24d

package/dist/features/toolbars/shared/ToolbarDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useDeferredValue, useEffect, useMemo } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useRunDeprioritized } from '../../../../utilities/useRunDeprioritized.js'\nimport './index.scss'\nimport { DropDown, DropDownItem } from './DropDown.js'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      itemKey={item.key}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nconst MemoToolbarItem = React.memo(ToolbarItem)\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [toolbarState, setToolbarState] = React.useState<{\n    activeItemKeys: string[]\n    enabledGroup: boolean\n    enabledItemKeys: string[]\n  }>({\n    activeItemKeys: [],\n    enabledGroup: true,\n    enabledItemKeys: [],\n  })\n  const deferredToolbarState = useDeferredValue(toolbarState)\n\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const runDeprioritized = useRunDeprioritized()\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n\n      setToolbarState({\n        activeItemKeys: _activeItemKeys,\n        enabledGroup: group.isEnabled\n          ? group.isEnabled({ editor, editorConfigContext, selection })\n          : true,\n        enabledItemKeys: _enabledItemKeys,\n      })\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    // Run on mount in order to update states when dropdown is opened\n    void runDeprioritized(updateStates)\n\n    return mergeRegister(\n      editor.registerUpdateListener(async () => {\n        await runDeprioritized(updateStates)\n      }),\n    )\n  }, [editor, runDeprioritized, updateStates])\n\n  const renderedItems = useMemo(() => {\n    return items?.length\n      ? items.map((item) => (\n          <MemoToolbarItem\n            active={deferredToolbarState.activeItemKeys.includes(item.key)}\n            anchorElem={anchorElem}\n            editor={editor}\n            enabled={deferredToolbarState.enabledItemKeys.includes(item.key)}\n            item={item}\n            key={item.key}\n          />\n        ))\n      : null\n  }, [items, deferredToolbarState, anchorElem, editor])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!deferredToolbarState.enabledGroup}\n      dropdownKey={groupKey}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {renderedItems}\n    </DropDown>\n  )\n}\n"],"names":["React","useCallback","useDeferredValue","useEffect","useMemo","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","useRunDeprioritized","DropDown","DropDownItem","ToolbarItem","active","anchorElem","editor","enabled","item","i18n","fieldProps","featureClientSchemaMap","schemaPath","Component","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","itemKey","tooltip","span","className","MemoToolbarItem","memo","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","toolbarState","setToolbarState","useState","activeItemKeys","enabledGroup","enabledItemKeys","deferredToolbarState","editorConfigContext","items","groupKey","runDeprioritized","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","renderedItems","map","includes","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","dropdownKey"],"mappings":"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"}

package/dist/features/toolbars/shared/ToolbarDropdown/index.scss

@@ -0,0 +1,129 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .toolbar-popup__dropdown {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    gap: base(0.2);
+    height: base(1.5);
+    border: 0;
+    background: none;
+    border-radius: $style-radius-m;
+    cursor: pointer;
+    position: relative;
+    padding: 0 base(0.4) 0 base(0.3);
+    transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+    &-label {
+      color: var(--theme-elevation-600);
+      padding-block: 0;
+      padding-inline: base(0.2) base(0.4);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.2;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--theme-elevation-100);
+    }
+
+    .active {
+      background-color: var(--theme-elevation-100);
+
+      .toolbar-popup__dropdown-caret {
+        &:after {
+          transform: rotate(0deg);
+        }
+      }
+    }
+
+    &-caret {
+      width: base(0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: rotate(45deg);
+      &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+
+        /* Vector 3 */
+
+        width: 4px;
+        height: 4px;
+        transform: translateY(-2px);
+        border: solid 1px var(--theme-elevation-600);
+        border-width: 0 1px 1px 0;
+      }
+    }
+
+    &-items {
+      position: absolute;
+      background: var(--theme-elevation-0);
+      border-radius: $style-radius-m;
+      min-width: 132.5px;
+      max-width: 200px;
+      z-index: 100;
+
+      .toolbar-popup__dropdown-item {
+        all: unset; // reset all default button styles
+        cursor: pointer;
+        color: var(--theme-elevation-900);
+        transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+        position: relative;
+
+        .text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        &:hover:not([disabled]),
+        &.active {
+          background-color: var(--theme-elevation-100);
+        }
+        &.disabled {
+          cursor: not-allowed;
+          opacity: 0.2;
+        }
+
+        .btn__icon {
+          // Override default button icon styles that
+          // set a background color when focused
+          background: none !important;
+          background-color: none !important;
+        }
+
+        padding-left: 6.25px;
+        padding-right: 6.25px;
+        width: 100%;
+        height: 30px;
+        border-radius: $style-radius-m;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: 6.25px;
+
+        .icon {
+          min-width: 20px;
+          height: 20px;
+          color: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .toolbar-popup__dropdown {
+      &-items {
+        position: absolute;
+        @include shadow-m;
+      }
+    }
+  }
+}

package/dist/features/upload/client/component/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
@@ -89,32 +89,36 @@ export const UploadComponent = (props)=>{
         nodeKey
     ]);
     const aspectRatio = thumbnailSRC && data?.width && data?.height ? data.width > data.height ? 'landscape' : 'portrait' : 'landscape';
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: `${baseClass}__contents ${baseClass}__contents--${aspectRatio}`,
         "data-align": format || undefined,
         "data-filename": data?.filename,
         ref: uploadRef,
         children: [
-            /*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}__card`,
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
+                    /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__media`,
                         children: [
-                            /*#__PURE__*/ _jsx(Thumbnail, {
+                            /*#__PURE__*/ _jsxDEV(Thumbnail, {
                                 collectionSlug: relationTo,
                                 fileSrc: isImage(data?.mimeType) ? thumbnailSRC : null,
                                 height: data?.height,
                                 size: "none",
                                 width: data?.width
-                            }),
-                            isEditable && /*#__PURE__*/ _jsx("div", {
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 160,
+                                columnNumber: 11
+                            }, this),
+                            isEditable && /*#__PURE__*/ _jsxDEV("div", {
                                 className: `${baseClass}__overlay ${baseClass}__floater`,
-                                children: /*#__PURE__*/ _jsxs("div", {
+                                children: /*#__PURE__*/ _jsxDEV("div", {
                                     className: `${baseClass}__actions`,
                                     role: "toolbar",
                                     children: [
-                                        hasExtraFields ? /*#__PURE__*/ _jsx(Button, {
+                                        hasExtraFields ? /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__upload-drawer-toggler`,
                                             disabled: !isEditable,
@@ -124,8 +128,12 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:editRelationship')
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx(Button, {
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 172,
+                                            columnNumber: 19
+                                        }, this) : null,
+                                        /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__swap-drawer-toggler`,
                                             disabled: !isEditable,
@@ -141,8 +149,12 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:swapUpload')
-                                        }),
-                                        /*#__PURE__*/ _jsx(Button, {
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 185,
+                                            columnNumber: 17
+                                        }, this),
+                                        /*#__PURE__*/ _jsxDEV(Button, {
                                             buttonStyle: "icon-label",
                                             className: `${baseClass}__removeButton`,
                                             disabled: !isEditable,
@@ -154,34 +166,74 @@ export const UploadComponent = (props)=>{
                                             round: true,
                                             size: "medium",
                                             tooltip: t('fields:removeUpload')
-                                        })
+                                        }, void 0, false, {
+                                            fileName: "src/features/upload/client/component/index.tsx",
+                                            lineNumber: 201,
+                                            columnNumber: 17
+                                        }, this)
                                     ]
-                                })
-                            })
+                                }, void 0, true, {
+                                    fileName: "src/features/upload/client/component/index.tsx",
+                                    lineNumber: 170,
+                                    columnNumber: 15
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 169,
+                                columnNumber: 13
+                            }, this)
                         ]
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
+                    }, void 0, true, {
+                        fileName: "src/features/upload/client/component/index.tsx",
+                        lineNumber: 159,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__metaOverlay ${baseClass}__floater`,
                         children: [
-                            /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                            /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
                                 className: `${baseClass}__doc-drawer-toggler`,
-                                children: /*#__PURE__*/ _jsx("strong", {
+                                children: /*#__PURE__*/ _jsxDEV("strong", {
                                     className: `${baseClass}__filename`,
                                     children: data?.filename || t('general:untitled')
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
+                                }, void 0, false, {
+                                    fileName: "src/features/upload/client/component/index.tsx",
+                                    lineNumber: 221,
+                                    columnNumber: 13
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 220,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV("div", {
                                 className: `${baseClass}__collectionLabel`,
                                 children: getTranslation(relatedCollection.labels.singular, i18n)
-                            })
+                            }, void 0, false, {
+                                fileName: "src/features/upload/client/component/index.tsx",
+                                lineNumber: 225,
+                                columnNumber: 11
+                            }, this)
                         ]
-                    })
+                    }, void 0, true, {
+                        fileName: "src/features/upload/client/component/index.tsx",
+                        lineNumber: 219,
+                        columnNumber: 9
+                    }, this)
                 ]
-            }),
-            value ? /*#__PURE__*/ _jsx(DocumentDrawer, {
+            }, void 0, true, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 158,
+                columnNumber: 7
+            }, this),
+            value ? /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                 onSave: updateUpload
-            }) : null,
-            hasExtraFields ? /*#__PURE__*/ _jsx(FieldsDrawer, {
+            }, void 0, false, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 231,
+                columnNumber: 16
+            }, this) : null,
+            hasExtraFields ? /*#__PURE__*/ _jsxDEV(FieldsDrawer, {
                 data: fields,
                 drawerSlug: extraFieldsDrawerSlug,
                 drawerTitle: t('general:editLabel', {
@@ -191,9 +243,17 @@ export const UploadComponent = (props)=>{
                 handleDrawerSubmit: onExtraFieldsDrawerSubmit,
                 schemaPath: schemaPath,
                 schemaPathSuffix: relatedCollection.slug
-            }) : null
+            }, void 0, false, {
+                fileName: "src/features/upload/client/component/index.tsx",
+                lineNumber: 233,
+                columnNumber: 9
+            }, this) : null
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/features/upload/client/component/index.tsx",
+        lineNumber: 152,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/features/upload/client/component/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\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      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","React","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  formatDrawerSlug,\n  Thumbnail,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { $getNodeByKey, type ElementFormatType } from 'lexical'\nimport { isImage } from 'payload/shared'\nimport React, { useCallback, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../index.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport './index.scss'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  className: string\n  data: UploadData\n  format?: ElementFormatType\n  nodeKey: string\n}\n\nexport const UploadComponent: React.FC<ElementProps> = (props) => {\n  const {\n    className: baseClass,\n    data: { fields, relationTo, value },\n    format,\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n\n  const {\n    editorConfig,\n    fieldProps: { schemaPath },\n  } = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(() =>\n    getEntityConfig({ collectionSlug: relationTo }),\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (_data: Data) => {\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      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_: FormState, data: JsonObject) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  const aspectRatio =\n    thumbnailSRC && data?.width && data?.height\n      ? data.width > data.height\n        ? 'landscape'\n        : 'portrait'\n      : 'landscape'\n\n  return (\n    <div\n      className={`${baseClass}__contents ${baseClass}__contents--${aspectRatio}`}\n      data-align={format || undefined}\n      data-filename={data?.filename}\n      ref={uploadRef}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__media`}>\n          <Thumbnail\n            collectionSlug={relationTo}\n            fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}\n            height={data?.height}\n            size=\"none\"\n            width={data?.width}\n          />\n\n          {isEditable && (\n            <div className={`${baseClass}__overlay ${baseClass}__floater`}>\n              <div className={`${baseClass}__actions`} role=\"toolbar\">\n                {hasExtraFields ? (\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={!isEditable}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={toggleDrawer}\n                    round\n                    size=\"medium\"\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={!isEditable}\n                  el=\"button\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:swapUpload')}\n                />\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={!isEditable}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  size=\"medium\"\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className={`${baseClass}__metaOverlay ${baseClass}__floater`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong className={`${baseClass}__filename`}>\n              {data?.filename || t('general:untitled')}\n            </strong>\n          </DocumentDrawerToggler>\n          <div className={`${baseClass}__collectionLabel`}>\n            {getTranslation(relatedCollection.labels.singular, i18n)}\n          </div>\n        </div>\n      </div>\n\n      {value ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPath={schemaPath}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","formatDrawerSlug","Thumbnail","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","isImage","React","useCallback","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","INSERT_UPLOAD_WITH_DRAWER_COMMAND","initialParams","depth","UploadComponent","props","className","baseClass","data","fields","relationTo","value","format","nodeKey","Error","config","routes","api","serverURL","getEntityConfig","uploadRef","uuid","editDepth","editor","editorConfig","fieldProps","schemaPath","isEditable","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","collectionSlug","componentID","extraFieldsDrawerSlug","slug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","_data","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","collections","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","aspectRatio","width","height","div","data-align","undefined","data-filename","filename","ref","fileSrc","mimeType","size","role","buttonStyle","disabled","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","preventDefault","strong","labels","singular","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix"],"mappings":"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"}

package/dist/features/upload/client/component/index.scss

@@ -0,0 +1,191 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__upload {
+    @extend %body;
+    @include shadow-sm;
+
+    border-radius: $style-radius-m;
+    border: 1px solid var(--theme-elevation-100);
+    position: relative;
+    font-family: var(--font-body);
+    margin-block: base(0.5);
+
+    // Alignment support using :has() selector
+    &:has([data-align='center']) {
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &:has([data-align='right']),
+    &:has([data-align='end']) {
+      width: fit-content;
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    &:has([data-align='left']),
+    &:has([data-align='start']) {
+      width: fit-content;
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
+    }
+
+    img,
+    svg {
+      border-radius: $style-radius-s;
+      width: auto;
+    }
+
+    &__contents {
+      &--landscape {
+        img,
+        svg {
+          max-width: 450px;
+          min-width: 450px;
+        }
+      }
+      &--portrait {
+        img,
+        svg {
+          max-height: 450px;
+          min-height: 450px;
+        }
+      }
+    }
+
+    button {
+      margin: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &__card {
+      @include soft-shadow-bottom;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    &__floater {
+      @include shadow-lg;
+      position: absolute;
+      color: var(--theme-text);
+
+      /* hidden by default */
+      opacity: 0;
+      transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
+      pointer-events: none;
+    }
+
+    &:hover .LexicalEditorTheme__upload__floater,
+    &__media:focus-within .LexicalEditorTheme__upload__floater {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* --- Floating Action Buttons (top-right) ------------------------------------- */
+    &__overlay {
+      display: flex;
+      top: calc(var(--base) * 0.5);
+      right: calc(var(--base) * 0.5);
+      padding: calc(var(--base) * 0.2) calc(var(--base) * 0.2);
+
+      background: var(--theme-elevation-50);
+      border-radius: $style-radius-m;
+      transform: translateY(-6px);
+    }
+    &:hover .LexicalEditorTheme__upload__overlay,
+    &__media:focus-within .LexicalEditorTheme__upload__overlay {
+      transform: translateY(0);
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: calc(var(--base) * 0.3);
+
+      .btn:hover {
+        background: var(--theme-elevation-100);
+      }
+    }
+    /* --- Floating Metadata (bottom-center) ------------------------------------- */
+    &__metaOverlay {
+      display: inline-flex;
+      left: 50%;
+      bottom: 0;
+      width: 100%;
+      padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+      transform: translateX(-50%);
+
+      flex-wrap: wrap;
+      gap: calc(var(--base) * 0.5);
+      row-gap: 0;
+
+      background: color-mix(in oklab, var(--theme-elevation-50) 55%, transparent);
+      border-radius: 0 0 $style-radius-s $style-radius-s;
+      backdrop-filter: saturate(1.2) blur(8px);
+    }
+
+    html[data-theme='light'] & {
+      &__metaOverlay {
+        background: color-mix(in oklab, var(--theme-elevation-800) 55%, transparent);
+        color: var(--theme-elevation-50);
+      }
+
+      &__collectionLabel {
+        color: var(--theme-elevation-300);
+      }
+    }
+
+    &__filename {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    &__collectionLabel {
+      color: var(--theme-elevation-500);
+      font-size: 0.9em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    @include small-break {
+      img,
+      svg {
+        // Allow images to shrink < 450px on small screens to
+        // maintain aspect ratio
+        min-width: unset;
+        min-height: unset;
+      }
+
+      &__metaOverlay {
+        gap: 0;
+        padding: calc(var(--base) * 0.5) calc(var(--base) * 0.6);
+        flex-direction: column;
+
+        button {
+          display: flex;
+          justify-content: flex-start;
+        }
+      }
+
+      &__collectionLabel {
+        max-width: 100%;
+      }
+    }
+  }
+}