From b6095aff3fde231cb465dc1dd685ad474b2bc751 Mon Sep 17 00:00:00 2001
From: SheetJS <dev@sheetjs.com>
Date: Sat, 20 May 2023 17:37:10 -0400
Subject: [PATCH] xmldom

---
 .gitignore                                  |  1 +
 docz/docs/03-demos/03-net/09-dom.md         | 57 ++++++++++++++++++++-
 docz/docs/07-csf/07-features/01-formulae.md | 42 ++++++++-------
 docz/docs/07-csf/07-features/04-comments.md |  5 +-
 4 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5f4b662..ad84161 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 *.bak
 package-lock.json
 pnpm-lock.yaml
+docs
diff --git a/docz/docs/03-demos/03-net/09-dom.md b/docz/docs/03-demos/03-net/09-dom.md
index 4a9b00e..5e44e70 100644
--- a/docz/docs/03-demos/03-net/09-dom.md
+++ b/docz/docs/03-demos/03-net/09-dom.md
@@ -37,7 +37,7 @@ const workbook = XLSX.utils.table_to_book(tbl);
 XLSX.writeFile(workbook, "SheetJSDOM.xlsx");
 ```
 
-<details open><summary><b>Complete Demo</b> (click to hide)</summary>
+<details><summary><b>Complete Demo</b> (click to show)</summary>
 
 :::note
 
@@ -81,6 +81,61 @@ node SheetJSDOM.js
 
 The script will create a file `SheetJSDOM.xlsx` that can be opened.
 
+</details>
+
+### XMLDOM
+
+XMLDOM provides a DOM framework for NodeJS. Given an HTML string, a reference to
+the table element works with the SheetJS DOM methods after patching the object.
+
+<details><summary><b>Complete Demo</b> (click to show)</summary>
+
+:::note
+
+This demo was last tested on 2023 May 18 against XMLDOM `0.8.7`
+
+:::
+
+1) Install SheetJS and XMLDOM libraries:
+
+<CodeBlock language="bash">{`\
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @xmldom/xmldom@0.8.7`}
+</CodeBlock>
+
+2) Save the following codeblock to `SheetJSXMLDOM.js`:
+
+```js title="SheetJSXMLDOM.js"
+const XLSX = require("xlsx");
+const { DOMParser, XMLSerializer } = require("@xmldom/xmldom");
+
+(async() => {
+const text = await (await fetch('https://docs.sheetjs.com/dom/SheetJSTable.html')).text();
+const doc = new DOMParser().parseFromString( text, "text/html");
+const tbl = doc.getElementsByTagName("table")[0];
+
+/* patch XMLDOM */
+tbl.rows = Array.from(tbl.getElementsByTagName("tr"));
+tbl.rows.forEach(row => row.cells = Array.from(row.getElementsByTagName("td")))
+Object.defineProperty(tbl.__proto__, "innerHTML", { get: function() {
+	var outerHTML = new XMLSerializer().serializeToString(this);
+	if(outerHTML.match(/</g).length == 1) return "";
+	return outerHTML.slice(0, outerHTML.lastIndexOf("</")).replace(/<[^"'>]*(("[^"]*"|'[^']*')[^"'>]*)*>/, "");
+}});
+
+const workbook = XLSX.utils.table_to_book(tbl);
+XLSX.writeFile(workbook, "SheetJSXMLDOM.xlsx");
+})();
+```
+
+3) Run the script:
+
+```bash
+node SheetJSXMLDOM.js
+```
+
+The script will create a file `SheetJSXMLDOM.xlsx` that can be opened.
+
+
 </details>
 
 ### CheerioJS
diff --git a/docz/docs/07-csf/07-features/01-formulae.md b/docz/docs/07-csf/07-features/01-formulae.md
index a7a2dc7..51ad96b 100644
--- a/docz/docs/07-csf/07-features/01-formulae.md
+++ b/docz/docs/07-csf/07-features/01-formulae.md
@@ -144,28 +144,32 @@ The following code block fetches the file, parses and prints info on cell `D1`:
 ```jsx live
 /* The live editor requires this function wrapper */
 function ConcatFormula(props) {
-  const [text, setText] = React.useState([]);
+  const [ws, setWS] = React.useState({"!ref":"A1"});
+  const [addr, setAddr] = React.useState("D1");
+  const setaddr = React.useCallback((evt)=>{ setAddr(evt.target.value) });
 
-  /* Fetch and display formula */
+  /* Process ArrayBuffer */
+  const process_ab = (ab) => {
+    const wb = XLSX.read(ab, {cellFormula: true, sheetStubs: true});
+    setWS(wb.Sheets[wb.SheetNames[0]]);
+  };
+
+  /* Fetch sample file */
   React.useEffect(async() => {
-    /* Fetch file */
-    const ab = await (await fetch("/files/concat.xlsx")).arrayBuffer();
-
-    /* Parse file */
-    const wb = XLSX.read(ab, {cellFormula: true});
-    const ws = wb.Sheets[wb.SheetNames[0]];
-
-    /* Look at cell D1 */
-    const addr = "D1";
-    const { t, v, f } = ws[addr];
-    setText(`\
-CELL ADDRESS: ${addr}\n\
-CELL FORMULA: ${f}\n\
-VALUE (TYPE): "${v}" ("${t}")\n\
-`);
+    process_ab(await (await fetch("/files/concat.xlsx")).arrayBuffer());
   }, []);
-
-  return (<pre>{text}</pre>);
+  const process_file = async(e) => {
+    process_ab(await e.target.files[0].arrayBuffer());
+  };
+  return ( <>
+    <input type="file" onChange={process_file}/><br/>
+    <b>addr: </b><input type="text" value={addr} onChange={setaddr} size="6"/>
+    {!ws[addr] ? ( <b>Cell {addr} not found</b> ) : ( <table>
+      <tr><td>Formula</td><td><code>{ws[addr].f}</code></td></tr>
+      <tr><td>Value</td><td><code>{ws[addr].v}</code></td></tr>
+      <tr><td>Cell Type</td><td><code>{ws[addr].t}</code></td></tr>
+    </table> )}
+  </> );
 }
 ```
 
diff --git a/docz/docs/07-csf/07-features/04-comments.md b/docz/docs/07-csf/07-features/04-comments.md
index 32a2ea7..fed2ef4 100644
--- a/docz/docs/07-csf/07-features/04-comments.md
+++ b/docz/docs/07-csf/07-features/04-comments.md
@@ -21,9 +21,10 @@ allow users to "reply". The original "Comments" were renamed to "Notes".
 | XLML              |   ✔   |    ✔    |    *     |
 | SYLK              |       |    *    |    *     |
 | ODS / FODS / UOS  |   ✔   |    R    |    *     |
+| NUMBERS           |   *   |    *    |          |
 
-Asterisks (*) mark features that are not supported by the file formats. There is
-no way to specify a threaded comment in the SYLK format.
+Asterisks (*) mark features that are not supported by the file formats. Numbers
+supports plaintext threaded comments but does not support Excel styled comments.
 
 The letter R (R) marks features parsed but not written in the format.