feat: add OCL Reaction editor module

package.json

@@ -82,7 +82,7 @@
     "mf-parser": "^1.5.0",
     "mime-types": "^2.1.35",
     "node-jsgraph": "2.4.15",
-    "openchemlib": "^9.6.0",
+    "openchemlib": "^9.14.0",
     "quill": "2.0.2",
     "quill-resize-module": "^2.0.4",
     "quill-table-better": "^1.2.1",
@@ -92,6 +92,6 @@
     "twig": "^1.17.1"
   },
   "volta": {
-    "node": "20.19.1"
+    "node": "20.19.5"
   }
 }

src/modules/types/science/chemistry/folder.json

@@ -12,6 +12,10 @@
       "moduleName": "OCL Molecule editor",
       "url": "modules/types/science/chemistry/ocl_editor/"
     },
+    {
+      "moduleName": "OCL Reaction editor",
+      "url": "modules/types/science/chemistry/ocl_reaction_editor/"
+    },
     {
       "moduleName": "Periodic table",
       "url": "modules/types/science/chemistry/periodic_table/"

src/modules/types/science/chemistry/ocl_editor/controller.js

@@ -21,7 +21,7 @@ define([
           'modules/types/science/chemistry/ocl_editor/help.html',
         );
         ui.dialog(
-          `<iframe src=${url} width="100%", height="100%" frameBorder="0"></iframe>`,
+          `<iframe src=${url} width="100%" height="100%" frameBorder="0"></iframe>`,
           {
             width: Math.min(w - 40, 800),
             height: h - 70,
@@ -103,7 +103,7 @@ define([
 
   Controller.prototype.moduleInformation = {
     name: 'OCL Molecule editor',
-    description: 'Molecule editor using the openchemlib javascript library',
+    description: 'Molecule editor using the OpenChemLib JavaScript library',
     author: 'Michael Zasso',
     date: '11.05.2015',
     license: 'BSD',

src/modules/types/science/chemistry/ocl_editor/view.js

@@ -27,24 +27,10 @@ define(['modules/default/defaultview', 'src/util/ui', 'openchemlib'], function (
         let pastedData = clipboardData.getData('text');
         if (!pastedData) return;
 
-        let molecule;
-        try {
-          if (/M {2}END/.test(pastedData)) {
-            molecule = OCL.Molecule.fromMolfile(pastedData);
-          } else {
-            try {
-              molecule = OCL.Molecule.fromSmiles(pastedData.trim());
-            } catch {
-              molecule = OCL.Molecule.fromIDCode(pastedData.trim());
-            }
-          }
-          if (molecule) {
-            setCurrentValue(this, molecule);
-            event.preventDefault();
-          }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(error);
+        const molecule = OCL.Molecule.fromText(pastedData);
+        if (molecule) {
+          setCurrentValue(this, molecule);
+          event.preventDefault();
         }
       });
     },

src/modules/types/science/chemistry/ocl_reaction_editor/controller.js

@@ -0,0 +1,171 @@
+'use strict';
+
+define([
+  'modules/default/defaultcontroller',
+  'openchemlib',
+  'src/util/ui',
+], function (Default, OCL, ui) {
+  function Controller() {}
+
+  $.extend(true, Controller.prototype, Default);
+
+  Controller.prototype.getToolbar = function () {
+    const base = Default.getToolbar.call(this);
+    base.unshift({
+      onClick() {
+        const w = $(window).width();
+        const h = $(window).height();
+        const url = require.toUrl(
+          'modules/types/science/chemistry/ocl_editor/help.html',
+        );
+        ui.dialog(
+          `<iframe src=${url} width="100%" height="100%" frameBorder="0"></iframe>`,
+          {
+            width: Math.min(w - 40, 800),
+            height: h - 70,
+            title: 'OpenChemLib editor Help',
+          },
+        );
+      },
+      title: 'Help',
+      cssClass: 'fa fa-question',
+      ifLocked: true,
+    });
+    base.unshift({
+      onClick: () => {
+        if (navigator.clipboard) {
+          navigator.clipboard.readText().then((text) => {
+            this.module.view.onActionReceive.addProduct.call(
+              this.module.view,
+              text,
+            );
+          });
+        }
+      },
+      title: 'Add product from clipboard (RXN, SMILES or ID code)',
+      cssClass: 'fa fa-paste',
+      ifLocked: true,
+    });
+    base.unshift({
+      onClick: () => {
+        if (navigator.clipboard) {
+          navigator.clipboard.readText().then((text) => {
+            this.module.view.onActionReceive.addReactant.call(
+              this.module.view,
+              text,
+            );
+          });
+        }
+      },
+      title: 'Add reactant from clipboard (RXN, SMILES or ID code)',
+      cssClass: 'fa fa-paste',
+      ifLocked: true,
+    });
+    base.unshift({
+      onClick: () => {
+        const rxnV3 = this.module.view.editor.getReaction().toRxnV3();
+        ui.copyToClipboard(rxnV3, {
+          successMessage: 'RXN V3000 copied to the clipboard',
+        });
+      },
+      title: 'Copy RXN V3000 to clipboard',
+      cssClass: 'fa fa-copy',
+      ifLocked: true,
+    });
+    return base;
+  };
+
+  Controller.prototype.moduleInformation = {
+    name: 'OCL Reaction Editor',
+    description: 'Reaction editor using the OpenChemLib JavaScript library',
+    author: 'Michael Zasso',
+    date: '29.10.2025',
+    license: 'BSD',
+    cssClass: 'ocl_reaction_editor',
+  };
+
+  Controller.prototype.references = {
+    rxn: { label: 'RXN V2000' },
+    rxnV3: { label: 'RXN V3000' },
+    smiles: { label: 'SMILES' },
+    reactionIdCode: { label: 'OCL reaction ID code' },
+  };
+
+  Controller.prototype.variablesIn = [
+    'rxn',
+    'rxnV3',
+    'smiles',
+    'reactionIdCode',
+  ];
+
+  Controller.prototype.events = {
+    onReactionChange: {
+      label: 'Reaction has changed',
+      refVariable: ['rxn', 'rxnV3', 'smiles', 'reactionIdCode'],
+    },
+  };
+
+  Controller.prototype.actionsIn = $.extend({}, Default.actionsIn, {
+    addReactant: 'Add a reactant from text (molfile, SMILES, or ID code)',
+    addProduct: 'Add a product from text (molfile, SMILES, or ID code)',
+  });
+
+  Controller.prototype.configurationStructure = function () {
+    return {
+      groups: {
+        group: {
+          options: { type: 'list' },
+          fields: {
+            prefs: {
+              type: 'checkbox',
+              title: 'Options',
+              options: {
+                queryFeatures: 'Enable query features',
+                inPlace: 'Modify input variable',
+              },
+            },
+          },
+        },
+      },
+    };
+  };
+
+  Controller.prototype.configAliases = {
+    prefs: ['groups', 'group', 0, 'prefs', 0],
+  };
+
+  Controller.prototype.onChange = function (event, reaction) {
+    const inPlace = this.module.getConfigurationCheckbox('prefs', 'inPlace');
+    const idCode = OCL.ReactionEncoder.encode(reaction) || '';
+    const rxn = reaction.toRxn();
+    const rxnV3 = reaction.toRxnV3();
+    const smiles = reaction.toSmiles();
+    this.createDataFromEvent('onReactionChange', 'rxn', rxn);
+    this.createDataFromEvent('onReactionChange', 'rxnV3', rxnV3);
+    this.createDataFromEvent('onReactionChange', 'smiles', smiles);
+    this.createDataFromEvent('onReactionChange', 'reactionIdCode', idCode);
+
+    if (inPlace && this.module.view._currentType) {
+      const currentValue = this.module.view._currentValue;
+      switch (this.module.view._currentType) {
+        case 'rxn':
+          currentValue.setValue(rxn);
+          break;
+        case 'rxnV3':
+          currentValue.setValue(rxnV3);
+          break;
+        case 'smiles':
+          currentValue.setValue(smiles);
+          break;
+        case 'reactionIdCode':
+          currentValue.setValue(idCode);
+          break;
+        default:
+          throw new Error('invalid reaction value type');
+      }
+      this.module.model.dataTriggerChange(currentValue);
+    }
+  };
+
+  return Controller;
+});

src/modules/types/science/chemistry/ocl_reaction_editor/model.js

@@ -0,0 +1,9 @@
+'use strict';
+
+define(['modules/default/defaultmodel'], function (Default) {
+  function Model() {}
+
+  $.extend(true, Model.prototype, Default);
+
+  return Model;
+});