I am building a web-based annotation tool, where end users can select and annotate a section of text from an HTML document. Programmatically speaking, accessing and working with the selected text and corresponding range is straightforward using "window.getSelection" and "getRangeAt".
I am running into a problem, however, when I try to put all of this together in a cross-browser application. Everything works find in Firefox, but in Safari I noticed immediately that when I click on an HTML Button (i.e. the "annotation" button), the current user text selection goes away, as if clicking on the button repositioned the text caret. My code that attempts to access the window.getSelection executes from a script in this button, which then reports that no selection exists.
I dug in and took a look at how Google Docs, specifically their word-processing application handles this, as essentially the behavior and mechanics of selecting text and clicking "Bold" or "Change Font" corresponds to my annotation function. In Google Docs, they load the text of the document to be edited into an iframe. Playing around with this, I learned that Firefox out-of-the-box supports multiple selection ranges in a web page that contains multiple frames, or iframes. In other words, I can select a section of text in the base page, and a separate section of text in the iframe without the first selection disappearing. This Google Docs solution works for both Firefox and Safari (the two browsers that I'm interested in). But when I built a simple example page to test this solution, it would not work in Safari. As soon as I click a button or make text selection in the root page (outside of the iframe) the current iframe selected text goes away.
Anyone know what I'm missing here to get this to work? Or have a suggestion on another way to get this to work?