fb-slides 0.5.0 → 0.6.2

package/runtime/snippets.js

@@ -0,0 +1,313 @@
+// ---------------------------------------------------------------------------
+// The block picker — the `+` in the edit drawer, and `/` on an empty line.
+//
+// A snippet is the markup you would otherwise have to remember: the attributes
+// a <video> needs to behave, the `min-width: 0` two columns fall over without,
+// the comment that turns a slide into a live demo. Nothing here renders — the
+// classes it reaches for are the slide vocabulary in theme.base.css.
+//
+// `${…}` in a body marks something to type over: the braces are dropped on the
+// way in and the first one is left selected, so a snippet lands ready to fill.
+// Text selected in the textarea takes the place of that first one — select a
+// paragraph, pick Fragment, and the paragraph is what gets wrapped.
+//
+// `snippets:` in slides.config.js adds a project's own blocks to the list.
+// ---------------------------------------------------------------------------
+
+const CFG = window.__FB_SLIDES__ ?? {};
+
+// `top: true` — the block only works as the first thing in a slide, so that is
+// where it goes, wherever the cursor happens to be.
+const BUILT_IN = [
+  {
+    label: 'Demo, full slide',
+    hint: 'a folder in demo/, running on the slide',
+    top: true,
+    body: '<!-- demo: ${counter} -->',
+  },
+  {
+    label: 'External page, full slide',
+    hint: 'any URL, taking the whole slide',
+    top: true,
+    body: '<!-- demo: ${https://example.com/} -->',
+  },
+  {
+    label: 'Framed embed',
+    hint: 'an iframe that shares the slide with the text',
+    body: '<div class="frame">\n  <iframe src="${https://example.com/}"></iframe>\n</div>',
+  },
+  {
+    label: 'Video',
+    hint: 'a clip from assets/, with the attributes that make it behave',
+    body:
+      '<video src="assets/${clip.mp4}" controls muted playsinline preload="metadata"\n' +
+      '  style="width: 78%; aspect-ratio: 16 / 9;"></video>',
+  },
+  {
+    label: 'Image',
+    hint: 'centred, no frame around it',
+    body: '![](assets/${shot.png})',
+  },
+  {
+    label: 'Two columns',
+    hint: 'code on one side, words on the other',
+    body:
+      '<div class="cols">\n<div class="col">\n\n${left}\n\n</div>\n' +
+      '<div class="col">\n\n${right}\n\n</div>\n</div>',
+  },
+  {
+    label: 'Code',
+    hint: 'a fenced block, highlighted',
+    body: '```${ts}\n${code}\n```',
+  },
+  {
+    label: 'Code, stepped',
+    hint: 'the block reveals itself a range of lines at a time',
+    body: '```${ts} [1-3|5-7|9]\n${code}\n```',
+  },
+  {
+    label: 'Diagram',
+    hint: 'a mermaid graph, drawn at load',
+    body: '```mermaid\nflowchart LR\n  A[${Client}] --> B[Server]\n```',
+  },
+  {
+    label: 'Fragment',
+    hint: 'appears on the next press, on its own',
+    body: '<p class="fragment">${text}</p>',
+  },
+  {
+    label: 'Callout',
+    hint: 'a bordered block — the point the slide comes back to',
+    body: '<div class="box">\n\n${text}\n\n</div>',
+  },
+  {
+    label: 'Caption',
+    hint: 'a quiet line under a figure',
+    body: '<p class="caption">${text}</p>',
+  },
+  {
+    label: 'Speaker page',
+    hint: 'photos down the left edge, who you are on the right',
+    top: true,
+    body:
+      '<!-- .slide: class="author-slide" -->\n\n' +
+      '<div class="author-photo">\n' +
+      '  <img src="assets/author/${portrait.jpg}" alt="" />\n' +
+      '  <img src="assets/author/on-stage.jpg" alt="" />\n' +
+      '</div>\n\n' +
+      '<div class="author-bio">\n' +
+      '  <h1>Your name</h1>\n' +
+      '  <ul>\n' +
+      '    <li>What you do</li>\n' +
+      '    <li>What you are known for</li>\n' +
+      '  </ul>\n' +
+      '  <p class="author-meta">The stack · you · work · with</p>\n' +
+      '  <p class="author-meta">❤️ Life outside work — <strong>yoursite.dev</strong></p>\n' +
+      '</div>',
+  },
+  {
+    label: 'Slide class',
+    hint: 'hand this slide a class of your own',
+    top: true,
+    body: '<!-- .slide: class="${name}" -->',
+  },
+];
+
+// The project's own blocks land after the built-in ones. A snippet without a
+// body would be an entry that inserts nothing, so it never reaches the list.
+const catalog = () => [
+  ...BUILT_IN,
+  ...(Array.isArray(CFG.snippets) ? CFG.snippets : []).filter(
+    (snippet) => snippet && typeof snippet.body === 'string',
+  ),
+];
+
+const PLACEHOLDER = /\$\{([^}]*)\}/g;
+
+// Unwrap every `${…}` to the word inside it, and hand back where the first one
+// ended up — that is the range the cursor lands on. `taken` is the text the
+// editor had selected, which stands in for that first placeholder.
+const fill = (body, taken) => {
+  let text = '';
+  let range = null;
+  let read = 0;
+  for (const match of body.matchAll(PLACEHOLDER)) {
+    const word = range === null && taken ? taken : match[1];
+    text += body.slice(read, match.index) + word;
+    range ??= [text.length - word.length, text.length];
+    read = match.index + match[0].length;
+  }
+  return { text: text + body.slice(read), range };
+};
+
+// A block wants a blank line around it, and exactly one: pasting into the
+// middle of a paragraph should not glue the markup onto a sentence, and
+// pasting into a gap should not open a second one.
+const gap = (text, atEnd) => {
+  if (!text) return '';
+  const touching = atEnd ? /\n\n$/.test(text) : /^\n\n/.test(text);
+  if (touching) return '';
+  return (atEnd ? /\n$/.test(text) : /^\n/.test(text)) ? '\n' : '\n\n';
+};
+
+export const PLUS_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"
+  stroke-linecap="round" aria-hidden="true">
+  <path d="M12 6v12" /><path d="M6 12h12" />
+</svg>`;
+
+// ---------------------------------------------------------------------------
+// The picker itself. `area` is the slide's textarea; `paint` re-renders the
+// slide the way typing into it does.
+// ---------------------------------------------------------------------------
+
+export const createSnippets = ({ area, paint }) => {
+  const element = document.createElement('div');
+  element.className = 'deck-snip';
+  element.hidden = true;
+  element.innerHTML = `
+    <input class="deck-snip-filter" type="text" spellcheck="false" autocomplete="off"
+      placeholder="Insert a block…" aria-label="Find a block" />
+    <ul class="deck-snip-list" role="listbox"></ul>
+  `;
+
+  const filter = element.querySelector('.deck-snip-filter');
+  const list = element.querySelector('.deck-snip-list');
+
+  const blocks = catalog();
+  list.innerHTML = blocks
+    .map(
+      (snippet, index) =>
+        `<li role="option" data-index="${index}"><span>${snippet.label}</span>` +
+        `<small>${snippet.hint ?? ''}</small></li>`,
+    )
+    .join('');
+  const items = [...list.children];
+
+  // Where the block goes, decided when the picker opens: the cursor at that
+  // moment, or the `/` that summoned it. `take` says whether what that range
+  // covers is the author's own text, to be threaded through the snippet.
+  let target = null;
+
+  // The cursor as it was when the textarea last had it. A textarea that has
+  // never been clicked reports 0, which would drop every block at the top of
+  // the slide instead of at the end of what is written.
+  let caret = [0, 0];
+  const remember = () => {
+    caret = [area.selectionStart, area.selectionEnd];
+  };
+  for (const event of ['keyup', 'click', 'select', 'blur']) area.addEventListener(event, remember);
+
+  // A new slide in the drawer: the old cursor belonged to the old text.
+  const reset = () => {
+    caret = [area.value.length, area.value.length];
+  };
+
+  const current = () => list.querySelector('.is-current');
+
+  const highlight = (item) => {
+    current()?.classList.remove('is-current');
+    item?.classList.add('is-current');
+    item?.scrollIntoView({ block: 'nearest' });
+  };
+
+  const apply = () => {
+    const shown = items.filter((item) => !item.hidden);
+    if (!shown.length) return;
+    highlight(shown.includes(current()) ? current() : shown[0]);
+  };
+
+  const search = () => {
+    const query = filter.value.trim().toLowerCase();
+    for (const item of items) {
+      const snippet = blocks[Number(item.dataset.index)];
+      item.hidden = Boolean(query) && !`${snippet.label} ${snippet.hint ?? ''}`.toLowerCase().includes(query);
+    }
+    apply();
+  };
+
+  const close = ({ restore = true } = {}) => {
+    if (element.hidden) return;
+    element.hidden = true;
+    target = null;
+    if (!restore) return;
+    area.focus();
+    area.setSelectionRange(caret[0], caret[1]);
+  };
+
+  const open = (where) => {
+    target = where ?? {
+      // Live if the cursor is still in the box, remembered if it moved on.
+      ...(document.activeElement === area
+        ? { from: area.selectionStart, to: area.selectionEnd }
+        : { from: caret[0], to: caret[1] }),
+      take: true,
+    };
+    filter.value = '';
+    search();
+    element.hidden = false;
+    filter.focus();
+  };
+
+  const insert = (snippet) => {
+    const { from, to, take } = target ?? { from: area.value.length, to: area.value.length };
+    // A block that only works at the top of a slide goes there whatever the
+    // cursor was doing, and never swallows a selection on the way.
+    const at = snippet.top ? { from: 0, to: 0, take: false } : { from, to, take };
+
+    const before = area.value.slice(0, at.from);
+    const after = area.value.slice(at.to);
+    const { text, range } = fill(snippet.body, at.take ? area.value.slice(at.from, at.to) : '');
+
+    const lead = gap(before, true);
+    const trail = gap(after, false);
+    area.value = before + lead + text + trail + after;
+
+    const start = before.length + lead.length;
+    close({ restore: false });
+    area.focus();
+    if (range) area.setSelectionRange(start + range[0], start + range[1]);
+    else area.setSelectionRange(start + text.length, start + text.length);
+    remember();
+    paint();
+  };
+
+  // ---- wiring -------------------------------------------------------------
+
+  filter.addEventListener('input', search);
+
+  filter.addEventListener('keydown', (event) => {
+    const shown = items.filter((item) => !item.hidden);
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const step = event.key === 'ArrowDown' ? 1 : -1;
+      const index = shown.indexOf(current());
+      highlight(shown[(index + step + shown.length) % shown.length]);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const item = current();
+      if (item) insert(blocks[Number(item.dataset.index)]);
+    }
+  });
+
+  list.addEventListener('click', (event) => {
+    const item = event.target.closest('li');
+    if (item) insert(blocks[Number(item.dataset.index)]);
+  });
+  list.addEventListener('mousemove', (event) => {
+    const item = event.target.closest('li');
+    if (item && item !== current()) highlight(item);
+  });
+
+  // `/` on an empty line opens the same list without leaving the keyboard, and
+  // the block takes the place of the slash.
+  area.addEventListener('input', (event) => {
+    if (event.inputType !== 'insertText' || event.data !== '/') return;
+    const at = area.selectionStart - 1;
+    if (at > 0 && area.value[at - 1] !== '\n') return;
+    open({ from: at, to: at + 1, take: false });
+  });
+
+  return { element, open, close, isOpen: () => !element.hidden, reset };
+};
+
+export default createSnippets;

package/runtime/spotlight.js

@@ -142,7 +142,15 @@ const RevealSpotlight = () => ({
     const setSpot = (on) => {
       armed = on;
       button.setAttribute('aria-pressed', String(on));
-      toolbar.classList.toggle('is-armed', on);
+      // Recomputed from every module's button, not toggled with this one's
+      // boolean: the arming handshake runs the loser's stand-down after the
+      // winner set the class, and the last writer would close the bar with a
+      // tool still armed. The edit chip's pressed state is the drawer, so it
+      // does not count.
+      toolbar.classList.toggle(
+        'is-armed',
+        !!toolbar.querySelector('.deck-tool[aria-pressed="true"]:not(#tool-edit)'),
+      );
       // Arming must start from a whole veil: a hole still mid-fade from last
       // time would leak the pointer through (see clear above).
       if (on) veil.style.clipPath = '';