react-cheminfo 0.69.0 → 0.71.0

package/src/slides/ui/slideSanitizeSchema.ts

@@ -1,13 +1,82 @@
 import type { Options as SanitizeSchema } from 'rehype-sanitize';
 import { defaultSchema } from 'rehype-sanitize';
 
+/**
+ * The MathML Core elements a formula is written with. `annotation-xml`, which
+ * may carry HTML, and the legacy `maction` are left out.
+ */
+const MATHML_ELEMENTS = [
+  'math',
+  'merror',
+  'mfrac',
+  'mi',
+  'mmultiscripts',
+  'mn',
+  'mo',
+  'mover',
+  'mpadded',
+  'mphantom',
+  'mprescripts',
+  'mroot',
+  'mrow',
+  'ms',
+  'mspace',
+  'msqrt',
+  'mstyle',
+  'msub',
+  'msubsup',
+  'msup',
+  'mtable',
+  'mtd',
+  'mtext',
+  'mtr',
+  'munder',
+  'munderover',
+  'semantics',
+  'annotation',
+];
+
+/**
+ * What every MathML element may carry, colours aside: a formula takes the
+ * slide's ink, as everything else on it does.
+ */
+const MATHML_GLOBAL = ['dir', 'displaystyle', 'mathvariant', 'scriptlevel'];
+
+/** The attributes particular to one MathML element, by hast property name. */
+const MATHML_ATTRIBUTES: Record<string, string[]> = {
+  math: [...MATHML_GLOBAL, 'display', 'alttext'],
+  mo: [
+    ...MATHML_GLOBAL,
+    'form',
+    'fence',
+    'separator',
+    'lspace',
+    'rspace',
+    'stretchy',
+    'symmetric',
+    'maxsize',
+    'minsize',
+    'largeop',
+    'movablelimits',
+  ],
+  mfrac: [...MATHML_GLOBAL, 'linethickness'],
+  mspace: [...MATHML_GLOBAL, 'width', 'height', 'depth'],
+  mpadded: [...MATHML_GLOBAL, 'width', 'height', 'depth', 'lspace', 'voffset'],
+  mover: [...MATHML_GLOBAL, 'accent'],
+  munder: [...MATHML_GLOBAL, 'accentunder'],
+  munderover: [...MATHML_GLOBAL, 'accent', 'accentunder'],
+  mtd: [...MATHML_GLOBAL, 'columnspan', 'rowSpan'],
+  annotation: ['encoding'],
+};
+
 /**
  * What survives of the raw HTML a deck writes.
  *
  * GitHub's schema, which already strips scripts, event handlers and every URL
  * that is not http, https or relative, plus what decks legitimately use beyond
- * it: figures, the class a site styles a block with, and frames. Which frame
- * may actually be drawn is decided by `isFamilyFrameSource` when it renders.
+ * it: figures, the class a site styles a block with, frames, and formulas
+ * written in MathML, which the browser draws natively. Which frame may actually
+ * be drawn is decided by `isFamilyFrameSource` when it renders.
  */
 export const SLIDE_SANITIZE_SCHEMA: SanitizeSchema = {
   ...defaultSchema,
@@ -20,10 +89,25 @@ export const SLIDE_SANITIZE_SCHEMA: SanitizeSchema = {
     'mark',
     'small',
     'u',
+    ...MATHML_ELEMENTS,
   ],
   attributes: {
     ...defaultSchema.attributes,
+    ...mathmlAttributes(),
     iframe: ['src', 'allowFullScreen'],
     '*': [...(defaultSchema.attributes?.['*'] ?? []), 'className'],
   },
 };
+
+/**
+ * The attributes of every MathML element, those of its own and the global
+ * ones.
+ * @returns The attribute lists, by element.
+ */
+function mathmlAttributes(): Record<string, string[]> {
+  const attributes: Record<string, string[]> = {};
+  for (const element of MATHML_ELEMENTS) {
+    attributes[element] = MATHML_ATTRIBUTES[element] ?? MATHML_GLOBAL;
+  }
+  return attributes;
+}

package/styles/chrome.css

@@ -54,6 +54,13 @@ button {
   font-family: inherit;
 }
 
+/* A formula is MathML the browser draws natively, in a font made for it: the
+   one a browser falls back to neither stretches a bracket around a fraction
+   nor sizes a `∑` for display. */
+math {
+  font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math;
+}
+
 /* Blueprint lets a button shrink in a flex row, below the width of its own
    content, and the icon then spills out of its left edge. Blueprint's fill
    rules are more specific and still stretch a button that asks to. */

package/styles/slides.css

@@ -251,6 +251,53 @@
   margin: 0.5em auto 0;
 }
 
+/* What a slide singles out in a line — the digits that differ — takes the
+   deck's accent rather than the browser's yellow. */
+.slide-content mark {
+  padding: 0 0.08em;
+  border-radius: 6px;
+  background: var(--slide-accent-soft);
+  color: var(--slide-answer);
+}
+
+/* A formula is MathML the browser draws natively; its font is chrome.css's. */
+.slide-content math[display='block'] {
+  margin: 0.5em 0;
+  font-size: 1.15em;
+}
+
+/* A table of values reads across: figures right-aligned in tabular digits,
+   one rule under each row and never a number broken over two lines. */
+.slide-content table {
+  border-collapse: collapse;
+  margin: 0.4em 0;
+  font-size: 0.82em;
+  font-variant-numeric: tabular-nums;
+}
+
+.slide-content th,
+.slide-content td {
+  padding: 0.22em 0.9em;
+  border-bottom: 2px solid var(--slide-line);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.slide-content th {
+  color: var(--slide-muted);
+  font-weight: 600;
+}
+
+.slide-content th[align='right'],
+.slide-content td[align='right'] {
+  text-align: right;
+}
+
+.slide-content th[align='center'],
+.slide-content td[align='center'] {
+  text-align: center;
+}
+
 /* ── Content and thanks: title pinned to the top, demos sunk to the bottom ── */
 
 .slide--content,