[Feature] Ketcher V3 (#427)

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

templates/modals/collections/new_reaction_modal.html

@@ -55,16 +55,33 @@
           />
         </div>
 
-        <div class="mb-3">
-          <iframe
-            id="new_reaction_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+        <div class="form-control mb-3">
+          <label class="label" for="reaction-smirks">
+            <span class="label-text">Reaction SMILES</span>
+          </label>
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="reaction-smiles"
+              placeholder="Reaction SMILES"
+              id="reaction-smiles"
+            />
+            <button
+              type="button"
+              id="render-reaction-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
         </div>
 
-        <input type="hidden" name="reaction-smirks" id="reaction-smirks" />
+        <div class="mb-3">
+          {% with iframe_id="new_reaction_ketcher" height="624" text_input_id="reaction-smiles" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
+        </div>
       </form>
     </div>
 
@@ -81,11 +98,7 @@
       <button
         type="button"
         class="btn btn-primary"
-        @click="
-          const k = getKetcher('new_reaction_ketcher');
-          document.getElementById('reaction-smirks').value = k.getSmiles();
-          submit('new-reaction-modal-form');
-        "
+        @click="submit('new-reaction-modal-form');"
         :disabled="isSubmitting"
       >
         <span x-show="!isSubmitting">Submit</span>
@@ -103,3 +116,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-reaction-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("reaction-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
+    });
+  });
+</script>