Is there a way to mark something as truly selected ?

[bksubhuti]

The recent upgrade from Flutter 3.13.x fixed a right click issue for someone but broke it for us.
Normally we have a click-to-dictionary and we mark the word as highlighted, but it is just html dom stuff.
Recently we switched to the proper way to do right click because some things were headed for depreciated and not supported. Everything worked in flutter 3.10.6 but 3.13.x stopped working.
What happened is that the system or framework was automatically selecting the nearest word (which happened to have highlighted elements on it). Then the right click menu would detect a word was selected. We got lucky and used this for a release or two. However, it was not really "selected" and just visually selected.

You can read this issue here which explains the issue a little bit more
flutter/flutter#117561

So we need a way to programatically select a word when the user clicks. Right now we just change the color and make it appear that it is "selected".

The question here is.. is there a way to actually select something with a mere click of the mouse or right click.
The problem does not exist in android because to get a context menu, one needs to long press. Long pressing defaults to selected the nearest word.

[daohoangson]

Can you share the core part of your code that does the selection?

[bksubhuti]

We appreciate you taking a look. I myself am not much of a programmer.. but I have seen some of this code for some dictionary and sentence reference collection I did for flash cards.

https://github.com/bksubhuti/tipitaka-pali-reader/blob/master/lib/ui/screens/reader/widgets/pali_page_widget.dart
line 107

We only change the html to "highlight"
We use the gesture detector.. then you can see what we do from there.
So we are only "HTML-highlighting" rather than "system-highlighting" the later is what we want to know if it is possible.

[daohoangson]

I saw that your _addHighlight method would wrap the highlighted word in a SPAN to apply the highlight. That's why it's not interacting well with the active selection. Let me try to write a PoC for this.

[bksubhuti]

yes.. we are just more or less.changing the color. We don't know how to do a force a highlight recognized by the system or if that is possible. A PoC (proof of concept) with your widget would be very useful. There was some talk from the dev sumbodhi (who helps us from time to time (when he has it) ) about using the available widget factory to do a system level highlight with selection area.

Or there was also a possible customwidget. He says the factory would be cleaner. He said your widget is very powerful because of this. We don't need to highlight-by-code all the time..Most of the time, it is only a single word. Because we change the color and pretend it is selected, the right click stuff needs to know something was selected. The previous external issue I sent actually had the system selecting the nearest word and so it worked up until 3.13.x.

the manipulation of the html to act as "selected" is giving us other problems as well. So a clean approach for system-recognized-selecting text would be nice.

We appreciate your help and support for the html widget and all you have done. Without your widget, we would be mobile only, and maybe we would not be using flutter at all without your widget.

[bksubhuti]

The question is..
If the html widget is showing this html:

this is a test

How do I select the word "test" as if the user selected the word, provided the widget is inside a SelectionArea

[bksubhuti]

The context menu items can be found here

[daohoangson]

It turned out you can dispatch a SelectWordSelectionEvent like this:

final key = GlobalKey();

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SelectionArea(
        onSelectionChanged: (value) {
          print('onSelectionChanged: ${value?.plainText}');
        },
        child: Builder(
          builder: (context) {
            final registrar = SelectionContainer.maybeOf(context);

            return GestureDetector(
              onTapUp: (details) {
                if (registrar is! MultiSelectableSelectionContainerDelegate) {
                  // registrar should be this class if a `SelectionArea` is in the widget tree
                  return;
                }

                registrar.dispatchSelectionEvent(SelectWordSelectionEvent(globalPosition: details.globalPosition));
                final tapped = registrar.getSelectedContent();
                // selecting word this way won't trigger the `onSelectionChanged` callback
                print('onTapUp: ${tapped?.plainText}');
              },
              child: HtmlWidget(html, key: key),
            );
          },
        ),
      ),
    );
  }
}

[bksubhuti]

Oh.. this is wonderful to hear. We will try this and follow up for the success and then close this. We really appreciate your help on this. Currently we are set to release with 3.10.6 but this will enable us to upgrade to flutter 3.13.x and higher and reap the rewards. By using this method, instead of "changing the color", we can avoid some other hurdles that have come our way with a variety of mixed overlapping elements.

[bksubhuti]

Yes.. the code you provided was correct. We had a delay to get back to you. I'm not skillful enough to put this code in. However, eventually the other programmer monk was able to push a commit. We are very grateful for your help.
bksubhuti/tipitaka-pali-reader@3d40def

[bksubhuti]

So the fix works in Linux.. but not Windows. Sorry to report early that it was fixed. The other programmer might help though

[daohoangson]

The mechanism may be a little bit different under Linux. Probably some debugging might help.