[lexical-playground] Feature: Add file attachment support with drag & drop functionality

packages/lexical-playground/__tests__/utils/index.mjs

@@ -753,6 +753,22 @@ export async function insertDateTime(page) {
   await sleep(500);
 }
 
+export async function insertAttachment(page, filePath) {
+  await selectFromInsertDropdown(page, '.attachment');
+  await waitForSelector(page, '[role="dialog"]');
+
+  const frame = getPageOrFrame(page);
+  await frame.setInputFiles(
+    'input[data-test-id="attachment-modal-file-upload"]',
+    filePath,
+  );
+
+  await waitForSelector(page, '.FilePreview__container');
+  await click(page, 'button[data-test-id="attachment-modal-file-upload-btn"]');
+  await page.waitForSelector('[role="dialog"]', {state: 'detached'});
+  await waitForSelector(page, '.AttachmentNode__container');
+}
+
 export async function insertImageCaption(page, caption) {
   await click(page, '.editor-image img');
   await click(page, '.image-caption-button');

packages/lexical-playground/src/Editor.tsx

@@ -34,6 +34,7 @@ import {createWebsocketProvider} from './collaboration';
 import {useSettings} from './context/SettingsContext';
 import {useSharedHistoryContext} from './context/SharedHistoryContext';
 import ActionsPlugin from './plugins/ActionsPlugin';
+import AttachmentPlugin from './plugins/AttachmentPlugin';
 import AutocompletePlugin from './plugins/AutocompletePlugin';
 import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
@@ -232,6 +233,7 @@ export default function Editor(): JSX.Element {
             <CollapsiblePlugin />
             <PageBreakPlugin />
             <LayoutPlugin />
+            <AttachmentPlugin />
             {floatingAnchorElem && (
               <>
                 <FloatingLinkEditorPlugin

packages/lexical-playground/src/index.css

@@ -501,6 +501,10 @@ i.youtube {
   background-image: url(images/icons/youtube.svg);
 }
 
+i.attachment {
+  background-image: url(images/icons/paperclip.svg);
+}
+
 .icon.left-align,
 i.left-align {
   background-image: url(images/icons/text-left.svg);