mirror of https://github.com/requarks/wiki
NGPixel
1 month ago
parent
3d13e50be8
commit
072e1dcc42
@ -0,0 +1,256 @@
|
||||
import { LitElement, html, css, unsafeCSS } from 'lit'
|
||||
import { create } from 'asciinema-player'
|
||||
// -> The player's stylesheet, as a string. It is what draws the terminal, and a <link> in the page
|
||||
// cannot reach into this shadow root — see the `cssAsString` plugin in rollup.config.mjs.
|
||||
import playerCss from 'asciinema-player/dist/bundle/asciinema-player.css'
|
||||
|
||||
/**
|
||||
* An attribute that means "off" when it says so.
|
||||
*
|
||||
* MDC writes every prop with a value — `autoPlay="false"` is what the block picker produces for a
|
||||
* toggle that was switched on and off again — and Lit's own Boolean converter reads any string at all
|
||||
* as true, that one included.
|
||||
*/
|
||||
const boolean = {
|
||||
converter: {
|
||||
fromAttribute: (value) => value !== null && value !== 'false',
|
||||
toAttribute: (value) => (value ? 'true' : null)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Asciinema
|
||||
*/
|
||||
export class BlockAsciinemaElement extends LitElement {
|
||||
/**
|
||||
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||
*/
|
||||
static definition = {
|
||||
block: 'asciinema',
|
||||
name: 'Terminal Recording',
|
||||
description: 'Plays an asciinema recording — a .cast file — in a terminal player.',
|
||||
icon: 'run-command',
|
||||
props: [
|
||||
{
|
||||
name: 'src',
|
||||
type: 'string',
|
||||
label: 'Recording URL',
|
||||
hint: 'Path or URL of the .cast file to play.',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'select',
|
||||
label: 'Theme',
|
||||
options: [
|
||||
'asciinema',
|
||||
'dracula',
|
||||
'gruvbox-dark',
|
||||
'monokai',
|
||||
'nord',
|
||||
'seti',
|
||||
'solarized-dark',
|
||||
'solarized-light',
|
||||
'tango'
|
||||
],
|
||||
hint: 'Terminal colours. All but solarized-light are dark.',
|
||||
default: 'asciinema'
|
||||
},
|
||||
{
|
||||
name: 'autoPlay',
|
||||
type: 'boolean',
|
||||
label: 'Play On Load',
|
||||
hint: 'Start as soon as the page is opened, rather than waiting to be asked.',
|
||||
// -> Stated, so that a toggle switched on and then off again writes nothing into the page
|
||||
default: false
|
||||
},
|
||||
{
|
||||
name: 'loop',
|
||||
type: 'boolean',
|
||||
label: 'Loop',
|
||||
hint: 'Start again on reaching the end.',
|
||||
default: false
|
||||
},
|
||||
{
|
||||
name: 'speed',
|
||||
type: 'number',
|
||||
label: 'Speed',
|
||||
hint: 'Playback rate. 2 plays twice as fast as it was recorded.',
|
||||
default: 1
|
||||
},
|
||||
{
|
||||
name: 'idleTimeLimit',
|
||||
type: 'number',
|
||||
label: 'Idle Time Limit',
|
||||
hint: 'Cap the pauses in the recording at this many seconds. Empty keeps them as recorded.'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
unsafeCSS(playerCss),
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
||||
.player,
|
||||
.error {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.player {
|
||||
border-radius: 5px;
|
||||
/* -> The terminal paints its own background into the corners otherwise */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--q-negative, #c10015);
|
||||
border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
|
||||
border-radius: 5px;
|
||||
padding: 1rem;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* Path or URL of the .cast file
|
||||
* @type {string}
|
||||
*/
|
||||
src: { type: String },
|
||||
|
||||
/**
|
||||
* Name of one of the player's terminal themes
|
||||
* @type {string}
|
||||
*/
|
||||
theme: { type: String },
|
||||
|
||||
/**
|
||||
* Whether to start without being asked
|
||||
* @type {boolean}
|
||||
*/
|
||||
autoPlay: boolean,
|
||||
|
||||
/**
|
||||
* Whether to start again at the end
|
||||
* @type {boolean}
|
||||
*/
|
||||
loop: boolean,
|
||||
|
||||
/**
|
||||
* Playback rate, 1 being the speed it was recorded at
|
||||
* @type {number}
|
||||
*/
|
||||
speed: { type: Number },
|
||||
|
||||
/**
|
||||
* Longest pause to play back, in seconds
|
||||
* @type {number}
|
||||
*/
|
||||
idleTimeLimit: { type: Number },
|
||||
|
||||
// Internal Properties
|
||||
_error: { state: true }
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.src = ''
|
||||
this.theme = 'asciinema'
|
||||
this.autoPlay = false
|
||||
this.loop = false
|
||||
this.speed = 1
|
||||
this.idleTimeLimit = null
|
||||
this._error = ''
|
||||
this._player = null
|
||||
}
|
||||
|
||||
/**
|
||||
* What to give the player, out of what the author gave the block.
|
||||
*
|
||||
* Only the settings that were actually asked for: an option left out is the player's own default,
|
||||
* which is the one that gets maintained. A speed of zero or a negative one would stop the recording
|
||||
* dead, and a nonsense number would take the player with it, so that one is bounded.
|
||||
*/
|
||||
_options() {
|
||||
const speed = Number(this.speed)
|
||||
const idle = Number(this.idleTimeLimit)
|
||||
return {
|
||||
theme: this.theme || 'asciinema',
|
||||
autoPlay: this.autoPlay,
|
||||
loop: this.loop,
|
||||
speed: Number.isFinite(speed) && speed > 0 ? Math.min(speed, 10) : 1,
|
||||
...(Number.isFinite(idle) && idle > 0 ? { idleTimeLimit: idle } : {}),
|
||||
// -> A recording is as wide as the terminal it was made in, which is rarely this column's width
|
||||
fit: 'width'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the recording, and say so in the block if it cannot be had.
|
||||
*
|
||||
* The player is given this rather than the address itself, for the sake of what happens when the
|
||||
* address is wrong. Handed a URL it fetches the file on its own, and a fetch that fails leaves an
|
||||
* empty terminal sitting there with the reason in the console — where an author who mistyped a path
|
||||
* will not see it. Fetching it here is the only way to get hold of that failure, which is the
|
||||
* common one: a typo, a file that has moved, or a host that sends no CORS headers.
|
||||
*
|
||||
* The response is handed over whole, which is a source the player takes as it comes; there is
|
||||
* nothing to be gained by reading it here, and it lets the player stream a long recording.
|
||||
*/
|
||||
async _fetch(src) {
|
||||
try {
|
||||
const response = await fetch(src)
|
||||
if (!response.ok) {
|
||||
throw new Error(`${response.status} ${response.statusText}`.trim())
|
||||
}
|
||||
return response
|
||||
} catch (err) {
|
||||
this._error = `This recording could not be loaded from ${src} — ${err.message}`
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
const src = this.src?.trim()
|
||||
if (!src) {
|
||||
this._error = 'This player needs the address of a .cast recording.'
|
||||
return
|
||||
}
|
||||
/*
|
||||
A function rather than the recording itself, so that nothing is fetched until it is played —
|
||||
which is the player's own behaviour, and the right one: a page carrying a recording should not
|
||||
pull the whole thing down before anybody has asked to watch it.
|
||||
*/
|
||||
this._player = create(
|
||||
{ data: () => this._fetch(src) },
|
||||
this.renderRoot.querySelector('.player'),
|
||||
this._options()
|
||||
)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback()
|
||||
// -> The player keeps listeners on window and a resize observer, which outlive the element
|
||||
this._player?.dispose()
|
||||
this._player = null
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this._error) {
|
||||
return html`<div class="error">${this._error}</div>`
|
||||
}
|
||||
return html`<div class="player"></div>`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('block-asciinema', BlockAsciinemaElement)
|
||||
@ -0,0 +1,281 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
|
||||
import mermaid from 'mermaid'
|
||||
|
||||
/**
|
||||
* A number for the next drawing, so every one of them gets an id of its own.
|
||||
*
|
||||
* Mermaid names the SVG it produces and writes that name into the CSS it embeds in it, so two
|
||||
* diagrams sharing an id would style each other. A counter rather than a random name: the ids are
|
||||
* scoped to one page load, and a run of them is easier to recognise in the inspector.
|
||||
*/
|
||||
let drawingCount = 0
|
||||
|
||||
/**
|
||||
* The drawing in progress, so that only ever one of them is.
|
||||
*
|
||||
* Mermaid is configured globally — `initialize` sets the library up, not a call to it — so two
|
||||
* diagrams on a page asking for different themes would each set theirs and then be drawn in whichever
|
||||
* one was set last. Queued, a diagram has the library to itself from the moment it configures it to
|
||||
* the moment it is handed back an SVG.
|
||||
*/
|
||||
let queue = Promise.resolve()
|
||||
|
||||
/**
|
||||
* Configure mermaid and draw one diagram with it, once whatever is ahead of it is done.
|
||||
*/
|
||||
function drawInTurn(config, id, source) {
|
||||
const drawing = queue.then(() => {
|
||||
mermaid.initialize(config)
|
||||
return mermaid.render(id, source)
|
||||
})
|
||||
// -> Whether it worked or not, since a diagram that could not be drawn must not hold up the rest
|
||||
queue = drawing.then(
|
||||
() => {},
|
||||
() => {}
|
||||
)
|
||||
return drawing
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Diagram
|
||||
*/
|
||||
export class BlockDiagramElement extends LitElement {
|
||||
/**
|
||||
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||
*/
|
||||
static definition = {
|
||||
block: 'diagram',
|
||||
name: 'Diagram',
|
||||
description: 'Draws a Mermaid diagram — flowchart, sequence, class, state, ER, gantt and more.',
|
||||
icon: 'workflow',
|
||||
/*
|
||||
A fenced block, and not only for the syntax highlighting: markdown would otherwise have its way
|
||||
with the source before this ever sees it. `-->` survives, but the typographer turns `--` into a
|
||||
dash, an indented line reads as a code block of its own, and `%%` comments and `#` labels are
|
||||
claimed as structure. Inside a fence the text arrives exactly as it was typed.
|
||||
*/
|
||||
template: `\`\`\`mermaid
|
||||
flowchart LR
|
||||
A[Start] --> B{Ready?}
|
||||
B -->|Yes| C[Ship it]
|
||||
B -->|No| A
|
||||
\`\`\``,
|
||||
props: [
|
||||
{
|
||||
name: 'caption',
|
||||
type: 'string',
|
||||
label: 'Caption',
|
||||
hint: 'Shown under the diagram.'
|
||||
},
|
||||
{
|
||||
name: 'theme',
|
||||
type: 'select',
|
||||
label: 'Theme',
|
||||
options: ['auto', 'default', 'dark', 'neutral', 'forest'],
|
||||
hint: 'auto follows the light or dark theme the reader is using.',
|
||||
default: 'auto'
|
||||
},
|
||||
{
|
||||
name: 'align',
|
||||
type: 'select',
|
||||
label: 'Alignment',
|
||||
options: ['left', 'center'],
|
||||
default: 'left'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
||||
.diagram,
|
||||
.error {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.diagram.is-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
Mermaid sizes the drawing itself — it writes a max-width on the SVG at the width the diagram
|
||||
came out to, so a small one is left at its own size and a large one shrinks to the column. Only
|
||||
the height is settled here, so that shrinking keeps the shapes in proportion.
|
||||
*/
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: #424242;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
:host-context(body.body--dark) .caption {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--q-negative, #c10015);
|
||||
border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
|
||||
border-radius: 5px;
|
||||
padding: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* Text shown under the diagram
|
||||
* @type {string}
|
||||
*/
|
||||
caption: { type: String },
|
||||
|
||||
/**
|
||||
* Mermaid theme, or `auto` to follow the reader's
|
||||
* @type {string}
|
||||
*/
|
||||
theme: { type: String },
|
||||
|
||||
/**
|
||||
* Where the drawing sits in the column, `left` or `center`
|
||||
* @type {string}
|
||||
*/
|
||||
align: { type: String },
|
||||
|
||||
// Internal Properties
|
||||
_svg: { state: true },
|
||||
_error: { state: true }
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.caption = ''
|
||||
this.theme = 'auto'
|
||||
this.align = 'left'
|
||||
this._svg = ''
|
||||
this._error = ''
|
||||
this._themeWatcher = null
|
||||
/** The drawing being waited on, so a stale one cannot land after a newer one. */
|
||||
this._drawing = 0
|
||||
/** The source, and whether it came out of a fence. Both read from the body once, on first render. */
|
||||
this._source = ''
|
||||
this._fenced = false
|
||||
}
|
||||
|
||||
/**
|
||||
* The theme to draw in.
|
||||
*
|
||||
* `auto` reads the class the app puts on the body, which is the same thing every block's CSS keys
|
||||
* its dark mode off — a diagram cannot do it in CSS, because mermaid picks its colours while it
|
||||
* draws and writes them into the SVG.
|
||||
*/
|
||||
_theme() {
|
||||
if (this.theme && this.theme !== 'auto') {
|
||||
return this.theme
|
||||
}
|
||||
return document.body.classList.contains('body--dark') ? 'dark' : 'default'
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw the source, or say why it could not be drawn.
|
||||
*/
|
||||
async _draw() {
|
||||
const drawing = ++this._drawing
|
||||
const config = {
|
||||
startOnLoad: false,
|
||||
// -> A page is authored by whoever may edit it, so the text in a diagram is treated as text:
|
||||
// HTML in a label is escaped and `click` directives do nothing
|
||||
securityLevel: 'strict',
|
||||
// -> Mermaid's own answer to a broken diagram is to append a drawing of a bomb to the body,
|
||||
// outside this element and past the page's styling. The message below is this block's job.
|
||||
suppressErrorRendering: true,
|
||||
theme: this._theme(),
|
||||
// -> The page's own font, so a diagram reads as part of the text around it. Mermaid measures
|
||||
// its labels in the same font, so the boxes come out the right size for it.
|
||||
fontFamily: 'inherit'
|
||||
}
|
||||
try {
|
||||
const { svg } = await drawInTurn(config, `block-diagram-${++drawingCount}`, this._source)
|
||||
// -> A theme toggle can start a second drawing while this one is still going
|
||||
if (drawing !== this._drawing) {
|
||||
return
|
||||
}
|
||||
this._svg = svg
|
||||
this._error = ''
|
||||
} catch (err) {
|
||||
if (drawing !== this._drawing) {
|
||||
return
|
||||
}
|
||||
this._svg = ''
|
||||
/*
|
||||
Mermaid says what it could not read and where, which is the useful half. The other half is
|
||||
the fence, because a diagram that renders in every other tool and not here is nearly always a
|
||||
source markdown got to first — see `template`.
|
||||
*/
|
||||
this._error = `This diagram could not be drawn: ${err.message ?? err}`
|
||||
if (!this._fenced) {
|
||||
this._error +=
|
||||
'\n\nThe source has to go inside a fenced code block, or markdown rewrites it before this block sees it.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
/*
|
||||
The source is the block's body, taken from the fence markdown left behind. `textContent` is what
|
||||
undoes the escaping that put `-->` in the markup, and gives back what the author typed.
|
||||
*/
|
||||
const fence = this.querySelector('pre')
|
||||
this._fenced = Boolean(fence)
|
||||
this._source = ((fence ?? this).textContent ?? '').trim()
|
||||
if (!this._source) {
|
||||
this._error =
|
||||
'This diagram is empty. Its source goes in the body of the block, inside a fenced code block.'
|
||||
return
|
||||
}
|
||||
this._draw()
|
||||
|
||||
// -> Only `auto` has anything to follow; a diagram asked for a theme by name keeps it either way
|
||||
if (this.theme === 'auto') {
|
||||
this._themeWatcher = new MutationObserver(() => this._draw())
|
||||
this._themeWatcher.observe(document.body, { attributeFilter: ['class'] })
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback()
|
||||
this._themeWatcher?.disconnect()
|
||||
this._themeWatcher = null
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this._error) {
|
||||
return html`<div class="error">${this._error}</div>`
|
||||
}
|
||||
return html`
|
||||
<div class="diagram ${this.align === 'center' ? 'is-center' : ''}">
|
||||
${unsafeSVG(this._svg)}
|
||||
${this.caption ? html`<div class="caption">${this.caption}</div>` : null}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('block-diagram', BlockDiagramElement)
|
||||
@ -0,0 +1,304 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
|
||||
import { mathjax } from '@mathjax/src/js/mathjax.js'
|
||||
import { TeX } from '@mathjax/src/js/input/tex.js'
|
||||
import { SVG } from '@mathjax/src/js/output/svg.js'
|
||||
import { liteAdaptor } from '@mathjax/src/js/adaptors/liteAdaptor.js'
|
||||
import { RegisterHTMLHandler } from '@mathjax/src/js/handlers/html.js'
|
||||
import { MathJaxNewcmFont } from '@mathjax/mathjax-newcm-font/js/svg.js'
|
||||
import { MathJaxMhchemFontExtension } from '@mathjax/mathjax-mhchem-font-extension/js/svg.js'
|
||||
/*
|
||||
Every TeX package the block understands, imported for its side effect: a configuration registers
|
||||
itself under its name, and `PACKAGES` below is what then switches it on.
|
||||
|
||||
This is the set MathJax's own "all packages" bundle carries, less three of them. `html` is left out
|
||||
because it exists to put HTML into the page from inside TeX — a link, a class, a style attribute —
|
||||
which is not what a formula is for. `noerrors` and `noundefined` are left out because both answer a
|
||||
mistake by drawing something: the unreadable source in place of the formula, or a black box where a
|
||||
macro should have been. Without them the error reaches this file, which has a panel to say so in.
|
||||
|
||||
Nothing here loads anything at run time. `require` and `autoload` are absent for that reason: both
|
||||
fetch a package the moment TeX asks for one, which cannot work in a bundle — the block is a single
|
||||
file served from /_blocks, with no MathJax install behind it to fetch from.
|
||||
*/
|
||||
import '@mathjax/src/js/input/tex/base/BaseConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/action/ActionConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/ams/AmsConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/amscd/AmsCdConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/bbox/BboxConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/boldsymbol/BoldsymbolConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/braket/BraketConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/bussproofs/BussproofsConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/cancel/CancelConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/cases/CasesConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/centernot/CenternotConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/color/ColorConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/colortbl/ColortblConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/empheq/EmpheqConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/enclose/EncloseConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/extpfeil/ExtpfeilConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/gensymb/GensymbConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/mathtools/MathtoolsConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/mhchem/MhchemConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/newcommand/NewcommandConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/physics/PhysicsConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/textcomp/TextcompConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/textmacros/TextMacrosConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/unicode/UnicodeConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/upgreek/UpgreekConfiguration.js'
|
||||
import '@mathjax/src/js/input/tex/verb/VerbConfiguration.js'
|
||||
|
||||
const PACKAGES = [
|
||||
'base',
|
||||
'action',
|
||||
'ams',
|
||||
'amscd',
|
||||
'bbox',
|
||||
'boldsymbol',
|
||||
'braket',
|
||||
'bussproofs',
|
||||
'cancel',
|
||||
'cases',
|
||||
'centernot',
|
||||
'color',
|
||||
'colortbl',
|
||||
'empheq',
|
||||
'enclose',
|
||||
'extpfeil',
|
||||
'gensymb',
|
||||
'mathtools',
|
||||
'mhchem',
|
||||
'newcommand',
|
||||
'physics',
|
||||
'textcomp',
|
||||
'textmacros',
|
||||
'unicode',
|
||||
'upgreek',
|
||||
'verb'
|
||||
]
|
||||
|
||||
/**
|
||||
* MathJax, set up once for the page.
|
||||
*
|
||||
* Off the document entirely: the SVG output measures nothing in the DOM — it has the metrics of every
|
||||
* glyph in the font it draws with — so a formula can be typeset against a document MathJax makes up
|
||||
* for itself and handed back as markup. That is what makes it usable from inside a shadow root, which
|
||||
* MathJax has no notion of and where its own stylesheet in the page would not reach.
|
||||
*/
|
||||
const adaptor = liteAdaptor()
|
||||
RegisterHTMLHandler(adaptor)
|
||||
|
||||
const output = new SVG({
|
||||
fontData: MathJaxNewcmFont,
|
||||
/*
|
||||
Each formula carries its own glyph definitions. The alternative, one cache for the page, is a
|
||||
single hidden `svg` in the document that every formula points into — and a reference from inside a
|
||||
shadow root does not resolve to it, so every letter would come out blank.
|
||||
*/
|
||||
fontCache: 'local'
|
||||
})
|
||||
|
||||
/*
|
||||
mhchem's bonds, arrows and brackets are glyphs of their own, in a font variant the text font has no
|
||||
reason to carry. Added here rather than fetched: MathJax's own build loads this on demand the first
|
||||
time a `\ce` turns up, which is the one thing a bundled block cannot do.
|
||||
*/
|
||||
output.font.addExtension(MathJaxMhchemFontExtension)
|
||||
|
||||
const document_ = mathjax.document('', {
|
||||
InputJax: new TeX({
|
||||
packages: PACKAGES,
|
||||
// -> Handing the error on rather than drawing it: see the panel in `render`
|
||||
formatError: (jax, err) => {
|
||||
throw err
|
||||
}
|
||||
}),
|
||||
OutputJax: output
|
||||
})
|
||||
|
||||
/**
|
||||
* Block MathJax
|
||||
*/
|
||||
export class BlockMathjaxElement extends LitElement {
|
||||
/**
|
||||
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||
*/
|
||||
static definition = {
|
||||
block: 'mathjax',
|
||||
name: 'MathJax',
|
||||
description:
|
||||
'Typesets a TeX formula, including chemical equations written with mhchem — \\ce{} and \\pu{}.',
|
||||
icon: 'sigma',
|
||||
/*
|
||||
Fenced, and not as a nicety: TeX is made of the characters markdown reads as its own. A lone
|
||||
backslash goes missing, `_` and `^` open emphasis, `\\` at the end of a line is a break, and the
|
||||
typographer rewrites quotes and dashes inside the source. Inside a fence it arrives as typed.
|
||||
*/
|
||||
template: `\`\`\`latex
|
||||
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
|
||||
\`\`\``,
|
||||
props: [
|
||||
{
|
||||
name: 'caption',
|
||||
type: 'string',
|
||||
label: 'Caption',
|
||||
hint: 'Shown under the formula.'
|
||||
},
|
||||
{
|
||||
name: 'align',
|
||||
type: 'select',
|
||||
label: 'Alignment',
|
||||
options: ['center', 'left'],
|
||||
default: 'center'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
||||
.formula,
|
||||
.error {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.formula {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.formula.is-left {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/*
|
||||
A formula wider than the column scrolls rather than shrinks, the way a display equation in the
|
||||
text does — see .katex-display in css/_page-contents.scss. Shrinking is the wrong answer for
|
||||
something read symbol by symbol: a long derivation would end up a grey smear.
|
||||
*/
|
||||
.drawing {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
/* -> Room for the scrollbar to appear without it sitting on the descenders */
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
The drawing takes the colour of the text around it: MathJax paints its glyphs in currentColor,
|
||||
so dark mode needs nothing here — unlike a block that picks its own colours.
|
||||
*/
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: #424242;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
:host-context(body.body--dark) .caption {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--q-negative, #c10015);
|
||||
border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
|
||||
border-radius: 5px;
|
||||
padding: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* Text shown under the formula
|
||||
* @type {string}
|
||||
*/
|
||||
caption: { type: String },
|
||||
|
||||
/**
|
||||
* Where the formula sits in the column, `center` or `left`
|
||||
* @type {string}
|
||||
*/
|
||||
align: { type: String },
|
||||
|
||||
// Internal Properties
|
||||
_svg: { state: true },
|
||||
_error: { state: true }
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.caption = ''
|
||||
this.align = 'center'
|
||||
this._svg = ''
|
||||
this._error = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Typeset the source, or say why it could not be.
|
||||
*/
|
||||
_typeset(source, fenced) {
|
||||
try {
|
||||
const container = document_.convert(source, { display: true })
|
||||
const drawing = adaptor.firstChild(container)
|
||||
/*
|
||||
The formula named for a reader who cannot see it. MathJax's own answer to this is a MathML
|
||||
copy of the expression alongside the drawing, which needs its stylesheet in the page to stay
|
||||
hidden and its speech engine to read well — neither of which a block in a shadow root has. The
|
||||
source is what is left, and it is what the author wrote: imperfectly read aloud, but the
|
||||
drawing already carries role="img", and an image with no name at all is worse.
|
||||
*/
|
||||
adaptor.setAttribute(drawing, 'aria-label', source)
|
||||
this._svg = adaptor.outerHTML(drawing)
|
||||
this._error = ''
|
||||
} catch (err) {
|
||||
this._svg = ''
|
||||
this._error = `This formula could not be typeset: ${err.message ?? err}`
|
||||
if (!fenced) {
|
||||
this._error +=
|
||||
'\n\nThe source has to go inside a fenced code block, or markdown rewrites it before this block sees it.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
/*
|
||||
The source is the block's body, taken from the fence markdown left behind. `textContent` is what
|
||||
undoes the escaping that put `&` and `<` in the markup, and gives back what was typed.
|
||||
*/
|
||||
const fence = this.querySelector('pre')
|
||||
const source = ((fence ?? this).textContent ?? '').trim()
|
||||
if (!source) {
|
||||
this._error =
|
||||
'This formula is empty. Its TeX source goes in the body of the block, inside a fenced code block.'
|
||||
return
|
||||
}
|
||||
this._typeset(source, Boolean(fence))
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this._error) {
|
||||
return html`<div class="error">${this._error}</div>`
|
||||
}
|
||||
return html`
|
||||
<div class="formula ${this.align === 'left' ? 'is-left' : ''}">
|
||||
<div class="drawing">${unsafeSVG(this._svg)}</div>
|
||||
${this.caption ? html`<div class="caption">${this.caption}</div>` : null}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('block-mathjax', BlockMathjaxElement)
|
||||
@ -0,0 +1,303 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { deflateRaw } from 'pako'
|
||||
|
||||
/** The default server, which is the one PlantUML runs for everybody. */
|
||||
const DEFAULT_SERVER = 'https://www.plantuml.com/plantuml'
|
||||
|
||||
/**
|
||||
* PlantUML's own alphabet for the text it carries in a URL.
|
||||
*
|
||||
* Base64 by shape but not by order — digits first, then the letters, and `-_` for the last two — so
|
||||
* the standard encoders cannot be used and this is done by hand below.
|
||||
*/
|
||||
const ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_'
|
||||
|
||||
/**
|
||||
* A diagram source as it goes into a PlantUML URL: deflated, then written in that alphabet.
|
||||
*
|
||||
* Raw deflate with no zlib header, which is what the server's decoder expects. Three bytes at a time
|
||||
* become four characters; a group short of three is padded with zeros, and the server disregards what
|
||||
* the padding decodes to.
|
||||
*
|
||||
* The result is about 1.4 characters per character of source, so a very large diagram can outgrow what
|
||||
* a server will accept in a URL. That is a limit of this transport, and the way past it is the
|
||||
* server's POST endpoint, which is not implemented here.
|
||||
*/
|
||||
function encodeForUrl(source) {
|
||||
const bytes = deflateRaw(new TextEncoder().encode(source), { level: 9 })
|
||||
let encoded = ''
|
||||
for (let i = 0; i < bytes.length; i += 3) {
|
||||
const b1 = bytes[i]
|
||||
const b2 = bytes[i + 1] ?? 0
|
||||
const b3 = bytes[i + 2] ?? 0
|
||||
encoded += ALPHABET[b1 >> 2]
|
||||
encoded += ALPHABET[((b1 & 0x3) << 4) | (b2 >> 4)]
|
||||
encoded += ALPHABET[((b2 & 0xf) << 2) | (b3 >> 6)]
|
||||
encoded += ALPHABET[b3 & 0x3f]
|
||||
}
|
||||
return encoded
|
||||
}
|
||||
|
||||
/**
|
||||
* Block PlantUML
|
||||
*/
|
||||
export class BlockPlantumlElement extends LitElement {
|
||||
/**
|
||||
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||
*/
|
||||
static definition = {
|
||||
block: 'plantuml',
|
||||
name: 'PlantUML',
|
||||
description:
|
||||
'Draws a PlantUML diagram — sequence, class, state, activity, mindmap, gantt and the rest.',
|
||||
icon: 'polyline',
|
||||
/*
|
||||
Fenced, and named `plantuml` so the source is what it says it is. The fence is also what keeps
|
||||
markdown off it: `->` survives, but `--` becomes a dash, a line opening with `*` or `#` is read
|
||||
as a list or a heading, and an indented line becomes a code block of its own.
|
||||
|
||||
Passed to the server exactly as written, `@startuml` included — which is why a `@startmindmap`
|
||||
or a `@startgantt` works here too. Wrapping it in `@startuml` on the author's behalf would rule
|
||||
every one of those out.
|
||||
*/
|
||||
template: `\`\`\`plantuml
|
||||
@startuml
|
||||
Alice -> Bob : hello
|
||||
Bob --> Alice : hi
|
||||
@enduml
|
||||
\`\`\``,
|
||||
props: [
|
||||
{
|
||||
name: 'server',
|
||||
type: 'string',
|
||||
label: 'Server',
|
||||
hint: 'PlantUML server to draw with. The public one when left empty.',
|
||||
// -> Written out rather than taken from DEFAULT_SERVER above: the manifest is read out of this
|
||||
// file's syntax tree at build time, where a name is just a name
|
||||
default: 'https://www.plantuml.com/plantuml'
|
||||
},
|
||||
{
|
||||
name: 'format',
|
||||
type: 'select',
|
||||
label: 'Format',
|
||||
options: ['svg', 'png'],
|
||||
hint: 'svg stays sharp at any size; png is there for a server with svg switched off.',
|
||||
default: 'svg'
|
||||
},
|
||||
{
|
||||
name: 'caption',
|
||||
type: 'string',
|
||||
label: 'Caption',
|
||||
hint: 'Shown under the diagram.'
|
||||
},
|
||||
{
|
||||
name: 'align',
|
||||
type: 'select',
|
||||
label: 'Alignment',
|
||||
options: ['left', 'center'],
|
||||
default: 'left'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -> The gap below the block. On this element rather than :host: see block-index. */
|
||||
.diagram,
|
||||
.error {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.diagram.is-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
The drawing sits on white in both themes, padded, the way a QR code does. PlantUML draws in
|
||||
black on nothing at all, so on a dark page a diagram left to the page's background is black on
|
||||
black — and its own colours, where a diagram has them, are picked to sit on paper.
|
||||
*/
|
||||
.sheet {
|
||||
max-width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
/* -> A diagram wider than the column scrolls rather than shrinking to illegibility */
|
||||
overflow-x: auto;
|
||||
}
|
||||
:host-context(body.body--dark) .sheet {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
/* -> Its own size, up to the width of the column */
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: #424242;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
:host-context(body.body--dark) .caption {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--q-negative, #c10015);
|
||||
border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
|
||||
border-radius: 5px;
|
||||
padding: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* PlantUML server to draw with
|
||||
* @type {string}
|
||||
*/
|
||||
server: { type: String },
|
||||
|
||||
/**
|
||||
* Image format to ask the server for, `svg` or `png`
|
||||
* @type {string}
|
||||
*/
|
||||
format: { type: String },
|
||||
|
||||
/**
|
||||
* Text shown under the diagram
|
||||
* @type {string}
|
||||
*/
|
||||
caption: { type: String },
|
||||
|
||||
/**
|
||||
* Where the diagram sits in the column, `left` or `center`
|
||||
* @type {string}
|
||||
*/
|
||||
align: { type: String },
|
||||
|
||||
// Internal Properties
|
||||
_src: { state: true },
|
||||
_error: { state: true }
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.server = DEFAULT_SERVER
|
||||
this.format = 'svg'
|
||||
this.caption = ''
|
||||
this.align = 'left'
|
||||
this._src = ''
|
||||
this._error = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Where the drawing comes from.
|
||||
*
|
||||
* An `img` rather than markup fetched and inlined, because that is the one way of asking that needs
|
||||
* nothing of the server beyond the picture: no CORS headers, which a PlantUML behind somebody's own
|
||||
* proxy may well not send. It also means the browser caches the drawing like any other image.
|
||||
*/
|
||||
_url(source) {
|
||||
const server = (this.server?.trim() || DEFAULT_SERVER).replace(/\/+$/, '')
|
||||
const format = this.format === 'png' ? 'png' : 'svg'
|
||||
return `${server}/${format}/${encodeForUrl(source)}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Say what went wrong, having been told only that the image did not load.
|
||||
*
|
||||
* Not the case of a diagram PlantUML cannot read: it answers those with a picture saying so, and a
|
||||
* browser draws it whatever status came with it — so a mistake in the source shows up as the
|
||||
* server's own message where the diagram would have been, which is the best place for it.
|
||||
*
|
||||
* What is left is a server that did not answer, or answered with something that is not an image: a
|
||||
* wrong address, a host that cannot be reached from where the reader is, a login page. The request
|
||||
* is made a second time to tell those apart, and to read `X-PlantUML-Diagram-Error` if it is there.
|
||||
* Best effort — a server that sends no CORS headers refuses this second request, and the message
|
||||
* below stands as it is. Nothing about drawing a diagram depends on any of it.
|
||||
*/
|
||||
async _explain(url) {
|
||||
// -> Resolved against the page, since a server may perfectly well be a path on this wiki
|
||||
const absolute = new URL(url, window.location.href)
|
||||
this._error = `The diagram could not be drawn by ${absolute.origin}.`
|
||||
try {
|
||||
const response = await fetch(absolute)
|
||||
const reason = response.headers.get('x-plantuml-diagram-error')
|
||||
if (reason) {
|
||||
this._error = `PlantUML could not read this diagram: ${reason}`
|
||||
} else if (!response.ok) {
|
||||
this._error = `The server answered ${response.status} ${response.statusText} for this diagram.`
|
||||
}
|
||||
} catch {
|
||||
// -> Unreachable, blocked, or simply not a PlantUML server; the message above says as much
|
||||
this._error += ' Check the server address, and that the page may reach it.'
|
||||
}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
/*
|
||||
The source is the block's body, taken from the fence markdown left behind. `textContent` is what
|
||||
undoes the escaping that put `-->` in the markup, and gives back what the author typed.
|
||||
*/
|
||||
const fence = this.querySelector('pre')
|
||||
const source = ((fence ?? this).textContent ?? '').trim()
|
||||
if (!source) {
|
||||
this._error =
|
||||
'This diagram is empty. Its source goes in the body of the block, inside a ```plantuml fence.'
|
||||
if (this.querySelector('img')) {
|
||||
// -> The renderer's own PlantUML option claims that fence and draws it before this block is
|
||||
// ever built, leaving an image where the source should be
|
||||
this._error +=
|
||||
'\n\nThe PlantUML option in the markdown editor settings is on, and it has already turned this fence into a diagram of its own. Switch it off to draw through this block.'
|
||||
}
|
||||
return
|
||||
}
|
||||
this._src = this._url(source)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this._error) {
|
||||
return html`<div class="error">${this._error}</div>`
|
||||
}
|
||||
/*
|
||||
Nothing at all until the URL exists, which is the first thing `firstUpdated` does — and it runs
|
||||
after this. An `img` rendered without one carries `src=""`, which a browser resolves to the page
|
||||
itself, fetches, fails to read as an image, and reports as a failed diagram.
|
||||
*/
|
||||
if (!this._src) {
|
||||
return null
|
||||
}
|
||||
return html`
|
||||
<div class="diagram ${this.align === 'center' ? 'is-center' : ''}">
|
||||
<div class="sheet">
|
||||
<img
|
||||
src="${this._src}"
|
||||
alt="${this.caption || 'PlantUML diagram'}"
|
||||
@error="${() => this._explain(this._src)}" />
|
||||
</div>
|
||||
${this.caption ? html`<div class="caption">${this.caption}</div>` : null}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('block-plantuml', BlockPlantumlElement)
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,92 @@
|
||||
// ------------------------------------
|
||||
// Markdown - GitHub-style alerts
|
||||
// ------------------------------------
|
||||
|
||||
/**
|
||||
* The five kinds GitHub defines, and what each one becomes here.
|
||||
*
|
||||
* They are mapped onto the admonition classes the content stylesheet already draws — the ones
|
||||
* `{.is-info}` and friends attach — so an alert and a hand-classed blockquote are the same object on
|
||||
* the page, and there is one place where an admonition is styled. `important` is the one kind with no
|
||||
* existing counterpart, and has a hue of its own in `css/_page-contents.scss`.
|
||||
*
|
||||
* The labels are English, as the marker itself is: what the renderer emits is stored as the page's
|
||||
* HTML, so nothing here can follow the reader's locale afterwards.
|
||||
*/
|
||||
const KINDS = new Map([
|
||||
['note', { className: 'is-info', label: 'Note' }],
|
||||
['tip', { className: 'is-success', label: 'Tip' }],
|
||||
['important', { className: 'is-important', label: 'Important' }],
|
||||
['warning', { className: 'is-warning', label: 'Warning' }],
|
||||
['caution', { className: 'is-danger', label: 'Caution' }]
|
||||
])
|
||||
|
||||
/**
|
||||
* The marker, which has to be the whole of the blockquote's first line.
|
||||
*
|
||||
* Anything after it on that line means the author wrote a blockquote that happens to open with
|
||||
* brackets, which is what GitHub decides too — and the line is then left exactly as it was typed.
|
||||
*/
|
||||
const MARKER = /^\[!([a-z]+)\][ \t]*(?:\n|$)/i
|
||||
|
||||
/**
|
||||
* The label, as three tokens: a paragraph carrying a class, its inline content, and the close.
|
||||
*
|
||||
* The inline token is left with nothing but `content`; the core `inline` rule runs after this one and
|
||||
* is what turns that into children, the same as for every other paragraph on the page.
|
||||
*/
|
||||
function labelTokens(state, label) {
|
||||
const open = new state.Token('paragraph_open', 'p', 1)
|
||||
open.attrSet('class', 'alert-title')
|
||||
open.block = true
|
||||
|
||||
const inline = new state.Token('inline', '', 0)
|
||||
inline.content = label
|
||||
inline.children = []
|
||||
|
||||
const close = new state.Token('paragraph_close', 'p', -1)
|
||||
close.block = true
|
||||
|
||||
return [open, inline, close]
|
||||
}
|
||||
|
||||
export default (md) => {
|
||||
/*
|
||||
After `block` and so before `inline`, which is what makes this a matter of cutting a line off a
|
||||
string: at this point a paragraph is still one `inline` token holding its raw source. Run after
|
||||
`inline` instead and the same job means walking children and reasoning about where markdown-it put
|
||||
the break — a soft one, or a hard one where the author left two spaces after the marker, as the
|
||||
examples in GitHub's own documentation do.
|
||||
*/
|
||||
md.core.ruler.after('block', 'github_alert', (state) => {
|
||||
const tokens = state.tokens
|
||||
for (let i = 0; i < tokens.length; i++) {
|
||||
if (
|
||||
tokens[i].type !== 'blockquote_open' ||
|
||||
tokens[i + 1]?.type !== 'paragraph_open' ||
|
||||
tokens[i + 2]?.type !== 'inline'
|
||||
) {
|
||||
continue
|
||||
}
|
||||
|
||||
const marker = MARKER.exec(tokens[i + 2].content)
|
||||
const kind = marker ? KINDS.get(marker[1].toLowerCase()) : null
|
||||
if (!kind) {
|
||||
continue
|
||||
}
|
||||
|
||||
// -> Joined rather than set: an author may have classed the quote themselves, and `is-info` on
|
||||
// top of that is what the stylesheet is written to expect
|
||||
tokens[i].attrJoin('class', kind.className)
|
||||
|
||||
const rest = tokens[i + 2].content.slice(marker[0].length)
|
||||
if (rest) {
|
||||
tokens[i + 2].content = rest
|
||||
tokens.splice(i + 1, 0, ...labelTokens(state, kind.label))
|
||||
} else {
|
||||
// -> The marker was the whole paragraph, so the label takes its place rather than joining it
|
||||
tokens.splice(i + 1, 3, ...labelTokens(state, kind.label))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,175 +0,0 @@
|
||||
// Test if potential opening or closing delimieter
|
||||
// Assumes that there is a "$" at state.src[pos]
|
||||
function isValidDelim(state, pos) {
|
||||
const max = state.posMax
|
||||
let canOpen = true
|
||||
let canClose = true
|
||||
|
||||
const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1
|
||||
const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1
|
||||
|
||||
// Check non-whitespace conditions for opening and closing, and
|
||||
// check that closing delimeter isn't followed by a number
|
||||
if (
|
||||
prevChar === 0x20 /* " " */ ||
|
||||
prevChar === 0x09 /* \t */ ||
|
||||
(nextChar >= 0x30 /* "0" */ && nextChar <= 0x39) /* "9" */
|
||||
) {
|
||||
canClose = false
|
||||
}
|
||||
if (nextChar === 0x20 /* " " */ || nextChar === 0x09 /* \t */) {
|
||||
canOpen = false
|
||||
}
|
||||
|
||||
return {
|
||||
canOpen,
|
||||
canClose
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
katexInline(state, silent) {
|
||||
let match, token, res, pos
|
||||
|
||||
if (state.src[state.pos] !== '$') {
|
||||
return false
|
||||
}
|
||||
|
||||
res = isValidDelim(state, state.pos)
|
||||
if (!res.canOpen) {
|
||||
if (!silent) {
|
||||
state.pending += '$'
|
||||
}
|
||||
state.pos += 1
|
||||
return true
|
||||
}
|
||||
|
||||
// First check for and bypass all properly escaped delimieters
|
||||
// This loop will assume that the first leading backtick can not
|
||||
// be the first character in state.src, which is known since
|
||||
// we have found an opening delimieter already.
|
||||
const start = state.pos + 1
|
||||
match = start
|
||||
while ((match = state.src.indexOf('$', match)) !== -1) {
|
||||
// Found potential $, look for escapes, pos will point to
|
||||
// first non escape when complete
|
||||
pos = match - 1
|
||||
while (state.src[pos] === '\\') {
|
||||
pos -= 1
|
||||
}
|
||||
|
||||
// Even number of escapes, potential closing delimiter found
|
||||
if ((match - pos) % 2 === 1) {
|
||||
break
|
||||
}
|
||||
match += 1
|
||||
}
|
||||
|
||||
// No closing delimter found. Consume $ and continue.
|
||||
if (match === -1) {
|
||||
if (!silent) {
|
||||
state.pending += '$'
|
||||
}
|
||||
state.pos = start
|
||||
return true
|
||||
}
|
||||
|
||||
// Check if we have empty content, ie: $$. Do not parse.
|
||||
if (match - start === 0) {
|
||||
if (!silent) {
|
||||
state.pending += '$$'
|
||||
}
|
||||
state.pos = start + 1
|
||||
return true
|
||||
}
|
||||
|
||||
// Check for valid closing delimiter
|
||||
res = isValidDelim(state, match)
|
||||
if (!res.canClose) {
|
||||
if (!silent) {
|
||||
state.pending += '$'
|
||||
}
|
||||
state.pos = start
|
||||
return true
|
||||
}
|
||||
|
||||
if (!silent) {
|
||||
token = state.push('katex_inline', 'math', 0)
|
||||
token.markup = '$'
|
||||
token.content = state.src
|
||||
// Extract the math part without the $
|
||||
.slice(start, match)
|
||||
// Escape the curly braces since they will be interpreted as
|
||||
// attributes by markdown-it-attrs (the "curly_attributes"
|
||||
// core rule)
|
||||
.replaceAll('{', '{{')
|
||||
.replaceAll('}', '}}')
|
||||
}
|
||||
|
||||
state.pos = match + 1
|
||||
return true
|
||||
},
|
||||
|
||||
katexBlock(state, start, end, silent) {
|
||||
let firstLine
|
||||
let lastLine
|
||||
let next
|
||||
let lastPos
|
||||
let found = false
|
||||
let pos = state.bMarks[start] + state.tShift[start]
|
||||
let max = state.eMarks[start]
|
||||
|
||||
if (pos + 2 > max) {
|
||||
return false
|
||||
}
|
||||
if (state.src.slice(pos, pos + 2) !== '$$') {
|
||||
return false
|
||||
}
|
||||
|
||||
pos += 2
|
||||
firstLine = state.src.slice(pos, max)
|
||||
|
||||
if (silent) {
|
||||
return true
|
||||
}
|
||||
if (firstLine.trim().slice(-2) === '$$') {
|
||||
// Single line expression
|
||||
firstLine = firstLine.trim().slice(0, -2)
|
||||
found = true
|
||||
}
|
||||
|
||||
for (next = start; !found; ) {
|
||||
next++
|
||||
|
||||
if (next >= end) {
|
||||
break
|
||||
}
|
||||
|
||||
pos = state.bMarks[next] + state.tShift[next]
|
||||
max = state.eMarks[next]
|
||||
|
||||
if (pos < max && state.tShift[next] < state.blkIndent) {
|
||||
// non-empty line with negative indent should stop the list:
|
||||
break
|
||||
}
|
||||
|
||||
if (state.src.slice(pos, max).trim().slice(-2) === '$$') {
|
||||
lastPos = state.src.slice(0, max).lastIndexOf('$$')
|
||||
lastLine = state.src.slice(pos, lastPos)
|
||||
found = true
|
||||
}
|
||||
}
|
||||
|
||||
state.line = next + 1
|
||||
|
||||
const token = state.push('katex_block', 'math', 0)
|
||||
token.block = true
|
||||
token.content =
|
||||
(firstLine && firstLine.trim() ? firstLine + '\n' : '') +
|
||||
state.getLines(start + 1, next, state.tShift[start], true) +
|
||||
(lastLine && lastLine.trim() ? lastLine : '')
|
||||
token.map = [start, state.line]
|
||||
token.markup = '$$'
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -1,160 +0,0 @@
|
||||
import pako from 'pako'
|
||||
|
||||
// ------------------------------------
|
||||
// Markdown - PlantUML Preprocessor
|
||||
// ------------------------------------
|
||||
|
||||
export default {
|
||||
init(mdinst, conf) {
|
||||
mdinst.use(
|
||||
(md, opts) => {
|
||||
const openMarker = opts.openMarker || '```kroki'
|
||||
const openChar = openMarker.charCodeAt(0)
|
||||
const closeMarker = opts.closeMarker || '```'
|
||||
const closeChar = closeMarker.charCodeAt(0)
|
||||
const server = opts.server || 'https://kroki.io'
|
||||
|
||||
md.block.ruler.before(
|
||||
'fence',
|
||||
'kroki',
|
||||
(state, startLine, endLine, silent) => {
|
||||
let nextLine
|
||||
let markup
|
||||
let params
|
||||
let token
|
||||
let i
|
||||
let autoClosed = false
|
||||
let start = state.bMarks[startLine] + state.tShift[startLine]
|
||||
let max = state.eMarks[startLine]
|
||||
|
||||
// Check out the first character quickly,
|
||||
// this should filter out most of non-uml blocks
|
||||
//
|
||||
if (openChar !== state.src.charCodeAt(start)) {
|
||||
return false
|
||||
}
|
||||
|
||||
// Check out the rest of the marker string
|
||||
//
|
||||
for (i = 0; i < openMarker.length; ++i) {
|
||||
if (openMarker[i] !== state.src[start + i]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
markup = state.src.slice(start, start + i)
|
||||
params = state.src.slice(start + i, max)
|
||||
|
||||
// Since start is found, we can report success here in validation mode
|
||||
//
|
||||
if (silent) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Search for the end of the block
|
||||
//
|
||||
nextLine = startLine
|
||||
|
||||
for (;;) {
|
||||
nextLine++
|
||||
if (nextLine >= endLine) {
|
||||
// unclosed block should be autoclosed by end of document.
|
||||
// also block seems to be autoclosed by end of parent
|
||||
break
|
||||
}
|
||||
|
||||
start = state.bMarks[nextLine] + state.tShift[nextLine]
|
||||
max = state.eMarks[nextLine]
|
||||
|
||||
if (start < max && state.sCount[nextLine] < state.blkIndent) {
|
||||
// non-empty line with negative indent should stop the list:
|
||||
// - ```
|
||||
// test
|
||||
break
|
||||
}
|
||||
|
||||
if (closeChar !== state.src.charCodeAt(start)) {
|
||||
// didn't find the closing fence
|
||||
continue
|
||||
}
|
||||
|
||||
if (state.sCount[nextLine] > state.sCount[startLine]) {
|
||||
// closing fence should not be indented with respect of opening fence
|
||||
continue
|
||||
}
|
||||
|
||||
let closeMarkerMatched = true
|
||||
for (i = 0; i < closeMarker.length; ++i) {
|
||||
if (closeMarker[i] !== state.src[start + i]) {
|
||||
closeMarkerMatched = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!closeMarkerMatched) {
|
||||
continue
|
||||
}
|
||||
|
||||
// make sure tail has spaces only
|
||||
if (state.skipSpaces(start + i) < max) {
|
||||
continue
|
||||
}
|
||||
|
||||
// found!
|
||||
autoClosed = true
|
||||
break
|
||||
}
|
||||
|
||||
let contents = state.src
|
||||
.split('\n')
|
||||
.slice(startLine + 1, nextLine)
|
||||
.join('\n')
|
||||
|
||||
// We generate a token list for the alt property, to mimic what the image parser does.
|
||||
let altToken = []
|
||||
// Remove leading space if any.
|
||||
let alt = params ? params.slice(1) : 'uml diagram'
|
||||
state.md.inline.parse(alt, state.md, state.env, altToken)
|
||||
|
||||
let firstlf = contents.indexOf('\n')
|
||||
if (firstlf === -1) firstlf = undefined
|
||||
let diagramType = contents.substring(0, firstlf)
|
||||
contents = contents.substring(firstlf + 1)
|
||||
|
||||
const result = pako
|
||||
.deflate(contents)
|
||||
.toString('base64')
|
||||
.replace(/\+/g, '-')
|
||||
.replace(/\//g, '_')
|
||||
|
||||
token = state.push('kroki', 'img', 0)
|
||||
// alt is constructed from children. No point in populating it here.
|
||||
token.attrs = [
|
||||
['src', `${server}/${diagramType}/svg/${result}`],
|
||||
['alt', ''],
|
||||
['class', 'uml-diagram prefetch-candidate']
|
||||
]
|
||||
token.block = true
|
||||
token.children = altToken
|
||||
token.info = params
|
||||
token.map = [startLine, nextLine]
|
||||
token.markup = markup
|
||||
|
||||
state.line = nextLine + (autoClosed ? 1 : 0)
|
||||
|
||||
return true
|
||||
},
|
||||
{
|
||||
alt: ['paragraph', 'reference', 'blockquote', 'list']
|
||||
}
|
||||
)
|
||||
md.renderer.rules.kroki = md.renderer.rules.image
|
||||
},
|
||||
{
|
||||
openMarker: conf.openMarker,
|
||||
closeMarker: conf.closeMarker,
|
||||
server: conf.server
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,202 +0,0 @@
|
||||
import pako from 'pako'
|
||||
|
||||
// ------------------------------------
|
||||
// Markdown - PlantUML Preprocessor
|
||||
// ------------------------------------
|
||||
|
||||
export default {
|
||||
init(mdinst, conf) {
|
||||
mdinst.use(
|
||||
(md, opts) => {
|
||||
const openMarker = opts.openMarker || '```plantuml'
|
||||
const openChar = openMarker.charCodeAt(0)
|
||||
const closeMarker = opts.closeMarker || '```'
|
||||
const closeChar = closeMarker.charCodeAt(0)
|
||||
const imageFormat = opts.imageFormat || 'svg'
|
||||
const server = opts.server || 'https://plantuml.requarks.io'
|
||||
|
||||
md.block.ruler.before(
|
||||
'fence',
|
||||
'uml_diagram',
|
||||
(state, startLine, endLine, silent) => {
|
||||
let nextLine
|
||||
let i
|
||||
let autoClosed = false
|
||||
let start = state.bMarks[startLine] + state.tShift[startLine]
|
||||
let max = state.eMarks[startLine]
|
||||
|
||||
// Check out the first character quickly,
|
||||
// this should filter out most of non-uml blocks
|
||||
//
|
||||
if (openChar !== state.src.charCodeAt(start)) {
|
||||
return false
|
||||
}
|
||||
|
||||
// Check out the rest of the marker string
|
||||
//
|
||||
for (i = 0; i < openMarker.length; ++i) {
|
||||
if (openMarker[i] !== state.src[start + i]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const markup = state.src.slice(start, start + i)
|
||||
const params = state.src.slice(start + i, max)
|
||||
|
||||
// Since start is found, we can report success here in validation mode
|
||||
//
|
||||
if (silent) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Search for the end of the block
|
||||
//
|
||||
nextLine = startLine
|
||||
|
||||
for (;;) {
|
||||
nextLine++
|
||||
if (nextLine >= endLine) {
|
||||
// unclosed block should be autoclosed by end of document.
|
||||
// also block seems to be autoclosed by end of parent
|
||||
break
|
||||
}
|
||||
|
||||
start = state.bMarks[nextLine] + state.tShift[nextLine]
|
||||
max = state.eMarks[nextLine]
|
||||
|
||||
if (start < max && state.sCount[nextLine] < state.blkIndent) {
|
||||
// non-empty line with negative indent should stop the list:
|
||||
// - ```
|
||||
// test
|
||||
break
|
||||
}
|
||||
|
||||
if (closeChar !== state.src.charCodeAt(start)) {
|
||||
// didn't find the closing fence
|
||||
continue
|
||||
}
|
||||
|
||||
if (state.sCount[nextLine] > state.sCount[startLine]) {
|
||||
// closing fence should not be indented with respect of opening fence
|
||||
continue
|
||||
}
|
||||
|
||||
let closeMarkerMatched = true
|
||||
for (i = 0; i < closeMarker.length; ++i) {
|
||||
if (closeMarker[i] !== state.src[start + i]) {
|
||||
closeMarkerMatched = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!closeMarkerMatched) {
|
||||
continue
|
||||
}
|
||||
|
||||
// make sure tail has spaces only
|
||||
if (state.skipSpaces(start + i) < max) {
|
||||
continue
|
||||
}
|
||||
|
||||
// found!
|
||||
autoClosed = true
|
||||
break
|
||||
}
|
||||
|
||||
const contents = state.src
|
||||
.split('\n')
|
||||
.slice(startLine + 1, nextLine)
|
||||
.join('\n')
|
||||
|
||||
// We generate a token list for the alt property, to mimic what the image parser does.
|
||||
const altToken = []
|
||||
// Remove leading space if any.
|
||||
const alt = params ? params.slice(1) : 'uml diagram'
|
||||
state.md.inline.parse(alt, state.md, state.env, altToken)
|
||||
|
||||
const zippedCode = encode64(
|
||||
pako.deflate('@startuml\n' + contents + '\n@enduml', { to: 'string' })
|
||||
)
|
||||
|
||||
const token = state.push('uml_diagram', 'img', 0)
|
||||
// alt is constructed from children. No point in populating it here.
|
||||
token.attrs = [
|
||||
['src', `${server}/${imageFormat}/${zippedCode}`],
|
||||
['alt', ''],
|
||||
['class', 'uml-diagram']
|
||||
]
|
||||
token.block = true
|
||||
token.children = altToken
|
||||
token.info = params
|
||||
token.map = [startLine, nextLine]
|
||||
token.markup = markup
|
||||
|
||||
state.line = nextLine + (autoClosed ? 1 : 0)
|
||||
|
||||
return true
|
||||
},
|
||||
{
|
||||
alt: ['paragraph', 'reference', 'blockquote', 'list']
|
||||
}
|
||||
)
|
||||
md.renderer.rules.uml_diagram = md.renderer.rules.image
|
||||
},
|
||||
{
|
||||
openMarker: conf.openMarker,
|
||||
closeMarker: conf.closeMarker,
|
||||
imageFormat: conf.imageFormat,
|
||||
server: conf.server
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function encode64(data) {
|
||||
let r = ''
|
||||
for (let i = 0; i < data.length; i += 3) {
|
||||
if (i + 2 === data.length) {
|
||||
r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), 0)
|
||||
} else if (i + 1 === data.length) {
|
||||
r += append3bytes(data.charCodeAt(i), 0, 0)
|
||||
} else {
|
||||
r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), data.charCodeAt(i + 2))
|
||||
}
|
||||
}
|
||||
return r
|
||||
}
|
||||
|
||||
function append3bytes(b1, b2, b3) {
|
||||
const c1 = b1 >> 2
|
||||
const c2 = ((b1 & 0x3) << 4) | (b2 >> 4)
|
||||
const c3 = ((b2 & 0xf) << 2) | (b3 >> 6)
|
||||
const c4 = b3 & 0x3f
|
||||
let r = ''
|
||||
r += encode6bit(c1 & 0x3f)
|
||||
r += encode6bit(c2 & 0x3f)
|
||||
r += encode6bit(c3 & 0x3f)
|
||||
r += encode6bit(c4 & 0x3f)
|
||||
return r
|
||||
}
|
||||
|
||||
function encode6bit(raw) {
|
||||
let b = raw
|
||||
if (b < 10) {
|
||||
return String.fromCharCode(48 + b)
|
||||
}
|
||||
b -= 10
|
||||
if (b < 26) {
|
||||
return String.fromCharCode(65 + b)
|
||||
}
|
||||
b -= 26
|
||||
if (b < 26) {
|
||||
return String.fromCharCode(97 + b)
|
||||
}
|
||||
b -= 26
|
||||
if (b === 0) {
|
||||
return '-'
|
||||
}
|
||||
if (b === 1) {
|
||||
return '_'
|
||||
}
|
||||
return '?'
|
||||
}
|
||||
Loading…
Reference in new issue