[Feature] Ketcher V3 (#427)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#427

templates/modals/objects/add_structure_modal.html

@@ -59,22 +59,33 @@
           <label class="label" for="structure-smiles">
             <span class="label-text">SMILES</span>
           </label>
-          <input
-            type="text"
-            class="input input-bordered w-full"
-            name="structure-smiles"
-            placeholder="SMILES"
-            id="structure-smiles"
-          />
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="structure-smiles"
+              placeholder="SMILES"
+              id="structure-smiles"
+            />
+            <input
+              type="hidden"
+              name="structure-molfile"
+              id="structure-molfile"
+            />
+            <button
+              type="button"
+              id="render-structure-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
         </div>
 
         <div class="mb-3">
-          <iframe
-            id="add_structure_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+          {% with iframe_id="add_structure_ketcher" height="624" text_input_id="structure-smiles" molfile_input_id="structure-molfile" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
         </div>
       </form>
     </div>
@@ -110,28 +121,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
-
 <script>
-  document
-    .getElementById("add_structure_ketcher")
-    .addEventListener("load", function () {
-      const iframe = this;
-      const checkKetcherReady = () => {
-        const win = iframe.contentWindow;
-        if (win.ketcher && "editor" in win.ketcher) {
-          win.ketcher.editor.event.change.handlers.push({
-            once: false,
-            priority: 0,
-            f: function () {
-              document.getElementById("structure-smiles").value =
-                this.ketcher.getSmiles();
-            },
-            ketcher: win.ketcher,
-          });
-        } else {
-          setTimeout(checkKetcherReady, 100);
-        }
-      };
-      checkKetcherReady();
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-structure-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("structure-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
     });
+  });
 </script>