zeba_academy_editor

A powerful and customizable Flutter rich text editor featuring formatting tools, markdown shortcuts, mentions, and an intuitive editing experience.

pub package likes popularity

Features

✨ Rich Text Editing

✨ Formatting Toolbar

✨ Bold Formatting

✨ Italic Formatting

✨ Underline Formatting

✨ @Mentions Support

✨ Markdown Shortcuts

✨ Custom Controller API

✨ Lightweight & Fast

✨ Material Design Compatible

✨ Mobile, Web & Desktop Support

Preview

zeba_academy_editor provides a clean editing experience suitable for:

  • Blog Editors
  • CMS Dashboards
  • Chat Applications
  • Learning Platforms
  • Documentation Systems
  • Notes Applications
  • Internal Tools

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  zeba_academy_editor: ^1.0.0

Then run:

flutter pub get

Import

import 'package:zeba_academy_editor/zeba_academy_editor.dart';

Basic Usage

import 'package:flutter/material.dart';
import 'package:zeba_academy_editor/zeba_academy_editor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: EditorExample(),
    );
  }
}

class EditorExample extends StatefulWidget {
  const EditorExample({super.key});

  @override
  State<EditorExample> createState() => _EditorExampleState();
}

class _EditorExampleState extends State<EditorExample> {
  final EditorController controller = EditorController();

  final List<MentionUser> users = const [
    MentionUser(id: '1', name: 'Sarvesh'),
    MentionUser(id: '2', name: 'Sufyan'),
    MentionUser(id: '3', name: 'Flutter Developer'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Zeba Academy Editor'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            EditorToolbar(
              controller: controller,
            ),
            const SizedBox(height: 12),
            Expanded(
              child: ZebaAcademyEditor(
                controller: controller,
                mentions: users,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Toolbar

Built-in formatting toolbar:

EditorToolbar(
  controller: controller,
)

Supported actions:

  • Bold
  • Italic
  • Underline

Mentions

Provide a list of users:

final users = [
  MentionUser(
    id: '1',
    name: 'Sarvesh',
  ),
];

Use inside editor:

ZebaAcademyEditor(
  controller: controller,
  mentions: users,
)

Typing @ displays mention suggestions.

Markdown Shortcuts

Use the built-in formatter:

MarkdownFormatter.bold('Hello');

Result:

**Hello**

Italic:

MarkdownFormatter.italic('Hello');

Result:

*Hello*

Heading:

MarkdownFormatter.heading('Welcome');

Result:

# Welcome

Controller

Access editor content:

final text = controller.text;

Toggle formatting:

controller.toggleBold();
controller.toggleItalic();
controller.toggleUnderline();

Supported Platforms

Platform Supported
Android ✅
iOS ✅
Web ✅
Windows ✅
macOS ✅
Linux ✅

Roadmap

Upcoming features:

  • Text Colors
  • Background Colors
  • Font Size Controls
  • Font Family Selection
  • Lists
  • Numbered Lists
  • Checklists
  • Image Embeds
  • Link Embeds
  • Emoji Picker
  • Markdown Preview
  • HTML Export
  • JSON Export
  • Advanced Mention Search
  • Undo / Redo Support

Contributing

Contributions are welcome.

Feel free to:

  • Open Issues
  • Submit Pull Requests
  • Suggest New Features
  • Improve Documentation

License

GPL License

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

🌐 https://sufyanism.com

💼 https://www.linkedin.com/in/sufyanism

Your All-in-One Learning Hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting and supporting open source! ❤️

Libraries

zeba_academy_editor