Tiptap Markdown For Dart/Flutter

Thanks to these projects:

• TarekkMA/markdown_quill
• nuxtlabs/tiptap-markdown
• oleksandr560/markdown-to-tiptap-converter

Usage

Installation

dependencies:
  tiptap_markdown:
    git:
      url: https://github.com/FoskyM/tiptap_markdown.dart.git
      ref: main # branch name
# if need widget to render, use this,
# may be renamed from `tiptap_flutter` to `flutter_tiptap_render` soon.
#   tiptap_flutter: # flutter_tiptap_render
#     git:
#       url: https://github.com/FoskyM/flutter_tiptap_render.git
#       ref: main

final converter = MarkdownToTiptapConverter(
    extensions: CommonMarkExtensions(),
);

const markdown = '''
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

> Quote

This is an `inline code`

******

**Bold**

*Italic*

***Bold and italic***

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

[link of this project](https://github.com/FoskyM/tiptap_markdown.dart)

- list item 1
- list item 2
- list item 3

1. list item 1
2. list item 2
3. list item 3
''';

final tiptapJsonData = converter.convert(markdown);




// render in flutter
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tiptap Render Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tiptap Render Demo'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
                child: Scrollbar(
                  radius: const Radius.circular(8.0),
                  child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: TiptapRenderer(tiptapJsonData, extensions: [
                        // ...TiptapRendererExtensions
                      ])),
                )),
          ],
        ),
      ),
    );
  }
}