search

gildas-lormeau / SingleFile

Web Extension for saving a faithful copy of a complete web page in a single HTML file
GNU Affero General Public License v3.0
15.71k stars 1.02k forks source link

Implement highlighting in the editor with the CSS Custom Highlight API #1350

Open GaneshDabhade opened 11 months ago

GaneshDabhade commented 11 months ago

Describe the bug UI elements such as button/ text boxes are getting distorted when highlighted.

Steps to Reproduce

  1. Open any web URL (e.g https://github.com/gildas-lormeau/SingleFile)
  2. From the context menu select "Single File--> Annotate and Save the page..."
  3. It will take you to a new tab, Here try to highlight the elements like buttons, and text boxes.

Bug: After highlighting elements like buttons, the text box appears to be cluttered.

image

gildas-lormeau commented 11 months ago

Thank you, this is due to the fact that SingleFile inserts <span> tags in order to implement the text highlighting feature. I'll try to see if I can improve the implementation to avoid the bug you described. In the long term, the implementation will probably use this API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API. It would allow highlighting text without applying changes in the HTML.