From c86136c0c9e8a15b6c7ed08b1dc58b943db1730e Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Mon, 15 Dec 2025 10:24:19 +0100
Subject: [PATCH 1/2] refactor: use `getNextCustomAtomLabel` from openchemlib

Refs: https://github.com/zakodium-oss/react-ocl/issues/62
---
 package-lock.json                           |  8 ++++----
 package.json                                |  2 +-
 src/components/canvas/canvas_editor_hook.ts |  4 ++--
 src/components/svg/svg_editor.tsx           | 16 +++++-----------
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e885eb..d33edeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "eslint-config-cheminfo-typescript": "^20.0.0",
         "eslint-plugin-storybook": "^9.1.16",
         "jsdom": "^26.1.0",
-        "openchemlib": "^9.16.0",
+        "openchemlib": "^9.18.2",
         "playwright": "^1.56.1",
         "prettier": "^3.6.2",
         "react": "^19.2.0",
@@ -6347,9 +6347,9 @@
       }
     },
     "node_modules/openchemlib": {
-      "version": "9.16.0",
-      "resolved": "https://registry.npmjs.org/openchemlib/-/openchemlib-9.16.0.tgz",
-      "integrity": "sha512-ES1rUp8WjRKwLB0E8R/7bsjMb1tRPJjXD+QzNv1lwj0mA0aVXlmTi7nnR3GfjBSLiqNej7GbO8dkXR283CTXuw==",
+      "version": "9.18.2",
+      "resolved": "https://registry.npmjs.org/openchemlib/-/openchemlib-9.18.2.tgz",
+      "integrity": "sha512-amgDEgH7lLOBGg3sS2XmxjY+n6zC8M+ohJqNgifKACkbjPuzmnzs85rbMHcAndMzn7e6hh7IwJ8FByWKdBhGSg==",
       "dev": true,
       "license": "BSD-3-Clause"
     },
diff --git a/package.json b/package.json
index 1e577be..7300600 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "eslint-config-cheminfo-typescript": "^20.0.0",
     "eslint-plugin-storybook": "^9.1.16",
     "jsdom": "^26.1.0",
-    "openchemlib": "^9.16.0",
+    "openchemlib": "^9.18.2",
     "playwright": "^1.56.1",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
diff --git a/src/components/canvas/canvas_editor_hook.ts b/src/components/canvas/canvas_editor_hook.ts
index 5caa14e..99424e2 100644
--- a/src/components/canvas/canvas_editor_hook.ts
+++ b/src/components/canvas/canvas_editor_hook.ts
@@ -286,10 +286,10 @@ function getReactionChangeApi(
       return ReactionEncoder.encode(editor.getReaction()) ?? '';
     },
     getRxn(programName?: string) {
-      return editor.getReaction().toRxn(programName);
+      return editor.getReaction().toRxn({ programName });
     },
     getRxnV3(programName?: string) {
-      return editor.getReaction().toRxnV3(programName);
+      return editor.getReaction().toRxnV3({ programName });
     },
     getSmiles() {
       return editor.getReaction().toSmiles();
diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index 8f7f017..113ebb1 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -13,12 +13,7 @@ import {
   isCleanEvent,
   isQuickNumberingEvent,
 } from './editor/events_predicate.js';
-import {
-  getNextCustomLabel,
-  getPreviousCustomLabel,
-  moleculeCustomLabels,
-  splitCustomLabels,
-} from './editor/quick_numbering.js';
+import { getPreviousCustomLabel } from './editor/quick_numbering.js';
 import type { State } from './editor/reducer.js';
 import { stateReducer } from './editor/reducer.js';
 import { useHighlight } from './editor/use_highlight.js';
@@ -88,13 +83,12 @@ export function SvgEditor(props: SvgEditorProps) {
       const lastInputLabel = lastInputLabelRef.current;
       const newMolecule = molecule.getCompactCopy();
 
-      const existingLabels = splitCustomLabels(
-        moleculeCustomLabels(newMolecule),
+      const nextLabel = newMolecule.getNextCustomAtomLabel(
+        lastInputLabel ? `]${lastInputLabel}` : ']1',
       );
-      const nextLabel = getNextCustomLabel(lastInputLabel, existingLabels);
 
-      newMolecule.setAtomCustomLabel(atomId, `]${nextLabel}`);
-      setLastInputLabel(nextLabel);
+      newMolecule.setAtomCustomLabel(atomId, nextLabel);
+      setLastInputLabel(nextLabel.replaceAll(']', ''));
       onChangeRef.current(newMolecule);
     }
 

From 44fa0ee4513d8ec542a3fe7476abe6dc75342b73 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Fri, 19 Dec 2025 09:40:47 +0100
Subject: [PATCH 2/2] fix: add `]` in nextLabel if needed

---
 src/components/svg/svg_editor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index 113ebb1..bb33399 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -83,9 +83,10 @@ export function SvgEditor(props: SvgEditorProps) {
       const lastInputLabel = lastInputLabelRef.current;
       const newMolecule = molecule.getCompactCopy();
 
-      const nextLabel = newMolecule.getNextCustomAtomLabel(
+      let nextLabel = newMolecule.getNextCustomAtomLabel(
         lastInputLabel ? `]${lastInputLabel}` : ']1',
       );
+      if (!nextLabel.startsWith(']')) nextLabel = `]${nextLabel}`;
 
       newMolecule.setAtomCustomLabel(atomId, nextLabel);
       setLastInputLabel(nextLabel.replaceAll(']', ''));