Enhanced chemical formula formatting (#1445)

Author: BenjaminCharmes

webapp/cypress/component/ChemicalFormulaTest.cy.jsx

@@ -113,4 +113,73 @@ describe("ChemicalFormula", () => {
     cy.mount(ChemicalFormula, { props: { formula: "Δ-MnO2" } });
     cy.get("span").should("contain.html", "Δ-MnO<sub>2</sub>");
   });
+
+  it("handles fractional subscripts correctly", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "LiNi1/3Mn1/3Co1/3O2" } });
+    cy.get("span").should(
+      "contain.html",
+      "LiNi<sub>1/3</sub>Mn<sub>1/3</sub>Co<sub>1/3</sub>O<sub>2</sub>",
+    );
+  });
+
+  it("handles mixture notation with slashes correctly", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "NMC/C" } });
+    cy.get("span").should("contain.html", "NMC/C");
+  });
+
+  it("handles complex mixture with formula and slash", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Li2O/graphite" } });
+    cy.get("span").should("contain.html", "Li<sub>2</sub>O/graphite");
+  });
+
+  it("preserves explicit subscript tags", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Na<sub>x</sub>CoO2" } });
+    cy.get("span").should("contain.html", "Na<sub>x</sub>CoO<sub>2</sub>");
+  });
+
+  it("preserves explicit superscript tags", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Na<sup>+</sup>Cl<sup>-</sup>" } });
+    cy.get("span").should("contain.html", "Na<sup>+</sup>Cl<sup>-</sup>");
+  });
+
+  it("handles mixed explicit tags and auto-formatting", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Li<sub>1-x</sub>Ni0.8Co0.2O2" } });
+    cy.get("span").should(
+      "contain.html",
+      "Li<sub>1-x</sub>Ni<sub>0.8</sub>Co<sub>0.2</sub>O<sub>2</sub>",
+    );
+  });
+
+  it("handles fractions with multiple elements correctly", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Li1/2Mn1/2O2" } });
+    cy.get("span").should("contain.html", "Li<sub>1/2</sub>Mn<sub>1/2</sub>O<sub>2</sub>");
+  });
+
+  it("handles mixed fractions and decimals", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "LiNi1/3Co0.1Mn0.1O2" } });
+    cy.get("span").should(
+      "contain.html",
+      "LiNi<sub>1/3</sub>Co<sub>0.1</sub>Mn<sub>0.1</sub>O<sub>2</sub>",
+    );
+  });
+
+  it("handles slash at start for phase notation", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "α-NMC/C/binder" } });
+    cy.get("span").should("contain.html", "α-NMC/C/binder");
+  });
+
+  it("handles complex formula with all features", () => {
+    cy.mount(ChemicalFormula, {
+      props: { formula: "Li<sub>1-x</sub>Ni1/3Mn1/3Co1/3O2/graphite" },
+    });
+    cy.get("span").should(
+      "contain.html",
+      "Li<sub>1-x</sub>Ni<sub>1/3</sub>Mn<sub>1/3</sub>Co<sub>1/3</sub>O<sub>2</sub>/graphite",
+    );
+  });
+
+  it("preserves multiple explicit tags in sequence", () => {
+    cy.mount(ChemicalFormula, { props: { formula: "Ca<sup>2+</sup>(OH)<sub>2</sub>" } });
+    cy.get("span").should("contain.html", "Ca<sup>2+</sup>(OH)<sub>2</sub>");
+  });
 });

webapp/src/components/ChemicalFormula.vue

@@ -38,7 +38,7 @@ export default {
 
       // Create a regex that matches either element symbols or sequences of digits/periods
       const validFormulaRegex = new RegExp(
-        `^[A-Za-z0-9.+x()\\[\\]\\s${greekLetters.replace(/\|/g, "")}${specialChars.replace(
+        `^[A-Za-z0-9.+x()\\[\\]\\/\\s<>${greekLetters.replace(/\|/g, "")}${specialChars.replace(
           /\|/g,
           "",
         )}-]+$`,
@@ -53,6 +53,15 @@ export default {
 
       let formatted = this.formula;
 
+      const tagPlaceholders = [];
+      let tagIndex = 0;
+      formatted = formatted.replace(/<(sub|sup)>(.*?)<\/\1>/g, (match) => {
+        const placeholder = `__TAG_${tagIndex}__`;
+        tagPlaceholders.push({ placeholder, content: match });
+        tagIndex++;
+        return placeholder;
+      });
+
       formatted = formatted.replace(/\.(?=\s*[A-Z([∙•])/g, " · ");
 
       formatted = formatted.replace(/[∙•]/g, " · ");
@@ -61,6 +70,13 @@ export default {
         return `<span data-bracket>${content}</span><span data-number>${number}</span>`;
       });
 
+      formatted = formatted.replace(
+        new RegExp(`(${elementSymbols})(\\d+/\\d+)`, "g"),
+        (match, element, fraction) => {
+          return `${element}<sub>${fraction}</sub>`;
+        },
+      );
+
       formatted = formatted.replace(/([A-Z][a-z]?)(\d+)([+-])(?=\s|$|[A-Z])/g, "$1<sup>$2$3</sup>");
 
       formatted = formatted.replace(/([A-Z][a-z]?)([+-])(?=\s|$|[A-Z])/g, "$1<sup>$2</sup>");
@@ -82,6 +98,10 @@ export default {
         "[$1]<sub>$2</sub>",
       );
 
+      tagPlaceholders.forEach(({ placeholder, content }) => {
+        formatted = formatted.replace(placeholder, content);
+      });
+
       return formatted;
     },
   },