react-cheminfo 0.10.0 → 0.12.0

package/src/share/core/vocabulary.ts

@@ -20,6 +20,14 @@ export interface HideablePart {
    * @default false
    */
   hiddenByDefault?: boolean;
+  /**
+   * Whether the part sits inside the site header, as a tab bar does. An
+   * embedded page has no header, so while `embed` is on the dialog does not
+   * offer the part and a link does not name it in `?hide=`; what the draft
+   * says about it is kept for when `embed` is switched off again.
+   * @default false
+   */
+  inHeader?: boolean;
 }
 
 /**

package/src/share/ui/ShareButton.tsx

@@ -72,13 +72,19 @@ export function ShareButton(props: ShareButtonProps): ReactElement {
   return (
     <button
       type="button"
-      className={className === undefined ? 'nav-link' : `nav-link ${className}`}
+      className={
+        className === undefined
+          ? 'nav-link nav-link--icon'
+          : `nav-link nav-link--icon ${className}`
+      }
       title={title}
       aria-label={label}
       onClick={onClick}
     >
       <Icon icon="share" size={14} />
-      {text}
+      {text === undefined ? null : (
+        <span className="nav-link__label">{text}</span>
+      )}
     </button>
   );
 }

package/src/share/ui/ShareConfigOptions.tsx

@@ -0,0 +1,68 @@
+import { Checkbox, H6 } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { HideablePart } from '../core/index.ts';
+
+import { SharePartOptions } from './SharePartOptions.tsx';
+
+const SECTION_STYLE: CSSProperties = { marginBottom: 18 };
+const HINT_STYLE: CSSProperties = {
+  display: 'block',
+  marginLeft: 26,
+  color: 'var(--text-muted, #5b6875)',
+  fontSize: 12,
+};
+
+export interface ShareConfigOptionsProps {
+  /** Whether the draft drops the site chrome. */
+  embed: boolean;
+  /** The parts that still mean something in this layout, in vocabulary order. */
+  parts: readonly HideablePart[];
+  /** The parts the draft switches off. */
+  hidden: readonly string[];
+  /** Called when the layout is switched. */
+  onEmbedChange: (embed: boolean) => void;
+  /** Called with the part and whether the link should switch it off. */
+  onPartChange: (part: string, hidden: boolean) => void;
+}
+
+/**
+ * The boxes of the share dialog: the layout, then one box per part of the page.
+ * @param props - The draft's layout and parts, and how to change them.
+ * @returns The two sections.
+ */
+export function ShareConfigOptions(
+  props: ShareConfigOptionsProps,
+): ReactElement {
+  const { embed, parts, hidden, onEmbedChange, onPartChange } = props;
+
+  return (
+    <>
+      <section className="share-section" style={SECTION_STYLE}>
+        <H6>Layout</H6>
+        <Checkbox
+          checked={embed}
+          label="Embed in another page"
+          onChange={(event) => {
+            onEmbedChange(event.currentTarget.checked);
+          }}
+        />
+        <span style={HINT_STYLE}>
+          Drops the site header and its navigation, so the page sits inside a
+          page of your own.
+        </span>
+      </section>
+
+      {parts.length > 0 ? (
+        <section className="share-section" style={SECTION_STYLE}>
+          <H6>Show on the page</H6>
+          <SharePartOptions
+            parts={parts}
+            hidden={hidden}
+            onChange={onPartChange}
+          />
+        </section>
+      ) : null}
+    </>
+  );
+}

package/src/share/ui/ShareDialog.tsx

@@ -5,12 +5,16 @@ import type {
   ShareConfig,
   ShareParamCodecs,
   ShareParamValues,
+  SharePreset,
   ShareVocabulary,
 } from '../core/index.ts';
 
 import { ShareDialogContent } from './ShareDialogContent.tsx';
 
-const DIALOG_STYLE: CSSProperties = { width: 'min(680px, 94vw)' };
+const DIALOG_STYLE: CSSProperties = {
+  width: 'min(820px, 94vw)',
+  height: 'min(760px, 90dvh)',
+};
 
 /**
  * The configuration the dialog is holding, handed to a tool-specific section so
@@ -41,6 +45,20 @@ export interface ShareDialogProps<
   onClose: () => void;
   /** What this site's links can say: the hideable parts, and the tool's own parameters. */
   vocabulary: ShareVocabulary<Codecs>;
