rapier-markdown-kit 1.1.3 → 1.1.4

package/dist/spec/md-layout.mjs

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
-export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate']);
+// `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
+export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.
 export const wraps = new Set(['around', 'box', 'behind', 'front']);
@@ -20,6 +21,7 @@ export function validLayout(value) {
     (!has(value, 'x') || percent(value.x) && (has(value, 'wrap') || has(value, 'width'))) &&
     (!has(value, 'y') || typeof value.y === 'number' && Number.isFinite(value.y) && value.y >= -50 && has(value, 'wrap')) &&
     (!has(value, 'rotate') || oneDecimalDegrees(value.rotate)) &&
+    (!has(value, 'opacity') || Number.isInteger(value.opacity) && value.opacity >= 5 && value.opacity <= 100) &&
     !(has(value, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 
@@ -51,6 +53,9 @@ export function parseLayout(comment) {
       const magnitude = Number(number[2] + (number[3] ? '.' + number[3] : ''));
       if (number[1] && magnitude === 0) return null;
       value.rotate = number[1] ? -magnitude : magnitude;
+    } else if (key === 'opacity') {
+      if (!/^[1-9]\d{0,2}%$/.test(raw)) return null;
+      value.opacity = Number(raw.slice(0, -1));
     } else value[key] = raw;
   }
   return validLayout(value) ? value : null;
@@ -64,12 +69,18 @@ export function decodeLayoutAttribute(value) {
 
 export const parseLayoutAttribute = value => parseLayout(decodeLayoutAttribute(value));
 
+// The picture's own CSS: its normal-flow width and x, and its fade.
 export function imageStyle(value) {
-  if (!validLayout(value) || value.width == null) return '';
-  const width = value.width;
-  const left = value.x == null ? '' : ';display:block;margin-left:' +
-    decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
-  return 'width:' + decimal(width) + '%;height:auto' + left;
+  if (!validLayout(value)) return '';
+  const parts = [];
+  if (value.width != null) {
+    const width = value.width;
+    const left = value.x == null ? '' : ';display:block;margin-left:' +
+      decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
+    parts.push('width:' + decimal(width) + '%;height:auto' + left);
+  }
+  if (value.opacity != null && value.opacity < 100) parts.push('opacity:' + decimal(value.opacity / 100));
+  return parts.join(';');
 }
 
 // The one wrap-owner rule (layout/browser.js, layout/interchange.js, editor/share.js): prose after, else before, skipping pictures,
@@ -109,8 +120,9 @@ export function formatLayout(value) {
   if (!validLayout(value)) throw new TypeError('invalid_markdown_layout');
   const pairs = [];
   for (const key of fields) {
-    if (has(value, key) && !(key === 'y' && value.y === 0) && !(key === 'rotate' && value.rotate === 0)) pairs.push(key + '=' +
-      (key === 'width' || key === 'x' ? decimal(value[key]) + '%' : key === 'y' ? decimal(value.y) + 'em' :
+    if (has(value, key) && !(key === 'y' && value.y === 0) && !(key === 'rotate' && value.rotate === 0) &&
+      !(key === 'opacity' && value.opacity === 100)) pairs.push(key + '=' +
+      (key === 'width' || key === 'x' || key === 'opacity' ? decimal(value[key]) + '%' : key === 'y' ? decimal(value.y) + 'em' :
         key === 'rotate' ? decimal(value.rotate) + 'deg' : value[key]));
   }
   return pairs.length ? '<!--md-layout:v1 ' + pairs.join(' ') + '-->' : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Read, write and style Self-contained Markdown: the universal stylesheet, picture layout, text marks, picture appendix, line planner and Will/1 markers. MIT, no dependencies.",
   "author": "Jack Skipworth",
   "license": "MIT",

package/style.css

@@ -49,6 +49,7 @@
 	--md-color-dark:var(--md-color);
 	--md-highlight-color:var(--md-color-accent);
 	--md-image-width:100%;
+	--md-drawing-width:0px;
 	--md-task-box:clamp(14px,.92em,24px);
 	--md-jump-gap:.9rem;
 	--md-jump-marker-inline-start:-1.18rem;
@@ -330,10 +331,12 @@
 :where(.md-render) svg.rapier-diagram .grid path{stroke:none!important}
 :where(.md-render) svg.rapier-diagram .grid .tick text{fill:var(--md-diagram-quiet)!important;font-size:var(--md-text-xs)!important}
 :where(.md-render) svg.rapier-diagram .today{stroke:var(--md-diagram-c6)!important}
-/* Paper cannot be scrolled sideways, so on paper a diagram goes back to fitting the page. */
+/* Paper cannot be scrolled sideways, so on paper a diagram, and a wide drawing, go back to fitting the page. */
 @media print{
 	:where(.md-render) .diagram-block{overflow:visible!important}
 	:where(.md-render) svg.rapier-diagram{width:auto!important;max-width:100%!important}
+	.md-render img[data-md-drawing]{min-width:0!important}
+	.md-render :has(>img[data-md-drawing],>a>img[data-md-drawing]){overflow:visible!important}
 }
 :where(.md-render) .diagram-reason {
 	margin: .4em 0 0;
@@ -702,6 +705,12 @@
 	vertical-align:middle;
 }
 .md-render img[data-rapier-image-size]{width:min(var(--md-image-width),100%);height:auto}
+/* A drawing (an SVG picture, as every Draw drawing is) shown at its own size carries that size, and shrinks to the column only
+   while its words stay legible: at 12/14 of it, Draw's default words (14 px) are 12 px, the smallest text a phone reads
+   (measured on a 390 px phone, the lane drawing-dark-wide). There it stops, and its block scrolls sideways, as a wide diagram
+   does; a drawing that fits, or shrinks less than that, is drawn as it always was. */
+.md-render img[data-md-drawing]{min-width:calc(var(--md-drawing-width) * 12 / 14)}
+.md-render :has(>img[data-md-drawing],>a>img[data-md-drawing]){overflow-x:auto}
 .md-render img:is([data-rapier-asset],[data-rapier-image-url]):not([data-rapier-asset-state="ready"]){background:color-mix(in srgb,var(--md-color-text) 5%,transparent)}
 
 .md-render dl{margin:0 0 var(--md-space-4)}