mirror of https://github.com/requarks/wiki
NGPixel
1 month ago
parent
8cd2f0de43
commit
21fac3a94e
@ -0,0 +1,248 @@
|
||||
/**
|
||||
* Markdown tables, written and read back.
|
||||
*
|
||||
* Both directions live here because they have to agree on one shape: `TableEditorOverlay` writes a table
|
||||
* with `buildTable`, the markdown editor finds one with `findEditableTables` so it can offer to edit it,
|
||||
* and the overlay reads it back with `parseTable`. Two definitions of "what a table looks like" would
|
||||
* mean a table that came back out of the editor differing from the one that went in, in whitespace
|
||||
* nobody asked to change.
|
||||
*
|
||||
* A table is a grid of one-line strings plus an alignment per column, which is the only formatting the
|
||||
* syntax carries. Everything else a MultiMarkdown table can do -- a multi-line cell, a `^^` rowspan, a
|
||||
* second body, no header at all -- has nowhere to go in that model, which is what `findEditableTables`
|
||||
* is for: it offers only the tables that survive the round trip.
|
||||
*/
|
||||
|
||||
/** Narrowest a delimiter cell can be and still show its colons: `:-:`. */
|
||||
const MIN_WIDTH = 3
|
||||
|
||||
/** Cycled through by the editor's per-column button, in this order. */
|
||||
export const ALIGNMENTS = ['left', 'center', 'right']
|
||||
|
||||
/** A delimiter row's cell, and nothing else: dashes, with a colon at either end or both. */
|
||||
const DELIMITER_CELL = /^:?-+:?$/
|
||||
|
||||
/** The opening or closing line of a fenced block, indented up to the three spaces markdown allows. */
|
||||
const FENCE = /^ {0,3}(`{3,}|~{3,})/
|
||||
|
||||
/**
|
||||
* A cell as it is written into a row.
|
||||
*
|
||||
* Its own `|` is escaped, and a newline -- which only a paste can produce -- becomes a space, because
|
||||
* there is no way to write either into a table row.
|
||||
*/
|
||||
export function escapeCell(value) {
|
||||
return (value ?? '').replaceAll('|', '\\|').replaceAll(/\s+/g, ' ').trim()
|
||||
}
|
||||
|
||||
/**
|
||||
* The table as markdown.
|
||||
*
|
||||
* `compact` writes each cell as it is; without it every column is padded to its widest cell, which
|
||||
* lines the columns up under their headers and costs a rewrite of the whole block on every edit. Either
|
||||
* way the delimiter row is as wide as the column, so the two stay in step.
|
||||
*/
|
||||
export function buildTable({ align, rows }, { compact = true } = {}) {
|
||||
const cells = rows.map((row) => align.map((_, colIndex) => escapeCell(row[colIndex])))
|
||||
const widths = align.map((_, colIndex) =>
|
||||
compact ? MIN_WIDTH : Math.max(MIN_WIDTH, ...cells.map((row) => row[colIndex].length))
|
||||
)
|
||||
const line = (row) =>
|
||||
`| ${row.map((cell, i) => (compact ? cell : cell.padEnd(widths[i]))).join(' | ')} |`
|
||||
const delimiters = align.map((value, i) => {
|
||||
const dashes = '-'.repeat(widths[i] - (value === 'center' ? 2 : 1))
|
||||
switch (value) {
|
||||
case 'center': {
|
||||
return `:${dashes}:`
|
||||
}
|
||||
case 'right': {
|
||||
return `${dashes}:`
|
||||
}
|
||||
default: {
|
||||
return `:${dashes}`
|
||||
}
|
||||
}
|
||||
})
|
||||
return [line(cells[0]), line(delimiters), ...cells.slice(1).map((row) => line(row))].join('\n')
|
||||
}
|
||||
|
||||
/**
|
||||
* The raw text between one row's pipes, unsplit and untrimmed -- what `isCompact` measures.
|
||||
*
|
||||
* An escaped `\|` is not a separator, and the outer pipes markdown allows on each side leave an empty
|
||||
* segment at each end which is not a column.
|
||||
*/
|
||||
function rawCells(line) {
|
||||
const cells = []
|
||||
let cell = ''
|
||||
for (let index = 0; index < line.length; index++) {
|
||||
if (line[index] === '\\' && line[index + 1] === '|') {
|
||||
cell += '|'
|
||||
index++
|
||||
continue
|
||||
}
|
||||
if (line[index] === '|') {
|
||||
cells.push(cell)
|
||||
cell = ''
|
||||
continue
|
||||
}
|
||||
cell += line[index]
|
||||
}
|
||||
cells.push(cell)
|
||||
const trimmed = line.trim()
|
||||
if (trimmed.startsWith('|') && cells[0].trim() === '') {
|
||||
cells.shift()
|
||||
}
|
||||
if (trimmed.endsWith('|') && cells.length > 0 && cells.at(-1).trim() === '') {
|
||||
cells.pop()
|
||||
}
|
||||
return cells
|
||||
}
|
||||
|
||||
/** One row's cells, as the values they hold. */
|
||||
function splitRow(line) {
|
||||
return rawCells(line).map((cell) => cell.trim())
|
||||
}
|
||||
|
||||
/**
|
||||
* The alignments a delimiter row states, or `null` if the line is not one.
|
||||
*
|
||||
* This is also what tells a table's header row from a paragraph that happens to hold a pipe: a table is
|
||||
* a line followed by one of these.
|
||||
*
|
||||
* A cell with no colon means no alignment, which renders as left and is stored as `left` -- the editor
|
||||
* has no fourth state to keep it in, so writing such a table back states the colon it left out.
|
||||
*/
|
||||
function parseDelimiters(line) {
|
||||
if (!line?.includes('|') && !/^ {0,3}:?-+:?$/.test(line ?? '')) {
|
||||
return null
|
||||
}
|
||||
const cells = splitRow(line)
|
||||
if (cells.length === 0 || !cells.every((cell) => DELIMITER_CELL.test(cell))) {
|
||||
return null
|
||||
}
|
||||
return cells.map((cell) => {
|
||||
if (cell.startsWith(':') && cell.endsWith(':')) {
|
||||
return 'center'
|
||||
}
|
||||
return cell.endsWith(':') ? 'right' : 'left'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the source was written compact, so that reading a table and writing it back does not reformat
|
||||
* it on the author's behalf.
|
||||
*
|
||||
* Measured on the whitespace rather than by building the table both ways and comparing: a hand-written
|
||||
* table is compact whether it was written `|a|b|` or `| a | b |`, and neither is what either branch of
|
||||
* `buildTable` emits exactly. What padding looks like is a cell holding spaces beyond the single one
|
||||
* that keeps the text off the pipe -- and, in a delimiter row, a run of dashes longer than the three a
|
||||
* compact table ever needs.
|
||||
*/
|
||||
function isCompact(lines) {
|
||||
const unpadded = (raw) => {
|
||||
const value = raw.trim()
|
||||
return value === '' ? raw.length <= 2 : raw === value || raw === ` ${value} `
|
||||
}
|
||||
return lines.every((line, index) =>
|
||||
rawCells(line).every((raw) => unpadded(raw) && (index !== 1 || raw.trim().length <= MIN_WIDTH))
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A table's source as the editor's own state: `rows[0]` is the header, one alignment per column.
|
||||
*
|
||||
* The column count is the widest row rather than the delimiter row's, so a body row carrying more cells
|
||||
* than the header -- which markdown itself drops on the floor -- arrives as a column the author can see
|
||||
* and deal with, instead of being deleted by opening the editor.
|
||||
*/
|
||||
export function parseTable(source) {
|
||||
const lines = source.split('\n').filter((line) => line.trim() !== '')
|
||||
const align = parseDelimiters(lines[1]) ?? []
|
||||
const rows = [splitRow(lines[0] ?? ''), ...lines.slice(2).map(splitRow)]
|
||||
const columns = Math.max(1, align.length, ...rows.map((row) => row.length))
|
||||
return {
|
||||
align: Array.from({ length: columns }, (_, i) => align[i] ?? 'left'),
|
||||
rows: rows.map((row) => Array.from({ length: columns }, (_, i) => row[i] ?? '')),
|
||||
compact: isCompact(lines)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the table ending at `last` carries on below it.
|
||||
*
|
||||
* A MultiMarkdown table may have a second body, separated from the first by one blank line, and it is
|
||||
* part of the same table -- so a lens over the first half would offer to replace a piece of a table and
|
||||
* leave the rest of it stranded. Told apart from an ordinary table that merely follows this one by
|
||||
* whether that next row brings a delimiter row of its own; a paragraph holding a pipe reads as a
|
||||
* continuation too, and costs only the offer to edit.
|
||||
*/
|
||||
function continuesBelow(lines, last) {
|
||||
if ((lines[last + 1] ?? '').trim() !== '' || !lines[last + 2]?.includes('|')) {
|
||||
return false
|
||||
}
|
||||
return !parseDelimiters(lines[last + 3])
|
||||
}
|
||||
|
||||
/**
|
||||
* Every table in the source that the table editor can hold, in the order they appear.
|
||||
*
|
||||
* Line numbers are 1-based, to be handed straight to the editor.
|
||||
*
|
||||
* What is deliberately left out: a table inside a fenced block, which is a code sample and not a table;
|
||||
* a headerless table, whose first line is already the delimiter row; and a table using a multi-line
|
||||
* cell, a `^^` rowspan or a second body. The editor's model has no place to keep any of those, so
|
||||
* offering to edit one would be offering to throw it away.
|
||||
*/
|
||||
export function findEditableTables(text) {
|
||||
const lines = text.split('\n')
|
||||
const tables = []
|
||||
let fence = null
|
||||
|
||||
for (let index = 0; index < lines.length; index++) {
|
||||
const edge = FENCE.exec(lines[index])
|
||||
if (fence) {
|
||||
if (edge && edge[1][0] === fence[0] && edge[1].length >= fence.length) {
|
||||
fence = null
|
||||
}
|
||||
continue
|
||||
}
|
||||
if (edge) {
|
||||
fence = edge[1]
|
||||
continue
|
||||
}
|
||||
|
||||
// -> A header row and then a delimiter row. A delimiter row FIRST is a headerless table
|
||||
if (!lines[index].includes('|') || parseDelimiters(lines[index])) {
|
||||
continue
|
||||
}
|
||||
if (!parseDelimiters(lines[index + 1])) {
|
||||
continue
|
||||
}
|
||||
|
||||
const start = index
|
||||
let last = index + 1
|
||||
while ((lines[last + 1] ?? '').trim() !== '' && lines[last + 1].includes('|')) {
|
||||
last++
|
||||
}
|
||||
// -> Whatever this block turns out to be, no line of it starts another table
|
||||
index = last
|
||||
|
||||
const body = lines.slice(start + 2, last + 1)
|
||||
if (
|
||||
body.some((line) => line.trimEnd().endsWith('\\')) ||
|
||||
body.some((line) => splitRow(line).includes('^^')) ||
|
||||
continuesBelow(lines, last)
|
||||
) {
|
||||
continue
|
||||
}
|
||||
|
||||
tables.push({
|
||||
startLine: start + 1,
|
||||
endLine: last + 1,
|
||||
source: lines.slice(start, last + 1).join('\n')
|
||||
})
|
||||
}
|
||||
|
||||
return tables
|
||||
}
|
||||
Loading…
Reference in new issue