@memorysmithapp/markdown-renderer 0.3.0 → 0.3.2

package/dist/Markdown.js

@@ -142,7 +142,7 @@ function MarkdownCode({ className, children, node: _node, ...rest }) {
     const inBlock = useInBlock();
     const inlineSlot = useSlot('inlineCode');
     if (className?.includes('language-mermaid')) {
-        return _jsx(MermaidDiagram, { code: String(children).trim(), scheme: scheme });
+        return _jsx(MermaidDiagram, { code: String(children ?? '').trim(), scheme: scheme });
     }
     if (!inBlock && inlineSlot)
         return drawSlot(inlineSlot, { children });
@@ -151,7 +151,8 @@ function MarkdownCode({ className, children, node: _node, ...rest }) {
         // The source is read and never rewritten: what is on the page is the
         // bytes, split into spans. React-markdown hands the children of a fence as
         // a single string ending in the newline before the closing fence.
-        const code = String(children).replace(/\n$/, '');
+        // An empty fence has no children at all, and is no code rather than the word `undefined`.
+        const code = String(children ?? '').replace(/\n$/, '');
         return (_jsx("code", { className: className, ...rest, children: toJsxRuntime(highlightTree(code, language), { Fragment, jsx, jsxs }) }));
     }
     return (_jsx("code", { className: className, ...rest, children: children }));

package/dist/diagnose.js

@@ -25,7 +25,7 @@ export const NOTICES = {
     'diagram-invalid': { severity: 'notice', section: '7.2', message: 'This diagram cannot be read, and is shown as its source or its error.' },
     'frontmatter-unclosed': { severity: 'notice', section: '6.1', message: 'This frontmatter is never closed by a ---: the note has no properties, and its lines are body text.' },
     'name-missing': { severity: 'notice', section: '6.5', message: 'The note has no name: a link reaches it only through an alias.' },
-    'name-unusable': { severity: 'notice', section: '6.5', message: 'This name is not a single text value, so the note is unnamed.' },
+    'name-unusable': { severity: 'notice', section: '6.5', message: 'This name is not a single text value, or carries one of #, [, ] and |, so the note is unnamed.' },
     'reserved-not-a-list': { severity: 'notice', section: '6.4', message: 'This value is not a list, so it is an ordinary attribute.' },
     'aliases-missing': { severity: 'hint', section: '6.4', message: 'The note has no aliases: only its name catches a link.' },
     'tags-missing': { severity: 'hint', section: '6.4', message: 'The note has no tags: it has no subjects to be filtered by.' },

package/dist/properties.d.ts

@@ -29,7 +29,10 @@ export interface PropertyEntry {
 }
 /** The frontmatter, read. */
 export interface NoteProperties {
-    /** The name of the note: `name:` when it is a single text value (§6.5), else `null`. */
+    /**
+     * The name of the note: `name:` when it is a single text value (§6.5) that carries none of
+     * `#`, `[`, `]` and `|` (§5.3), else `null`.
+     */
     readonly name: string | null;
     /** Every other entry, in the order written. */
     readonly entries: readonly PropertyEntry[];

package/dist/properties.js

@@ -14,6 +14,8 @@
  * resolved by the host as a link of the body is. That is a decision of the
  * reading surface; it adds no edge, and what an Indexer reads is unchanged.
  */
+/** The four delimiters of the form that addresses a note: a name carrying one is no name (§5.3). */
+const UNADDRESSABLE = /[#[\]|]/;
 /** Above this a single value is prose rather than a category (§6.3). */
 const CATEGORY_CEILING = 40;
 const KEY = /^([A-Za-z0-9_-]+)\s*:\s*(.*)$/;
@@ -117,9 +119,11 @@ export function readProperties(markdown) {
     const read = [];
     for (const { key, raw, items } of entries) {
         if (key === 'name') {
-            // Only a single text value names a note; any other shape leaves it unnamed (§6.5).
+            // Only a single text value names a note; any other shape leaves it unnamed (§6.5), and so
+            // does one carrying a delimiter of the form that addresses it (§5.3). The subset has no
+            // comments (§6.2): `name: Incident #4711` is that whole value, and it carries a `#`.
             const value = items === null ? unquote(raw) : '';
-            name = value.length > 0 ? value : null;
+            name = value.length > 0 && !UNADDRESSABLE.test(value) ? value : null;
             continue;
         }
         // A list written with no item, `[]`, is an empty value, never a list (§6.3).

package/dist/remark-callouts.js

@@ -18,8 +18,12 @@
  * reads: a `[!note]` inside a code fence is not a callout, and only the parser
  * can tell the difference.
  */
-/** `[!type]`, an optional fold marker, and whatever titles it. */
-const MARKER = /^\[!([A-Za-z][\w-]*)\]([+-]?)[ \t]*(.*)$/;
+/**
+ * `[!type]`, an optional fold marker, and whatever titles it. The type is a word
+ * in any script (§7.1): it opens with a letter and goes on in letters, marks,
+ * digits, `_` and `-`, so `[!atenção]` is a type as much as `[!warning]` is.
+ */
+const MARKER = /^\[!(\p{L}[\p{L}\p{M}\p{N}_-]*)\]([+-]?)[ \t]*(.*)$/u;
 export function remarkCallouts(options = {}) {
     return (tree) => descend(tree, options);
 }
@@ -41,7 +45,7 @@ function rewrite(quote, options) {
     const marker = MARKER.exec(broke === -1 ? lead.value : lead.value.slice(0, broke));
     if (!marker)
         return;
-    const kind = (marker[1] ?? '').toLowerCase();
+    const kind = (marker[1] ?? '').normalize('NFC').toLowerCase();
     const { title, body } = split(marker[3] ?? '', broke === -1 ? null : lead.value.slice(broke + 1), inline);
     quote.data = {
         hName: 'div',

package/dist/remark-ring.js

@@ -54,8 +54,15 @@ export function remarkHighlight() {
  * plugin only keeps the marker off the page.
  */
 const BLOCK_ID = /[ \t]*\^([A-Za-z0-9-]+)[ \t]*$/;
+/**
+ * The nodes a block ends in. The last text of a link, an emphasis or any other
+ * inline is not the end of a block: `[[Note#^id]]` keeps its `^id` on the label.
+ */
+const BLOCKS = new Set(['paragraph', 'heading', 'tableCell']);
 export function remarkBlockIds() {
     return (tree) => walk(tree, (parent) => {
+        if (!BLOCKS.has(parent.type))
+            return;
         const children = parent.children ?? [];
         const last = children[children.length - 1];
         if (!last || !isText(last) || !last.value?.includes('^'))

package/dist/slots.js

@@ -21,9 +21,17 @@ export function drawSlot(slot, props) {
 /** Whether a code element sits in a fenced block, which is what tells a block from a span. */
 export const InBlock = createContext(false);
 // ── Callouts ─────────────────────────────────────────────────────────────────
+/**
+ * The words of a title, in one element: the title is laid out as a row beside
+ * its icon, and every text node and every `<strong>` of it would otherwise be
+ * an item of that row of its own, drawn as columns. One run wraps as a sentence.
+ */
+function CalloutTitleText({ children }) {
+    return _jsx("span", { className: "callout-title-text", children: children });
+}
 /** The title `remarkCallouts` built, carried to the callout that holds it. */
 function CalloutTitle({ children }) {
-    return _jsx("div", { className: "callout-title", children: children });
+    return (_jsx("div", { className: "callout-title", children: _jsx(CalloutTitleText, { children: children }) }));
 }
 function Callout({ kind, fold, children }) {
     const { theme } = useHost();
@@ -42,7 +50,7 @@ function Callout({ kind, fold, children }) {
     const title = at === -1 ? null : parts[at].props.children;
     const titled = icon === null ? (_jsx(CalloutTitle, { children: title })) : (
     // An icon of the theme's takes the place of the one the stylesheet draws.
-    _jsxs("div", { className: "callout-title has-icon", children: [_jsx("span", { className: "callout-icon", "aria-hidden": "true", children: icon }), title] }));
+    _jsxs("div", { className: "callout-title has-icon", children: [_jsx("span", { className: "callout-icon", "aria-hidden": "true", children: icon }), _jsx(CalloutTitleText, { children: title })] }));
     if (slot) {
         const body = parts.filter((_, index) => index !== at);
         return drawSlot(slot, { kind, fold, title, icon, children: body });

package/dist/theme.d.ts

@@ -53,6 +53,8 @@ export interface ThemeProperties {
     readonly calloutStop?: string;
     readonly calloutAside?: string;
     readonly calloutQuote?: string;
+    readonly calloutTitleLinkDecoration?: string;
+    readonly calloutTitleLinkOffset?: string;
     readonly iconNote?: string;
     readonly iconInfo?: string;
     readonly iconSummary?: string;

package/dist/theme.js

@@ -26,6 +26,7 @@ export const THEME_PROPERTIES = Object.keys({
     codeBg: 1, codeColor: 1, codeBorder: 1, inlineCodeBg: 1, inlineCodePadding: 1,
     tokenKeyword: 1, tokenString: 1, tokenNumber: 1, tokenComment: 1, tokenPunctuation: 1,
     calloutInfo: 1, calloutIdea: 1, calloutDone: 1, calloutWarn: 1, calloutStop: 1, calloutAside: 1, calloutQuote: 1,
+    calloutTitleLinkDecoration: 1, calloutTitleLinkOffset: 1,
     iconNote: 1, iconInfo: 1, iconSummary: 1, iconTip: 1, iconSuccess: 1, iconQuestion: 1, iconWarning: 1,
     iconFailure: 1, iconDanger: 1, iconExample: 1, iconQuote: 1,
     fontSans: 1, fontDisplay: 1, fontMono: 1, fontHeading: 1,

package/dist/transclusion.d.ts

@@ -72,5 +72,8 @@ export declare function isBlockAnchor(anchor: string): boolean;
  * The section of a document, cut syntactically: from the heading whose slug
  * matches the anchor to the next heading of equal or higher level. No notebook
  * convention takes part in this: the cut is syntactic.
+ *
+ * A line inside a fence is code and never a heading, so the `# Step 1` comment
+ * of a shell block neither opens a section nor ends one.
  */
 export declare function sectionOf(markdown: string, anchor: string): string | null;

package/dist/transclusion.js

@@ -16,7 +16,7 @@
  * and never blocks (§4.1). Wherever expansion cannot happen the embed becomes
  * a link and is never dropped, which is what `demoteEmbeds` does.
  */
-import { codeRegions, headingKey, insideCode, insideTable, outsideCode, tableRegions } from './markdown.js';
+import { codeRegions, fenceRegions, headingKey, insideCode, insideTable, outsideCode, tableRegions } from './markdown.js';
 /** Same shape the link extractor matches, plus the leading `!`. */
 const EMBED = /!\[\[([^\]|#]+?)(?:#([^\]|]+?))?(?:\|[^\]]*?)?\]\]/g;
 /**
@@ -136,13 +136,22 @@ function escapeRegExp(value) {
  * The section of a document, cut syntactically: from the heading whose slug
  * matches the anchor to the next heading of equal or higher level. No notebook
  * convention takes part in this: the cut is syntactic.
+ *
+ * A line inside a fence is code and never a heading, so the `# Step 1` comment
+ * of a shell block neither opens a section nor ends one.
  */
 export function sectionOf(markdown, anchor) {
     const wanted = headingKey(anchor);
     const lines = markdown.split('\n');
+    const fences = fenceRegions(markdown);
     let start = -1;
     let level = 0;
+    let at = 0;
     for (let index = 0; index < lines.length; index++) {
+        const offset = at;
+        at += (lines[index] ?? '').length + 1;
+        if (insideCode(fences, offset))
+            continue;
         const heading = HEADING.exec(lines[index] ?? '');
         if (!heading)
             continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A React component that draws a MemorySmith note exactly as MemorySmith's reading page does.",
   "keywords": [
     "markdown",
@@ -67,7 +67,7 @@
     "unified": "11.0.5"
   },
   "devDependencies": {
-    "@memorysmithapp/markdown-spec": "0.3.0",
+    "@memorysmithapp/markdown-spec": "0.3.2",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",

package/structure.css

@@ -37,6 +37,13 @@
   border: 0;
 }
 
+/* The words of a callout's title are one item of its row, so a title that
+   carries emphasis wraps as one sentence beside the icon, never as columns. */
+.markdown .callout-title-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 /* An icon a theme draws as an element takes the place of the one the
    stylesheet draws as a mask, at the size of the title it sits in. */
 .markdown .callout-title.has-icon::before {

package/theme-default.css

@@ -61,6 +61,11 @@
   --ms-callout-stop: var(--markdown-callout-stop, 180, 35, 24);
   --ms-callout-aside: var(--markdown-callout-aside, 109, 40, 217);
   --ms-callout-quote: var(--markdown-callout-quote, 84, 93, 115);
+  /* A link in a callout title is underlined: the title is in the callout's
+     colour and weight, and the blue family's colour is the accent's, so a link
+     there would read as more of the title. */
+  --ms-callout-title-link-decoration: var(--markdown-callout-title-link-decoration, underline 1px);
+  --ms-callout-title-link-offset: var(--markdown-callout-title-link-offset, 0.15em);
   --ms-font-sans: var(--markdown-font-sans, 'Inter', 'Segoe UI', system-ui, sans-serif);
   --ms-font-display: var(--markdown-font-display, 'Space Grotesk', 'Segoe UI', system-ui, sans-serif);
   --ms-font-mono: var(--markdown-font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
@@ -360,6 +365,10 @@
   /* Room for the button, so the first line is never under it. */
   padding-right: 6.5rem;
 }
+/* An empty block keeps the height of one line, so its button fits inside it. */
+.markdown .code-block > pre > code:empty::before {
+  content: '\200b';
+}
 .markdown pre code {
   background: none;
   color: var(--ms-text);
@@ -579,6 +588,13 @@
   font-weight: 600;
   line-height: var(--ms-line-height-tight);
 }
+/* A link in the title is marked by more than its colour, which may be the
+   title's own; a pending link keeps its dashed rule, and a footnote's number
+   its own look. */
+.markdown .callout-title :is(a, .wikilink):not(.wikilink-pending, [data-footnote-ref]) {
+  text-decoration: var(--ms-callout-title-link-decoration);
+  text-underline-offset: var(--ms-callout-title-link-offset);
+}
 .markdown .callout-title::before {
   content: '';
   flex: 0 0 auto;