singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.58k stars 835 forks source link

Hide Default Configuration #2225

Closed kawad852 closed 1 month ago

kawad852 commented 1 month ago

Is there an existing issue for this?

The question

How do i hide the white block inside the editor (This is TheHTML) ? i managed to hide from the toolBar by setting showCodeBlock: false, but did figure out how to hide it from the editor.

this is my code:

Column( children: [ QuillSimpleToolbar( controller: controller, configurations: const QuillSimpleToolbarConfigurations( showCodeBlock: false, ), ), const SizedBox(height: 10), QuillEditor.basic( controller: controller, configurations: const QuillEditorConfigurations(minHeight: 300), ), ], )

Screenshot 2024-09-14 at 9 59 34 AM
AtlasAutocode commented 1 month ago

I have run into this before #2073 I assume you are importing/pasting text from a source that is providing HTML. In my cases, the paste process converted \

 to the code block attribute that appears as your white box.

Since I don't use HTML and the status of pasting HTML is being deprecated, I have not pursued this further. @CatHood0 knows more about this than I do. Can you confirm that this is what you are doing?

CatHood0 commented 1 month ago

Can you confirm that this is what you are doing?

Yeah. <pre> tag is taken as a block of code and it is parsed like any of the available tags to a Delta with its own attributes

I'll first add a new version for flutter_quill_delta_from_html to allow plain paste from html nodes and then we will need to add a new configuration for this in the editor. Give me some time to make this.

kawad852 commented 1 month ago

@CatHood0 @AtlasAutocode

This is the html i'm trying to display inside the editor: "This is the HTML section of the email body."

and this is how i convert it:

_quillCtrl = QuillController(
  document: Document.fromDelta(HtmlToDelta().convert("This is the <code>HTML</code> section of the email body.")),
  selection: const TextSelection.collapsed(offset: 0),
);
AtlasAutocode commented 1 month ago

This is the HTML section of the email body.

  1. Do you want to remove the white box? In this case, remove the \ tag and you should not have a problem. It seems that the Quill editor is working correctly and showing the \ tag as a code-block (block attribute).
  2. Do you want to show the box as a different color and inline? In this case you want to convert the \ tag to an inline code-block (inline attribute). It is confusing that there are 2 attributes for code blocks and they have very different properties.
kawad852 commented 1 month ago

@AtlasAutocode

Yes i want to remove the white box. i was just confused of this box because i've been using this package for a while now, and it's the first time i see this box (for the same html content). i guess they made some changes recently, Anyway, Thank you for your help, I appreciate it.