react-cheminfo 0.38.0 → 0.39.1

package/src/share/ui/ShareButton.tsx

@@ -2,6 +2,7 @@ import { Button, Icon } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 
 /** How the button is dressed for the bar it sits in. */
 export type ShareButtonVariant = 'nav-link' | 'blueprint';
@@ -61,7 +62,7 @@ export function ShareButton(props: ShareButtonProps): ReactElement {
   if (variant === 'blueprint') {
     return (
       <Button
-        className={className}
+        className={joinClassNames('no-print', className)}
         variant="minimal"
         icon="share"
         text={text}
@@ -75,11 +76,7 @@ export function ShareButton(props: ShareButtonProps): ReactElement {
   return (
     <button
       type="button"
-      className={
-        className === undefined
-          ? 'nav-link nav-link--icon'
-          : `nav-link nav-link--icon ${className}`
-      }
+      className={joinClassNames('nav-link nav-link--icon no-print', className)}
       title={title}
       aria-label={label}
       onClick={onClick}

package/src/share/ui/ShareConfigOptions.tsx

@@ -1,18 +1,14 @@
-import { Checkbox, H6 } from '@blueprintjs/core';
+import { H6 } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { HideablePart } from '../core/index.ts';
 
 import { SharePartOptions } from './SharePartOptions.tsx';
+import type { SharePartDescriptions } from './SharePartRow.tsx';
+import { SharePartRow } from './SharePartRow.tsx';
 
-const SECTION_STYLE: CSSProperties = { marginBottom: 18 };
-const HINT_STYLE: CSSProperties = {
-  display: 'block',
-  marginLeft: 26,
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: 12,
-};
+const SECTION_STYLE: CSSProperties = { marginBottom: 14 };
 
 export interface ShareConfigOptionsProps {
   /** Whether the draft drops the site chrome. */
@@ -21,35 +17,46 @@ export interface ShareConfigOptionsProps {
   parts: readonly HideablePart[];
   /** The parts the draft switches off. */
   hidden: readonly string[];
+  /** Where each row says what switching it off does. */
+  descriptions: SharePartDescriptions;
   /** 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;
+  /** Called with the part the pointer is on, or `null` when it leaves. */
+  onPartPointed: (part: string | null) => void;
 }
 
 /**
- * The boxes of the share dialog: the layout, then one box per part of the page.
+ * The switches of the share dialog: the layout, then one 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;
+  const {
+    embed,
+    parts,
+    hidden,
+    descriptions,
+    onEmbedChange,
+    onPartChange,
+    onPartPointed,
+  } = props;
   const t = useChromeT();
 
   return (
     <>
       <section className="share-section" style={SECTION_STYLE}>
         <H6>{t('share.layout')}</H6>
-        <Checkbox
-          checked={embed}
+        <SharePartRow
           label={t('share.embed')}
-          onChange={(event) => {
-            onEmbedChange(event.currentTarget.checked);
-          }}
+          description={t('share.embedHint')}
+          on={embed}
+          descriptions={descriptions}
+          onChange={onEmbedChange}
         />
-        <span style={HINT_STYLE}>{t('share.embedHint')}</span>
       </section>
 
       {parts.length > 0 ? (
@@ -58,7 +65,9 @@ export function ShareConfigOptions(
           <SharePartOptions
             parts={parts}
             hidden={hidden}
+            descriptions={descriptions}
             onChange={onPartChange}
+            onPointed={onPartPointed}
           />
         </section>
       ) : null}

package/src/share/ui/ShareDialog.tsx

@@ -11,10 +11,11 @@ import type {
 } from '../core/index.ts';
 
 import { ShareDialogContent } from './ShareDialogContent.tsx';
+import type { SharePartDescriptions } from './SharePartRow.tsx';
 
 const DIALOG_STYLE: CSSProperties = {
-  width: 'min(820px, 94vw)',
-  height: 'min(760px, 90dvh)',
+  width: 'min(1180px, 96vw)',
+  height: 'min(820px, 92dvh)',
 };
 
 /**
@@ -85,6 +86,19 @@ export interface ShareDialogProps<
    * @default 700
    */
   frameHeight?: number;
+  /**
+   * Whether the page the link hands out is shown live beside the options.
+   * A tool whose page is too heavy to load a second time switches it off.
+   * @default true
+   */
+  preview?: boolean;
+  /**
+   * Where each row says what switching it off does: `inline` writes it under
+   * the label, which is where it is read; `help` puts it behind a glyph beside
+   * the label, for a dialog short on room.
+   * @default 'inline'
+   */
+  partDescriptions?: SharePartDescriptions;
   /**
    * Whether the dialog is rendered through a portal on `document.body`.
    * @default true
@@ -120,7 +134,7 @@ export function ShareDialog<
       isOpen={isOpen}
       onClose={onClose}
       usePortal={usePortal}
-      title={t('share.dialogTitle')}
+      title={t('share.dialogTitleFor', { title: rest.title })}
       icon="share"
       className="share-dialog"
       style={DIALOG_STYLE}

package/src/share/ui/ShareDialogContent.tsx

@@ -1,16 +1,11 @@
-import {
-  AnchorButton,
-  Button,
-  Classes,
-  DialogFooter,
-  H6,
-} from '@blueprintjs/core';
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import { useState } from 'react';
-
-import { CodeBlock, CopyButton } from '../../clipboard/ui/index.ts';
+import { Button, DialogFooter } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useRef, useState } from 'react';
+
+import { useContainerSize } from '../../hooks/ui/useContainerSize.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
+  HideablePart,
   ShareConfig,
   ShareParamCodecs,
   ShareParamValues,
@@ -30,27 +25,18 @@ import {
 
 import { ShareConfigOptions } from './ShareConfigOptions.tsx';
 import type { ShareDialogProps, ShareDraft } from './ShareDialog.tsx';
+import { ShareLinkBar } from './ShareLinkBar.tsx';
+import { SharePanes } from './SharePanes.tsx';
 import { SharePresetTabs } from './SharePresetTabs.tsx';
+import { SharePreview } from './SharePreview.tsx';
 import { withPart } from './draft.ts';
 
-const LEAD_STYLE: CSSProperties = {
-  marginTop: 0,
-  color: 'var(--text-muted, #5b6875)',
-};
-const SECTION_STYLE: CSSProperties = { marginBottom: 18 };
-const ACTIONS_STYLE: CSSProperties = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: 8,
-  marginTop: 8,
-};
-
 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 };
+/** Width below which the two panes stop fitting side by side and become tabs. */
+const TWO_PANE_WIDTH = 720;
+
+const SECTION_STYLE: CSSProperties = { marginBottom: 14 };
 
 /** Everything the dialog holds, minus what only its shell is concerned with. */
 export type ShareDialogContentProps<
@@ -58,8 +44,8 @@ export type ShareDialogContentProps<
 > = Omit<ShareDialogProps<Codecs>, 'isOpen' | 'usePortal'>;
 
 /**
- * The sections of the share dialog: what the link says, what it hands out, and
- * the markup that frames it.
+ * The share dialog's body: what one does with the link above, never scrolled
+ * away, then the options on the left and the page they write on the right.
  * @param props - What the site's links can say, how the page is named, and the extra section.
  * @returns The body and the footer of the dialog.
  */
@@ -76,6 +62,8 @@ export function ShareDialogContent<
     search,
     frameTitle,
     frameHeight,
+    preview = true,
+    partDescriptions = 'inline',
     children,
   } = props;
   const t = useChromeT();
@@ -86,9 +74,16 @@ export function ShareDialogContent<
   const [config, setConfig] = useState<ShareConfig<Codecs>>(() =>
     initialDraft(query, vocabulary, findPreset(presets, defaultPreset ?? null)),
   );
+  const [pointed, setPointed] = useState<string | null>(null);
   const [presetKey, setPresetKey] = useState<string | null>(
     () => findSharePreset(config, presets, vocabulary)?.key ?? null,
   );
+  const body = useRef<HTMLDivElement>(null);
+  const { width } = useContainerSize(body);
+  // Zero until the body is first measured, and the wide layout is the one that
+  // renders both panes, so nothing is missing from a first paint or a render
+  // with no layout at all.
+  const narrow = width > 0 && width < TWO_PANE_WIDTH;
 
   function setEmbed(embed: boolean): void {
     setConfig((previous) => ({ ...previous, embed }));
@@ -135,55 +130,57 @@ export function ShareDialogContent<
       embed={config.embed}
       parts={visibleShareParts(vocabulary.parts, config.embed)}
       hidden={config.hidden}
+      descriptions={partDescriptions}
       onEmbedChange={setEmbed}
       onPartChange={setPartHidden}
+      onPartPointed={setPointed}
     />
   );
 
-  return (
-    <>
-      <div className={BODY_CLASS} style={BODY_STYLE}>
-        <p style={LEAD_STYLE}>{lead(t('share.lead'), title)}</p>
-
-        {presets.length === 0 ? (
-          options
-        ) : (
-          <SharePresetTabs
-            presets={presets}
-            selected={presetKey}
-            onSelect={selectPreset}
-            custom={options}
-          />
-        )}
-
-        {children === undefined ? null : (
-          <section className="share-section" style={SECTION_STYLE}>
-            {typeof children === 'function' ? children(draft) : children}
-          </section>
-        )}
+  const openPreset = findPreset(presets, presetKey);
+  const optionsPane = (
+    <div className="share-dialog__options">
+      {openPreset === undefined ? (
+        options
+      ) : (
+        <p className="share-dialog__preset">{openPreset.description}</p>
+      )}
 
+      {children === undefined ? null : (
         <section className="share-section" style={SECTION_STYLE}>
-          <H6>{t('share.link')}</H6>
-          <CodeBlock code={url} tone="muted" />
-          <div style={ACTIONS_STYLE}>
-            <CopyButton content={url} label={t('share.copyLink')} />
-            <AnchorButton
-              icon="share"
-              text={t('share.openInNewTab')}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-            />
-          </div>
+          {typeof children === 'function' ? children(draft) : children}
         </section>
+      )}
+    </div>
+  );
 
-        <section className="share-section" style={SECTION_STYLE}>
-          <H6>{t('share.iframe')}</H6>
-          <CodeBlock code={frame} tone="muted" />
-          <div style={ACTIONS_STYLE}>
-            <CopyButton content={frame} label={t('share.copyIframe')} />
-          </div>
-        </section>
+  const previewPane = preview ? (
+    <SharePreview
+      url={url}
+      title={frameTitle ?? title}
+      highlight={highlightOf(vocabulary.parts, pointed)}
+    />
+  ) : null;
+
+  return (
+    <>
+      <div className="share-dialog__body" ref={body}>
+        <div className="share-dialog__top">
+          {presets.length === 0 ? null : (
+            <SharePresetTabs
+              presets={presets}
+              selected={presetKey}
+              onSelect={selectPreset}
+            />
+          )}
+          <ShareLinkBar url={url} frame={frame} />
+        </div>
+
+        <SharePanes
+          options={optionsPane}
+          preview={previewPane}
+          narrow={narrow}
+        />
       </div>
       <DialogFooter
         actions={
@@ -194,14 +191,6 @@ export function ShareDialogContent<
   );
 }
 
-// The name of the page is set in bold inside a sentence whose word order is
-// the translator's, so the message is split at its placeholder rather than
-// written as a prefix and a suffix.
-function lead(message: string, title: string): ReactNode[] {
-  const [before = '', after = ''] = message.split('{title}');
-  return [before, <b key="title">{title}</b>, after];
-}
-
 function initialDraft<Codecs extends ShareParamCodecs>(
   search: string,
   vocabulary: ShareVocabulary<Codecs>,
@@ -215,6 +204,20 @@ function initialDraft<Codecs extends ShareParamCodecs>(
     : applySharePreset(suggested, preset, vocabulary);
 }
 
+// The name in the list and the box on the page are the same thing, so the
+// preview is told what the reader is pointing at rather than a key it would
+// have to look a name up for.
+function highlightOf(
+  parts: readonly HideablePart[],
+  pointed: string | null,
+): { part: string; label: string } | null {
+  if (pointed === null) return null;
+  for (const part of parts) {
+    if (part.key === pointed) return { part: part.key, label: part.label };
+  }
+  return null;
+}
+
 function findPreset<Codecs extends ShareParamCodecs>(
   presets: ReadonlyArray<SharePreset<Codecs>>,
   key: string | null,

package/src/share/ui/ShareLinkBar.tsx

@@ -0,0 +1,70 @@
+import { AnchorButton } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+
+import { CopyButton } from '../../clipboard/ui/index.ts';
+import { HelpTooltip } from '../../help/ui/index.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+export interface ShareLinkBarProps {
+  /** The address the link hands out. */
+  url: string;
+  /** The markup that frames the page in someone else's site. */
+  frame: string;
+}
+
+/**
+ * The three things one does with a share link, kept above the options and
+ * never scrolled away: a dialog whose Copy button is below the fold is a dialog
+ * one scrolls through every single time.
+ *
+ * Neither the address nor the frame markup is printed. A teacher reads neither
+ * before pasting it, and a hundred characters of query string set in monospace
+ * is the widest thing in the dialog; what tells them which button to press is
+ * the help on it.
+ * @param props - The address, and the frame markup the third button copies.
+ * @returns The bar.
+ */
+export function ShareLinkBar(props: ShareLinkBarProps): ReactElement {
+  const { url, frame } = props;
+  const t = useChromeT();
+
+  return (
+    <div className="share-linkbar">
+      <HelpTooltip
+        content={{
+          title: t('share.copyLinkHelpTitle'),
+          body: t('share.copyLinkHelp'),
+        }}
+      >
+        <CopyButton content={url} label={t('share.copyLink')} title="" />
+      </HelpTooltip>
+      <HelpTooltip
+        content={{
+          title: t('share.openInNewTabHelpTitle'),
+          body: t('share.openInNewTabHelp'),
+        }}
+      >
+        <AnchorButton
+          icon="share"
+          text={t('share.openInNewTab')}
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      </HelpTooltip>
+      <HelpTooltip
+        content={{
+          title: t('share.copyIframeHelpTitle'),
+          body: t('share.copyIframeHelp'),
+        }}
+      >
+        <CopyButton
+          content={frame}
+          icon="code"
+          label={t('share.copyIframe')}
+          title=""
+        />
+      </HelpTooltip>
+    </div>
+  );
+}

package/src/share/ui/SharePanes.tsx

@@ -0,0 +1,62 @@
+import { Tab, Tabs } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+const OPTIONS_TAB = 'options';
+const PREVIEW_TAB = 'preview';
+
+export interface SharePanesProps {
+  /** What the link says: the presets, the boxes, and the tool's own section. */
+  options: ReactElement;
+  /** The live page, or nothing when the dialog shows no preview. */
+  preview: ReactElement | null;
+  /** Whether the dialog is too narrow to hold the two panes side by side. */
+  narrow: boolean;
+}
+
+/**
+ * The options and the page they write: side by side where there is room, and
+ * two tabs where there is not.
+ * @param props - The two panes, and whether they still fit together.
+ * @returns The panes, or the tabs holding them.
+ */
+export function SharePanes(props: SharePanesProps): ReactElement {
+  const { options, preview, narrow } = props;
+  const t = useChromeT();
+  const [tab, setTab] = useState<string>(OPTIONS_TAB);
+
+  if (preview === null) {
+    return (
+      <div className="share-dialog__panes share-dialog__panes--single">
+        {options}
+      </div>
+    );
+  }
+
+  if (narrow) {
+    return (
+      <Tabs
+        id="share-panes"
+        className="share-dialog__tabs"
+        animate={false}
+        renderActiveTabPanelOnly
+        selectedTabId={tab}
+        onChange={(tabId) => {
+          setTab(String(tabId));
+        }}
+      >
+        <Tab id={OPTIONS_TAB} title={t('share.options')} panel={options} />
+        <Tab id={PREVIEW_TAB} title={t('share.preview')} panel={preview} />
+      </Tabs>
+    );
+  }
+
+  return (
+    <div className="share-dialog__panes">
+      {options}
+      {preview}
+    </div>
+  );
+}

package/src/share/ui/SharePartOptions.tsx

@@ -1,50 +1,49 @@
-import { Checkbox } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import type { HideablePart } from '../core/index.ts';
 
-const OPTION_STYLE: CSSProperties = { marginBottom: 8 };
-
-const DESCRIPTION_STYLE: CSSProperties = {
-  display: 'block',
-  marginLeft: 26,
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: 12,
-};
+import type { SharePartDescriptions } from './SharePartRow.tsx';
+import { SharePartRow } from './SharePartRow.tsx';
 
 export interface SharePartOptionsProps {
   /** The parts this page can switch off, in the order the vocabulary lists them. */
   parts: readonly HideablePart[];
   /** The parts the draft currently switches off. */
   hidden: readonly string[];
+  /** Where each row says what switching it off does. */
+  descriptions: SharePartDescriptions;
   /** Called with the part and whether the link should switch it off. */
   onChange: (part: string, hidden: boolean) => void;
+  /** Called with the part the pointer is on, or `null` when it leaves. */
+  onPointed: (part: string | null) => void;
 }
 
 /**
- * One box per part of the page, worded positively: a ticked box is a part the
- * link keeps, which is how somebody building a course tile thinks about it.
+ * One switch per part of the page, worded positively: a part that is `On` is a
+ * part the link keeps, which is how somebody building a course tile thinks
+ * about it.
  * @param props - The parts, what is switched off, and how to change it.
- * @returns The list of boxes.
+ * @returns The rows.
  */
 export function SharePartOptions(props: SharePartOptionsProps): ReactElement {
-  const { parts, hidden, onChange } = props;
+  const { parts, hidden, descriptions, onChange, onPointed } = props;
 
   return (
     <>
       {parts.map((part) => (
-        <div key={part.key} style={OPTION_STYLE} className="share-part">
-          <Checkbox
-            checked={!hidden.includes(part.key)}
-            label={part.label}
-            onChange={(event) => {
-              onChange(part.key, !event.currentTarget.checked);
-            }}
-          />
-          <span style={DESCRIPTION_STYLE} className="share-part-description">
-            {part.description}
-          </span>
-        </div>
+        <SharePartRow
+          key={part.key}
+          label={part.label}
+          description={part.description}
+          on={!hidden.includes(part.key)}
+          descriptions={descriptions}
+          onChange={(on) => {
+            onChange(part.key, !on);
+          }}
+          onPointed={(pointed) => {
+            onPointed(pointed ? part.key : null);
+          }}
+        />
       ))}
     </>
   );

package/src/share/ui/SharePartRow.tsx

@@ -0,0 +1,78 @@
+import { Switch } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { useId } from 'react';
+
+import { HelpIcon } from '../../help/ui/index.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+/**
+ * Where a row says what switching it off does: behind a help glyph beside the
+ * label, or on a line of its own under it.
+ */
+export type SharePartDescriptions = 'help' | 'inline';
+
+export interface SharePartRowProps {
+  /** What the row switches, named as the reader sees it on the page. */
+  label: string;
+  /** What switching it off does, in one sentence. */
+  description: string;
+  /** Whether the link keeps it. */
+  on: boolean;
+  /** Where the description is shown. */
+  descriptions: SharePartDescriptions;
+  /** Called with the state the reader asked for. */
+  onChange: (on: boolean) => void;
+  /**
+   * Called when the pointer enters or leaves the row, so the preview can draw
+   * the region it names.
+   * @default undefined — the row is not pointed out anywhere
+   */
+  onPointed?: (pointed: boolean) => void;
+}
+
+/**
+ * One row of the share dialog: what it is on the left, whether the link keeps
+ * it on the right.
+ *
+ * The state is written inside the switch rather than left to a tick, because a
+ * tick means nothing without the heading above the column — and the heading is
+ * the first thing a reader scrolls past. A row that says `On` reads correctly
+ * on its own, in every language.
+ * @param props - See {@link SharePartRowProps}.
+ * @returns The row.
+ */
+export function SharePartRow(props: SharePartRowProps): ReactElement {
+  const { label, description, on, descriptions, onChange, onPointed } = props;
+  const t = useChromeT();
+  const id = useId();
+
+  return (
+    <div
+      className="share-part"
+      onMouseEnter={() => onPointed?.(true)}
+      onMouseLeave={() => onPointed?.(false)}
+      onFocus={() => onPointed?.(true)}
+      onBlur={() => onPointed?.(false)}
+    >
+      <label className="share-part__label" htmlFor={id}>
+        {label}
+      </label>
+      {descriptions === 'help' ? (
+        <HelpIcon content={{ title: label, body: description }} label={label} />
+      ) : null}
+      <Switch
+        id={id}
+        className="share-part__switch"
+        checked={on}
+        innerLabel={t('share.off')}
+        innerLabelChecked={t('share.on')}
+        onChange={(event) => {
+          onChange(event.currentTarget.checked);
+        }}
+      />
+      {descriptions === 'inline' ? (
+        <p className="share-part__description">{description}</p>
+      ) : null}
+    </div>
+  );
+}