Embed the editor

Put the Athanor editor on your own page and drive it from code. A drop-in path for Marvin JS and Ketcher pages.

1. 1 · TutorialEmbed the Athanor editorLoad https://athanor.arbastro.com/app/embed/athanor-embed.js and call AthanorEmbed.create("#editor", { smiles: "CCO" }). The promise resolves to an editor you can set and read, and that tells you when it changes.
2. 2 · How-toThe athanor-editor elementLoad athanor-embed.js and write <athanor-editor smiles="c1ccccc1"></athanor-editor>. It takes smiles, tools, readonly, theme, label, stereo and src attributes and fires ready and change events.
3. 3 · ReferenceEmbed options and URL parametersPass options to AthanorEmbed.create: smiles or molfile to open with, tools for the toolbar, readOnly, theme, label, stereo, src, height and timeout. Each has a URL parameter on the editor address.
4. 4 · ReferenceThe embed protocol (version 1)Every message is a plain object with protocol "athanor-embed" and v 1. Send hello first; each request with an id gets exactly one reply; the editor sends ready and change events.
5. 5 · ConceptWho may talk to an embedded editorThe editor accepts messages only from the page that embeds it and only from an allowed origin, pinned at the first hello. Nothing is answered before the handshake, and a stranger gets no answer at all.
6. 6 · How-toHow to move from Marvin JS or Ketcher to AthanorReplace the Marvin JS scripts with https://athanor.arbastro.com/app/embed/athanor-marvin.js and keep the iframe. MarvinJSUtil.getEditor, importStructure, exportStructure and molchange keep working.