Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Built-in text editor

Context

Currently, the package description field in the system does not recognize formatting such as paragraph breaks, line spacing, or bold text. This results in the display of continuous, dense text blocks that reduce readability and appear cluttered on the front end. Provided feedback that it’s necessary to improve this so restaurant and package descriptions are clearer and more visually structured for users, without requiring manual editing through an external editor.

Reference :

Old UI

Objective

Implement a built-in rich text editor inside the admin dashboard (or wherever the package description is input) that:

  • Automatically handles proper text formatting (paragraphs, line breaks, bold, etc.) → Can use the existing built in text editor
  • Eliminates the need to use external editors or manually adjust HTML
  • Ensures the displayed content on the frontend respects the intended formatting for better readability

Problem Statement

  • Current description input merges all content into a single block, ignoring line breaks and formatting
  • Editors need to switch to an external editor to add proper formatting, which is time-consuming and error-prone
  • The frontend display does not reflect structured content, making long descriptions hard to read and potentially hurting user engagement.

Scope

  • Add a built-in rich text editor (e.g., TinyMCE, Quill, CKEditor) to the admin restaurant/package description input
  • Ensure the editor supports:
    • Paragraph breaks
    • Bold/italic text
    • Bullet and numbered lists
    • Simple line breaks (enter/shift+enter behavior)
  • Update the frontend to correctly render the saved formatted content
  • Ensure backward compatibility (older saved descriptions without formatting should not break or display raw HTML)
  • Implement to
    • Restaurant Description
    • Package Description

Out of Scope (for this phase)

❌ Advanced media embedding (videos, galleries) ❌ Custom CSS or complex layouts in description

Acceptance Criteria

  • When a user types or pastes text with line breaks in the editor, it is saved and displayed with correct spacing.
  • Bold/italic formatting is correctly saved and rendered.
  • The frontend shows the formatted description exactly as previewed in the admin editor.
  • Existing package descriptions remain unaffected (no data corruption).
  • Editors no longer need to switch to an external editor to apply basic formatting.

Design Considerations

  • Keep the editor simple and intuitive for non-technical users.
  • Provide a fallback (plain text) input in case of technical issues.
  • Ensure consistent styling between admin preview and frontend display.

Impact

  • Significantly improves readability for over 1,000 restaurants’ package descriptions.
  • Reduces manual work and editing time for content editors.
  • Enhances user trust and experience when reading package details.