+  /**
+   * Ready-made links, offered as tabs above a last Custom tab that holds the
+   * boxes. Picking one rewrites the draft; the dialog opens on the preset the
+   * draft already is, or on Custom.
+   * @default [] — no tabs, the boxes alone
+   */
+  presets?: ReadonlyArray<SharePreset<Codecs>>;
+  /**
+   * Key of the preset the dialog opens on when the page is not already running
+   * a configuration of its own — the link a page like this is usually handed
+   * out as. A key no preset has is ignored.
+   * @default undefined — the dialog opens on the suggested configuration
+   */
+  defaultPreset?: string;
   /** How the open page is named in the dialog, and in the frame. */
   title: string;
   /**

package/src/share/ui/ShareDialogContent.tsx

@@ -1,8 +1,7 @@
 import {
   AnchorButton,
   Button,
-  Checkbox,
-  DialogBody,
+  Classes,
   DialogFooter,
   H6,
 } from '@blueprintjs/core';
@@ -14,18 +13,23 @@ import type {
   ShareConfig,
   ShareParamCodecs,
   ShareParamValues,
+  SharePreset,
   ShareVocabulary,
 } from '../core/index.ts';
 import {
+  applySharePreset,
   buildEmbedCode,
   buildShareUrl,
+  findSharePreset,
   isShareConfigured,
   parseShareConfig,
   suggestedShareConfig,
+  visibleShareParts,
 } from '../core/index.ts';
 
+import { ShareConfigOptions } from './ShareConfigOptions.tsx';
 import type { ShareDialogProps, ShareDraft } from './ShareDialog.tsx';
-import { SharePartOptions } from './SharePartOptions.tsx';
+import { SharePresetTabs } from './SharePresetTabs.tsx';
 import { withPart } from './draft.ts';
 
 const LEAD_STYLE: CSSProperties = {
@@ -39,12 +43,13 @@ const ACTIONS_STYLE: CSSProperties = {
   gap: 8,
   marginTop: 8,
 };
-const HINT_STYLE: CSSProperties = {
-  display: 'block',
-  marginLeft: 26,
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: 12,
-};
+
+const NO_PRESETS: readonly never[] = [];
+
+// The dialog has a fixed height so switching preset does not resize it: the
+// body takes what the header and footer leave, and scrolls.
+const BODY_CLASS = `${Classes.DIALOG_BODY} ${Classes.DIALOG_BODY_SCROLL_CONTAINER}`;
+const BODY_STYLE: CSSProperties = { maxHeight: 'none', minHeight: 0 };
 
 /** Everything the dialog holds, minus what only its shell is concerned with. */
 export type ShareDialogContentProps<
@@ -63,6 +68,8 @@ export function ShareDialogContent<
   const {
     onClose,
     vocabulary,
+    presets = NO_PRESETS,
+    defaultPreset,
     title,
     baseUrl,
     search,
@@ -75,7 +82,10 @@ export function ShareDialogContent<
   const base = baseUrl ?? address?.href ?? '';
   const query = search ?? address?.search ?? '';
   const [config, setConfig] = useState<ShareConfig<Codecs>>(() =>
-    initialDraft(query, vocabulary),
+    initialDraft(query, vocabulary, findPreset(presets, defaultPreset ?? null)),
+  );
+  const [presetKey, setPresetKey] = useState<string | null>(
+    () => findSharePreset(config, presets, vocabulary)?.key ?? null,
   );
 
   function setEmbed(embed: boolean): void {
@@ -99,6 +109,13 @@ export function ShareDialogContent<
     }));
   }
 
+  function selectPreset(key: string | null): void {
+    setPresetKey(key);
+    const preset = findPreset(presets, key);
+    if (preset === undefined) return;
+    setConfig((previous) => applySharePreset(previous, preset, vocabulary));
+  }
+
   const draft: ShareDraft<Codecs> = {
     config,
     setEmbed,
@@ -111,39 +128,33 @@ export function ShareDialogContent<
     title: frameTitle ?? title,
     height: frameHeight,
   });
+  const options = (
+    <ShareConfigOptions
+      embed={config.embed}
+      parts={visibleShareParts(vocabulary.parts, config.embed)}
+      hidden={config.hidden}
+      onEmbedChange={setEmbed}
+      onPartChange={setPartHidden}
+    />
+  );
 
   return (
     <>
-      <DialogBody>
+      <div className={BODY_CLASS} style={BODY_STYLE}>
         <p style={LEAD_STYLE}>
           A link to <b>{title}</b> as you have it set up now.
         </p>
 
-        <section className="share-section" style={SECTION_STYLE}>
-          <H6>Layout</H6>
-          <Checkbox
-            checked={config.embed}
-            label="Embed in another page"
-            onChange={(event) => {
-              setEmbed(event.currentTarget.checked);
-            }}
+        {presets.length === 0 ? (
+          options
+        ) : (
+          <SharePresetTabs
+            presets={presets}
+            selected={presetKey}
+            onSelect={selectPreset}
+            custom={options}
           />
-          <span style={HINT_STYLE}>
-            Drops the site header and its navigation, so the page sits inside a
-            page of your own.
-          </span>
-        </section>
-
-        {vocabulary.parts.length > 0 ? (
-          <section className="share-section" style={SECTION_STYLE}>
-            <H6>Show on the page</H6>
-            <SharePartOptions
-              parts={vocabulary.parts}
-              hidden={config.hidden}
-              onChange={setPartHidden}
-            />
-          </section>
-        ) : null}
+        )}
 
         {children === undefined ? null : (
           <section className="share-section" style={SECTION_STYLE}>
@@ -173,7 +184,7 @@ export function ShareDialogContent<
             <CopyButton content={frame} label="Copy the iframe" />
           </div>
         </section>
-      </DialogBody>
+      </div>
       <DialogFooter
         actions={<Button intent="primary" text="Done" onClick={onClose} />}
       />
@@ -184,9 +195,23 @@ export function ShareDialogContent<
 function initialDraft<Codecs extends ShareParamCodecs>(
   search: string,
   vocabulary: ShareVocabulary<Codecs>,
+  preset: SharePreset<Codecs> | undefined,
 ): ShareConfig<Codecs> {
   const current = parseShareConfig(search, vocabulary);
-  return isShareConfigured(current, vocabulary)
-    ? current
-    : suggestedShareConfig(vocabulary);
+  if (isShareConfigured(current, vocabulary)) return current;
+  const suggested = suggestedShareConfig(vocabulary);
+  return preset === undefined
+    ? suggested
+    : applySharePreset(suggested, preset, vocabulary);
+}
+
+function findPreset<Codecs extends ShareParamCodecs>(
+  presets: ReadonlyArray<SharePreset<Codecs>>,
+  key: string | null,
+): SharePreset<Codecs> | undefined {
+  if (key === null) return undefined;
+  for (const preset of presets) {
+    if (preset.key === key) return preset;
+  }
+  return undefined;
 }

package/src/share/ui/SharePresetTabs.tsx

@@ -0,0 +1,70 @@
+import { Tab, Tabs } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+import type { ShareParamCodecs, SharePreset } from '../core/index.ts';
+
+const SECTION_STYLE: CSSProperties = { marginBottom: 18 };
+const DESCRIPTION_STYLE: CSSProperties = {
+  margin: 0,
+  color: 'var(--text-muted, #5b6875)',
+};
+
+const CUSTOM_TAB = 'custom';
+const PRESET_TAB_PREFIX = 'preset-';
+
+export interface SharePresetTabsProps<
+  Codecs extends ShareParamCodecs = Record<string, never>,
+> {
+  /** The presets, in the order the tabs list them. */
+  presets: ReadonlyArray<SharePreset<Codecs>>;
+  /** The key of the open preset, `null` for the custom tab. */
+  selected: string | null;
+  /** Called with the key of the preset picked, `null` for the custom tab. */
+  onSelect: (key: string | null) => void;
+  /** What the custom tab holds: the boxes of the draft. */
+  custom: ReactNode;
+}
+
+/**
+ * One tab per preset, then a last Custom tab holding the boxes, which start
+ * from whatever the preset before it set.
+ * @param props - The presets, the open one, and the custom panel.
+ * @returns The tab strip and the open panel.
+ */
+export function SharePresetTabs<
+  Codecs extends ShareParamCodecs = Record<string, never>,
+>(props: SharePresetTabsProps<Codecs>): ReactElement {
+  const { presets, selected, onSelect, custom } = props;
+
+  return (
+    <section className="share-section" style={SECTION_STYLE}>
+      <Tabs
+        id="share-presets"
+        className="share-presets"
+        animate={false}
+        renderActiveTabPanelOnly
+        selectedTabId={
+          selected === null ? CUSTOM_TAB : `${PRESET_TAB_PREFIX}${selected}`
+        }
+        onChange={(tabId) => {
+          const id = String(tabId);
+          onSelect(
+            id.startsWith(PRESET_TAB_PREFIX)
+              ? id.slice(PRESET_TAB_PREFIX.length)
+              : null,
+          );
+        }}
+      >
+        {presets.map((preset) => (
+          <Tab
+            key={preset.key}
+            id={`${PRESET_TAB_PREFIX}${preset.key}`}
+            title={preset.label}
+            panel={<p style={DESCRIPTION_STYLE}>{preset.description}</p>}
+          />
+        ))}
+        <Tab id={CUSTOM_TAB} title="Custom" panel={<>{custom}</>} />
+      </Tabs>
+    </section>
+  );
+}

package/src/shared/ui/MenuButton.tsx

@@ -23,6 +23,7 @@ export interface HeaderButtonProps {
   placement?: PopoverNextProps['placement'];
 }
 
+/** What one menu-opening button of a header needs. */
 export interface MenuButtonProps extends HeaderButtonProps {
   /** Class the holder carries, so a site can reach the button from its bar. */
   className: string;

package/src/shared/ui/joinClassNames.ts

@@ -0,0 +1,20 @@
+/**
+ * A `className` built from the names that apply.
+ *
+ * A component's own name comes first and a caller's `className` after it, so
+ * the caller's rules win a tie; a name that does not apply is written as
+ * `false`, `null`, `undefined` or `''` and is left out rather than leaving a
+ * stray space in the markup.
+ * @param names - The candidate names, in order.
+ * @returns The names that apply, separated by single spaces.
+ */
+export function joinClassNames(
+  ...names: ReadonlyArray<string | false | null | undefined>
+): string {
+  let joined = '';
+  for (const name of names) {
+    if (typeof name !== 'string' || name === '') continue;
+    joined = joined === '' ? name : `${joined} ${name}`;
+  }
+  return joined;
+}

package/src/slides/core/familyFrame.ts

@@ -0,0 +1,44 @@
+import { findSiteByHost } from '../../ecosystem/core/index.ts';
+
+/**
+ * Whether a deck may frame an address inside its prose.
+ *
+ * A deck is played on sites other than the one that wrote it, so a frame in
+ * its HTML is kept only when it shows the family itself: a path of the site
+ * playing the deck, or an https page of a cheminfo host.
+ * @param src - The `src` the deck wrote on its `<iframe>`.
+ * @returns True when the frame may be drawn.
+ */
+export function isFamilyFrameSource(src: string): boolean {
+  if (src.startsWith('/')) {
+    return !src.startsWith('//') && !src.startsWith('/\\');
+  }
+  let url: URL;
+  try {
+    url = new URL(src);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== 'https:') return false;
+  const { hostname } = url;
+  return (
+    hostname === 'cheminfo.org' ||
+    hostname.endsWith('.cheminfo.org') ||
+    findSiteByHost(hostname) !== undefined
+  );
+}
+
+/**
+ * What a framed tool is called, since a frame without a title is unreadable to
+ * a screen reader.
+ * @param src - The address being framed.
+ * @returns The host followed by "embedded", or a generic name when the address
+ *   is not absolute.
+ */
+export function frameTitle(src: string): string {
+  try {
+    return `${new URL(src).hostname}, embedded`;
+  } catch {
+    return 'Embedded tool';
+  }
+}

package/src/slides/core/index.ts

@@ -14,9 +14,4 @@ export {
   talkSummary,
 } from './talkManifest.ts';
 export type { TalkOrigin } from './talkOrigin.ts';
-export {
-  TALK_ORIGIN_PARAM,
-  formatTalkOrigin,
-  parseTalkOrigin,
-  withTalkOrigin,
-} from './talkOrigin.ts';
+export { parseTalkOrigin, withTalkOrigin } from './talkOrigin.ts';

package/src/slides/ui/BackToSlides.tsx

@@ -2,6 +2,7 @@ import { Icon } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
 import { isModifiedClick } from '../../chrome/ui/navItem.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { TalkOrigin } from '../core/index.ts';
 
 /** Where the visitor came from, and how to send them back. */
@@ -16,6 +17,11 @@ export interface BackToSlidesProps {
    * @default undefined — the browser follows the address
    */
   onReturn?: () => void;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -28,12 +34,12 @@ export interface BackToSlidesProps {
  * @returns The pill, or nothing.
  */
 export function BackToSlides(props: BackToSlidesProps): ReactElement | null {
-  const { origin, href, onReturn } = props;
+  const { className, origin, href, onReturn } = props;
   if (origin === null) return null;
 
   return (
     <a
-      className="back-to-slides no-print"
+      className={joinClassNames('back-to-slides no-print', className)}
       href={href}
       title={`Back to slide ${origin.slide + 1}`}
       onClick={(event) => {

package/src/slides/ui/EmbedSlide.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 
+import { frameTitle } from '../core/familyFrame.ts';
 import type { Slide } from '../core/talk.ts';
 
 import { SlideBody } from './SlideBody.tsx';
@@ -70,16 +71,3 @@ function splitEmbedAddress(body: string): {
   }
   return { prose: body.trim(), src: null };
 }
-
-/**
- * A frame without a title is unreadable to a screen reader.
- * @param src - The address being framed.
- * @returns What the frame is called.
- */
-function frameTitle(src: string): string {
-  try {
-    return `${new URL(src).hostname}, embedded`;
-  } catch {
-    return 'Embedded tool';
-  }
-}

package/src/slides/ui/SlideBody.tsx

@@ -1,11 +1,14 @@
 import type { ReactElement } from 'react';
 import Markdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 
+import { frameTitle, isFamilyFrameSource } from '../core/familyFrame.ts';
 import type { TalkOrigin } from '../core/index.ts';
 
 import type { RenderSlideLink } from './DemoLink.tsx';
 import { DemoLink } from './DemoLink.tsx';
+import { SLIDE_SANITIZE_SCHEMA } from './slideSanitizeSchema.ts';
 
 /** The Markdown of a slide, and where its links go. */
 export interface SlideBodyProps {
@@ -29,9 +32,11 @@ export interface SlideBodyProps {
  *
  * A talk is written as prose, so raw HTML in the source is kept: a slide
  * routinely holds a `<sub>`, a `<br>` or a figure the Markdown syntax cannot
- * express. A link to an in-app route becomes a demo link; every other link
- * leaves the deck in a tab of its own, so a click during a talk never loses the
- * slide it was made from.
+ * express. That HTML is sanitised, because a deck is played on sites other than
+ * the one that wrote it: scripts, event handlers and unsafe URLs are removed,
+ * and a frame is drawn only when it shows a page of the family. A link to an
+ * in-app route becomes a demo link; every other link leaves the deck in a tab
+ * of its own, so a click during a talk never loses the slide it was made from.
  * @param props - See {@link SlideBodyProps}.
  * @returns The rendered body.
  */
@@ -40,8 +45,20 @@ export function SlideBody(props: SlideBodyProps): ReactElement {
 
   return (
     <Markdown
-      rehypePlugins={[rehypeRaw]}
+      rehypePlugins={[rehypeRaw, [rehypeSanitize, SLIDE_SANITIZE_SCHEMA]]}
       components={{
+        iframe({ src, title, width, height, allowFullScreen }) {
+          if (src === undefined || !isFamilyFrameSource(src)) return null;
+          return (
+            <iframe
+              src={src}
+              title={title ?? frameTitle(src)}
+              width={width}
+              height={height}
+              allowFullScreen={allowFullScreen}
+            />
+          );
+        },
         a({ href, children }) {
           if (href?.startsWith('/') === true) {
             return (