feat: add export and import actions to slash command menu (#1165) (#1168)

Co-authored-by: Ona <no-reply@ona.com>

Author: sw-factory-automations

.agents/architecture.md

@@ -459,7 +459,7 @@ src/
 │   ├── editor/                  # Lexical block editor
 │   │   ├── editor.tsx               # Main editor: LexicalComposer, plugins, auto-save to Supabase
 │   │   ├── theme.ts                 # EditorThemeClasses mapping Lexical nodes to Tailwind classes
-│   │   ├── slash-command-plugin.tsx  # "/" typeahead: paragraph, h1-h3, lists, code, quote, divider, table, image, callout, toggle
+│   │   ├── slash-command-plugin.tsx  # "/" typeahead: paragraph, h1-h3, lists, code, quote, divider, table, image, callout, toggle, export, import
 │   │   ├── font-family.ts             # Font family options (sans-serif, serif, monospace) and CSS value mapping
 │   │   ├── floating-toolbar-plugin.tsx # Selection toolbar: font family, bold, italic, underline, strikethrough, code, link
 │   │   ├── floating-link-editor-plugin.tsx # Link preview/edit/remove popover (⌘+K)

.agents/quality.md

@@ -167,5 +167,6 @@ Tracks code quality per domain. Updated by automations as a side effect of featu
 | 2026-05-19 | Add keyboard navigation to sidebar page tree (#1150). Added WAI-ARIA Treeview keyboard navigation (ArrowUp/Down, ArrowLeft/Right expand/collapse, Enter, Home, End) with roving tabindex pattern. Added `getVisibleItems` and `findParentNode` to `page-tree.ts`. Updated `page-tree.test.ts` (37→46): 9 new tests for visible item traversal and parent lookup. Added 1 new E2E spec: `e2e/sidebar-keyboard-nav.spec.ts` (10 tests). Test totals: 144 Vitest files (1971 tests), 86 E2E specs (425 tests). |
 | 2026-05-21 | Add undo button to page delete toast (#1163). Updated `use-page-tree-actions.test.ts` (35→39): 4 new tests for undo toast action, restore RPC, navigate-back, and error handling. Updated `e2e/trash.spec.ts` (7→9): 2 new E2E tests for undo restore and undo navigate-back. Test totals: 144 Vitest files (1975 tests), 86 E2E specs (427 tests). |
 | 2026-05-21 | Add inline rename to sidebar page tree context menu (#1164). Added `handleRename` to `usePageTreeActions`. Added inline rename input to `PageTreeItem` with Enter/Escape/blur handling. Added "Rename" menu item to context menu. Added `Renaming` Storybook story. Added 1 new E2E spec: `e2e/sidebar-rename.spec.ts` (5 tests). Test totals: 144 Vitest files (1975 tests), 87 E2E specs (432 tests). |
+| 2026-05-21 | Add export/import actions to slash command menu (#1165). Added "Export as Markdown" and "Import Markdown" options to `slash-command-plugin.tsx` via optional `onExport`/`onImport` callbacks. Wired callbacks in `page-view-client.tsx` reusing existing `exportEditorToMarkdown`/`downloadMarkdown` and `useMarkdownImport`. Added `FilteredExportImport` Storybook story and visual regression baseline. No new test files. Test totals: 144 Vitest files (1975 tests), 87 E2E specs (432 tests). |
 
 

e2e/visual-regression.spec.ts-snapshots/editor-slashcommandmenu--filtered-export-import-visual-regression-linux.png

@@ -143,6 +143,10 @@ interface EditorProps {
   initialContent: SerializedEditorState | null;
   editorRef?: React.MutableRefObject<LexicalEditor | null>;
   readOnly?: boolean;
+  /** Called when the user selects "Export as Markdown" from the slash menu. */
+  onSlashExport?: () => void;
+  /** Called when the user selects "Import Markdown" from the slash menu. */
+  onSlashImport?: () => void;
 }
 
 function validateUrl(url: string): boolean {
@@ -172,7 +176,7 @@ function EditorRefPlugin({
   return null;
 }
 
-export function Editor({ pageId, workspaceId, initialContent, editorRef, readOnly }: EditorProps) {
+export function Editor({ pageId, workspaceId, initialContent, editorRef, readOnly, onSlashExport, onSlashImport }: EditorProps) {
   const [saveStatus, setSaveStatus] = useState<
     "idle" | "saving" | "saved" | "error"
   >("idle");
@@ -416,7 +420,7 @@ export function Editor({ pageId, workspaceId, initialContent, editorRef, readOnl
               onChange={handleChange}
               ignoreSelectionChange
             />
-            <SlashCommandPlugin />
+            <SlashCommandPlugin onExport={onSlashExport} onImport={onSlashImport} />
             <TurnIntoPlugin />
             {floatingAnchorElem && (
               <>

src/components/editor/editor.tsx

@@ -17,6 +17,8 @@ import {
   Link,
   Grid3X3,
   Table2,
+  Download,
+  Upload,
 } from "lucide-react";
 
 // Static representation of the slash command menu. The actual plugin uses
@@ -47,6 +49,8 @@ const allCommands: CommandOption[] = [
   { title: "Toggle", description: "Collapsible section", icon: <ChevronRight className="h-5 w-5" /> },
   { title: "Link to page", description: "Insert a link to another page", icon: <Link className="h-5 w-5" /> },
   { title: "Database", description: "Embed an inline database view", icon: <Table2 className="h-5 w-5" /> },
+  { title: "Export as Markdown", description: "Download page as .md file", icon: <Download className="h-5 w-5" /> },
+  { title: "Import Markdown", description: "Import content from a .md file", icon: <Upload className="h-5 w-5" /> },
 ];
 
 function StaticSlashCommandMenu({
@@ -146,6 +150,18 @@ export const MiddleItemHighlighted: Story = {
   render: () => <StaticSlashCommandMenu items={allCommands} selectedIndex={7} />,
 };
 
+/** Menu filtered to show export/import options — typing "export" or "import". */
+export const FilteredExportImport: Story = {
+  render: () => {
+    const filtered = allCommands.filter(
+      (cmd) =>
+        cmd.title.toLowerCase().includes("export") ||
+        cmd.title.toLowerCase().includes("import"),
+    );
+    return <StaticSlashCommandMenu items={filtered} selectedIndex={0} />;
+  },
+};
+
 /** Menu shown in context below a slash trigger. */
 export const InContext: Story = {
   render: () => {

src/components/editor/slash-command-plugin.stories.tsx

@@ -39,6 +39,8 @@ import {
   ChevronRight,
   Link,
   Grid3X3,
+  Download,
+  Upload,
 } from "lucide-react";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import type { JSX, ReactElement } from "react";
@@ -78,7 +80,14 @@ class SlashCommandOption extends MenuOption {
   }
 }
 
-export function SlashCommandPlugin(): JSX.Element | null {
+interface SlashCommandPluginProps {
+  /** Called when the user selects "Export as Markdown" from the slash menu. */
+  onExport?: () => void;
+  /** Called when the user selects "Import Markdown" from the slash menu. */
+  onImport?: () => void;
+}
+
+export function SlashCommandPlugin({ onExport, onImport }: SlashCommandPluginProps = {}): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
   const [queryString, setQueryString] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -269,8 +278,31 @@ export function SlashCommandPlugin(): JSX.Element | null {
             },
           }),
       ),
+      // Export / Import — only shown when callbacks are provided
+      ...(onExport
+        ? [
+            new SlashCommandOption("Export as Markdown", {
+              description: "Download page as .md file",
+              icon: <Download className="h-5 w-5" />,
+              onSelect: () => {
+                onExport();
+              },
+            }),
+          ]
+        : []),
+      ...(onImport
+        ? [
+            new SlashCommandOption("Import Markdown", {
+              description: "Import content from a .md file",
+              icon: <Upload className="h-5 w-5" />,
+              onSelect: () => {
+                onImport();
+              },
+            }),
+          ]
+        : []),
     ],
-    [editor]
+    [editor, onExport, onImport]
   );
 
   // Filter separately so base option objects (and their refs) persist.

src/components/editor/slash-command-plugin.tsx

@@ -3,6 +3,15 @@
 import { useCallback, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import type { LexicalEditor, SerializedEditorState } from "lexical";
+import { toast } from "@/lib/toast";
+import { lazyCaptureException } from "@/lib/sentry";
+import { getClient } from "@/lib/supabase/lazy-client";
+import { trackEventClient } from "@/lib/track-event";
+import {
+  exportEditorToMarkdown,
+  downloadMarkdown,
+} from "@/components/editor/markdown-utils";
+import { useMarkdownImport } from "@/lib/use-markdown-import";
 import { PageTitle } from "@/components/page-title";
 import { PageIcon } from "@/components/page-icon";
 import { PageCover } from "@/components/page-cover";
@@ -92,6 +101,47 @@ export function PageViewClient({
     editorRef.current?.focus();
   }, []);
 
+  // Slash-menu export: reuses the same flow as the page menu export
+  const handleSlashExport = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      toast.error("Editor not ready", { duration: 8000 });
+      return;
+    }
+
+    try {
+      const markdown = exportEditorToMarkdown(editor);
+      const filename = (pageTitle.trim() || "Untitled") + ".md";
+      downloadMarkdown(markdown, filename);
+
+      getClient()
+        .then((supabase) => {
+          trackEventClient(supabase, "editor.export", userId, {
+            workspaceId,
+            metadata: { page_id: pageId, source: "slash-menu" },
+          });
+        })
+        .catch(() => {
+          // Client init failed — skip tracking silently
+        });
+    } catch (error) {
+      lazyCaptureException(error);
+      toast.error("Export failed", { duration: 8000 });
+    }
+  }, [pageTitle, userId, workspaceId, pageId]);
+
+  // Slash-menu import: reuses the same useMarkdownImport hook as the page menu
+  const {
+    fileInputRef: slashImportInputRef,
+    triggerFileInput: handleSlashImport,
+    handleFileChange: handleSlashImportFileChange,
+  } = useMarkdownImport({
+    workspaceId,
+    workspaceSlug,
+    userId,
+    source: "slash-menu",
+  });
+
   // When previewing a version, show a read-only editor with that content
   const isPreviewMode = previewContent !== null;
 
@@ -135,6 +185,8 @@ export function PageViewClient({
             workspaceId={workspaceId}
             initialContent={initialContent}
             editorRef={editorRef}
+            onSlashExport={handleSlashExport}
+            onSlashImport={handleSlashImport}
           />
         )}
       </div>
@@ -146,6 +198,14 @@ export function PageViewClient({
         onRestore={handleRestore}
         onExitPreview={handleExitPreview}
       />
+      <input
+        ref={slashImportInputRef}
+        type="file"
+        accept=".md,.markdown"
+        className="hidden"
+        onChange={handleSlashImportFileChange}
+        aria-label="Import markdown file from slash menu"
+      />
     </>
   );
 }