Closed
Description
Is there an existing issue for this?
- I have searched the existing issues
Flutter Quill version
9.3.10
Steps to reproduce
try using some of these actions [ ListCheck, UnderLine, Quote, CodeBlock, ListBullets, ListNumbers].
Expected results
maintained in HTML this any of these selected tags
Actual results
markups are removed when converted to HTML
Code sample
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();
}
}