@readme/markdown 14.4.1 → 14.6.0

package/dist/processor/transform/mdxish/tables/repair-expression-escapes.d.ts

@@ -0,0 +1,14 @@
+import { type RepairResult } from './utils';
+/**
+ * mdxjs hands the contents of every `{…}` to acorn as a JavaScript expression.
+ * A bare backslash is only legal inside a string/template literal in JS, so a
+ * markdown-style escape such as `{customer\_id}` — common when authors escape an
+ * underscore out of habit — makes acorn throw "Could not parse expression with
+ * acorn", which drops parsing for the whole surrounding `<Table>`.
+ *
+ * This pass deletes backslashes that sit in JS *code* position inside a `{…}`
+ * expression. Backslashes within a '…', "…" or `…` literal are valid escapes
+ * and are left untouched. Scoped to the malformed-retry path; the happy path
+ * never runs it.
+ */
+export declare const repairExpressionEscapes: (html: string) => RepairResult;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "14.4.1",
+  "version": "14.6.0",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",

package/styles/gfm.scss

@@ -86,10 +86,24 @@
     border-width: 0 0 1px;
     box-sizing: content-box;
     height: 0;
-    margin: 15px 0;
+    margin: var(--markdown-spacing, 15px) 0;
     overflow: hidden;
   }
 
+  // Direct-child only, top-level headings/hr act as section breaks that
+  // clear preceding floats (e.g. `<Image align="left|right">`). Nested
+  // headings (inside Callout, Cards, etc.) keep wrapping behavior so the
+  // component's own layout (e.g. callout icon float) isn't disrupted.
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6,
+  > hr {
+    clear: both;
+  }
+
   input {
     font: inherit;
     margin: 0;
@@ -133,8 +147,19 @@
     font-size: var(--markdown-title-size);
     font-weight: var(--markdown-title-weight, 600);
     line-height: 1.25;
-    margin-bottom: var(--markdown-title-marginBottom, 1rem);
+    margin-bottom: var(--markdown-title-marginBottom, var(--markdown-spacing, 15px));
     margin-top: var(--markdown-title-marginTop, 1em);
+
+    &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + p) {
+      margin-bottom: calc(var(--markdown-spacing, 15px) / 2);
+    }
+  }
+
+  // Tighten the gap when a heading immediately follows another heading
+  // (e.g. h1 + h2 as title/subtitle). Lets the preceding heading's margin-bottom
+  // define the gap instead of the following heading's larger margin-top.
+  :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: 0;
   }
 
   h1 {
@@ -245,13 +270,38 @@
 
   blockquote,
   dl,
-  ol,
   p,
   pre,
-  table,
+  table {
+    margin-bottom: var(--markdown-spacing, 15px);
+    margin-top: 0;
+  }
+
+  // no margins where we’ll likely have inline images or they might break layout
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  figcaption,
+  ol,
+  ul,
+  p,
+  table {
+    --markdown-img-margin: 0;
+  }
+
+  ol,
   ul {
-    margin-bottom: 15px;
+    margin-bottom: round(1.3333em, 1px); // 20px at 15px base (condensed)
     margin-top: 0;
+
+    ol,
+    ul {
+      margin-bottom: 0;
+      margin-top: round(0.5333em, 1px); // 8px at 15px base (condensed)
+    }
   }
 
   blockquote {
@@ -278,14 +328,6 @@
     padding-left: 2em;
   }
 
-  ol ol,
-  ol ul,
-  ul ol,
-  ul ul {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
   li {
     clear: both;
     word-wrap: break-all;
@@ -296,7 +338,7 @@
   }
 
   li + li {
-    margin-top: 0.25em;
+    margin-top: round(0.5333em, 1px); // 8px at 15px base (condensed)
   }
 
   dl {
@@ -316,6 +358,10 @@
     padding: 0 1em;
   }
 
+  .img {
+    margin: round(calc(var(--markdown-img-margin, var(--markdown-spacing, 15px)) * 1.33), 1px) 0;
+  }
+
   :checked + .radio-label {
     border-color: var(--project-color-primary);
     position: relative;
@@ -341,19 +387,14 @@
 }
 
 @mixin markdown-overrides {
-  h5,
-  h6 {
-    font-size: 0.9em;
-  }
-
   blockquote h1:last-child,
   blockquote h2:last-child {
     border-bottom: 0;
   }
 
   > * {
-    margin-bottom: 15px !important;
-    margin-top: 15px;
+    margin-bottom: var(--markdown-spacing, 15px);
+    margin-top: var(--markdown-spacing, 15px);
   }
 
   .task-list-item input {

package/types.d.ts

@@ -143,6 +143,7 @@ export interface ImageBlockAttrs {
   src: string;
   title: string;
   width?: string;
+  wrap?: boolean;
 }
 
 export interface ImageBlock extends ImageBlockAttrs, Omit<Parent, 'children'> {