List types are not saved in HTML for reuse

[Mrprey]

Problem

I'm adding Markdown to my project, I'm going to save it and try to save the HTML to view again in the future and/or edit but the types: [ ListCheck, UnderLine, Quote, CodeBlock, ListBullets, ListNumbers] are sometimes not being maintained in HTML

Code

class InputQuillEditor extends StatefulWidget {
  final QuillController controller;
  final bool readOnly;
  final bool? isExpanded;

  const InputQuillEditor({
    super.key,
    required this.controller,
    required this.readOnly,
    this.isExpanded,
  });

  @override
  State<InputQuillEditor> createState() => _InputQuillEditorState();
}

class _InputQuillEditorState extends State<InputQuillEditor> {
  QuillController get controllerQuill => widget.controller;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: widget.readOnly ? null : PocketDecoration.menuQuill,
      child: Column(
        children: [
          if (!widget.readOnly) bottonsEdit(),
          textInput(),
        ],
      ),
    );
  }

  Widget textInput() {
    return Expanded(
      child: Container(
        padding: PocketPadding.allPadding6,
        child: QuillEditor.basic(
          configurations: QuillEditorConfigurations(
            controller: controllerQuill,
            checkBoxReadOnly: widget.readOnly,
            showCursor: !widget.readOnly,
            sharedConfigurations: QuillSharedConfigurations(
              locale: Locale(LocaleManager.localeName()),
            ),
          ),
        ),
      ),
    );
  }

  Widget bottonsEdit() {
    return LayoutBuilder(builder: (context, values) {
      return Container(
        width: values.maxWidth,
        decoration: PocketDecoration.inputQuill,
        child: QuillToolbar.simple(
          configurations: QuillSimpleToolbarConfigurations(
            controller: controllerQuill,
            multiRowsDisplay: true,
            showAlignmentButtons: false,
            showSmallButton: false,
            showDirection: false,
            showLeftAlignment: false,
            showColorButton: false,
            showBackgroundColorButton: false,
            toolbarIconAlignment: WrapAlignment.start,
            toolbarIconCrossAlignment: WrapCrossAlignment.start,
            showFontFamily: false,
            showSubscript: false,
            showSuperscript: false,
            showFontSize: false,
            showDividers: false,
            showHeaderStyle: false,
            showStrikeThrough: false,
            showIndent: false,
            showSearchButton: false,
            buttonOptions: QuillSimpleToolbarButtonOptions(
              bold: styleButtonOption(),
              italic: styleButtonOption(),
              underLine: styleButtonOption(),
              strikeThrough: styleButtonOption(),
              inlineCode: styleButtonOption(),
              subscript: styleButtonOption(),
              superscript: styleButtonOption(),
              small: styleButtonOption(),
              direction: styleButtonOption(),
              listNumbers: styleButtonOption(),
              listBullets: styleButtonOption(),
              quote: styleButtonOption(),
              clipboardCopy: styleButtonOption(),
              clipboardCut: styleButtonOption(),
              clipboardPaste: styleButtonOption(),
              codeBlock: QuillToolbarToggleStyleButtonOptions(
                iconData: FeatherIcons.terminal,
                iconTheme: iconTheme(),
              ),
              selectHeaderStyleButtons:
                  QuillToolbarSelectHeaderStyleButtonsOptions(
                      iconTheme: iconTheme()),
              selectHeaderStyleDropdownButton:
                  QuillToolbarSelectHeaderStyleDropdownButtonOptions(
                      iconTheme: iconTheme()),
              fontSize: QuillToolbarFontSizeButtonOptions(
                iconSize: PocketSizes.iconXSmall,
              ),
              search: QuillToolbarSearchButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              linkStyle: QuillToolbarLinkStyleButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              indentIncrease: QuillToolbarIndentButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              indentDecrease: QuillToolbarIndentButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              toggleCheckList: QuillToolbarToggleCheckListButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              selectAlignmentButtons: QuillToolbarSelectAlignmentButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              undoHistory: QuillToolbarHistoryButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              redoHistory: QuillToolbarHistoryButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
              clearFormat: QuillToolbarClearFormatButtonOptions(
                iconSize: PocketSizes.iconXSmall,
                iconTheme: iconTheme(),
              ),
            ),
            toolbarSectionSpacing: -0.9,
          ),
        ),
      );
    });
  }

  QuillToolbarToggleStyleButtonOptions styleButtonOption() {
    return QuillToolbarToggleStyleButtonOptions(
        iconSize: PocketSizes.iconXSmall, iconTheme: iconTheme());
  }

  QuillIconTheme iconTheme() {
    return QuillIconTheme(
      iconButtonUnselectedData: IconButtonData(
        color: DDSColors.lowPure,
      ),
    );
  }
}

class InputText extends BaseInput {
  const InputText(
    this.controller, {
    Key? key,
    this.onChanged,
  });

  final TextEditingController controller;
  final Function(String?)? onChanged;

  @override
  _InputTextState createState() => _InputTextState();
}

class _InputTextState extends BaseInputState<InputText> {
  late QuillController controllerQuill;

  @override
  void initState() {
    super.initState();

    updatedTextField();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: PocketDecoration.inputTextDecoration(),
      height: PocketSizes.heightInputText,
      child: InputQuillEditor(controller: controllerQuill, readOnly: false),
    );
  }

  void updatedTextField() {
    Document initialContent =
        Converter.htmlToString(widget.controller.text).isEmpty
            ? Document()
            : Document.fromHtml(widget.controller.text);

    controllerQuill = QuillController(
        document: initialContent,
        selection: TextSelection.collapsed(offset: 0),
        onSelectionChanged: (_) {
          widget.onChanged?.call(quillConverter());
        });
  }

  String quillConverter() {
    return QuillDeltaToHtmlConverter(
      List.castFrom(controllerQuill.document.toDelta().toJson()),
      ConverterOptions.forEmail(),
    ).convert();
  }
}

Flutter Doctor

Run case

https://github.com/dart-lang/markdown/assets/51444228/9c5f9ebc-4a6c-4c07-bc90-a593e1b3642e

[srawlins]

Sorry, I don't understand what you're trying to do. None of the names you reference are familiar in this codebase, like ListCheck. Are you perhaps looking for a different project, like flutter_markdown?

[Mrprey]

True, I analyzed it here and got confused about the repository.