feat(markdown): add emphasis, blockquotes, breaks, autolinks and escapes (#84)

The inline renderer knew three constructs: **strong**, code spans and links.
Everything else printed its own delimiters — *italic* rendered its asterisks,
and a backslash escape rendered the backslash.

Inline parsing now walks the source once against the mask that
markdownSyntaxSource already produces, so a delimiter inside code, behind a
backslash, or inside an autolink can never open a span, and spans nest by
recursing on the same pass. Adds em, strong and both together in either
delimiter, ~~del~~, autolinks, and CommonMark backslash escapes; underscore
forms are refused mid-word so snake_case survives, and a delimiter that does
not hug its content stays literal so 2 * 3 * 4 is arithmetic.

Blocks gain > blockquotes, which re-enter the block renderer so a list or a
heading inside a quote stays one, and --- thematic breaks, checked ahead of
lists so - - - is a break.

Two defects go with it: a closing hash sequence stayed in the heading label,
and a void block element left inside a markdown block rendered as <p><hr/></p>,
which no browser keeps nested.

Costs 1.1 KB gzip, against roughly 11 KB for the smallest markdown engine that
could replace this file.

Author: vltansky

examples/component-tour.html

@@ -241,6 +241,23 @@
 
 ###### Level six closes it out
 
+## Inline markup
+
+*Emphasis* and _its underscore form_ both italicize, **strong** and __its
+underscore form__ both bold, ***the two together*** nest, and ~~strikethrough~~
+marks a retraction. Identifiers like snake_case_name keep their underscores,
+`2 * 3 * 4` keeps its stars, and a \*backslash escape\* keeps the literal
+delimiters. Autolinks such as <https://github.com/wix-incubator/htmdx> and
+<team@example.com> resolve without a label.
+
+> A blockquote holds its own Markdown: **strong text**, `code`, and lists.
+>
+> - The second paragraph of a quote keeps the same rule.
+
+---
+
+The rule above is a thematic break, written as `---`.
+
 ## Markdown and HTML images
 
 ![Mountain landscape](https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800 "Rendered from Markdown")

packages/htmdx/skill/authoring.md

@@ -177,6 +177,11 @@ https://cdn.jsdelivr.net/npm/@wix/htmdx@4.10.1/dist/components.json
 - **Images** work as Markdown or as allowlisted `<img>`. Relative paths resolve
   from the artifact; `http:`, `https:`, and `data:image/*` sources are
   accepted. Give every image `alt` text.
+- **The Markdown is a subset.** Headings `#` to `######`, `*emphasis*`,
+  `**strong**`, `~~strikethrough~~`, `` `code` ``, fenced blocks, links,
+  `<https://autolinks>`, ordered and bulleted lists, `> blockquotes`, `---`
+  breaks, and `\*` escapes all render. Tables belong in `DataTable`; task
+  lists, footnotes, reference links, and setext headings do not render.
 
 Optional frontmatter sets document metadata; unknown fields are ignored:
 

packages/htmdx/src/components/shadcn/shared/theme.ts

@@ -167,6 +167,28 @@ htmdx-code {
   color: var(--primary);
   text-underline-offset: 2px;
 }
+.htmdx-doc-section-card em:not([data-slot]) {
+  font-style: italic;
+}
+.htmdx-doc-section-card del:not([data-slot]) {
+  text-decoration: line-through;
+  color: var(--muted-foreground);
+}
+.htmdx-doc-section-card hr:not([data-slot]) {
+  height: 1px;
+  border: 0;
+  margin: 1.5rem 0;
+  background: var(--border);
+}
+.htmdx-doc-section-card blockquote:not([data-slot]) {
+  margin: 1rem 0;
+  padding: 0.125rem 0 0.125rem 1rem;
+  border-left: 3px solid var(--primary);
+  color: var(--muted-foreground);
+}
+.htmdx-doc-section-card blockquote > :last-child {
+  margin-bottom: 0;
+}
 /* Tint from the artifact accent when the runtime theme is present, so inline
    code reads as an accent chip instead of gray-on-gray; a bare shadcn host
    falls back to its own primary. This rule wins over the runtime's own inline

packages/htmdx/src/index.ts

@@ -1518,6 +1518,30 @@ const RUNTIME_CSS = `
     font-weight: 700;
     color: var(--md-sys-color-on-surface);
   }
+  .htmdx-doc-section-card em:not([data-slot]) {
+    font-style: italic;
+  }
+  .htmdx-doc-section-card del:not([data-slot]) {
+    text-decoration: line-through;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  /* The rule reads as a rest between passages, so it carries the section's own
+     outline colour rather than a browser default border. */
+  .htmdx-doc-section-card hr:not([data-slot]) {
+    height: 1px;
+    border: 0;
+    margin: 24px 0;
+    background: var(--md-sys-color-outline-variant);
+  }
+  .htmdx-doc-section-card blockquote:not([data-slot]) {
+    margin: 16px 0;
+    padding: 2px 0 2px 16px;
+    border-left: 3px solid var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  .htmdx-doc-section-card blockquote > :last-child {
+    margin-bottom: 0;
+  }
   /* A translucent accent tint rather than primary-container: ExecutiveSummary
      already uses primary-container as its body, so an opaque chip would vanish
      inside it. */

packages/htmdx/src/react/index.ts

@@ -1236,11 +1236,21 @@ function tokenize(
       // element names inside a graphic never reach this loop.
       const lower = rawName.toLowerCase();
       const isSvgRoot = lower === 'svg';
-      if (
-        selfClosing ||
-        HTML_VOID_ELEMENTS.has(lower) ||
-        !(HTML_ELEMENTS.has(lower) || isSvgRoot)
-      ) {
+      const closeless = selfClosing || HTML_VOID_ELEMENTS.has(lower);
+      // A block element with no close tag still owns its line: left inside the
+      // markdown block, an `<hr>` between two paragraphs would render as
+      // `<p><hr/></p>`, which no browser keeps nested.
+      if (closeless && HTML_BLOCK_ELEMENTS.has(lower) && opensLine(syntax, match.index)) {
+        pushMarkdown(blocks, source.slice(cursor, match.index), cursor);
+        blocks.push({
+          type: 'html',
+          value: source.slice(match.index, openTag.lastIndex),
+          offset: match.index,
+        });
+        cursor = openTag.lastIndex;
+        continue;
+      }
+      if (closeless || !(HTML_ELEMENTS.has(lower) || isSvgRoot)) {
         continue;
       }