## AI Master Prompt for HTML Gücü: Content Creation Platform
### 1. PROJECT OVERVIEW:
The primary goal of the "HTML Gücü" (Power of HTML) platform is to bridge the gap between the simplicity of Markdown and the power/flexibility of HTML. Users are often frustrated by Markdown's limitations, which force them to switch to cumbersome workarounds or raw HTML for more complex formatting needs. This platform provides an intuitive, user-friendly interface that allows users to create rich, structured content using a familiar WYSIWYG-like editor, while leveraging the full potential of HTML behind the scenes. The core value proposition is to empower content creators to produce professional-quality web content with ease, without sacrificing control or introducing unnecessary complexity. We aim to solve the "Why are we still using Markdown?" problem by offering a superior, more capable, yet equally accessible alternative.
### 2. TECH STACK:
- **Frontend Framework:** React (using Vite for fast development setup)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **State Management:** Zustand (lightweight and performant global state management)
- **Rich Text Editor:** TipTap (highly extensible and modern editor framework, capable of handling rich text and custom node extensions for HTML output)
- **Routing:** React Router (for potential future multi-page features, though MVP is single-page)
- **Utility Libraries:** `uuid` for unique IDs, `lodash` for utility functions if needed.
- **Build Tool:** Vite
### 3. CORE FEATURES (MVP):
**a) Advanced WYSIWYG Editor:**
- **User Flow:** User lands on the editor page. The editor interface is immediately active. User can type directly. Standard formatting buttons (Bold, Italic, Underline, Headings H1-H6, Ordered/Unordered Lists, Links, Image Insertion) are available in a floating toolbar or a fixed top bar.
- **Functionality:**
- **Text Formatting:** Apply bold, italic, underline, strikethrough to selected text.
- **Headings:** Select text and apply heading levels (H1 to H6).
- **Lists:** Create bulleted (unordered) and numbered (ordered) lists.
- **Links:** Select text, click link button, input URL, and optionally set target (`_blank`).
- **Image Insertion:** Click image button, paste URL or use a simple upload (for MVP, URL pasting is sufficient). Images should be managed within the editor's state and rendered appropriately.
- **Code Blocks:** Ability to insert multi-line code blocks with basic syntax highlighting hints (though full highlighting might be deferred).
- **Blockquotes:** Insert blockquote elements.
- **Editor Implementation:** TipTap will be configured with standard extensions for paragraphs, headings, bold, italic, links, lists, images, blockquotes, and code blocks. It will output structured JSON (editor state) and allow rendering to HTML.
**b) Instant HTML Preview:**
- **User Flow:** As the user types and formats content in the editor, a separate, read-only panel (e.g., sidebar or below the editor) dynamically updates to show the rendered HTML output.
- **Functionality:** The editor's state (e.g., JSON output) is continuously processed to generate the corresponding HTML. This HTML is then rendered in the preview pane.
- **Implementation:** A state listener on the editor's output will trigger an HTML generation function. The generated HTML string will be used to update the preview component's content, likely using `dangerouslySetInnerHTML` with careful sanitization if user-generated HTML were to be displayed directly (though here it's controlled). For MVP, we'll focus on rendering the HTML generated *by* TipTap.
**c) Basic HTML Inspection & Editing:**
- **User Flow:** A toggle or button labeled "View Source" or "Advanced Mode" reveals the raw HTML generated by the editor. Users can see the HTML structure. Optionally, they can make minor edits here (MVP: focus on viewing first).
- **Functionality:** Displays the HTML string generated from the editor's state. If editing is included in MVP, changes made here should ideally reflect back into the editor state (a complex feature, might be deferred post-MVP).
- **Implementation:** A component that takes the editor's HTML output and displays it within a `<pre>` or `<code>` tag, or a `<textarea>` for editing. Ensure proper escaping for display.
**d) Content Saving & Management:**
- **User Flow:** A "Save Draft" button is present. Clicking it saves the current editor state (JSON) and associated metadata (title, timestamp) locally using `localStorage` or `sessionStorage`. A separate "My Content" or "Drafts" section lists saved items. Users can click a draft to load it back into the editor.
- **Functionality:** Persistence of the editor's state. Ability to create, view list, load, and delete drafts.
- **Implementation:** Utilize `localStorage` for MVP. Store an array of content objects, each with a unique ID, title, content state (JSON), and timestamp. Implement functions for `saveDraft`, `loadDrafts`, `loadSingleDraft`, `deleteDraft`.
**e) Simple Export/Publish:**
- **User Flow:** An "Export" button allows downloading the generated HTML as a `.html` file. A "Publish" button (in MVP, might just be a placeholder or a simple text output) would simulate publishing, perhaps by showing the final HTML in a modal or copying it to the clipboard.
- **Functionality:** Generate a downloadable HTML file. Provide the final HTML output.
- **Implementation:** For export, create a Blob from the generated HTML string and trigger a download link. For publish, copy the HTML to clipboard or display it.
### 4. UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. Main area is the editor. A sidebar (collapsible) can house the preview and/or source code view. Top navigation bar for application title, save, export, publish buttons, and potentially user account access (future).
- **Color Palette:** Clean, professional, and minimalist. Primary: White/Light Gray background (`#F8F9FA`). Secondary: Dark Gray/Black for text (`#212529`). Accent: A subtle, modern color like a muted blue or teal (`#007BFF` or `#20C997`) for buttons, active states, and highlights. Use shades of gray for borders, separators, and secondary UI elements.
- **Typography:** Sans-serif fonts for readability. Use `Inter` or `Roboto` for body text and UI elements. Headings can use a slightly bolder or different weight of the same font family or a complementary sans-serif. Ensure clear hierarchy.
- **Responsive Design:** Mobile-first approach. Editor should be usable on smaller screens. Preview might be hidden by default on mobile, accessible via a button. Toolbar should adapt. Use Tailwind CSS's responsive prefixes (`sm:`, `md:`, `lg:`) extensively.
- **Editor UI:** Clean toolbar with clearly identifiable icons. Minimalistic surrounding interface to keep focus on content creation.
### 5. COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing (if needed) and overall layout.
- **`EditorPage.jsx`:** Container for the editor, preview, and controls. Manages the overall editor state and interactions.
- **`RichTextEditor.jsx`:** Wrapper around the TipTap editor instance. Handles initialization, configuration, and state synchronization.
- **Props:** `initialContent` (JSON state), `onChange` (callback function).
- **`Toolbar.jsx`:** Renders the formatting buttons (Bold, Italic, etc.).
- **Props:** `editor` (TipTap editor instance), `isActive` (function to check current formatting), `commands` (TipTap commands object).
- **`PreviewPane.jsx`:** Displays the rendered HTML output.
- **Props:** `htmlContent` (string).
- **`SourceCodeViewer.jsx`:** Displays the raw HTML string, potentially in a textarea for editing.
- **Props:** `htmlContent` (string), `onSourceChange` (callback, if editing enabled).
- **`ContentManager.jsx`:** Handles loading, saving, and listing drafts.
- **Props:** None (manages its own state and local storage interaction).
- **`DraftListItem.jsx`:** Individual item in the drafts list.
- **Props:** `draft` (object), `onLoad` (callback), `onDelete` (callback).
- **`Button.jsx`:** Reusable button component.
- **Props:** `children`, `onClick`, `variant` (e.g., primary, secondary), `disabled`.
- **`Modal.jsx`:** Reusable modal component (for publishing confirmation or source code view).
- **Props:** `isOpen`, `onClose`, `children`.
### 6. DATA MODEL:
- **Editor State:** TipTap's JSON output format. Example:
```json
{
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {"level": 1},
"content": [
{
"type": "text",
"text": "My First Document"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [{"type": "bold"}],
"text": "This is "
},
{
"type": "text",
"text": "bold text!"
}
]
},
{
"type": "image",
"attrs": {
"src": "https://via.placeholder.com/150",
"alt": "Placeholder Image"
}
}
]
}
```
- **Saved Draft:** Stored in `localStorage` as an array of objects:
```json
[
{
"id": "unique-uuid-1",
"title": "My First Draft",
"contentState": { ... TipTap JSON object ... },
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:05:00Z"
},
{
"id": "unique-uuid-2",
"title": "Another Idea",
"contentState": { ... },
"createdAt": "2023-10-27T11:00:00Z",
"updatedAt": "2023-10-27T11:15:00Z"
}
]
```
- **Global State (Zustand):** For managing drafts list, current editing document ID, UI states (e.g., modal visibility).
### 7. ANIMATIONS & INTERACTIONS:
- **Toolbar Button Hovers:** Subtle background color change or slight scale-up on hover for formatting buttons.
- **Transitions:** Smooth transitions for sidebar opening/closing, modal appearance/disappearance. Fade-in/out effects for UI elements.
- **Loading States:** Display spinners or placeholder skeletons while saving drafts or fetching data (if API used later). The editor itself should load quickly.
- **Micro-interactions:** Button click feedback (slight press effect), successful save confirmation (brief notification or checkmark animation).
- **Editor Focus:** Highlight the active editor area or toolbar item when the editor has focus.
### 8. EDGE CASES:
- **Empty State:** When no drafts are saved, the "My Content" section should display a friendly message and perhaps a button to "Create New Content". The editor starts blank, ready for input.
- **Error Handling:**
- **Image Insertion:** Handle invalid URLs or failed image loads gracefully (display placeholder or error message).
- **Saving/Loading:** Inform the user if `localStorage` is full or if saving fails.
- **HTML Rendering:** Although unlikely with TipTap's controlled output, be mindful of potential rendering errors.
- **Validation:**
- **Content Title:** Ensure titles are not empty when saving.
- **Link URLs:** Basic URL format validation (e.g., check for `http://` or `https://`, though not strictly enforced for simplicity).
- **Accessibility (a11y):**
- Use semantic HTML.
- Ensure all interactive elements have keyboard focus indicators.
- Provide `alt` text for images.
- Use ARIA attributes where necessary (e.g., for tooltips, modal states).
- Ensure sufficient color contrast.
### 9. SAMPLE DATA:
- **Editor Initial State (Empty):**
```json
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Start writing here..."
}
]
}
]
}
```
- **Sample Draft 1 (Title: "Introduction to HTML Gücü"):**
```json
{
"id": "sample-uuid-intro",
"title": "Introduction to HTML Gücü",
"contentState": {
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {"level": 1},
"content": [
{
"type": "text",
"text": "Welcome to HTML Gücü!"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "This platform empowers you to create rich web content using an intuitive editor. Forget Markdown's limitations!"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [{"type": "italic"}],
"text": "Easily add "
},
{
"type": "text",
"marks": [{"type": "bold"}],
"text": "formatting",
},
{
"type": "text",
"text": " and "
},
{
"type": "text",
"marks": [{"type": "underline"}],
"text": "links."
}
]
},
{
"type": "heading",
"attrs": {"level": 2},
"content": [
{
"type": "text",
"text": "Key Features"
}
]
},
{
"type": "bullet_list",
"content": [
{
"type": "list_item",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Intuitive WYSIWYG editor"
}
]
}
]
},
{
"type": "list_item",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Live HTML preview"
}
]
}
]
}
]
}
]
},
"createdAt": "2023-10-27T09:00:00Z",
"updatedAt": "2023-10-27T09:30:00Z"
}
```
- **Sample Draft 2 (Title: "Image Example"):**
```json
{
"id": "sample-uuid-image",
"title": "Image Example",
"contentState": {
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {"level": 2},
"content": [
{
"type": "text",
"text": "Inserting Images"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "You can easily add images by providing a URL."
}
]
},
{
"type": "image",
"attrs": {
"src": "https://via.placeholder.com/300x150.png?text=Sample+Image",
"alt": "A sample placeholder image"
}
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Make sure to provide descriptive alt text for accessibility."
}
]
}
]
},
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:05:00Z"
}
```
### 10. DEPLOYMENT NOTES:
- **Build Tool:** Vite is configured for optimal build performance. Use `npm run build`.
- **Environment Variables:** Use `.env` files for configuration. For MVP, primarily needed for potential API keys (if any added later) or feature flags. `VITE_APP_TITLE` could be set.
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically to some extent.
- Lazy Loading: Components like `Toolbar` or `SourceCodeViewer` could be lazy-loaded if they are not critical for initial render.
- Efficient State Management: Zustand is chosen for its performance.
- Optimize Images: Ensure any default placeholder images are optimized.
- **Hosting:** Can be deployed on platforms like Netlify, Vercel, GitHub Pages (for static export).
- **`localStorage` Considerations:** Be aware of `localStorage` limitations (size, security). For larger-scale applications, a backend API and database would be necessary.
- **TipTap Configuration:** Ensure TipTap extensions are correctly configured for efficient HTML serialization and deserialization.