visual-space / visual-editor

Rich text editor for Flutter based on Delta format (Quill fork)
MIT License
283 stars 44 forks source link

Highlights - Add highlights from the controller #145

Closed adrian-moisa closed 1 year ago

adrian-moisa commented 1 year ago

https://user-images.githubusercontent.com/11160141/193933324-8b7eb2b9-1944-4441-a5a8-e8e902b46f8d.mov

adrian-moisa commented 1 year ago

Checkout the highlights demo page for a full sample.

_controller?.addHighlight(
  HighlightM(
    textSelection: _selection.copyWith(),
    onEnter: (_) {},
    onLeave: (_) {},
    onSingleTapUp: (_) {},
  ),
);
adrian-moisa commented 1 year ago

How Text Selection Works TextGesturesService controls the selection of text after tapDown and tapUp events. Once the selection range is known it's then passed to the state store. Starting and updating the selection is triggered from the TextGestures widget and parsed by this service which in turn calls TextSelectionService. The TextGestures widget is used in the main build() method. It adds a gesture detector which interprets the various touchscreen signals into potential gestures. Once a gesture is detected in the callback executed, then the controller.updateSelection() is called which triggers the refreshEditor() which triggers a build() in main. Remember, the main build() contains the widgets generated by the documentBlocsAndLines(). These are a list of editable text lines and blocks. Once build() is triggered each EditableTextLine widget, then calls on the renderer object methods to update information. If the renderer callbacks notice that the selection is changed and within it's bounds then it triggers a paint() cycle. A new paint() cycle will "render" the selection rectangles vector data on top of the text.

I was updating the docs, I thought maybe you need this info. I was digging trough this path to figure out why the adding highlights via the controller did not work properly.