mdeck 3.3.0 → 3.5.0

package/src/core/tags.js

@@ -0,0 +1,195 @@
+import { Marked } from 'marked'
+import markedKatex from 'marked-katex-extension'
+
+// The HTML tags in a deck's Markdown, found the way the slide finds them:
+// marked decides what is HTML (not code, not a tag a blank line cut in two),
+// and the tags in that HTML are read the way a browser reads them, so a `>`
+// in a quoted value (question="Is $x > 0$?") does not end its tag. Every
+// part of mdeck that looks for tags in a deck's text goes through here.
+
+const lexer = new Marked().use(markedKatex({ throwOnError: false, output: 'html' }))
+
+const ENTITIES = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' }
+const decode = value => value.replace(/&(?:#(\d+)|#x([0-9a-f]+)|([a-z]+));/gi, (entity, dec, hex, name) =>
+  dec ? String.fromCodePoint(Number(dec)) : hex ? String.fromCodePoint(parseInt(hex, 16)) : ENTITIES[name.toLowerCase()] ?? entity)
+
+const SPACE = /[\t\n\f\r ]/
+// Elements whose content is text, not tags.
+const RAW_TEXT = new Set(['script', 'style', 'textarea', 'title'])
+
+/**
+ * The tags in a piece of HTML, in order: { name, attrs, spans, raw, index,
+ * end, closing, selfClosing }, `spans` giving where each value is in `raw`. Attribute values are decoded and a repeated
+ * attribute keeps its first value, as in the browser. Comments are skipped,
+ * and a `<` that starts no tag is text.
+ */
+export function scanTags(html) {
+  const tags = []
+  let i = 0
+  while ((i = html.indexOf('<', i)) >= 0) {
+    if (html.startsWith('<!--', i)) {
+      const close = html.indexOf('-->', i + 4)
+      i = close < 0 ? html.length : close + 3
+      continue
+    }
+    const tag = readTag(html, i)
+    if (!tag) { i++; continue }
+    tags.push(tag)
+    i = tag.end
+    if (!tag.closing && !tag.selfClosing && RAW_TEXT.has(tag.name)) {
+      const close = html.toLowerCase().indexOf(`</${tag.name}`, i)
+      i = close < 0 ? html.length : close
+    }
+  }
+  return tags
+}
+
+function readTag(html, start) {
+  let i = start + 1
+  const closing = html[i] === '/'
+  if (closing) i++
+  const name = /^[a-z][^\t\n\f\r />]*/i.exec(html.slice(i))?.[0]
+  if (!name) return null
+  i += name.length
+  const attrs = {}
+  // Where each attribute's value is in `raw`, as [from, to].
+  const spans = {}
+  let selfClosing = false
+  while (i < html.length) {
+    while (SPACE.test(html[i] ?? '')) i++
+    if (html[i] === '>') return { name: name.toLowerCase(), attrs, spans, raw: html.slice(start, i + 1), index: start, end: i + 1, closing, selfClosing }
+    if (html[i] === '/') { selfClosing = html[i + 1] === '>'; i++; continue }
+    if (i >= html.length) break
+    selfClosing = false
+    let attr = html[i++]
+    while (i < html.length && !SPACE.test(html[i]) && !'/>='.includes(html[i])) attr += html[i++]
+    while (SPACE.test(html[i] ?? '')) i++
+    let value = ''
+    let span = [i - start, i - start]
+    if (html[i] === '=') {
+      i++
+      while (SPACE.test(html[i] ?? '')) i++
+      const quote = html[i]
+      if (quote === '"' || quote === "'") {
+        const close = html.indexOf(quote, i + 1)
+        if (close < 0) return null
+        value = html.slice(i + 1, close)
+        span = [i + 1 - start, close - start]
+        i = close + 1
+      } else {
+        const from = i
+        while (i < html.length && !SPACE.test(html[i]) && html[i] !== '>') i++
+        value = html.slice(from, i)
+        span = [from - start, i - start]
+      }
+    }
+    attr = attr.toLowerCase()
+    if (!(attr in attrs)) { attrs[attr] = decode(value); spans[attr] = span }
+  }
+  return null
+}
+
+// The children of a token, whatever kind it is.
+const childrenOf = token => [
+  ...token.tokens ?? [],
+  ...token.items ?? [],
+  ...(token.header ?? []).flatMap(cell => cell.tokens ?? []),
+  ...(token.rows ?? []).flat().flatMap(cell => cell.tokens ?? []),
+]
+
+/**
+ * The HTML in a piece of Markdown, as marked reads it: [{ text, start }],
+ * where `start` is the HTML's offset in the source, or null where it cannot
+ * be told (such as a tag spread over several lines of a quotation).
+ */
+export function htmlIn(markdown = '') {
+  const source = String(markdown ?? '').replace(/\r\n?/g, '\n')
+  const found = []
+  // A child's raw text is found inside its parent's, after its older sibling.
+  const walk = (tokens, parent, parentStart) => {
+    let cursor = 0
+    for (const token of tokens) {
+      const at = parentStart == null || token.raw == null ? -1 : parent.indexOf(token.raw, cursor)
+      const start = at < 0 ? null : parentStart + at
+      if (at >= 0) cursor = at + token.raw.length
+      if (token.type === 'html') found.push({ text: token.raw ?? token.text, start })
+      const children = childrenOf(token)
+      if (children.length) walk(children, token.raw ?? '', start)
+    }
+  }
+  walk(lexer.lexer(source), source, 0)
+  return found
+}
+
+/**
+ * The tags in a piece of Markdown, opening and closing, in order, each with
+ * `start` and `end` in the source (null where it cannot be told). Tags in
+ * code are not tags.
+ */
+export function tagsIn(markdown = '') {
+  return htmlIn(markdown).flatMap(({ text, start }) => scanTags(text).map(tag => ({
+    ...tag,
+    start: start == null ? null : start + tag.index,
+    end: start == null ? null : start + tag.end,
+  })))
+}
+
+/**
+ * The closing tag of `tags[at]` in a list from tagsIn or scanTags, past any
+ * of the same name inside it; null when it has none.
+ */
+export function closingTagOf(tags, at) {
+  const open = tags[at]
+  if (open.closing || open.selfClosing) return null
+  let depth = 0
+  for (const tag of tags.slice(at + 1)) {
+    if (tag.name !== open.name || tag.selfClosing) continue
+    if (!tag.closing) depth++
+    else if (depth) depth--
+    else return tag
+  }
+  return null
+}
+
+/**
+ * Self-closing tags of the named elements given a closing tag. A browser
+ * takes `<poll />` for `<poll>`, so what follows would end up inside it.
+ */
+export function closeTags(html, names) {
+  let out = ''
+  let last = 0
+  for (const tag of scanTags(html)) {
+    if (!tag.selfClosing || !names.has(tag.name)) continue
+    out += html.slice(last, tag.index) + tag.raw.replace(/\s*\/>$/, '>') + `</${tag.name}>`
+    last = tag.end
+  }
+  return out + html.slice(last)
+}
+
+/** The opening tags (and self-closing ones) in a piece of Markdown. */
+export const openTagsIn = markdown => tagsIn(markdown).filter(tag => !tag.closing)
+
+/**
+ * Calls `fn(tag)` for every tag in a piece of Markdown and puts what it
+ * returns in its place (the tag stays when it returns undefined). Line ends
+ * come back as \n.
+ */
+export function replaceTagsIn(markdown, fn) {
+  const source = String(markdown ?? '').replace(/\r\n?/g, '\n')
+  let out = ''
+  let last = 0
+  for (const tag of tagsIn(source)) {
+    if (tag.start == null || tag.start < last) continue
+    const replacement = fn(tag)
+    if (replacement == null) continue
+    out += source.slice(last, tag.start) + replacement
+    last = tag.end
+  }
+  return out + source.slice(last)
+}
+
+/** A tag's text with one attribute's value replaced (as written, not encoded). */
+export function withAttribute(tag, name, value) {
+  const [from, to] = tag.spans[name]
+  return tag.raw.slice(0, from) + value + tag.raw.slice(to)
+}

package/src/editor/sampleDeck.js

@@ -6,6 +6,26 @@
 // over hills under a sun, for every layout that shows a picture.
 export const SAMPLE_PICTURE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"><rect width="800" height="500" fill="var(--surface, #eef1f4)"/><g stroke="var(--rule, #d5dbe1)" stroke-width="2"><path d="M0 100H800M0 200H800M0 300H800M0 400H800M100 0V500M200 0V500M300 0V500M400 0V500M500 0V500M600 0V500M700 0V500"/></g><circle cx="580" cy="165" r="128" fill="none" stroke="var(--accent, #3d5a73)" stroke-width="4" opacity="0.35"/><circle cx="580" cy="165" r="88" fill="var(--accent, #3d5a73)"/><path d="M0 360C140 292 262 300 384 338S628 424 800 330V500H0Z" fill="var(--accent-2, #c2410c)"/><path d="M0 418C168 366 330 392 470 422S690 474 800 434V500H0Z" fill="var(--accent, #3d5a73)" opacity="0.6"/><polyline points="80,262 170,214 260,236 350,170 440,196" fill="none" stroke="var(--ink, #1b2733)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><g fill="var(--bg, #ffffff)" stroke="var(--ink, #1b2733)" stroke-width="5"><circle cx="80" cy="262" r="10"/><circle cx="170" cy="214" r="10"/><circle cx="260" cy="236" r="10"/><circle cx="350" cy="170" r="10"/><circle cx="440" cy="196" r="10"/></g></svg>'
 
+// The references the sample deck cites. Builds find them in a file beside the
+// deck; the dev and edit servers read them from here where there is none.
+export const SAMPLE_REFERENCES_FILE = 'sample-references.bib'
+export const SAMPLE_REFERENCES = `@article{doe2024,
+  author  = {Doe, Jane and Roe, Richard},
+  title   = {Measuring how slides are read},
+  journal = {Journal of Sample Studies},
+  year    = {2024},
+  volume  = {12},
+  pages   = {1--10}
+}
+
+@book{roe2023,
+  author    = {Roe, Richard},
+  title     = {Quotations and Their Sources},
+  publisher = {Example Press},
+  year      = {2023}
+}
+`
+
 // `picture` is where the slides find the picture: a file beside the deck, or
 // a data URL where there is no such file.
 export function sampleDeck(picture = './picture.svg') {
@@ -15,6 +35,7 @@ meta:
   author: "A. Author"
   organization: "Institute"
   date: "2026-10-06"
+bibliography: ${SAMPLE_REFERENCES_FILE}
 ---
 
 ---
@@ -51,10 +72,10 @@ alt: "Shapes"
 ---
 # Lists, emphasis and code
 
-- A point with *emphasis* and **strong** words
-- A second point with \`inline code\`
-  - A nested point
-  - Another nested point
+1. A step with *emphasis* and **strong** words
+2. A step with \`inline code\` and a [link](https://example.com)
+   - A nested point
+   - Another nested point
 
 \`\`\`js
 const total = values.reduce((sum, value) => sum + value, 0)
@@ -69,7 +90,7 @@ const total = values.reduce((sum, value) => sum + value, 0)
 | Treatment | 5.1 | 0.6 |
 | Follow-up | 5.0 | 0.7 |
 
-The difference is $\\Delta = 0.9$, with a footnote.[^1]
+The difference is $\\Delta = 0.9$ [@doe2024, p. 4], with a footnote.[^1]
 
 [^1]: A source for the claim.
 
@@ -115,9 +136,9 @@ $$
 
 +++
 
-1. First step
-2. Second step
-3. Third step
+> A quotation set apart from the text.
+
+As @roe2023 notes, a quote needs its source.
 :::
 
 ---
@@ -158,6 +179,11 @@ alt: "Shapes"
 overlay: true
 ---
 # A picture that fills the slide.
+
+---
+# References
+
+<bibliography />
 `.replaceAll('./picture.svg', picture)
 }
 

package/src/extensions/discover.js

@@ -21,8 +21,8 @@ export function userExtensionsDir() {
 }
 
 // The built-in themes and palettes this user removed (`mdeck themes remove
-// aurora`): they stay in mdeck's folder but are not offered. Kept as
-// "theme:aurora" and "palette:neon".
+// glass`): they stay in mdeck's folder but are not offered. Kept as
+// "theme:glass" and "palette:nordic".
 const removedFile = () => resolve(mdeckHome(), 'removed.json')
 export function removedBuiltIns() {
   let saved = {}

package/src/extensions/moved.js

@@ -1,9 +1,9 @@
-// Themes and palettes that came with mdeck before 3.0 and now live in the
-// theme repository. A deck that names one is told how to install it instead
+// Themes and palettes that once came with mdeck and now live in the theme
+// repository. A deck that names one is told how to install it instead
 // of being told the name is unknown.
 export const MOVED = {
-  themes: ['duet', 'editorial', 'fhnw', 'terminal', 'sketch'],
-  palettes: ['cobalt', 'terra', 'brand', 'phosphor', 'pastel', 'forest'],
+  themes: ['duet', 'editorial', 'fhnw', 'terminal', 'sketch', 'aurora'],
+  palettes: ['terra', 'brand', 'phosphor', 'pastel', 'forest', 'neon'],
 }
 
 // Palettes that were removed because another one looks almost the same, by

package/src/layouts/layoutApi.jsx

@@ -3,9 +3,11 @@ import { useEffect, useRef } from 'preact/hooks'
 import { render } from 'preact'
 import { marked, Parser } from 'marked'
 import { registry } from '../runtime/registry'
+import { scanTags, closeTags } from '../core/tags.js'
+import { expandPollLists } from '../core/pollList.js'
 import { InkLayer } from '../runtime/ink/InkLayer.jsx'
 import themedSvgs from 'virtual:deck-svgs'
-import { renderCitations, citationsHtml as referencesOf } from '../runtime/citations.js'
+import { renderCitations, citationsHtml as referencesOf, bibliographyOf } from '../runtime/citations.js'
 
 // ─── Content extraction ────────────────────────────────────────────────────
 
@@ -39,7 +41,9 @@ function preprocessFootnotes(markdown) {
 export { t } from '../core/labels.js'
 
 export function extractContent(markdown, { headingLevels = [], paragraph = false } = {}) {
-  const processed = markdown
+  // marked's preprocess hook (src/runtime/markedSetup.js) does not run for
+  // marked.lexer, so the lists of polls become their options here.
+  const processed = expandPollLists(markdown)
   const footnotesHtml = ''
   const tokens = marked.lexer(processed)
   const headings = {}
@@ -74,17 +78,19 @@ function themedDataSvg(src) {
   return /var\(--/.test(markup) && /^\s*<svg\b/.test(markup) ? markup : null
 }
 
-const attribute = (tag, name) => tag.match(new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, 'i'))?.slice(1).find(v => v != null)
-
 // Pictures in slide text keep the drawing's own size, like an <img>.
 export function inlineThemedPictures(html) {
   if (!html || !html.includes('<img')) return html
-  return html.replace(/<img\b[^>]*>/gi, tag => {
-    const markup = themedSvg(attribute(tag, 'src'))
-    if (!markup) return tag
-    const alt = attribute(tag, 'alt') ?? ''
-    return `<span class="themed-picture themed-picture--inline" role="img" aria-label="${alt}">${markup}</span>`
-  })
+  let out = ''
+  let last = 0
+  for (const tag of scanTags(html)) {
+    const markup = tag.name === 'img' && !tag.closing && themedSvg(tag.attrs.src)
+    if (!markup) continue
+    const alt = (tag.attrs.alt ?? '').replace(/&/g, '&amp;').replace(/"/g, '&quot;')
+    out += html.slice(last, tag.index) + `<span class="themed-picture themed-picture--inline" role="img" aria-label="${alt}">${markup}</span>`
+    last = tag.end
+  }
+  return out + html.slice(last)
 }
 
 // A picture from the slide's settings; `fit: cover` fills its box like a
@@ -100,6 +106,10 @@ export function Picture({ src, alt, fit, position, class: className, ...attribut
 
 // ─── Hydration for inline components ──────────────────────────────────────
 
+// Components may be written `<poll … />`, which a browser takes for an open
+// tag, putting what follows inside the component, where it is lost.
+const COMPONENT_TAGS = new Set(Object.keys(registry))
+
 export function HtmlContent({ html, class: className, ...attributes }) {
   const ref = useRef()
 
@@ -119,7 +129,7 @@ export function HtmlContent({ html, class: className, ...attributes }) {
     return () => mounted.forEach(wrapper => render(null, wrapper))
   }, [html])
 
-  return <div class={className} {...attributes} ref={ref} dangerouslySetInnerHTML={{ __html: inlineThemedPictures(html) }} />
+  return <div class={className} {...attributes} ref={ref} dangerouslySetInnerHTML={{ __html: closeTags(inlineThemedPictures(html), COMPONENT_TAGS) }} />
 }
 
 // ─── Header / footer / footnotes rails ────────────────────────────────────
@@ -188,11 +198,12 @@ export function prepareSlide(slide) {
     .sort((a, b) => position(a[1]) - position(b[1]))
   let separator = '\u0000mdeck-region\u0000'
   while (entries.some(([, r]) => r.content.includes(separator))) separator += '\u0000'
-  const cited = renderCitations(entries.map(([, r]) => r.content).join(separator))
+  const bib = bibliographyOf(slide.deckConfig)
+  const cited = renderCitations(entries.map(([, r]) => r.content).join(separator), bib)
   const { processed, footnotesHtml } = preprocessFootnotes(cited.markdown)
   const pieces = processed.split(separator)
   const regions = Object.fromEntries(entries.map(([name, region], i) => [name, { ...region, content: pieces[i] }]))
-  const citationsHtml = slide.deckConfig?.show?.citations === false ? '' : referencesOf(cited.ids)
+  const citationsHtml = slide.deckConfig?.show?.citations === false ? '' : referencesOf(cited.ids, bib)
   return { ...slide, regions, content: regions.body?.content ?? '', footnotesHtml, citationsHtml }
 }
 

package/src/live/answer/answer.css

@@ -33,3 +33,22 @@ body { min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.45
 .answer-status { margin: 18px 0 0; color: var(--muted); min-height: 2.8em; }
 footer { padding: 16px 20px; text-align: center; color: var(--muted); font-size: 14px; }
 .answer-follow { display: block; margin: 0 20px 24px; padding: 12px 16px; text-align: center; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
+/* Maths in a question or option (MathML, see answer.js). */
+.answer-rich math { font-size: 1.1em; }
+/* buttons="letters|numbers": big keys; the options are on the slide. */
+.answer-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; }
+.answer .answer-keys button { padding: 22px 0; text-align: center; font-size: 28px; }
+/* `multiple`: a box that is ticked when picked. */
+.answer-check { display: inline-block; width: 1em; height: 1em; margin-right: 12px; border: 2px solid currentColor; border-radius: 4px; vertical-align: -.12em; opacity: .6; }
+.answer button.is-picked .answer-check { opacity: 1; background: currentColor; box-shadow: inset 0 0 0 2px var(--accent); }
+/* Closed: no more answers. */
+.answer button:disabled, .answer textarea:disabled, .answer input:disabled { opacity: .45; cursor: default; }
+.answer button.is-picked:disabled { opacity: .75; }
+/* Once the right answer shows. */
+.answer-verdict { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 600; }
+.answer-verdict.is-right { background: color-mix(in srgb, #16a34a 16%, transparent); color: color-mix(in srgb, #16a34a 75%, var(--ink)); }
+.answer-verdict.is-wrong { background: color-mix(in srgb, #dc2626 12%, transparent); }
+/* <numeric>: a number field and Send. */
+.answer-number { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
+.answer-number input { width: 100%; min-width: 0; padding: 14px; border: 2px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 22px; font-variant-numeric: tabular-nums; }
+.answer-number button[type=submit] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--bg)); }