mdeck 3.4.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/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,6 +3,8 @@ 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, bibliographyOf } from '../runtime/citations.js'
@@ -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 ────────────────────────────────────

package/src/live/roomTag.js

@@ -1,21 +1,11 @@
 // Finds the component tag a phone should see: the one whose `room` attribute
 // matches, with its content if it has any.
-const escape = text => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+import { tagsIn, closingTagOf } from '../core/tags.js'
 
-// Code is not an activity: fenced blocks and `inline code` are blanked out
-// (keeping every other character where it was) before searching.
-const blank = text => text.replace(/[^\n]/g, ' ')
-export function maskCode(source = '') {
-  return source.replace(/^(```+|~~~+)[^\n]*\n[\s\S]*?^\1[ \t]*$/gm, blank).replace(/`[^`\n]+`/g, blank)
-}
-
-// Inside a tag: anything but its end, with quoted values whole, so a `>` in
-// an attribute (question="Is $x > 0$?") does not end the tag.
-const INSIDE = `(?:[^>"']|"[^"]*"|'[^']*')`
-
-// Every activity in a source, in order: [{ tag, room }].
+// Every activity in a source, in order: [{ tag, room }]. Tags in code are
+// not activities (src/core/tags.js).
 export function roomsIn(source = '') {
-  return [...maskCode(source).matchAll(new RegExp(`<([a-z][a-z0-9-]*)\\b${INSIDE}*?\\broom\\s*=\\s*(["'])([^"']+)\\2`, 'gi'))].map(match => ({ tag: match[1].toLowerCase(), room: match[3] }))
+  return tagsIn(source).filter(tag => !tag.closing && tag.attrs.room).map(tag => ({ tag: tag.name, room: tag.attrs.room }))
 }
 
 // The rooms on one slide, from its body and its named regions (the body is
@@ -34,9 +24,11 @@ export function slideTitleFor(deck, room) {
 }
 
 export function findRoomTag(source, room) {
-  const open = new RegExp(`<([a-z][a-z0-9-]*)\\b${INSIDE}*?\\broom\\s*=\\s*(["'])${escape(room)}\\2${INSIDE}*>`, 'i').exec(maskCode(source))
-  if (!open) return null
-  if (open[0].endsWith('/>')) return open[0]
-  const close = source.indexOf(`</${open[1]}>`, open.index + open[0].length)
-  return close < 0 ? open[0] : source.slice(open.index, close + open[1].length + 3)
+  const text = String(source ?? '').replace(/\r\n?/g, '\n')
+  const tags = tagsIn(text)
+  const at = tags.findIndex(tag => !tag.closing && tag.attrs.room === room)
+  if (at < 0) return null
+  const open = tags[at]
+  const close = open.start == null ? null : closingTagOf(tags, at)
+  return close?.end == null ? open.raw : text.slice(open.start, close.end)
 }

package/src/runtime/main.jsx

@@ -26,6 +26,7 @@ import { strokePath } from '../core/ink.js'
 import { inkFileName } from 'virtual:deck-ink'
 import savedResults from 'virtual:deck-results'
 import { roomsIn, roomsOnSlide, findRoomTag, slideTitleFor } from '../live/roomTag.js'
+import { expandPollLists } from '../core/pollList.js'
 import './reader.css'
 import { SlideRenderer, manifests } from '../layouts/renderSlide'
 import { setCalloutLabels } from './markedSetup'
@@ -81,7 +82,7 @@ function activityOn(deck, slide) {
   const room = roomsOnSlide(slide)[0]
   if (!room) return { room: null, activity: null }
   const tag = findRoomTag(slide.content ?? '', room) ?? Object.values(slide.regions ?? {}).map(region => findRoomTag(region.content ?? '', room)).find(Boolean)
-  const element = tag && new DOMParser().parseFromString(tag, 'text/html').body.firstElementChild
+  const element = tag && new DOMParser().parseFromString(expandPollLists(tag), 'text/html').body.firstElementChild
   const component = element && registry[element.localName]
   if (typeof component?.phone !== 'function') return { room, activity: null }
   const props = Object.fromEntries([...element.attributes].map(attribute => [attribute.name, attribute.value]))

package/src/runtime/markedSetup.js

@@ -5,6 +5,7 @@ import '../components/callout.css'
 import '../components/columns.css'
 import { scanDirectives, sourceLines, fenceState } from '../core/source.js'
 import { CALLOUT_LABELS, labelSetFor } from '../core/labels.js'
+import { expandPollLists } from '../core/pollList.js'
 
 function readDirective(src, name) {
   if (!/^:::\s*[\w-]+/.test(src)) return null
@@ -36,6 +37,8 @@ function escapeHtml(text) {
 }
 
 marked.use(markedKatex({ throwOnError: false, output: 'html' }))
+// A poll's options written as a list inside the tag (src/core/pollList.js).
+marked.use({ hooks: { preprocess: expandPollLists } })
 
 // marked.use() prepends via unshift, so last-registered = highest priority.
 // Register callout first (lowest priority) so columns and steps match before it.

package/assets/extensions/palettes/neon/extension.toml

@@ -1,30 +0,0 @@
-schema = 1
-kind = "palette"
-id = "neon"
-title = "Neon"
-description = "Violet and magenta; loud, for workshops."
-version = "1.0.0"
-author = "Tilman Schieber"
-license = "MIT"
-
-[light]
-"--bg" = "#ffffff"
-"--surface" = "#f4f0fb"
-"--ink" = "#14072b"
-"--ink-soft" = "#3a2d55"
-"--muted" = "#6a6084"
-"--rule" = "#e4ddf3"
-"--accent" = "#9b00d9"
-"--accent-2" = "#d6106f"
-"--on-accent" = "#ffffff"
-
-[dark]
-"--bg" = "#0d0d0d"
-"--surface" = "#1a1a1a"
-"--ink" = "#f0f0f0"
-"--ink-soft" = "#cccccc"
-"--muted" = "#8a8a8a"
-"--rule" = "#2a2a2a"
-"--accent" = "#cc17ff"
-"--accent-2" = "#ff1791"
-"--on-accent" = "#0d0d0d"

package/assets/extensions/themes/aurora/extension.toml

@@ -1,40 +0,0 @@
-schema = 1
-kind = "theme"
-id = "aurora"
-title = "Aurora"
-description = "Northern lights: curtains of light in the accent colours, night-sky chapter and statement slides, frosted glass."
-version = "1.0.0"
-author = "Tilman Schieber"
-license = "MIT"
-# The palette this theme uses unless the deck sets one; colours come only from palettes.
-palette = "neon"
-fonts = [
-  "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap",
-]
-
-[files]
-styles = "styles.css"
-
-# Type, spacing and fonts used by styles.css; colours come from the palette.
-# Deck settings (params) override these.
-[tokens]
-
-# Type scale (px) — projection-appropriate at 1920×1080
-"--fs-display" = "168px"
-"--fs-title" = "112px"
-"--fs-focus" = "100px"
-"--fs-h" = "76px"
-"--fs-sub" = "44px"
-"--fs-body" = "34px"
-"--fs-small" = "26px"
-"--fs-eyebrow" = "20px"
-
-# Spacing
-"--pad-x" = "120px"
-"--pad-y" = "72px"
-"--gap-title" = "48px"
-"--gap-item" = "24px"
-
-# Type families
-"--font-display" = "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
-"--font-body" = "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"