[lexical-playground] Feature: Add file attachment support with pluggable storage abstraction

packages/lexical-playground/__tests__/e2e/fixtures/sample.txt

@@ -0,0 +1 @@
+cSample attachment content for testing.

packages/lexical-playground/src/App.tsx

@@ -22,6 +22,7 @@ import {type JSX, useMemo} from 'react';
 
 import {isDevPlayground} from './appSettings';
 import {buildHTMLConfig} from './buildHTMLConfig';
+import {AttachmentStoreProvider} from './context/AttachmentStoreContext';
 import {FlashMessageContext} from './context/FlashMessageContext';
 import {SettingsContext, useSettings} from './context/SettingsContext';
 import {SharedHistoryContext} from './context/SharedHistoryContext';
@@ -176,7 +177,9 @@ export default function PlaygroundApp(): JSX.Element {
   return (
     <SettingsContext>
       <FlashMessageContext>
-        <App />
+        <AttachmentStoreProvider>
+          <App />
+        </AttachmentStoreProvider>
       </FlashMessageContext>
       <a
         href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground"

packages/lexical-playground/src/Editor.tsx

@@ -40,6 +40,7 @@ import {
 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';
@@ -249,6 +250,7 @@ export default function Editor(): JSX.Element {
             <TableCellResizer />
             <TableScrollShadowPlugin />
             <ImagesPlugin />
+            <AttachmentPlugin />
             <LinkPlugin hasLinkAttributes={hasLinkAttributes} />
             <PollPlugin />
             <TwitterPlugin />

packages/lexical-playground/src/context/AttachmentStoreContext.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {AttachmentStore} from '../stores/AttachmentStore';
+import type {JSX, ReactNode} from 'react';
+
+import {createContext, useContext, useEffect, useMemo} from 'react';
+
+import {DemoAttachmentStore} from '../stores/DemoAttachmentStore';
+
+export interface AttachmentStoreContextValue {
+  store: AttachmentStore;
+  /** Flag to show UI warning about demo mode limitations */
+  showDemoWarning: boolean;
+}
+
+const Context = createContext<AttachmentStoreContextValue | null>(null);
+
+interface AttachmentStoreProviderProps {
+  children: ReactNode;
+  /** Custom store implementation. Defaults to DemoAttachmentStore */
+  store?: AttachmentStore;
+}
+
+export function AttachmentStoreProvider({
+  children,
+  store,
+}: AttachmentStoreProviderProps): JSX.Element {
+  const contextValue = useMemo(() => {
+    const resolvedStore = store ?? new DemoAttachmentStore();
+    return {
+      showDemoWarning:
+        !resolvedStore.isPersistent() &&
+        resolvedStore.getConfig().demoWarningLevel === 'ui',
+      store: resolvedStore,
+    };
+  }, [store]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      const currentStore = contextValue.store;
+      if (currentStore instanceof DemoAttachmentStore) {
+        currentStore.cleanup();
+      }
+    };
+  }, [contextValue.store]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+}
+
+export function useAttachmentStore(): AttachmentStoreContextValue {
+  const ctx = useContext(Context);
+  if (!ctx) {
+    throw new Error(
+      'useAttachmentStore must be used within AttachmentStoreProvider',
+    );
+  }
+  return ctx;
+}

packages/lexical-playground/src/index.css

@@ -621,6 +621,11 @@ i.page-break,
   background-image: url(images/icons/scissors.svg);
 }
 
+i.attachment,
+.icon.attachment {
+  background-image: url(images/icons/paperclip.svg);
+}
+
 .link-editor .button.active,
 .toolbar .button.active {
   background-color: rgb(223, 232, 250);