@miragon/slidev-toolkit 1.7.1 → 1.7.2

package/components/StepList.vue

@@ -31,6 +31,7 @@
   margin: 0;
 }
 .step-list.step-list :deep(p + p) { margin-top: 0.4em; }
+.step-list.step-list :deep(.step__body > p) { display: inline; margin: 0; }
 .step-list.step-list :deep(strong) { font-weight: 700; color: var(--miragon-text-primary); }
 .step-list.step-list :deep(a) {
   color: var(--miragon-blue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",

package/setup/transformers.ts

@@ -0,0 +1,67 @@
+import { defineTransformersSetup, defineMarkdownTransformer } from '@slidev/types'
+
+/**
+ * Make inline Markdown render inside a component body, whatever the author wrote.
+ *
+ * Slidev only runs inline Markdown (`` `code` ``, **bold**, links) inside a
+ * component body when that body is its OWN Markdown block, i.e. separated from
+ * the opening/closing tags by blank lines. A body written on the tag line
+ * (`<Card title="X">`code`</Card>`) is handed through as raw HTML and the
+ * backticks/asterisks render literally. That is a silent footgun: the natural,
+ * one-line authoring form the deck otherwise mandates is exactly the form that
+ * breaks.
+ *
+ * This pre-transformer rewrites the single-line form into the blank-line form
+ * before the Markdown is parsed, so authors keep writing components on one line
+ * and inline Markdown just works:
+ *
+ *   <Step label="Handle">`@Autowired ProcessEngine`.</Step>
+ *
+ * becomes, only for the parser:
+ *
+ *   <Step label="Handle">
+ *
+ *   `@Autowired ProcessEngine`.
+ *
+ *   </Step>
+ *
+ * Paired with the `.step__body > p` rule in StepList.vue (which renders the
+ * resulting <p> inline) the step still reads as "Label: body" on one line.
+ *
+ * Scope is deliberately narrow: only the components whose default slot is a
+ * prose body, only when the whole `<Tag …>body</Tag>` sits on a single line
+ * (multi-line bodies are already blank-line blocks and are left untouched), and
+ * never inside fenced code blocks (so slides that *show* component source stay
+ * verbatim). Extend BODY_TAGS if another prose-body component is added.
+ */
+const BODY_TAGS = ['Card', 'Step']
+
+// <indent><Tag attrs>body</Tag> with body and close tag on the same line.
+const SINGLE_LINE = new RegExp(
+  String.raw`^([ \t]*)<(${BODY_TAGS.join('|')})\b([^>\n]*)>(.+?)</\2>[ \t]*$`,
+)
+const FENCE = /^\s*(```|~~~)/
+
+const wrapComponentBody = defineMarkdownTransformer((ctx) => {
+  const src = ctx.s.original
+  if (!src) return
+  const lines = src.split('\n')
+  let inFence = false
+  let changed = false
+  for (let i = 0; i < lines.length; i++) {
+    if (FENCE.test(lines[i])) {
+      inFence = !inFence
+      continue
+    }
+    if (inFence) continue
+    const m = lines[i].match(SINGLE_LINE)
+    if (!m) continue
+    const [, indent, tag, attrs, body] = m
+    if (!body.trim()) continue
+    lines[i] = `${indent}<${tag}${attrs}>\n\n${body.trim()}\n\n${indent}</${tag}>`
+    changed = true
+  }
+  if (changed) ctx.s.overwrite(0, src.length, lines.join('\n'))
+})
+
+export default defineTransformersSetup(() => ({ pre: [wrapComponentBody] }))