dart - How to listen for Text-Change in Quill text Editor (Flutter)

How to Listen for Text-Change in Quill text Editor (Flutter)

There are several ways to listen for text changes in Quill text editor (Flutter):

1. Using the QuillController listener:

You can add a listener to the QuillController, which will be called on each editor event, like pressed keys or toolbar actions.

class _TextEditorState extends State<TextEditor> {

  final QuillController _controller = QuillController.basic();

  @override
  void initState() {
      _controller.addListener(() {
      print('Here I am, rock me like a hurricane!!!');
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Build your Widget with QuillToolbar and QuillEditor here...
  }
});

2. Using the QuillController.document.changes stream:

You can listen to quill document changes stream and handle it accordingly.

_controller.document.changes.listen((event) {
  print(event.item1); //Delta
  print(event.item2); //Delta
  print(event.item3); //ChangeSource
});

3. Using the QuillEditor.onTextChanged callback:

Here's how it's done:

await for (final change in _quillEditorController.changes) {
  final oldDelta = change.toList()[0];
  final changeDelta = change.toList()[1];
  final changeSource = change.toList()[2];

  if (changeSource == ChangeSource.REMOTE) {
    console.log("An API call triggered this change.");
  } else if (changeSource == ChangeSource.LOCAL) {
    console.log("A user action triggered this change.");
  }
}

Note that flutter-quill's api doesn't exactly match quill.js. And since the documentation is lacking, your best hope in understanding what's available is by digging into the code-base using your editor (eg. using "go to definition").

4. Using the QuillController.

To listen for and detect changes in the Quill editor you can utilize the QuillController which provides a way to manage and interact with the Quill editor's state. Here's a breakdown of the process:

1. Initialization: First, create and initialize a QuillController instance. This controller is linked to the Quill editor and allows for the monitoring of text changes.

   late QuillController _quillController = QuillController.basic();
   
   

2. Listening to Text Changes: To detect changes in the editor's content, add a listener to the QuillController right after its initialization, typically inside the initState method of your widget. This listener will trigger a callback function whenever the text within the editor changes.

   @override
   void initState() {
     super.initState();
     _quillController.addListener(_onEditorTextChanged);
   }
   
   

3. Handling Text Changes: The callback function _onEditorTextChanged is invoked whenever the editor's content changes. Within this function, you can access the current text of the editor and perform any necessary logic, such as parsing the text for specific patterns or updating the state of your widget based on the text content.

   void _onEditorTextChanged() {
     final text = _quillController.document.toPlainText();
     // Implement your logic here, such as searching for URLs or updating the UI.
   }
   
   

4. Cleanup: It's important to remove the listener when the widget is disposed to prevent memory leaks or unintended behavior. This is done in the dispose method.

   @override
   void dispose() {
     _quillController.removeListener(_onEditorTextChanged);
     super.dispose();
   }