Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some actions are not save in HTML #1903

Open
1 task done
Mrprey opened this issue May 28, 2024 · 0 comments
Open
1 task done

Some actions are not save in HTML #1903

Mrprey opened this issue May 28, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@Mrprey
Copy link

Mrprey commented May 28, 2024

Is there an existing issue for this?

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();
  }
}

Screenshots or Video

Markdown-2024-05-28_10.41.36.mp4

Logs

⚠️ it is not have error from quill

log: https://pastebin.com/7L8eMZKF

@Mrprey Mrprey added the bug Something isn't working label May 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant