react-cheminfo 0.11.0 → 0.13.0

package/src/slides/ui/Slideshow.tsx

@@ -6,7 +6,9 @@ import type {
 } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { isTextEntryTarget } from '../../hooks/ui/keyTargets.ts';
 import { useContainerSize } from '../../hooks/ui/useContainerSize.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { Talk } from '../core/index.ts';
 import { clampSlideIndex, slideActionForKey } from '../core/index.ts';
 
@@ -14,6 +16,8 @@ import type { RenderSlideLink } from './DemoLink.tsx';
 import type { SlideLayoutProps } from './Slide.tsx';
 import { SlideView } from './Slide.tsx';
 import { SlideshowBar } from './SlideshowBar.tsx';
+import type { SlideshowFullscreen } from './useSlideshowFullscreen.ts';
+import { useSlideshowFullscreen } from './useSlideshowFullscreen.ts';
 
 /** The talk being presented, and everything the site keeps a hand on. */
 export interface SlideshowProps {
@@ -81,12 +85,7 @@ export interface SlideshowProps {
    * that instead of their own element.
    * @default undefined — the player fullscreens itself
    */
-  fullscreen?: {
-    /** Whether the site is presenting. */
-    isFullscreen: boolean;
-    /** Called when `f` or the bar's button asks to change that. */
-    onToggle: () => void;
-  };
+  fullscreen?: SlideshowFullscreen;
 }
 
 /** Slides are authored on this canvas, and it is scaled to whatever it is played on. */
@@ -137,7 +136,10 @@ export function Slideshow(props: SlideshowProps): ReactElement {
 
   const [blank, setBlank] = useState<'black' | 'white' | null>(null);
   const [showNotes, setShowNotes] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const { isFullscreen, toggle: toggleFullscreen } = useSlideshowFullscreen(
+    playerRef,
+    fullscreen,
+  );
 
   const goTo = useCallback(
     (next: number) => {
@@ -147,35 +149,12 @@ export function Slideshow(props: SlideshowProps): ReactElement {
     [onIndex, total],
   );
 
-  const ownFullscreen = fullscreen === undefined;
-  const toggleOwn = useCallback(() => {
-    const element = playerRef.current;
-    if (element === null) return;
-    if (document.fullscreenElement === element) {
-      void document.exitFullscreen().catch(() => undefined);
-    } else {
-      void element.requestFullscreen().catch(() => undefined);
-    }
-  }, []);
-  const toggleFullscreen = fullscreen?.onToggle ?? toggleOwn;
-
-  useEffect(() => {
-    if (!ownFullscreen) return;
-    function onFullscreenChange(): void {
-      setIsFullscreen(document.fullscreenElement === playerRef.current);
-    }
-    document.addEventListener('fullscreenchange', onFullscreenChange);
-    return () => {
-      document.removeEventListener('fullscreenchange', onFullscreenChange);
-    };
-  }, [ownFullscreen]);
-
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent): void {
       if (event.metaKey || event.ctrlKey || event.altKey) return;
       // A player embedded in a page shares the document with its fields, and
       // space is both "next slide" and a character.
-      if (isTextEntry(event.target)) return;
+      if (isTextEntryTarget(event.target)) return;
       const action = slideActionForKey(event.key, current, total);
       if (action === null) return;
       event.preventDefault();
@@ -212,12 +191,7 @@ export function Slideshow(props: SlideshowProps): ReactElement {
   const progress = total > 1 ? (current / (total - 1)) * 100 : 100;
 
   return (
-    <div
-      ref={playerRef}
-      className={
-        className === undefined ? 'slideshow' : `slideshow ${className}`
-      }
-    >
+    <div ref={playerRef} className={joinClassNames('slideshow', className)}>
       {/* Clicking the stage steps on, the way a projector remote does; the
           keyboard equivalent is the arrow keys the player already listens for. */}
       <div className="slideshow-stage" ref={stageRef} onClick={onStageClick}>
@@ -257,8 +231,8 @@ export function Slideshow(props: SlideshowProps): ReactElement {
         title={title ?? talk.meta.title}
         index={current}
         total={total}
-        isFullscreen={fullscreen?.isFullscreen ?? isFullscreen}
-        onGo={goTo}
+        isFullscreen={isFullscreen}
+        onIndexChange={goTo}
         onToggleFullscreen={toggleFullscreen}
         onExit={onExit}
       />
@@ -269,14 +243,3 @@ export function Slideshow(props: SlideshowProps): ReactElement {
     </div>
   );
 }
-
-const TEXT_ENTRY_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
-
-function isTextEntry(target: EventTarget | null): boolean {
-  if (target === null) return false;
-  const element = target as { tagName?: unknown; isContentEditable?: unknown };
-  if (element.isContentEditable === true) return true;
-  return (
-    typeof element.tagName === 'string' && TEXT_ENTRY_TAGS.has(element.tagName)
-  );
-}

package/src/slides/ui/SlideshowBar.tsx

@@ -12,7 +12,7 @@ export interface SlideshowBarProps {
   /** Whether the player is presenting on the whole screen. */
   isFullscreen: boolean;
   /** Called with the slide to show. */
-  onGo: (index: number) => void;
+  onIndexChange: (index: number) => void;
   /** Called to enter or leave fullscreen. */
   onToggleFullscreen: () => void;
   /**
@@ -38,7 +38,7 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
     index,
     total,
     isFullscreen,
-    onGo,
+    onIndexChange,
     onToggleFullscreen,
     onExit,
   } = props;
@@ -56,7 +56,7 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
           aria-label="Previous slide"
           disabled={index === 0}
           onClick={() => {
-            onGo(index - 1);
+            onIndexChange(index - 1);
           }}
         />
         <span className="slideshow-counter">
@@ -68,7 +68,7 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
           aria-label="Next slide"
           disabled={index >= total - 1}
           onClick={() => {
-            onGo(index + 1);
+            onIndexChange(index + 1);
           }}
         />
         <Button

package/src/slides/ui/TalkList.tsx

@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 
 import { isModifiedClick } from '../../chrome/ui/navItem.ts';
 import { pluralize } from '../../format/core/index.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { TalkManifest, TalkSummary } from '../core/index.ts';
 
 /** The talks to list, and what opening one means. */
@@ -27,6 +28,11 @@ export interface TalkListProps {
    * @default 'No talk yet.'
    */
   emptyNote?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -40,6 +46,7 @@ export interface TalkListProps {
  */
 export function TalkList(props: TalkListProps): ReactElement {
   const {
+    className,
     manifests,
     onOpen,
     renderHref,
@@ -54,7 +61,7 @@ export function TalkList(props: TalkListProps): ReactElement {
   }
 
   return (
-    <div className="talk-list">
+    <div className={joinClassNames('talk-list', className)}>
       {groups.map((group) => (
         <section key={group.site} className="talk-list-group">
           {showSite ? (

package/src/slides/ui/index.ts

@@ -16,3 +16,4 @@ export type { SlideshowBarProps } from './SlideshowBar.tsx';
 export { SlideshowBar } from './SlideshowBar.tsx';
 export type { TalkListProps } from './TalkList.tsx';
 export { TalkList } from './TalkList.tsx';
+export type { SlideshowFullscreen } from './useSlideshowFullscreen.ts';

package/src/slides/ui/slideSanitizeSchema.ts

@@ -0,0 +1,29 @@
+import type { Options as SanitizeSchema } from 'rehype-sanitize';
+import { defaultSchema } from 'rehype-sanitize';
+
+/**
+ * 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.
+ */
+export const SLIDE_SANITIZE_SCHEMA: SanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...(defaultSchema.tagNames ?? []),
+    'caption',
+    'figcaption',
+    'figure',
+    'iframe',
+    'mark',
+    'small',
+    'u',
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    iframe: ['src', 'allowFullScreen'],
+    '*': [...(defaultSchema.attributes?.['*'] ?? []), 'className'],
+  },
+};

package/src/slides/ui/useSlideshowFullscreen.ts

@@ -0,0 +1,59 @@
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+/** Fullscreen owned by the site rather than by the player. */
+export interface SlideshowFullscreen {
+  /** Whether the site is presenting. */
+  isFullscreen: boolean;
+  /** Called when `f` or the bar's button asks to change that. */
+  onToggle: () => void;
+}
+
+/** Whether the player is presenting, and how its key and button change that. */
+interface SlideshowFullscreenState {
+  /** Whether the talk fills the screen. */
+  isFullscreen: boolean;
+  /** Enter or leave fullscreen. */
+  toggle: () => void;
+}
+
+/**
+ * The fullscreen a slideshow's `f` key and bar button drive: the site's own
+ * when it passes one, otherwise the player element itself, followed through
+ * the document's `fullscreenchange` so leaving with Escape is seen too.
+ * @param playerRef - The element fullscreened when the site owns no fullscreen.
+ * @param owned - The site's fullscreen, when the site owns it.
+ * @returns Whether the talk fills the screen, and the toggle.
+ */
+export function useSlideshowFullscreen(
+  playerRef: RefObject<HTMLElement | null>,
+  owned: SlideshowFullscreen | undefined,
+): SlideshowFullscreenState {
+  const [isOwnFullscreen, setIsOwnFullscreen] = useState(false);
+  const followsPlayer = owned === undefined;
+
+  const toggleOwn = useCallback(() => {
+    const element = playerRef.current;
+    if (element === null) return;
+    if (document.fullscreenElement === element) {
+      void document.exitFullscreen().catch(() => undefined);
+    } else {
+      void element.requestFullscreen().catch(() => undefined);
+    }
+  }, [playerRef]);
+
+  useEffect(() => {
+    if (!followsPlayer) return;
+    function onFullscreenChange(): void {
+      setIsOwnFullscreen(document.fullscreenElement === playerRef.current);
+    }
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', onFullscreenChange);
+    };
+  }, [followsPlayer, playerRef]);
+
+  return owned === undefined
+    ? { isFullscreen: isOwnFullscreen, toggle: toggleOwn }
+    : { isFullscreen: owned.isFullscreen, toggle: owned.onToggle };
+}

package/src/spectra/core/axisEntries.ts

@@ -8,6 +8,7 @@ import {
   numberField,
 } from './filterFields.ts';
 
+/** Everything that moves, crops or resamples the x axis, and the two housekeeping steps. */
 export const AXIS_ENTRIES = {
   xFunction: {
     label: 'Apply a formula to x',
@@ -24,6 +25,22 @@ export const AXIS_ENTRIES = {
     caution:
       'Every range below is then read in the new units — including the resampling range, which runs last unless you resample first.',
   },
+  setMinX: {
+    label: 'Shift x to start at a value',
+    group: 'x-axis',
+    summary:
+      'Adds one constant to every x so the smallest lands on the value given.',
+    fields: [numberField('min', 'Smallest x', '0')],
+    caution: 'Left empty, the smallest x is moved to 0, not left where it is.',
+  },
+  setMaxX: {
+    label: 'Shift x to end at a value',
+    group: 'x-axis',
+    summary:
+      'Adds one constant to every x so the largest lands on the value given.',
+    fields: [numberField('max', 'Largest x', '1')],
+    caution: 'Left empty, the largest x is moved to 1, not left where it is.',
+  },
   fromTo: {
     label: 'Crop',
     group: 'x-axis',

package/src/spectra/core/chainProblems.ts

@@ -1,5 +1,5 @@
 import { filterStepLabel, findFilterEntry } from './filterCatalog.ts';
-import type { SettingsProblem } from './problems.ts';
+import type { ProblemPlace, SettingsProblem } from './problems.ts';
 import { problem } from './problems.ts';
 import type { SpectrumFilter, SpectrumFilterName } from './settings.ts';
 import { stepProblems } from './stepProblems.ts';
@@ -18,12 +18,32 @@ const UNTYPES_X: ReadonlySet<SpectrumFilterName> = new Set([
   'filterX',
 ]);
 
+/**
+ * The steps that hand on a typed x whenever they change it, which is every
+ * time but the one where x already sits where they would put it.
+ */
+const RETYPES_X: ReadonlySet<SpectrumFilterName> = new Set([
+  'setMaxX',
+  'setMinX',
+]);
+
 /** The steps that read x as a typed array and throw on a plain one. */
 const NEEDS_TYPED_X: ReadonlySet<SpectrumFilterName> = new Set([
   'calibrateX',
   'fromTo',
 ]);
 
+/** The steps that rewrite the x values themselves rather than crop them. */
+const MOVES_X: ReadonlySet<SpectrumFilterName> = new Set([
+  'calibrateX',
+  'setMaxX',
+  'setMinX',
+  'xFunction',
+]);
+
+/** Where the problems about the chain as a whole are filed. */
+const WHOLE_CHAIN: ProblemPlace = { part: 'chain', where: 'The chain' };
+
 /**
  * Everything wrong, or probably wrong, with one chain.
  *
@@ -46,15 +66,19 @@ export function chainProblems(
   let mayBePlainX = resampleFirst;
 
   for (const [index, step] of chain.entries()) {
-    const where = filterStepLabel(step.name, index);
+    const place: ProblemPlace = {
+      part: 'chain',
+      index,
+      where: filterStepLabel(step.name, index),
+    };
     const entry = findFilterEntry(step.name);
-    problems.push(...stepProblems(step, where));
+    problems.push(...stepProblems(step, place));
 
     if (entry === undefined) {
       problems.push(
         problem(
           'warning',
-          where,
+          place,
           `${step.name} is not one of the steps this editor knows, so its options are left as they are. The processor throws on a name it cannot dispatch.`,
         ),
       );
@@ -63,15 +87,16 @@ export function chainProblems(
 
     if (NEEDS_TYPED_X.has(step.name)) {
       if (plainX) {
-        problems.push(problem('error', where, TYPED_X_MESSAGE));
+        problems.push(problem('error', place, TYPED_X_MESSAGE));
       } else if (mayBePlainX) {
-        problems.push(problem('warning', where, MAY_BE_PLAIN_MESSAGE));
+        problems.push(problem('warning', place, MAY_BE_PLAIN_MESSAGE));
       }
     }
     if (UNTYPES_X.has(step.name)) {
       plainX = true;
       mayBePlainX = true;
     }
+    if (RETYPES_X.has(step.name)) plainX = false;
     if (step.name === 'ensureGrowing') mayBePlainX = true;
 
     const { group } = entry;
@@ -81,7 +106,7 @@ export function chainProblems(
         problems.push(
           problem(
             'warning',
-            where,
+            place,
             `Step ${String(firstScaling + 1)} scales the signal before this levels it, so the scaling is measured against an offset that then changes. Level first.`,
           ),
         );
@@ -92,54 +117,14 @@ export function chainProblems(
       scalings++;
       firstScaling ??= index;
     }
-    if (step.name === 'reverseIfNeeded') {
-      problems.push(
-        problem(
-          'warning',
-          where,
-          'The chain already turns a descending axis round before every step, so this one does nothing.',
-        ),
-      );
-    }
-    if (step.name === 'equallySpaced') {
-      problems.push(
-        problem(
-          'warning',
-          where,
-          resampleFirst
-            ? 'The settings resample before the chain runs, so this resamples a second time and the point count set here is the one the matrix ends up with.'
-            : 'The settings resample after the chain runs, so this resamples a second time and the point count set above is the one the matrix ends up with.',
-        ),
-      );
-    }
-    if (
-      !resampleFirst &&
-      (step.name === 'xFunction' || step.name === 'calibrateX')
-    ) {
-      problems.push(
-        problem(
-          'warning',
-          where,
-          'This changes the x axis before the resampling runs, so the range and the exclusions above are read in the new units.',
-        ),
-      );
-    }
-    if (resampleFirst && step.name === 'filterX') {
-      problems.push(
-        problem(
-          'warning',
-          where,
-          'Cropping after the resampling can leave each spectrum on its own grid, and the matrix then lines up rows that do not match. Pin the range above, or turn resampling back to last.',
-        ),
-      );
-    }
+    problems.push(...orderAdvice(step.name, place, resampleFirst));
   }
 
   if (baselines > 1) {
     problems.push(
       problem(
         'warning',
-        'The chain',
+        WHOLE_CHAIN,
         `${String(baselines)} baselines are subtracted one after another, each estimated from what the last one left.`,
       ),
     );
@@ -148,7 +133,7 @@ export function chainProblems(
     problems.push(
       problem(
         'warning',
-        'The chain',
+        WHOLE_CHAIN,
         `${String(scalings)} steps set the y scale; only the last of them still shows in the result.`,
       ),
     );
@@ -156,6 +141,60 @@ export function chainProblems(
   return problems;
 }
 
+/**
+ * The advice a step earns from where it sits against the resampling.
+ * @param name - The step's name.
+ * @param place - Which step it is.
+ * @param resampleFirst - Whether the settings resample before the chain runs.
+ * @returns Its advice.
+ */
+function orderAdvice(
+  name: SpectrumFilterName,
+  place: ProblemPlace,
+  resampleFirst: boolean,
+): SettingsProblem[] {
+  const advice: SettingsProblem[] = [];
+  if (name === 'reverseIfNeeded') {
+    advice.push(
+      problem(
+        'warning',
+        place,
+        'The chain already turns a descending axis round before every step, so this one does nothing.',
+      ),
+    );
+  }
+  if (name === 'equallySpaced') {
+    advice.push(
+      problem(
+        'warning',
+        place,
+        resampleFirst
+          ? 'The settings resample before the chain runs, so this resamples a second time and the point count set here is the one the matrix ends up with.'
+          : 'The settings resample after the chain runs, so this resamples a second time and the point count set above is the one the matrix ends up with.',
+      ),
+    );
+  }
+  if (!resampleFirst && MOVES_X.has(name)) {
+    advice.push(
+      problem(
+        'warning',
+        place,
+        'This changes the x axis before the resampling runs, so the range and the exclusions above are read in the new units.',
+      ),
+    );
+  }
+  if (resampleFirst && name === 'filterX') {
+    advice.push(
+      problem(
+        'warning',
+        place,
+        'Cropping after the resampling can leave each spectrum on its own grid, and the matrix then lines up rows that do not match. Pin the range above, or turn resampling back to last.',
+      ),
+    );
+  }
+  return advice;
+}
+
 /** What a step reading x as a typed array is told when it cannot be one. */
 const TYPED_X_MESSAGE =
   'This step reads x as a typed array, and resampling or cropping has already turned it into a plain one, so the processor throws. Move it before them, or turn resampling back to last.';

package/src/spectra/core/filterCatalog.ts

@@ -37,13 +37,12 @@ export function filterEntry(name: SpectrumFilterName): FilterCatalogEntry {
 /**
  * What the editor knows about a step whose name it may not recognise.
  *
- * The settings the processor accepts are typed `{ name: string }`, and
- * `filterXY` really does dispatch four more names than the union declares, so a
- * chain reaching the editor can name a step the catalog has never heard of.
+ * The settings the processor accepts are typed `{ name: string }`, so a chain
+ * reaching the editor can name a step the catalog has never heard of.
  * Answering nothing lets the panel say so; throwing would take the whole page
  * down over one row.
  * @param name - The step's name, from settings that may come from anywhere.
- * @returns Its catalog entry, or undefined when the name is not one of the 23.
+ * @returns Its catalog entry, or undefined when the name is not one of the 27.
  */
 export function findFilterEntry(name: string): FilterCatalogEntry | undefined {
   return Object.hasOwn(FILTER_CATALOG, name)
@@ -79,7 +78,7 @@ export function filterNamesInGroup(
 /**
  * The whole menu, group by group, skipping a group that holds nothing.
  *
- * The 23 steps are unreadable as one list, and grouping them by what they touch
+ * The 27 steps are unreadable as one list, and grouping them by what they touch
  * is the same order a chain is usually built in: level the baseline, smooth,
  * scale, then move the axis.
  * @returns Each group with its steps.