react-cheminfo 0.25.0 → 0.26.0

package/src/share/ui/ShareDialogContent.tsx

@@ -5,10 +5,11 @@ import {
   DialogFooter,
   H6,
 } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
 import { CodeBlock, CopyButton } from '../../clipboard/ui/index.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   ShareConfig,
   ShareParamCodecs,
@@ -77,6 +78,7 @@ export function ShareDialogContent<
     frameHeight,
     children,
   } = props;
+  const t = useChromeT();
 
   const address = globalThis.location;
   const base = baseUrl ?? address?.href ?? '';
@@ -141,9 +143,7 @@ export function ShareDialogContent<
   return (
     <>
       <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>
+        <p style={LEAD_STYLE}>{lead(t('share.lead'), title)}</p>
 
         {presets.length === 0 ? (
           options
@@ -163,13 +163,13 @@ export function ShareDialogContent<
         )}
 
         <section className="share-section" style={SECTION_STYLE}>
-          <H6>Link</H6>
+          <H6>{t('share.link')}</H6>
           <CodeBlock code={url} tone="muted" />
           <div style={ACTIONS_STYLE}>
-            <CopyButton content={url} label="Copy the link" />
+            <CopyButton content={url} label={t('share.copyLink')} />
             <AnchorButton
               icon="share"
-              text="Open in a new tab"
+              text={t('share.openInNewTab')}
               href={url}
               target="_blank"
               rel="noopener noreferrer"
@@ -178,20 +178,30 @@ export function ShareDialogContent<
         </section>
 
         <section className="share-section" style={SECTION_STYLE}>
-          <H6>Iframe</H6>
+          <H6>{t('share.iframe')}</H6>
           <CodeBlock code={frame} tone="muted" />
           <div style={ACTIONS_STYLE}>
-            <CopyButton content={frame} label="Copy the iframe" />
+            <CopyButton content={frame} label={t('share.copyIframe')} />
           </div>
         </section>
       </div>
       <DialogFooter
-        actions={<Button intent="primary" text="Done" onClick={onClose} />}
+        actions={
+          <Button intent="primary" text={t('share.done')} onClick={onClose} />
+        }
       />
     </>
   );
 }
 
+// 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>,

package/src/share/ui/SharePresetTabs.tsx

@@ -1,6 +1,7 @@
 import { Tab, Tabs } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { ShareParamCodecs, SharePreset } from '../core/index.ts';
 
 const SECTION_STYLE: CSSProperties = { marginBottom: 18 };
@@ -35,6 +36,7 @@ export function SharePresetTabs<
   Codecs extends ShareParamCodecs = Record<string, never>,
 >(props: SharePresetTabsProps<Codecs>): ReactElement {
   const { presets, selected, onSelect, custom } = props;
+  const t = useChromeT();
 
   return (
     <section className="share-section" style={SECTION_STYLE}>
@@ -63,7 +65,7 @@ export function SharePresetTabs<
             panel={<p style={DESCRIPTION_STYLE}>{preset.description}</p>}
           />
         ))}
