shelving/markup/rule/fenced.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createMarkupRule } from "../MarkupRule.js";
import { BLOCK_CONTENT_REGEXP, BLOCK_START_REGEXP, createBlockRegExp, LINE_CONTENT_REGEXP, LINE_SPACE_REGEXP } from "../util/regexp.js";
const FENCE = "`{3,}|~{3,}";
/**
 * Fenced code blocks
 * - Same as Markdown syntax.
 * - Start when we reach an opening fence on a new line.
 * - Stop when we reach a matching closing fence on a new line, or the end of the string.
 * - Closing fence must be exactly the same as the opening fence, and can be made of three or more "```" backticks, or three or more `~~~` tildes.
 * - If there's no closing fence the code block will run to the end of the current string.
 * - Markdown-style four-space indent syntax is not supported (only fenced code since it's less confusing and more common).
 */
export const FENCED_RULE = createMarkupRule(createBlockRegExp(`(?<code>${BLOCK_CONTENT_REGEXP})`, `${BLOCK_START_REGEXP}(?<fence>${FENCE}) *(?<title>${LINE_CONTENT_REGEXP})\n`, // Starts with the fence
`(?:${LINE_SPACE_REGEXP}*\n\\k<fence>(?:\\s*\\n)?|$)`), (key, { title, code }) => {
    const caption = title?.trim();
    // Scrollable region pattern: focusable, labelled <figure> wraps the code block so keyboard users can arrow-scroll wide lines.
    return caption ? (_jsxs("figure", { tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: [_jsx("figcaption", { children: caption }), _jsx("pre", { children: _jsx("code", { children: code.trim() }) })] }, key)) : (_jsx("figure", { tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: _jsx("pre", { children: _jsx("code", { children: code.trim() }) }) }, key));
}, ["block", "list"], 10);