3

I am developing a chrome extension which works with Google Docs.

Each character on a Google Doc is associated with an index (starting from 0).

I need to be able to highlight text on the Google Doc - given the start index and end index. e.g. - start: 10, end : 25 - Highlights text from indexes 10 to 25.

Google is currently using HTML based rendering - and a solution for this was implemented. Each div, span tag was parsed - and I was able to construct a mapping of indexes and DOM nodes - which I was using to Highlight a particular DOM node.

Now, Google is moving to Canvas based rendering. The entire editable "page" is a element. https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html

I want to be implement the same functionality for a canvas rendered Google Doc.

Approaches tried:

  1. I can get a handle to the CanvasRenderingContext - and draw "rects" on the canvas. This requires very accurate x,y,height and width information. I was not able to accurately calculate x,y,height and width - as this relies on too many factors like line width, font size etc.

Is there a better way to approach this problem / or a solution to this? Any help or input is much appreciated , thanks.

Note: I know Google offers App Script service and Google docs update API using which I can essentially achieve this. But this creates "revisions" on the Google doc and that is not acceptable for the user.

user13628417
  • 179
  • 8
  • I would try to see if you can get your application whitelisted. This makes it possible to get google docs to return an annotated canvas. Then you can get coordinates for text to simulate a highlight with the annotated canvas. See post for the whitelist link: https://stackoverflow.com/a/71321036/5432087 – Axtru Apr 07 '22 at 07:48
  • Any updates on this approach? – imLightSpeed Feb 02 '23 at 14:53
  • Yes, we went ahead and used the annotated canvas version of Google Docs to overcome this issue – user13628417 Feb 03 '23 at 10:00

0 Answers0