From b59c6c8b58dd509c08777090561ff14c4e56e0db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 1 Jun 2026 17:50:17 +0200
Subject: [PATCH] Table formatting WIP

---
 static/images/icon_table.svg | 49 ++++++++++++++++++++++++++++++++++++
 static/js/page_node.mjs      | 44 ++++++++++++++++++++++++++++++--
 2 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 static/images/icon_table.svg

diff --git a/static/images/icon_table.svg b/static/images/icon_table.svg
new file mode 100644
index 0000000..9379dfc
--- /dev/null
+++ b/static/images/icon_table.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="7.1437349mm"
+   height="6.3499999mm"
+   viewBox="0 0 7.1437349 6.3499999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_table.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.81067621"
+     inkscape:cx="69.078134"
+     inkscape:cy="155.4258"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-86.666022,-107.47612)">
+    <title
+       id="title1">table</title>
+    <path
+       d="m 87.459775,107.47612 h 5.556243 a 0.79374826,0.79374826 0 0 1 0.793739,0.79375 v 4.7625 a 0.79374826,0.79374826 0 0 1 -0.793739,0.79375 h -5.556243 a 0.79374826,0.79374826 0 0 1 -0.793753,-0.79375 v -4.7625 a 0.79374826,0.79374826 0 0 1 0.793753,-0.79375 m 0,1.5875 v 1.58749 h 2.381245 v -1.58749 h -2.381245 m 3.174998,0 v 1.58749 h 2.381245 v -1.58749 h -2.381245 m -3.174998,2.38125 v 1.5875 h 2.381245 v -1.5875 h -2.381245 m 3.174998,0 v 1.5875 h 2.381245 v -1.5875 z"
+       id="path1"
+       style="stroke-width:0.396873" />
+  </g>
+</svg>
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index fc050d4..753aa46 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<style>
 				.el-functions {
 					display: grid;
-					grid-template-columns: 1fr min-content;
+					grid-template-columns: 1fr min-content min-content;
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
@@ -27,6 +27,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<div data-el="functions">
 				<img data-el="icon-markdown">
 				<img data-el="icon-save" src="/images/${_VERSION}/icon_save_disabled.svg">
+				<img data-el="icon-table-format" src="/images/${_VERSION}/icon_table.svg">
 			</div>
 		`
 	}// }}}
@@ -74,6 +75,14 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
 		this.elNodeContent.addEventListener('paste', async (event) => this.pasteHandler(event))
 		this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
+		this.elIconTableFormat.addEventListener('click', () => {
+			const from = this.elNodeContent.selectionStart
+			const to = this.elNodeContent.selectionEnd
+			const sel = this.elNodeContent.value.slice(from, to)
+
+			this.formatTable(sel)
+
+		})
 
 		this.showMarkdown(true)
 	}// }}}
@@ -134,7 +143,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 					if (!file)
 						throw new Error("Couldn't convert image to file object.")
 					const uuid = uuidv7()
-					await globalThis.nodeStore.files.add({ data: { UUID: uuid, file: file }})
+					await globalThis.nodeStore.files.add({ data: { UUID: uuid, file: file } })
 
 					const [start, end] = [this.elNodeContent.selectionStart, this.elNodeContent.selectionEnd]
 					this.elNodeContent.setRangeText(`![${file.name}](db://${uuid})`, start, end, 'select');
@@ -155,6 +164,37 @@ export class N2PageNodeUI extends CustomHTMLElement {
 		this.elNodeContent.selectionEnd = data.position.end
 		this.elNodeContent.focus()
 	}// }}}
+	formatTable(t) {
+		const lines = t.split(/\r?\n/)
+		if (lines < 1)
+			return
+
+		let first = -1
+		let last = -1
+		let numColumns = 0
+		let colwidth = []
+
+		for (let i = 0; i < lines.length; i++) {
+			// -1 for split, -1 because number of columns are one less than number of pipes.
+			const columns = lines[i].split('|')
+			const linecols = columns.length - 1 - 1
+			numColumns = Math.max(numColumns, linecols)
+
+			if (linecols >= 1) {
+				if (first == -1)
+					first = i
+				last = i
+				continue
+			}
+
+			if (linecols < 1 && last > -1)
+				break
+
+			// Keep count of column width
+		}
+
+		console.log(first, last, columns)
+	}
 }
 customElements.define('n2-nodeui', N2PageNodeUI)