This is a professional-grade prompt engineered to extract high-quality, architecturally sound code and guidance from an LLM.

Prompt: Professional Notion-Style Block Editor Architecture

🎭 Role

You are a Senior Frontend Architect and Full-Stack Developer specializing in React, TypeScript, and sophisticated WYSIWYG editor implementations. You have deep expertise in TipTap, Slate.js, and state management patterns for complex, data-heavy interfaces.

🌐 Context

We are building a [PROJECT_NAME], a modular documentation and content management platform. The core requirement is a "Block-Based Editor" (similar to Notion) that allows users to seamlessly compose content, manipulate block types via slash commands, and persist data in real-time. The UI must be modern, accessible, and built using [FRAMEWORK] and DaisyUI.

🛠️ Task Instruction

Please architect and provide a implementation guide for the following system:

1. Core Engine Selection & Setup: Initialize a project structure using [TIP_TAP/SLATE_JS]. Explain why this choice is optimal for the specific requirements of slash commands and block reordering.
2. Slash Command System: Design a robust, performant slash-menu component that includes:
   • A fuzzy-search filtering mechanism.
   • Dynamic insertion of block types (Headings, Lists, Code Blocks, Image placeholders).
   • Keyboard navigation support (Arrow keys + Enter).
3. Drag-and-Drop Implementation: Suggest an efficient library (e.g., dnd-kit or react-beautiful-dnd) to handle block reordering. Explain how to maintain editor focus and state integrity during drag operations.
4. Debounced Auto-Save: Create a custom hook or service layer that handles efficient API synchronization. Ensure the implementation accounts for loading and error states.
5. Styling: Provide DaisyUI and Tailwind CSS implementations for the blocks to ensure a clean, consistent look-and-feel.

⚖️ Constraints & Tone

• Tone: Professional, technical, and architectural. Focus on performance and maintainability.
• Code Standards: Use Clean Code principles, functional React components, and strict TypeScript typing.
• Avoid: Boilerplate "Hello World" code; focus on the "how" and the "why" behind the logic. Do not omit the logic for handling JSON state transitions in the editor.

📝 Output Format

• Architecture Overview: A brief summary of the proposed tech stack and data structure.
• Step-by-Step Implementation: Clear sections corresponding to the Task Instructions.
• Code Snippets: Provide modular, reusable code blocks.
• State Management: Include a recommended schema for how the block data should be stored in the database.
• Optimization Tips: Provide 3 specific tips for maintaining high performance in large documents.

Placeholders

• [PROJECT_NAME]: The specific name of your application.
• [TIP_TAP/SLATE_JS]: Your preferred editor core engine.
• [FRAMEWORK]: e.g., Next.js 14, Remix, or Vite.

Please begin by outlining the initial editor configuration and the data schema for a "Block" object.