-        <Tab id={CUSTOM_TAB} title="Custom" panel={<>{custom}</>} />
+        <Tab id={CUSTOM_TAB} title={t('share.custom')} panel={<>{custom}</>} />
       </Tabs>
     </section>
   );

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 { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { TalkOrigin } from '../core/index.ts';
 
@@ -35,13 +36,14 @@ export interface BackToSlidesProps {
  */
 export function BackToSlides(props: BackToSlidesProps): ReactElement | null {
   const { className, origin, href, onReturn } = props;
+  const t = useChromeT();
   if (origin === null) return null;
 
   return (
     <a
       className={joinClassNames('back-to-slides no-print', className)}
       href={href}
-      title={`Back to slide ${origin.slide + 1}`}
+      title={t('slides.backToSlide', { slide: origin.slide + 1 })}
       onClick={(event) => {
         if (onReturn === undefined || isModifiedClick(event)) return;
         event.preventDefault();
@@ -49,7 +51,7 @@ export function BackToSlides(props: BackToSlidesProps): ReactElement | null {
       }}
     >
       <Icon icon="presentation" size={14} />
-      Back to slides
+      {t('slides.backToSlides')}
     </a>
   );
 }

package/src/slides/ui/EmbedSlide.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { frameTitle } from '../core/familyFrame.ts';
 import type { Slide } from '../core/talk.ts';
 
@@ -23,6 +24,7 @@ export interface EmbedSlideProps {
  */
 export function EmbedSlide(props: EmbedSlideProps): ReactElement {
   const { slide } = props;
+  const t = useChromeT();
   const { prose, src } = splitEmbedAddress(slide.body);
 
   return (
@@ -30,9 +32,7 @@ export function EmbedSlide(props: EmbedSlideProps): ReactElement {
       <div className="slide-content">
         {prose === '' ? null : <SlideBody body={prose} />}
         {src === null ? (
-          <p className="slide-embed-missing">
-            This slide frames a tool, but carries no address.
-          </p>
+          <p className="slide-embed-missing">{t('slides.noAddress')}</p>
         ) : (
           <iframe
             className="slide-embed-frame"

package/src/slides/ui/Slide.tsx

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactElement } from 'react';
 import { Fragment } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   Slide as SlideData,
   TalkMeta,
@@ -81,6 +82,7 @@ const GENERIC_LAYOUTS = new Set(['content', 'title', 'quote', 'thanks']);
 function GenericSlide(props: SlideLayoutProps): ReactElement {
   const { slide, talkId, slideIndex, meta, renderLink, site, talkOrigin } =
     props;
+  const t = useChromeT();
   const layout = GENERIC_LAYOUTS.has(slide.layout) ? slide.layout : 'content';
   const { body, demos } = splitDemoLinks(slide.body);
   const origin: TalkOrigin =
@@ -102,7 +104,7 @@ function GenericSlide(props: SlideLayoutProps): ReactElement {
         )}
         {demos.length === 0 ? null : (
           <div className="slide-demos">
-            <span className="slide-demos-label">Live demos:</span>
+            <span className="slide-demos-label">{t('slides.liveDemos')}</span>
             {demos.map((demo, index) => (
               <Fragment key={demo.href}>
                 {index === 0 ? null : (

package/src/slides/ui/SlideshowBar.tsx

@@ -1,6 +1,8 @@
 import { Button } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
 /** Where the talk stands, and what the presenter may do about it. */
 export interface SlideshowBarProps {
   /** What the bar reads. */
@@ -42,18 +44,24 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
     onToggleFullscreen,
     onExit,
   } = props;
+  const t = useChromeT();
 
   return (
     <div className="slideshow-bar no-print">
       {onExit === undefined ? null : (
-        <Button variant="minimal" icon="cross" text="Exit" onClick={onExit} />
+        <Button
+          variant="minimal"
+          icon="cross"
+          text={t('slides.exit')}
+          onClick={onExit}
+        />
       )}
       <div className="slideshow-title">{title}</div>
       <div className="slideshow-controls">
         <Button
           variant="minimal"
           icon="chevron-left"
-          aria-label="Previous slide"
+          aria-label={t('slides.previousSlide')}
           disabled={index === 0}
           onClick={() => {
             onIndexChange(index - 1);
@@ -65,7 +73,7 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
         <Button
           variant="minimal"
           icon="chevron-right"
-          aria-label="Next slide"
+          aria-label={t('slides.nextSlide')}
           disabled={index >= total - 1}
           onClick={() => {
             onIndexChange(index + 1);
@@ -74,7 +82,7 @@ export function SlideshowBar(props: SlideshowBarProps): ReactElement {
         <Button
           variant="minimal"
           icon={isFullscreen ? 'minimize' : 'fullscreen'}
-          aria-label="Toggle fullscreen"
+          aria-label={t('slides.toggleFullscreen')}
           onClick={onToggleFullscreen}
         />
       </div>

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 { useChromeT } from '../../i18n/ui/useT.ts';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { TalkManifest, TalkSummary } from '../core/index.ts';
 
@@ -25,7 +26,7 @@ export interface TalkListProps {
   /**
    * What an empty list says. A list that draws nothing at all reads as a
    * broken page rather than as a site that has published no deck yet.
-   * @default 'No talk yet.'
+   * @default the chrome's own line, in the language of the page
    */
   emptyNote?: string;
   /**
@@ -45,19 +46,16 @@ export interface TalkListProps {
  * @returns The listing.
  */
 export function TalkList(props: TalkListProps): ReactElement {
-  const {
-    className,
-    manifests,
-    onOpen,
-    renderHref,
-    siteName,
-    emptyNote = 'No talk yet.',
-  } = props;
+  const { className, manifests, onOpen, renderHref, siteName, emptyNote } =
+    props;
+  const t = useChromeT();
   const groups = groupBySite(manifests);
   const showSite = groups.length > 1;
 
   if (groups.length === 0) {
-    return <p className="talk-list-empty">{emptyNote}</p>;
+    return (
+      <p className="talk-list-empty">{emptyNote ?? t('slides.noTalkYet')}</p>
+    );
   }
 
   return (

package/src/structure/core/editorGuide.ts

@@ -14,8 +14,11 @@ export type EditorGuideScope = 'fragment' | 'molecule' | 'reaction';
 
 /** One gesture and what it does. */
 export interface EditorGesture {
+  /** How the guide's catalog names it, unique within its section. */
+  id: string;
   /** Keys, and plain text for the mouse part; unique within one gesture. */
   input: ReadonlyArray<string | EditorGuideKey>;
+  /** What it does, in English; the catalog answers for the other languages. */
   action: string;
   /**
    * The only editor the gesture works in.
@@ -26,6 +29,8 @@ export interface EditorGesture {
 
 /** Gestures that share a context, such as the pointer resting on an atom. */
 export interface EditorGuideSection {
+  /** How the guide's catalog names the section. */
+  id: string;
   title: string;
   gestures: readonly EditorGesture[];
   /**
@@ -37,6 +42,8 @@ export interface EditorGuideSection {
 
 /** A page of the full documentation. */
 export interface EditorGuideLink {
+  /** How the guide's catalog names the page. */
+  id: string;
   title: string;
   url: string;
 }
@@ -44,99 +51,170 @@ export interface EditorGuideLink {
 /** The sections, in the order the guide lists them. */
 export const STRUCTURE_EDITOR_GUIDE: readonly EditorGuideSection[] = [
   {
+    id: 'atom',
     title: 'Pointer on an atom',
     gestures: [
-      { input: ['Type', { key: 'n' }, { key: 'a' }], action: 'Make it Na' },
       {
+        id: 'element',
+        input: ['Type', { key: 'n' }, { key: 'a' }],
+        action: 'Make it Na',
+      },
+      {
+        id: 'group',
         input: ['Type', { key: 'p' }, { key: 'h' }],
         action: 'Attach a phenyl; Me, Et, Boc, TMS… work too',
       },
       {
+        id: 'applyOrForget',
         input: [{ key: 'Enter' }, 'or', { key: 'Esc' }],
         action: 'Apply or forget what was typed',
       },
       {
+        id: 'chain',
         input: [{ key: '1' }, '…', { key: '9' }],
         action: 'Attach a chain of that many carbons',
       },
       {
+        id: 'charge',
         input: [{ key: '+' }, 'or', { key: '-' }],
         action: 'Raise or lower the charge',
       },
-      { input: [{ key: '.' }], action: 'Add or remove a radical' },
-      { input: [{ key: ':' }], action: 'Make it a triplet, then a singlet' },
-      { input: [{ key: '?' }], action: 'Make it a connection point' },
       {
+        id: 'radical',
+        input: [{ key: '.' }],
+        action: 'Add or remove a radical',
+      },
+      {
+        id: 'spin',
+        input: [{ key: ':' }],
+        action: 'Make it a triplet, then a singlet',
+      },
+      {
+        id: 'attachment',
+        input: [{ key: '?' }],
+        action: 'Make it a connection point',
+      },
+      {
+        id: 'query',
         input: [{ key: 'q' }],
         action: 'Edit its query features',
         only: 'fragment',
       },
-      { input: [{ key: 'x' }], action: 'Accept any halogen', only: 'fragment' },
-      { input: [{ key: 'Delete' }], action: 'Delete it' },
+      {
+        id: 'halogen',
+        input: [{ key: 'x' }],
+        action: 'Accept any halogen',
+        only: 'fragment',
+      },
+      { id: 'delete', input: [{ key: 'Delete' }], action: 'Delete it' },
     ],
     note: 'What is typed shows black for an element, blue for a group, grey while incomplete and red when unknown.',
   },
   {
+    id: 'bond',
     title: 'Pointer on a bond',
     gestures: [
       {
+        id: 'order',
         input: [{ key: '1' }, { key: '2' }, { key: '3' }],
         action: 'Single, double or triple',
       },
-      { input: [{ key: '0' }], action: 'Zero-order (metal–ligand) bond' },
       {
+        id: 'zeroOrder',
+        input: [{ key: '0' }],
+        action: 'Zero-order (metal–ligand) bond',
+      },
+      {
+        id: 'stereo',
         input: [{ key: 'u' }, 'or', { key: 'd' }],
         action: 'Up or down stereo bond',
       },
-      { input: [{ key: 'c' }], action: 'Double bond of unknown geometry' },
-      { input: [{ key: 'v' }], action: 'Fuse a 3-membered ring' },
       {
+        id: 'unknownGeometry',
+        input: [{ key: 'c' }],
+        action: 'Double bond of unknown geometry',
+      },
+      {
+        id: 'threeRing',
+        input: [{ key: 'v' }],
+        action: 'Fuse a 3-membered ring',
+      },
+      {
+        id: 'ring',
         input: [{ key: '4' }, '…', { key: '7' }],
         action: 'Fuse a ring of that size',
       },
       {
+        id: 'benzene',
         input: [{ key: 'a' }, 'or', { key: 'b' }],
         action: 'Fuse a benzene ring',
       },
       {
+        id: 'query',
         input: [{ key: 'q' }],
         action: 'Edit its query features',
         only: 'fragment',
       },
-      { input: [{ key: 'Delete' }], action: 'Delete it' },
+      { id: 'delete', input: [{ key: 'Delete' }], action: 'Delete it' },
     ],
   },
   {
+    id: 'anywhere',
     title: 'Anywhere',
     gestures: [
-      { input: [{ key: 'Mod' }, { key: 'Z' }], action: 'Undo' },
-      { input: [{ key: 'Mod' }, { key: 'C' }], action: 'Copy the structure' },
+      { id: 'undo', input: [{ key: 'Mod' }, { key: 'Z' }], action: 'Undo' },
       {
+        id: 'copy',
+        input: [{ key: 'Mod' }, { key: 'C' }],
+        action: 'Copy the structure',
+      },
+      {
+        id: 'paste',
         input: [{ key: 'Mod' }, { key: 'V' }],
         action: 'Paste a molfile, a SMILES or an idCode',
       },
-      { input: [{ key: 'Delete' }], action: 'Delete the selection' },
       {
+        id: 'deleteSelection',
+        input: [{ key: 'Delete' }],
+        action: 'Delete the selection',
+      },
+      {
+        id: 'flip',
         input: [{ key: 'h' }, 'or', { key: 'v' }],
         action: 'Flip horizontally or vertically',
         only: 'molecule',
       },
-      { input: [{ key: 'F1' }], action: 'Open this guide' },
+      { id: 'help', input: [{ key: 'F1' }], action: 'Open this guide' },
     ],
     note: 'Keys act once the drawing has been clicked. On empty canvas, a key picks the tool whose tooltip shows it.',
   },
   {
+    id: 'selecting',
     title: 'Selecting',
     gestures: [
-      { input: ['Drag'], action: 'Select what the lasso encloses' },
-      { input: [{ key: 'Alt' }, '+ drag'], action: 'Select a rectangle' },
-      { input: [{ key: 'Shift' }, '+ drag'], action: 'Add to the selection' },
-      { input: ['Drag the selection'], action: 'Move it' },
       {
+        id: 'lasso',
+        input: ['Drag'],
+        action: 'Select what the lasso encloses',
+      },
+      {
+        id: 'rectangle',
+        input: [{ key: 'Alt' }, '+ drag'],
+        action: 'Select a rectangle',
+      },
+      {
+        id: 'add',
+        input: [{ key: 'Shift' }, '+ drag'],
+        action: 'Add to the selection',
+      },
+      { id: 'move', input: ['Drag the selection'], action: 'Move it' },
+      {
+        id: 'duplicate',
         input: [{ key: 'Shift' }, '+ drag the selection'],
         action: 'Copy it',
       },
       {
+        id: 'queryFeatures',
         input: ['Double-click'],
         action: 'Edit the query features of an atom, a bond or the selection',
         only: 'fragment',
@@ -145,6 +223,7 @@ export const STRUCTURE_EDITOR_GUIDE: readonly EditorGuideSection[] = [
     note: 'These need the Select tool, which Space picks.',
   },
   {
+    id: 'stereochemistry',
     title: 'Stereochemistry',
     gestures: [],
     note: 'Pink bonds flag a stereocentre with too little or too much information. Draw an up or down bond with its narrow end on the centre, then use the enhanced stereo tool to say whether the drawing is this enantiomer (abs), both of them (&) or one of the two (or).',
@@ -153,12 +232,18 @@ export const STRUCTURE_EDITOR_GUIDE: readonly EditorGuideSection[] = [
 
 /** The documentation this guide summarises. */
 export const STRUCTURE_EDITOR_DOCS: readonly EditorGuideLink[] = [
-  { title: 'Tools and keys', url: 'https://docs.nmrium.org/help/ocl/' },
   {
+    id: 'toolsAndKeys',
+    title: 'Tools and keys',
+    url: 'https://docs.nmrium.org/help/ocl/',
+  },
+  {
+    id: 'atomProperties',
     title: 'Atom properties',
     url: 'https://docs.nmrium.org/chemical_structure/ocl/atom-properties/',
   },
   {
+    id: 'stereochemistry',
     title: 'Stereochemistry',
     url: 'https://docs.nmrium.org/ocl/stereochemistry/',
   },
@@ -209,6 +294,28 @@ function appliesTo(
   return only === mode;
 }
 
+// The words a gesture writes between its key caps. They are keyed here rather
+// than slugged from the text, because `Drag` and `+ drag` would slug alike.
+const INPUT_WORD_IDS: Record<string, string> = {
+  Type: 'type',
+  or: 'or',
+  Drag: 'drag',
+  '+ drag': 'plusDrag',
+  'Drag the selection': 'dragSelection',
+  '+ drag the selection': 'plusDragSelection',
+  'Double-click': 'doubleClick',
+};
+
+/**
+ * How the catalog names one of the words a gesture writes between its key
+ * caps.
+ * @param text - The word, in English.
+ * @returns Its id, or `undefined` for punctuation nobody translates.
+ */
+export function editorInputWordId(text: string): string | undefined {
+  return INPUT_WORD_IDS[text];
+}
+
 /**
  * The text of a key cap.
  * @param key - The key, `Mod` standing for the platform's shortcut modifier.