daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
641 stars 241 forks source link

Expose scroll alignment for the anchor #884

Open limitless-brain opened 1 year ago

limitless-brain commented 1 year ago

Use case

Scrolling to the currently highlighted text (anchor), since the alignment is set to 1.0 the item is shown at the top of the view. Screenshot_20230427_090449

Proposal

Expose the alignment parameter for the scrollToAnchor method, so the developer can set the alignment for the anchor.

daohoangson commented 1 year ago

I think this is useful and should be fairly straightforward to implement.

bksubhuti commented 1 year ago

Our main developer said this would be very helpful for our software as well. However, we use another method right now.

daohoangson commented 1 year ago

What did you do? @bksubhuti

bksubhuti commented 1 year ago

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

search for #goto

and textToHighlight

lwj1994 commented 1 year ago

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

search for #goto

and textToHighlight

@bksubhuti hi, i see the code ,it is good idea to highlight by edit html
I want to implement text highlighting in selected sections

then edit html like this?

<h4 data-id="heading-0"><strong>正文:</strong></h4>
<p>高尔夫运动中,分数最小者胜出。</p>

if i select 文:\n高尔夫运动 , the text is in different tag , so hight:

<h4 data-id="heading-0">
<strong>正<span style="background-color: #f00">文:</span></strong>
</h4>

<p>
 <span style="background-color: #f00">高尔夫</span>运动中,分数最小者胜出。
</p>
bksubhuti commented 1 year ago

Our main programmer is a little sick right now. I will send him. I think you are asking us how to do what we do. There are many different highlighting situations.. for instance when we highlight a search word, and highlight a toc item and also highlight on a word that is clicked. I'm not so smart in this stuff and can only edit small sections at my level. I'm more of a manager.

Perhaps you can tell me what feature you are using on our app and then i can try to find more information for you on what we do. I think what we do is change the html tags as you said in the case of search scroll to highlight.

The latest version 3.13.6 has some highlighting issues for our right click context menu. It works differently than older versions of flutter. 3.10.6

tek4fun commented 5 months ago

Any update for this function? My case is the html content is under the Appbar in a Stack

daohoangson commented 5 months ago

No update yet, @tek4fun.