react-cheminfo 0.64.1 → 0.66.0

package/src/property/core/copyableText.ts

@@ -0,0 +1,20 @@
+/**
+ * What a click on a value of a property table copies.
+ */
+
+/** What a cell shows when there is no value for it. */
+export const NOT_AVAILABLE = '—';
+
+/**
+ * The text a reader pastes for a value the page shows, or `null` when there is
+ * nothing to take: a value the data does not hold, or one drawn from elements
+ * rather than written as text, which names its own copy text instead.
+ * @param value - What is on screen.
+ * @returns The clipboard text, or null.
+ */
+export function copyableText(value: unknown): string | null {
+  if (typeof value === 'number') return String(value);
+  if (typeof value !== 'string') return null;
+  const text = value.trim();
+  return text === '' || text === NOT_AVAILABLE ? null : text;
+}

package/src/property/core/index.ts

@@ -0,0 +1 @@
+export { NOT_AVAILABLE, copyableText } from './copyableText.ts';

package/src/property/ui/PropertyTable.tsx

@@ -0,0 +1,83 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { ClickToCopy } from '../../clipboard/ui/ClickToCopy.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { copyableText } from '../core/copyableText.ts';
+
+/** One row of a {@link PropertyTable}. */
+export interface PropertyRow {
+  /** What the row is called. */
+  label: string;
+  /** The value, already formatted: text, a number, or a drawn element. */
+  value: ReactNode;
+  /**
+   * What the number means, when the name alone does not say.
+   * @default undefined
+   */
+  note?: string;
+  /**
+   * What a click on the value copies, when the value is drawn rather than
+   * written: a formula drawn by `<MF>` copies its plain string.
+   * @default the value itself when it is text or a number, nothing otherwise
+   */
+  copy?: string;
+}
+
+/** What {@link PropertyTable} needs. */
+export interface PropertyTableProps {
+  /**
+   * The heading over the group.
+   * @default undefined — no heading
+   */
+  title?: string;
+  /** The rows, in the order they are read. */
+  rows: readonly PropertyRow[];
+  /**
+   * Class the group carries, in addition to `properties`.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * One group of properties as a two-column table, each value its own copy
+ * target: a mass, a formula or an identifier is taken away with one click, and
+ * a row with no value is drawn as a plain cell.
+ * @param props - The heading and the rows.
+ * @returns The group.
+ */
+export function PropertyTable(props: PropertyTableProps): ReactElement {
+  const { title, rows, className } = props;
+  return (
+    <section className={joinClassNames('properties', className)}>
+      {title === undefined ? null : (
+        <h3 className="properties__title">{title}</h3>
+      )}
+      <table className="properties__table">
+        <tbody>
+          {rows.map((row) => {
+            const copy = row.copy ?? copyableText(row.value);
+            return (
+              <tr key={row.label}>
+                <th scope="row">
+                  {row.label}
+                  {row.note === undefined ? null : (
+                    <span className="properties__note">{row.note}</span>
+                  )}
+                </th>
+                <ClickToCopy
+                  as="td"
+                  value={copy ?? ''}
+                  label={row.label}
+                  disabled={copy === null}
+                >
+                  {row.value}
+                </ClickToCopy>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+}

package/src/property/ui/index.ts

@@ -0,0 +1,2 @@
+export type { PropertyRow, PropertyTableProps } from './PropertyTable.tsx';
+export { PropertyTable } from './PropertyTable.tsx';

package/src/raman.ts

@@ -0,0 +1,19 @@
+/**
+ * Displaying Raman spectra: the infrared viewer, read for Raman.
+ *
+ * A door of its own so a page showing Raman spectra imports a Raman viewer by
+ * name. What it opens is the same code as `react-cheminfo/ir` — one shell, one
+ * set of panels — and the same spectrum model, which a host fills with an
+ * `intensity` array where an infrared spectrum carries absorbance and
+ * transmittance.
+ */
+
+export type { LoadedIrSpectrum } from './ir/core/analysisSpectra.ts';
+export type { IrEditorHandle } from './ir/core/irEditorApi.ts';
+export type { IrSpectrum } from './ir/core/irSpectrum.ts';
+export { toIrSpectra } from './ir/core/toIrSpectrum.ts';
+export type {
+  RamanEditorHandle,
+  RamanEditorProps,
+} from './ir/ui/RamanEditor.tsx';
+export { RamanEditor } from './ir/ui/RamanEditor.tsx';

package/src/router/core/history.ts

@@ -8,8 +8,10 @@
  * script can import a module that uses it.
  */
 
+import type { Language } from '../../i18n/core/languages.ts';
 import { EMBED_PARAM, HIDE_PARAM } from '../../share/core/config.ts';
 
+import { stripBasePath } from './basePath.ts';
 import { pageHistory, pageLocation } from './pageAddress.ts';
 import type { QueryEntry } from './query.ts';
 import { formatQueryEntries } from './query.ts';
@@ -26,7 +28,10 @@ export const ROUTE_CHANGE_EVENT = 'cheminfo:routechange';
  *
  * A link written before the site routed by path — `/#/tutorial/3` — is replaced
  * in place, once, by the address the router writes for it, when the router
- * adopts such links.
+ * adopts such links. So is a `?lang=` a sibling site handed the language over
+ * in, on a router given `languages`: the language moves into the path, so one
+ * reader's bookmark and the next one's are the same address. The language of a
+ * prefixed address never changes: `/fr/tutorial?lang=de` stays French.
  * @param router - The site's router.
  * @returns The route of the address on screen, or of `/` where there is no browser.
  */
@@ -34,7 +39,8 @@ export function readRoute<Tab extends string>(
   router: TabRouter<Tab>,
 ): TabRoute<Tab> {
   const address = currentAddress();
-  const adopted = router.legacyAddress(address);
+  const legacy = router.legacyAddress(address);
+  const adopted = router.languageAddress?.(legacy ?? address) ?? legacy;
   if (adopted === null) return router.parse(address);
   const history = pageHistory();
   history?.replaceState(history.state, '', adopted);
@@ -42,6 +48,39 @@ export function readRoute<Tab extends string>(
   return router.parse(adopted);
 }
 
+/**
+ * Read the route the site opens on, the reader's own language applied to a
+ * bare root.
+ *
+ * A bare `/` — no page, no query, no fragment — names no language, so the one
+ * the reader last chose may decide which front page opens, and the address is
+ * rewritten in place to say it. Nothing else is steered: a deep link opens what
+ * it names for everybody, so `/tutorial` handed out in a course is English and
+ * `/fr/tutorial` French, whatever either reader last read.
+ * @param router - The site's router, given `languages`.
+ * @param preferred - The language the reader last chose; `undefined`, or one
+ * the router does not write, steers nothing.
+ * @returns The route to open on.
+ */
+export function openingRoute<Tab extends string>(
+  router: TabRouter<Tab>,
+  preferred: Language | undefined,
+): TabRoute<Tab> {
+  const bare = isBareRoot(router);
+  const route = readRoute(router);
+  const steered =
+    bare &&
+    preferred !== undefined &&
+    preferred !== route.language &&
+    router.languages?.includes(preferred) === true;
+  if (!steered) return route;
+  const address = router.format({ ...route, language: preferred });
+  const history = pageHistory();
+  history?.replaceState(history.state, '', address);
+  globalThis.dispatchEvent?.(new Event(ROUTE_CHANGE_EVENT));
+  return router.parse(address);
+}
+
 /** How {@link writeRoute} records a move. */
 export interface WriteRouteOptions {
   /**
@@ -66,8 +105,10 @@ export interface WriteRouteOptions {
  * The share parameters of the address on screen, and the preference names in
  * `keep`, survive the move, so an embedded page stays embedded after its first
  * click. A parameter the route names itself — even as `null` or `undefined`, to
- * remove it — is the route's. Writing the address already on screen does
- * nothing, so echoing state back into the address cannot loop.
+ * remove it — is the route's. On a router given `languages`, a route naming no
+ * language keeps the one on screen, and changing language counts as changing
+ * tab. Writing the address already on screen does nothing, so echoing state
+ * back into the address cannot loop.
  * @param router - The site's router.
  * @param route - Where to go.
  * @param options - How the move is recorded and which parameters survive it.
@@ -91,7 +132,9 @@ export function writeRoute<Tab extends string>(
   if (shown === address) return address;
 
   const mode = options.history ?? 'auto';
-  const sameTab = router.parse(current).tab === router.parse(address).tab;
+  const from = router.parse(current);
+  const to = router.parse(address);
+  const sameTab = from.tab === to.tab && from.language === to.language;
   if (mode === 'replace' || (mode === 'auto' && sameTab)) {
     history.replaceState(history.state, '', address);
   } else {
@@ -139,9 +182,13 @@ function withKeptParams<Tab extends string>(
   current: string,
   keep: readonly string[],
 ): string {
-  const target = router.format(route);
+  const onScreen = router.parse(current);
+  const language = route.language ?? onScreen.language;
+  const target = router.format(
+    language === undefined ? route : { ...route, language },
+  );
   const named = route.params ?? {};
-  const shown = router.parse(current).params;
+  const shown = onScreen.params;
   const kept: QueryEntry[] = [];
   for (const key of new Set([EMBED_PARAM, HIDE_PARAM, ...keep])) {
     if (Object.hasOwn(named, key)) continue;
@@ -152,3 +199,10 @@ function withKeptParams<Tab extends string>(
   const separator = target.includes('?') ? '&' : '?';
   return `${target}${separator}${formatQueryEntries(kept)}`;
 }
+
+function isBareRoot<Tab extends string>(router: TabRouter<Tab>): boolean {
+  const location = pageLocation();
+  if (location === undefined) return false;
+  if (location.search !== '' || location.hash !== '') return false;
+  return stripBasePath(router.basePath ?? '', location.pathname) === '/';
+}

package/src/router/core/index.ts

@@ -9,6 +9,7 @@ export {
 export type { WriteRouteOptions } from './history.ts';
 export {
   ROUTE_CHANGE_EVENT,
+  openingRoute,
   readRoute,
   subscribeToRoute,
   writeRoute,
@@ -35,12 +36,12 @@ export {
   parseQueryString,
 } from './query.ts';
 export type { SiteAddresses, SiteAddressesOptions } from './siteAddresses.ts';
-export { createSiteAddresses } from './siteAddresses.ts';
+export { anchorHref, createSiteAddresses } from './siteAddresses.ts';
 export type {
   TabDefinition,
   TabRoute,
   TabRouteInput,
   TabRouter,
   TabRouterOptions,
-} from './tabRouter.ts';
+} from './tabRouterTypes.ts';
 export { createTabRouter } from './tabRouter.ts';

package/src/router/core/languageRoute.ts

@@ -0,0 +1,136 @@
+/**
+ * The language half of a translated site's routes: the prefix a page is
+ * written under, and the `?lang=` a sibling site hands the language over in.
+ *
+ * Inside a translated site the language is the path — `/fr/tutorial` — so each
+ * language is an address of its own a crawler indexes and a course hands out.
+ * Between sites it travels as a parameter, because the site being linked to
+ * may not speak it, and a parameter it does not know is ignored where a prefix
+ * it does not have is a 404. So a route reads the parameter only where the
+ * prefix says nothing, and the prefix always wins: `/fr/tutorial?lang=de` is
+ * the French tutorial for everybody.
+ */
+
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
+import { LANGUAGE_PARAM } from '../../language/core/languageParam.ts';
+import {
+  readLanguagePath,
+  withLanguagePath,
+} from '../../language/core/languagePath.ts';
+
+import { splitAddress } from './address.ts';
+import { joinBasePath, stripBasePath } from './basePath.ts';
+import type { QueryEntry, QueryStringOptions } from './query.ts';
+import { formatQueryEntries, parseQueryEntries } from './query.ts';
+
+/** The language a route is read in, and what is left of its address. */
+export interface RouteLanguage {
+  /** The language the page is read in. */
+  language: Language;
+  /** The path from the site's own root, the prefix taken off. */
+  path: string;
+  /** The parameters, without a `lang` that names a language of the site. */
+  params: Record<string, string>;
+}
+
+/**
+ * Read the language of a route off its path and its parameters.
+ * @param path - The path from the site's own root, the mount already off.
+ * @param params - The decoded query parameters.
+ * @param languages - The languages the site is written in.
+ * @returns The language, the path without its prefix, and the parameters.
+ */
+export function readRouteLanguage(
+  path: string,
+  params: Record<string, string>,
+  languages: readonly Language[],
+): RouteLanguage {
+  const read = readLanguagePath(path, languages);
+  const named = siteLanguage(params[LANGUAGE_PARAM], languages);
+  if (named === undefined) return { ...read, params };
+  const kept: Record<string, string> = {};
+  for (const [key, value] of Object.entries(params)) {
+    if (key !== LANGUAGE_PARAM) kept[key] = value;
+  }
+  const language = read.language === DEFAULT_LANGUAGE ? named : read.language;
+  return { language, path: read.path, params: kept };
+}
+
+/**
+ * Write a path from the site's own root under a language's prefix.
+ * @param language - The language asked for, if any.
+ * @param path - The path from the site's own root.
+ * @param languages - The languages the site is written in.
+ * @returns The path under the prefix; a language the site does not speak is
+ * written as the default one, with no prefix.
+ */
+export function writeRouteLanguage(
+  language: Language | undefined,
+  path: string,
+  languages: readonly Language[],
+): string {
+  const written =
+    language !== undefined && languages.includes(language)
+      ? language
+      : DEFAULT_LANGUAGE;
+  return withLanguagePath(written, path);
+}
+
+/** How {@link adoptLanguageParam} reads an address. */
+export interface AdoptLanguageOptions {
+  /** The mount path, normalised. */
+  basePath: string;
+  /** The languages the site is written in. */
+  languages: readonly Language[];
+  /** How the query string is read and written back. */
+  queryOptions: QueryStringOptions;
+}
+
+/**
+ * The address to put in place of one carrying a `?lang=` the site speaks.
+ *
+ * Only the language moves: the page named stays the page written, whether the
+ * router knows it or not, and every other parameter and the fragment are kept.
+ * @param address - A browser address: mount, prefix, page, query and fragment.
+ * @param options - The mount, the languages and how the query is read.
+ * @returns The address with the language in its path, or `null` when the
+ * address names no language of the site in its query.
+ */
+export function adoptLanguageParam(
+  address: string,
+  options: AdoptLanguageOptions,
+): string | null {
+  const { basePath, languages, queryOptions } = options;
+  const { path, search, fragment } = splitAddress(address);
+  const entries = parseQueryEntries(search, queryOptions);
+  let named: Language | undefined;
+  const kept: QueryEntry[] = [];
+  for (const entry of entries) {
+    const language =
+      entry[0] === LANGUAGE_PARAM
+        ? siteLanguage(entry[1], languages)
+        : undefined;
+    if (language === undefined) kept.push(entry);
+    else named ??= language;
+  }
+  if (named === undefined) return null;
+
+  const read = readLanguagePath(stripBasePath(basePath, path), languages);
+  const language = read.language === DEFAULT_LANGUAGE ? named : read.language;
+  const opened = joinBasePath(basePath, withLanguagePath(language, read.path));
+  const query = formatQueryEntries(kept);
+  const withQuery = query === '' ? opened : `${opened}?${query}`;
+  return fragment === '' ? withQuery : `${withQuery}#${fragment}`;
+}
+
+function siteLanguage(
+  value: string | undefined,
+  languages: readonly Language[],
+): Language | undefined {
+  if (value === undefined) return undefined;
+  for (const language of languages) {
+    if (language === value) return language;
+  }
+  return undefined;
+}

package/src/router/core/siteAddresses.ts

@@ -52,6 +52,11 @@ export function createSiteAddresses(
     return environment || ownUrl;
   }
 
+  function storedAssetSrc(url: string): string {
+    if (OWN_ORIGIN.test(url) || url.startsWith('//')) return url;
+    return url.startsWith('/') ? withBase(url) : url;
+  }
+
   return {
     basePath,
     siteName: siteDisplayName(site),
@@ -60,9 +65,31 @@ export function createSiteAddresses(
     pathWithoutBase,
     absoluteUrl,
     configuredSiteUrl,
+    anchorHref,
+    storedAssetSrc,
   };
 }
 
+/**
+ * A link to an anchor on the page being read.
+ *
+ * Every page of ours carries a `<base>`, so a bare `#id` resolves against the
+ * mount rather than against the address open, and clicking it leaves the page
+ * instead of scrolling down it. The link names the page's own address and its
+ * query instead — the browser's, since that is the document a click scrolls.
+ * @param id - The `id` of the element to jump to.
+ * @returns The address of that anchor on the page on screen, or `#id` where
+ * there is no page.
+ */
+export function anchorHref(id: string): string {
+  const location = globalThis.location as Location | undefined;
+  if (location === undefined) return `#${id}`;
+  return `${location.pathname}${location.search}#${id}`;
+}
+
+// A scheme names its own origin: `https:`, `data:`, `blob:`.
+const OWN_ORIGIN = /^[a-z][\w+.-]*:/i;
+
 /** How {@link createSiteAddresses} reads the mount. */
 export interface SiteAddressesOptions {
   /**
@@ -95,4 +122,15 @@ export interface SiteAddresses {
    * it says something, the site's own address otherwise.
    */
   configuredSiteUrl: () => string;
+  /** A link to an anchor on the page on screen; see {@link anchorHref}. */
+  anchorHref: (id: string) => string;
+  /**
+   * The address of something a backend stored and the page shows — an
+   * uploaded picture — as this deployment serves it. A backend names those
+   * from its own root, `/uploads/<name>`, because a proxy mounting the site
+   * under a path strips the path before the request reaches it; so a
+   * root-relative address is put under the mount, and one carrying its own
+   * scheme or origin, or relative already, is handed back untouched.
+   */
+  storedAssetSrc: (url: string) => string;
 }