I want to implement the Rich Text Editor (WYSIWYG HTML Editor) for the Arabic Language in my Flutter App.

I've used the following Packages but they didn't work as required.

flutter_quill It has a problem with bullet alignment and default font.

super_editor

html_editor_enhanced It provides the feature to add more Summernote RTL extensions, I tried but don't know how to implement it.

Flutter quill example

Code of flutter_quill

  QuillController controller = QuillController.basic();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Quill'),
        actions: [
          IconButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondEditor()));
              },
              icon: const Icon(Icons.edit_road)),
          IconButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => SuperEditView()));
              },
              icon: const Icon(Icons.superscript)),
          IconButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => HtmlEditorExample(
                          title: 'aaa',
                        )));
              },
              icon: const Icon(Icons.html)),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Directionality(
          textDirection: TextDirection.ltr,
          child: Column(
            children: [
              QuillToolbar.basic(
                locale: const Locale('ar'),
                showDirection: true,
                showAlignmentButtons: true,
                showDividers: false,
                controller: controller,
                showFontFamily: true,
                showFontSize: false,
                showInlineCode: false,
                showListCheck: false,
                showClearFormat: false,
                showSearchButton: false,
                fontFamilyValues: const {'JF Flat': 'jfflat', 'Flat Jooza': 'flatjooza'},
                showSmallButton: true,
              ),
              Expanded(
                child: QuillEditor.basic(
                  controller: controller,
                  readOnly: false, // true for view only mode
                  locale: const Locale('ar'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }