Specification: Redesign Article Editor — Rich Text Editor + Sub-Page / Drawer

Last Updated: 15/07/2026
Type: CMS UX Redesign — Article Editor
Screen: CMS > Articles (and Events)
Severity: 🟠 P1 — High impact on content formatting & Admin UX

Feedback Screenshot:

Actual UI: Body is a raw textarea with inline editing; no rich text formatting support

1. Current Issues

The article editor screen (CMS > Articles) has several issues:

Issue	Details
❌ Inline Editing	Edits occur directly inside the list view without context separation
❌ Raw Textarea	The body field is a standard text input without format options
❌ No Rich Text	Lacks: bolding, italics, colors, headers, lists
❌ No Inline Images	Cannot insert images within the body; limited to 1 thumbnail

2. Redesign Specifications

2.1 Editor Flow — Sub-Page or Drawer Layout

UX Navigation Flow:

Article List View
    ↓
Click [ + Add New ] or [ ✏️ Edit ]
    ↓
Navigate to SUB-PAGE (New Route)  or  open DRAWER (Slide-in Panel)
    ↓
Interactive Form featuring Rich Text Editor
    ↓
Click [ Save ] to submit  |  Click [ Cancel ] to discard

Recommendation: Use a Sub-page (full-page routing) instead of a modal/drawer. Soigning text in a rich editor requires adequate workspace.

Route: /cms/articles/new
Route: /cms/articles/:id/edit

2.2 Sub-Page Form Layout

┌────────────────────────────────────────────────────────────────┐
│  ← Back    Edit Article                              [Cancel] [Save]  │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  Title *                                                       │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Golden Lotus - A wellness destination for the family    │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                │
│  Slug          Category          Language                      │
│  [___________] [___________]     [ vi ▼ ]                     │
│                                                                │
│  Thumbnail Image                                               │
│  [ 🖼️ Select Image / Drag and Drop File Here ]                 │
│                                                                │
│  Summary (Short description)                                   │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Summary text displayed in the card preview...           │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                │
│  Article Body *                                                │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ [B] [I] [U] [S] | [H1][H2][H3] | [🎨] [A▼] | [🖼️] [🔗] │  │  ← Rich Text Toolbar
│  │ [• ] [1.] [—] | [≡] | [" "] | [< >] | [↩] [↪]         │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │                                                          │  │
│  │   Write content here...                                  │  │
│  │   Format text bold, apply highlights, and upload images.  │  │
│  │                                                          │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                │
│  Sort    Start Publishing          End Publishing              │
│  [1]     [07/06/2026 05:00 PM]     [07/31/2027 05:05 PM]      │
│                                                                │
└────────────────────────────────────────────────────────────────┘

Formatting Tools

Tool	Icon	Description
Bold	B	`Ctrl+B` — Bold text
Italic	I	`Ctrl+I` — Italicize text
Underline	U	`Ctrl+U` — Underline text
Strikethrough	S	Strike out text
Text Color	🎨 A▼	Custom color picker (palette or hex input)
Highlight	🖌️	Apply background highlight color

Headers

Tool	Shortcut
Heading 1 (H1)	`#` + Space
Heading 2 (H2)	`##` + Space
Heading 3 (H3)	`###` + Space
Paragraph	Regular text

Layout & Lists

Tool	Description
Bullet List (•)	Unordered list
Numbered List (1.)	Ordered list
Blockquote (" ")	Quote block
Divider (—)	Horizontal rule
Alignment	Left / Center / Right / Justify

Media & Links

Tool	Description
Image (🖼️)	Upload files or select from Asset Library and insert inline
Link (🔗)	Insert URLs (option to open in new tab)
Code block (`< >`)	Code formatting

2.4 Inline Image Insertion Flow

Clicking the 🖼️ icon in the toolbar should trigger:

1. Open Asset Library Dialog:
   ├── Tab "Upload File": Drag and drop or browse files
   └── Tab "Library": List of previously uploaded media files

2. Configure selected image:
   ├── Alignment: Left / Center / Right
   ├── Scaling: Original / 75% / 50% / Custom (px)
   └── Alt Text: Alternate description (for SEO)

3. Insert image node at the current editor cursor index

3. Recommended Libraries

Library	Pros	Suitability
TipTap	Headless, modern, React/Vue support, custom text-color extensions	✅ Recommended
Quill	Lightweight, clean API, standard theme	✅ Suitable
Slate.js	Extremely customizable but complex boilerplate	⚠️ Overkill
CKEditor 5	Packed with features but heavy bundle size and commercial license	⚠️

Recommendation: TipTap

Headless structure allows styling the toolbar to match the application theme
Robust plugins: Color, TextAlign, Image, Link, Highlight
MIT licensed (free)
Large community and excellent docs

# Installing TipTap core and extensions
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
npm install @tiptap/extension-color @tiptap/extension-text-style
npm install @tiptap/extension-image @tiptap/extension-link
npm install @tiptap/extension-highlight @tiptap/extension-text-align

4. Data Storage & Mobile Rendering

The editor state will save to the database as HTML (or JSON):

// Convert editor state to HTML string for serialization
const bodyContent: string = editor.getHTML();

// Example output:
// <h2>Article Header</h2>
// <p>This is a <strong>bold</strong> statement with <span style="color: #E74C3C">red text</span>.</p>
// <img src="https://cdn.golden-lotus.vn/image.jpg" alt="Description" />

On the Mobile App, parse and render the HTML content using react-native-render-html or a WebView:

import RenderHtml from 'react-native-render-html';
<RenderHtml contentWidth={width} source={{ html: article.body }} />

5. Technical Checklist

UX Routing:

Create the new routes /cms/articles/new and /cms/articles/:id/edit.
Redirect the list page's "Add" and "Edit" action buttons to these routes instead of performing inline edits.
Prevent loss of unsaved changes when navigating away (implement window.confirm or a modal warning).

Rich Text Editor Integration:

Integrate TipTap (or Quill) into the Article Body input.
Include text styling buttons: Bold, Italic, Underline, Strikethrough.
Include header options: H1, H2, H3.
Include Text Color (color picker supporting hex values).
Include Text Highlight (background color).
Include Bullet List, Numbered List, Blockquote, and Horizontal Divider.
Include Text Alignment (left / center / right).
Implement the Inline Image library picker.
Implement URL Link insertion.

Storage & Testing:

Serialize the editor body as an HTML string when writing to the API.
Ensure the Mobile App uses react-native-render-html to style raw headers, bold styles, colors, and lists correctly.
Event Manager: Apply this identical rich text editor design to the Event detail manager screen.

1. Current Issues​

2. Redesign Specifications​

2.1 Editor Flow — Sub-Page or Drawer Layout​

2.2 Sub-Page Form Layout​

2.3 Rich Text Editor Toolbar Features​

Formatting Tools​

Headers​

Layout & Lists​

Media & Links​

2.4 Inline Image Insertion Flow​

3. Recommended Libraries​

4. Data Storage & Mobile Rendering​

5. Technical Checklist​