Integrated spreadsheet system into markdown

js/markdown.js

@@ -226,6 +226,7 @@ class MDUtils {
 	 * @returns {string} escaped HTML
 	 */
 	static escapeHTML(str, encodeNewlinesAsBreaks=false) {
+		if (typeof str !== 'string') return '';
 		var html = str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 		if (encodeNewlinesAsBreaks) {
 			html = html.replace(/\n/g, "<br>\n");

js/spreadsheet.js

@@ -2686,47 +2686,10 @@ class SpreadsheetGrid {
 	outputValueAt(address) {
 		return this.cellAt(address)?.outputValue;
 	}
-
-	applyToTable() {
-		for (const column of this.cells) {
-			for (const cell of column) {
-				cell.applyToBlock();
-			}
-		}
-	}
-
-	/**
-	 * @param {MDTableBlock} tableBlock
-	 * @param {MDState} state
-	 * @returns {SpreadsheetGrid}
-	 */
-	static fromTableBlock(tableBlock, state) {
-		var columnCount = tableBlock.headerRow.cells.length;
-		for (const row of tableBlock.bodyRows) {
-			columnCount = Math.max(columnCount, row.cells.length);
-		}
-		const rowCount = tableBlock.bodyRows.length;
-		const grid = new SpreadsheetGrid(columnCount, rowCount);
-		for (var c = 0; c < columnCount; c++) {
-			for (var r = 0; r < rowCount; r++) {
-				const cellBlock = tableBlock.bodyRows[r].cells[c];
-				if (cellBlock === undefined) continue;
-				const cell = grid.cells[c][r];
-				cell.block = cellBlock;
-				cell.originalValue = CellValue.fromCellString(cellBlock.content.toPlaintext(state));
-			}
-		}
-		return grid;
-	}
 }
 
 class SpreadsheetCell {
 	/**
-	 * @type {MDTableCellBlock|null}
-	 */
-	block = null;
-
-	/**
 	 * @type {CellValue}
 	 */
 	originalValue = CellValue.BLANK;
@@ -2746,18 +2709,6 @@ class SpreadsheetCell {
 	 * @type {CellValue|null}
 	 */
 	get resolvedValue() { return this.outputValue ?? this.originalValue; }
-
-	applyToBlock() {
-		if (this.block === null) return;
-		const resolvedValue = this.outputValue ?? this.originalValue;
-		const num = resolvedValue.numericValue;
-		if (num !== null) {
-			this.block.attributes['data-numeric-value'] = `${num}`;
-		}
-		if (this.outputValue === null) return;
-		this.block.content = new MDInlineBlock(new MDTextSpan(this.outputValue.formattedValue));
-		this.block.cssClasses.push('calculated', `type-${this.outputValue.type}`);
-	}
 }
 
 class SpreadsheetBlockReader extends MDBlockReader {
@@ -2768,7 +2719,7 @@ class SpreadsheetBlockReader extends MDBlockReader {
 	postProcess(state, blocks) {
 		for (const block of blocks) {
 			if (block instanceof MDTableBlock) {
-				this.#processTable(tableBlock, state);
+				this.#processTable(block, state);
 			}
 		}
 	}
@@ -2778,7 +2729,66 @@ class SpreadsheetBlockReader extends MDBlockReader {
 	 * @param {MDState} state
 	 */
 	#processTable(tableBlock, state) {
-		const grid = SpreadsheetGrid.fromTableBlock(tableBlock, state);
-		// TODO
+		// Measure table
+		const rowCount = tableBlock.bodyRows.length;
+		var columnCount = 0;
+		for (const row of tableBlock.bodyRows) {
+			columnCount = Math.max(columnCount, row.cells.length);
+		}
+
+		// Create and populate grid
+		const grid = new SpreadsheetGrid(columnCount, rowCount);
+		for (var c = 0; c < columnCount; c++) {
+			for (var r = 0; r < rowCount; r++) {
+				const cellBlock = tableBlock.bodyRows[r].cells[c];
+				if (cellBlock === undefined) continue;
+				const cellText = cellBlock.toPlaintext(state);
+				const gridCell = grid.cells[c][r];
+				gridCell.originalValue = CellValue.fromCellString(cellText);
+			}
+		}
+
+		// Calculate
+		const expressions = new CellExpressionSet(grid);
+		expressions.calculateCells();
+
+		// See if anything was calculated. If not, don't mess with table.
+		var isCalculated = false;
+		for (var c = 0; c < columnCount && !isCalculated; c++) {
+			for (var r = 0; r < rowCount; r++) {
+				if (grid.cells[c][r].isCalculated) {
+					isCalculated = true;
+					break;
+				}
+			}
+		}
+		if (!isCalculated) return;
+
+		// Copy results back to table
+		for (var c = 0; c < columnCount; c++) {
+			for (var r = 0; r < rowCount; r++) {
+				const cellBlock = tableBlock.bodyRows[r].cells[c];
+				if (cellBlock === undefined) continue;
+				const gridCell = grid.cells[c][r];
+				const gridValue = gridCell.outputValue;
+				const cellText = gridValue.formattedValue;
+				cellBlock.content = new MDInlineBlock(new MDTextSpan(cellText));
+				if (gridCell.isCalculated) {
+					cellBlock.cssClasses.push('calculated');
+				}
+				cellBlock.cssClasses.push(`spreadsheet-type-${gridValue.type}`);
+				if (gridValue.type == CellValue.TYPE_ERROR) {
+					cellBlock.attributes['title'] = gridValue.value;
+				}
+				const gridNumber = gridValue.numericValue();
+				if (gridNumber !== null) {
+					cellBlock.attributes['data-numeric-value'] = `${gridNumber}`;
+				}
+				const gridString = gridValue.stringValue(false);
+				if (gridString !== null) {
+					cellBlock.attributes['data-string-value'] = gridString;
+				}
+			}
+		}
 	}
 }

markdownjs.html

@@ -12,6 +12,7 @@
 				--color-editor-text: white;
 				--color-table-header: #ddd;
 				--color-table-border: black;
+				--color-calculated-background: #eee;
 			}
 			:root, body {
 				width: 100%;
@@ -53,6 +54,15 @@
 				background-color: var(--color-editor-background);
 				color: var(--color-editor-text);
 			}
+			.calculated {
+				background-color: var(--color-calculated-background);
+				font-style: italic;
+			}
+			.spreadsheet-type-number,
+			.spreadsheet-type-currency,
+			.spreadsheet-type-percent {
+				text-align: right;
+			}
 			table {
 				border-collapse: collapse;
 			}
@@ -69,18 +79,21 @@
 					--color-text: white;
 					--color-table-header: #333;
 					--color-table-border: #ccc;
+					--color-calculated-background: #444;
 				}
 			}
 		</style>
 		<script src="js/markdown.js"></script>
+		<script src="js/spreadsheet.js"></script>
 		<script>
+			var parser = new Markdown([ ...Markdown.allBlockReaders, new SpreadsheetBlockReader() ], Markdown.allInlineReaders);
 			function onDocumentLoad() {
 				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);
 				setTimeout(onMarkdownChange, 0);
 			}
 			function onMarkdownChange() {
 				let markdown = document.getElementById('markdowninput').value;
-				let html = Markdown.completeParser.toHTML(markdown);
+				let html = parser.toHTML(markdown);
 				document.getElementById('preview').innerHTML = html;
 			}