Spark Editor Test Plan - Comprehensive testing guide for Spark editor behaviors

test-plan.md

Spark Editor Test Plan

Test the main Spark editor at /style-guide/editor in Luma web.

Test Plan Location: /lux/spark/docs/test-plan.md

1. Editor UI Controls

1.1 Block Menu (Plus Button)

• Trigger: Click the + button that appears when you're on an empty line or hover to the left of any block
• Placement: Should appear on the left side of the current line
• Available blocks: Heading 1, Heading 2, Bullet list, Numbered list, Quote, Divider, Image, Video, Button, Code block, Attachment
• Behavior: Clicking an option inserts that block type at the current position

1.2 Selection Menu (Text Formatting)

• Trigger: Highlight/select any text
• Shows: Bold, Italic, Underline, Code, Link buttons
• Position: Appears above the selected text
• Link behavior: Clicking link opens URL input field

2. Basic Text Formatting

• Bold: Cmd/Ctrl+B or wrap text with **text**
• Italic: Cmd/Ctrl+I or wrap text with *text*
• Code: Select text and click code button
• Link: Select text, Cmd/Ctrl+K or paste URL on selected text
• Line break: Shift+Enter (vs paragraph with Enter)

3. Block Types

3.1 Headings

• Type # + space → Heading 1
• Type ## + space → Heading 2
• Use block menu to insert headings

3.2 Lists

• Type - + space → Bullet list
• Type 1. + space → Numbered list
• Tab to indent, Shift+Tab to outdent
• Enter on empty list item exits list

3.3 Other Blocks

• Type > + space → Blockquote
• Type --- → Horizontal rule
• Type ``` → Code block

4. Media & Embeds

4.1 Images

• Drag & drop: Single or multiple images
• Paste: From clipboard (Cmd/Ctrl+V)
• Upload: Via block menu
• Resize: Drag handles on sides (min 200px)
• Click: Opens lightbox view

4.2 Video Embeds (paste URL on empty line)

• YouTube: https://www.youtube.com/watch?v=0cbIX8Phvqs or https://youtu.be/0cbIX8Phvqs
• Vimeo: https://vimeo.com/824804225
• Loom: https://www.loom.com/share/fc4b2fe6eb4745e5a1513ad099a12b7c
• Verify embed preview loads with thumbnail and play button

4.3 Luma Events

• Paste https://lu.ma/2025 (The OOO Summit 2025) on empty line
• Verify event card preview appears with image, title, and date

5. Copy/Paste Testing

5.1 Test Documents

• Google Docs:
  • Simple formatting test
  • Complex formatting test
• Notion: Try Notion's help docs - copy formatted content
• Markdown: Copy this raw markdown:

  # Heading 1
  ## Heading 2
  
  **Bold text** and *italic text*
  
  - Bullet list item 1
  - Bullet list item 2
    - Nested item
  
  1. Numbered list
  2. Second item
  
  > This is a blockquote
  
  `inline code` and a [link](https://example.com)

5.2 Paste Behaviors

• Rich text preserves formatting (bold, italic, lists)
• Plain URLs on empty line → Auto-embed
• Plain URLs on text → Regular link
• Images paste directly into editor
• Markdown converts to rich blocks

6. Edge Cases & Gotchas

6.1 URL Detection

• URL must be on empty paragraph to trigger embed
• Extra spaces around URL prevent embed
• Invalid URLs fallback to plain text

6.2 Performance

• Large images show upload spinner
• Multiple image uploads queue properly
• Editor remains responsive during uploads

6.3 Keyboard Navigation

• Arrow keys move between blocks
• Tab in code block inserts tab (not indent)
• Esc closes link dialog
• Cmd/Ctrl+A selects all content

7. Common Issues to Check

• Empty list items are automatically removed (strips on server when saving)
• Can't nest headings inside lists
• Deleting at start of block merges with previous
• Undo/Redo (Cmd/Ctrl+Z) maintains formatting

Test Files Reference

• Spark components: /lux/spark/components/
• Extensions: /lux/spark/components/extensions/
• Transform utilities: /lux/spark/components/extensions/transform-*.tsx
• Style guide page: /luma/web/src/app/(standard-layout)/style-guide/editor/page.tsx