Question : Value

[angwandi]

What's the best way to get the exact value from QuillEditor then save to firebase or something?

And also, how to display the exact value back from Firebase or some sort of backend?

I am using _controller.document.toPlainText(); and saving only simple string

[singerdmx]

What do you mean by the exact value from QuillEditor ? You can get delta of the document.

[angwandi]

@singerdmx I used this _controller.document.toDelta().toString(); to only get :

"insert⟨ Thanks for the invite and I ⟩ insert⟨ ⏎ ⟩ + {indent: 1} insert⟨ Thank u for ⟩ insert⟨ ⏎ ⟩ + {indent: 1, list: ordered} insert⟨ Best friend ⟩ insert⟨ ⏎ ⟩ + {indent: 1, list: ordered} insert⟨ Thanks for the invite and I appreciate it and I appreciate it and ⟩ insert⟨ ⏎⏎ ⟩ + {indent: 1}"

Trying to display the above from Firestore and I get this :

I tought it will be saved looking exactly like this :

[levy0601]

@angwandi

1. If you want to store the plain text (which mean it will lose all the format info like list, code block and link), you can use _controller.document.toPlainText()
2. This library use quill_delta as an internal data type to store all the formatting information as well as the text. Therefore, what you see from the _controller.document.toDelta().toString(); is the representation of the Delta data type. If you want to store the get the exact value from QuillEditor, you should use _controller.document.toDelta().toJson(). Noted that you will need to use an additional library to show the exact format from Detla to see what you see in the screenshot.

check out https://quilljs.com/docs/delta/ playground section for more information

[angwandi]

@levy0601 thank you so much. any suggestions for library to display in flutter?

[levy0601]

@angwandi

Noted that you will need to use an additional library to show the exact format from Detla to see what you see in the screenshot.

What I mean by the additional library is to show the delta in the web browser

If you are talking about display it in Flutter, you can just use our library.

check the following example for display a delta in flutter-quill;

@override
void initState() {
      Document _document =Document.fromJson( delta );
      QuillController _controller = QuillController(
                  document: _document, selection: TextSelection.collapsed(offset: 0));
}
@override
  Widget build(BuildContext context) {
      return QuillEditor.basic(
                  controller: _controller,
                  readOnly: true,
                )
}

you can also set the QuillEditor as ReadOnly view by passing in readOnly: true,

[angwandi]

@levy0601 thank you. let me give it a go.

[singerdmx]

@angwandi let us know if you have any issue. We are happy to resolve it for you.

[angwandi]

@singerdmx

E/flutter (10374): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: Invalid argument: Instance of 'Operation' E/flutter (10374): #0 convertPlatformException (package:cloud_firestore_platform_interface/src/method_channel/utils/exception.dart:13:5) E/flutter (10374): #1 MethodChannelDocumentReference.set (package:cloud_firestore_platform_interface/src/method_channel/method_channel_document_reference.dart:43:13) E/flutter (10374): <asynchronous suspension> E/flutter (10374): #2 CollectionReference.add (package:cloud_firestore/src/collection_reference.dart:45:5) E/flutter (10374): <asynchronous suspension>

getting this error when trying to save on Firestore using : data[AppEventFields.longDescription] = _longDescriptionQuillController.document.toDelta().toJson();

data[AppEventFields.longDescription] = _longDescriptionQuillController.document.toDelta() works fine and also data[AppEventFields.longDescription] = _longDescriptionQuillController.document.toPlainText(); works fine

[singerdmx]

This seems more of Filestore issue, which we are unfamiliar with

[WingCH]

in example sample_data.json

when i call _controller.document.toDelta().toJson()

How can I get the same format as sample_data.json?

[singerdmx]

This is more of a question how to prettify json string. You can check out https://pub.dev/packages/pretty_json Those questions are not related to flutter-quill and please DO NOT ask those here.

[WingCH]

thanks for your quick reply.

I think I understand the real problem with @angwandi we need usejsonEncode to convert Delta to json format and then save to firebase

String jsonString = jsonEncode(_controller.document.toDelta().toJson());

[ArjanAswal]

This is more of a question how to prettify json string. You can check out https://pub.dev/packages/pretty_json Those questions are not related to flutter-quill and please DO NOT ask those here.

@singerdmx I think we should pin the firebase issue as it is pretty common. Also I think we should create an issue template so that people don't ask unrelated questions.

[singerdmx]

This is already in README