timescale.info#417 · Descriptions and notes render tables, rules, deeper headings and strikethrough
- timeline-app
- pull request
Timeline descriptions (#398, #400) and Rich text notes share a small Markdown vocabulary that left out tables. The Challenger example's legend on timescale.info showed as rows of pipes. ## Added to the vocabulary (`src/rich-text.ts`) - **Tables** in GitHub style: - a header row, then a delimiter row (`| --- | :-: | --: |`) that sets each column's alignment, then rows until a blank line; - `\|` and pipes inside `code` stay in their cell; - rows are padded or cut to the header's columns, with at most 64 columns; - a wide table scrolls within the description. - **Horizontal rules** (`---`, `***`, `___`), **headings to level 6** and **`+` bullets**. - **`~~strikethrough~~`**, and **`_emphasis_` / `__strong__`** at word edges, so `snake_case` stays as it is. - **HTTPS addresses written bare or in ` `** become links. They go through the same `safeNoteLink` check, and sentence punctuation at the end isn't part of the link. ## Where it shows - The editor's description and notes (DOM renderer) and the website's React renderer both draw these. - Plain-text excerpts (page metadata, previews and cards) read a table's cells. - The notes' visual editor writes tables, rules and strikethrough back to Markdown, so editing a cell keeps the table. Nested lists, images, task lists and footnotes are still shown as text. `docs/plugins.md` lists the vocabulary. ## Tests - `test/description-markdown.test.mjs` covers: - tables, including alignment, escaped pipes, code with pipes, padding and cutting, and lookalikes that stay text; - rules, deeper headings, `+` bullets, strikethrough, underscores, snake_case and autolinks; - the React output and card excerpts. - `test/description-markdown-browser.mjs` checks that a description's table and rule render in the editor. - `test/plugins-browser.mjs` edits a table cell in the visual editor and checks that the Markdown is still a table, with its alignment and an escaped pipe. - The unit tests and the editor browser tests pass locally, except the README contents check, which fails locally only because of a `node_modules` symlink.