#inline tooltip translation

After the recent influx of attention this work received thanks to some amazing AO3 people sharing it around, I felt inspired to make the concept even easier to use by making a plugin! This will mean no more manually coding each translation in the HTML! It will (hopefully) be as simple as inserting a link, where you highlight the text you wish to include a translation for, click the "insert translation" button, paste your translation, click confirm, and voila! It should (theoretically) be inserted into the rich text editor with all the HTML automatically set up in the background! I'm attempting to make this plugin myself (my first time making a plugin, so please be patient haha) with the guidance of a couple of my friends who are much better at coding than I am.

My goals to accomplish for version 1:

Users will be able to highlight / select text inside the rich text editor.

Clicking the insert tooltip button will initialize the interface popup for inserting translations (or anything else you might need a tooltip for).

It will have extracted the part of the text the user highlighted and display it alongside a input box for adding the translation.

Users can type or paste the translation into the box, then click confirm.

The plugin will insert the code for a tooltip around the selected text in the background.

My goals for *possible* later versions:

Translation History Part 1 - Saving your translation history by exporting it as as JSON file, for those pesky times that you need to go back and edit a chapter or something.

Translation History Part 2 - Reverse engineering/extracting your translation history from existing chapters; using unique identifiers generated each time you previously made a translation, it would be able to read that back from AO3 to remake the translation data JSON in the event your computer dies or your file gets deleted or something... sorry if that phrasing is confusing. I'm not sure how else to phrase it.

Paragraph to Footnote linking - ↴ paragraph markers with your translations so if you prefer footnotes, you can link between the paragraph and the author's notes at the end of the chapter with ↱ return links! No more scrolling for footnotes! Easy bouncing back and forth!

Footnote wrangling - the ability to export all the translations you added to a chapter into one nice footnote file.

Tooltip CSS styler - The ability to generate custom workskin CSS for your tooltip format with simple, (so you don't have to have it styled like my default version from the previous chapter). It will be able to be styled in a way to match YOUR unique style!

Please note:

I plan for this to be ENTIRELY locally hosted on your own machine once installed.

Your data will stay self-contained to your own machine.

This will NOT require any remote cloud servers or anything like that to run.

You will NOT need to sign up for any sort of account to use the plugin.

And it will ONLY be using old-school extension coding methods and absolutely NO AI integration.

What I have working so far:

I've successfully added button on the end of the text editor button menu! It's ugly but it's there! And it properly returns whatever text you have selected to an alert box! One step closer! I plan to add custom icon art for the button or something. I haven't decided yet. Eh. I'll figure it out!