simple_markdown_editor's Introduction

simple_markdown_editor

Simple markdown editor library For flutter. For demo video, you can see it at this url Demo

What's new (21/01/2022)

Auto preview if editor unfocused, request from issue #4

Features

Convert to Bold, Italic, Strikethrough
Convert to Code, Quote, Links
Convert to Heading (H1, H2, H3).
Convert to unorder list and checkbox list
Support multiline convert
Support auto convert emoji

Usage

Add dependencies to your pubspec.yaml

dependencies:
    simple_markdown_editor: ^latest

Run flutter pub get to install.

How it works

Import library

import 'package:simple_markdown_editor/simple_markdown_editor.dart';

Initialize controller and focus node. These controllers and focus nodes are optional because if you don't create them, the editor will create them themselves

TextEditingController _controller = TextEditingController();
FocusNode _focusNode = FocusNode();

Show widget for editor

// editable text with toolbar
MarkdownFormField(
    controller: _controller,
    enableToolBar: true,
    emojiConvert: true,
    autoCloseAfterSelectEmoji: false,
)

// editable text without toolbar
MarkdownField(
    controller: _controller,
    emojiConvert: true,
)

if you want to parse text into markdown you can use the following widget:

String data = '''
**bold**
*italic*

#hashtag
@mention
'''

MarkdownParse(
    data: data,
    onTapHastag: (String name, String match) {
        // name => hashtag
        // match => #hashtag
    },
    onTapMention: (String name, String match) {
        // name => mention
        // match => #mention
    },
)