myst-to-react 0.1.14

package/src/components/ClickPopover.tsx

@@ -0,0 +1,56 @@
+import type { ElementType } from 'react';
+import React, { useState } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { usePopper } from 'react-popper';
+import classNames from 'classnames';
+
+export function ClickPopover({
+  children,
+  card,
+  as = 'cite',
+}: {
+  children: React.ReactNode;
+  card: React.ReactNode | ((args: { open: boolean; close: () => void }) => React.ReactNode);
+  as?: ElementType;
+}) {
+  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement);
+  return (
+    <Popover as="span">
+      {({ open, close }) => (
+        <>
+          <Popover.Button
+            ref={setReferenceElement}
+            as={as}
+            className={classNames(
+              { 'border-dotted': !open },
+              'cursor-zoom-in border-b-2 border-b-blue-600 hover:text-blue-600 hover:border-solid',
+              { 'text-blue-600 border-solid': open },
+            )}
+          >
+            {children}
+          </Popover.Button>
+          <Popover.Panel
+            className="exclude-from-outline absolute z-30 sm:max-w-[500px]"
+            ref={setPopperElement}
+            style={{ ...styles.popper }}
+            {...attributes.popper}
+          >
+            <Transition
+              className="my-2 p-4 shadow-xl bg-white dark:bg-zinc-900 text-sm dark:text-white rounded border-2 border-slate-200 dark:border-zinc-500 break-words"
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              {open && (typeof card === 'function' ? card({ open, close }) : card)}
+            </Transition>
+          </Popover.Panel>
+        </>
+      )}
+    </Popover>
+  );
+}

package/src/components/CopyIcon.tsx

@@ -0,0 +1,40 @@
+import DuplicateIcon from '@heroicons/react/outline/DuplicateIcon';
+import CheckIcon from '@heroicons/react/outline/CheckIcon';
+import { useState } from 'react';
+import classNames from 'classnames';
+
+export function CopyIcon({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const onClick = () => {
+    if (copied) return;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 3000);
+    });
+  };
+  return (
+    <button
+      title={copied ? 'Copied!!' : 'Copy to Clipboard'}
+      suppressHydrationWarning
+      className={classNames(
+        'inline-flex items-center opacity-60 hover:opacity-100 active:opacity-40 cursor-pointer ml-2',
+        'transition-color duration-200 ease-in-out',
+        {
+          // This is hidden if on the server or no clipboard access
+          'sr-only hidden': typeof document === 'undefined' || !navigator.clipboard,
+          'text-primary-500 border-primary-500': !copied,
+          'text-success border-success ': copied,
+        },
+      )}
+      onClick={onClick}
+      aria-pressed={copied ? 'true' : 'false'}
+      aria-label="Copy code to clipboard"
+    >
+      {copied ? (
+        <CheckIcon className="w-[24px] h-[24px] text-success" />
+      ) : (
+        <DuplicateIcon className="w-[24px] h-[24px]" />
+      )}
+    </button>
+  );
+}

package/src/components/HoverPopover.tsx

@@ -0,0 +1,60 @@
+import React, { useRef, useState } from 'react';
+import { Transition } from '@headlessui/react';
+import { usePopper } from 'react-popper';
+
+export function HoverPopover({
+  children,
+  card,
+}: {
+  children: React.ReactNode;
+  card: React.ReactNode | ((args: { open: boolean; close?: () => void }) => React.ReactNode);
+}) {
+  const buttonRef = useRef<HTMLSpanElement | null>(null);
+  const timeoutDuration = 300;
+  const [open, setOpen] = useState(false);
+  let openTimeout: NodeJS.Timeout | undefined;
+  let closeTimeout: NodeJS.Timeout | undefined;
+
+  const onMouseEnter = () => {
+    clearTimeout(closeTimeout);
+    if (open) return;
+    setOpen(true);
+  };
+
+  const onMouseLeave = () => {
+    clearTimeout(openTimeout);
+    if (!open) return;
+    closeTimeout = setTimeout(() => setOpen(false), timeoutDuration);
+  };
+  const [popperElement, setPopperElement] = useState<HTMLSpanElement | null>(null);
+  const { styles, attributes } = usePopper(buttonRef.current, popperElement, {
+    placement: 'bottom-start',
+  });
+  return (
+    <span onMouseLeave={onMouseLeave}>
+      <span ref={buttonRef} onMouseMove={onMouseEnter} onMouseEnter={onMouseEnter}>
+        {children}
+      </span>
+      <span
+        className="exclude-from-outline absolute z-30 sm:max-w-[500px]"
+        ref={setPopperElement}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
+      >
+        <Transition
+          className="my-2 p-4 shadow-xl bg-white dark:bg-zinc-900 text-sm dark:text-white rounded border border-slate-100 dark:border-zinc-500 break-words"
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+          onMouseEnter={onMouseEnter}
+          show={open}
+        >
+          {typeof card === 'function' ? card({ open, close: () => setOpen(false) }) : card}
+        </Transition>
+      </span>
+    </span>
+  );
+}

package/src/components/LinkCard.tsx

@@ -0,0 +1,42 @@
+import { Link as RemixLink } from '@remix-run/react';
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import classNames from 'classnames';
+
+export function LinkCard({
+  url,
+  title,
+  internal = false,
+  loading = false,
+  description,
+  thumbnail,
+}: {
+  url: string;
+  internal?: boolean;
+  loading?: boolean;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  thumbnail?: string;
+}) {
+  return (
+    <div className={classNames('w-[300px]', { 'animate-pulse': loading })}>
+      {internal && (
+        <RemixLink to={url} className="block" prefetch="intent">
+          {title}
+        </RemixLink>
+      )}
+      {!internal && (
+        <a href={url} className="block" target="_blank" rel="noreferrer">
+          <ExternalLinkIcon className="w-4 h-4 float-right" />
+          {title}
+        </a>
+      )}
+      {!loading && thumbnail && (
+        <img src={thumbnail} className="w-full max-h-[200px] object-cover object-top" />
+      )}
+      {loading && (
+        <div className="animate-pulse bg-slate-100 dark:bg-slate-800 w-full h-[150px] mt-4" />
+      )}
+      {!loading && description && <div className="mt-2">{description}</div>}
+    </div>
+  );
+}

package/src/convertToReact.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+import { createElement as e } from 'react';
+import type { NodeRenderer } from './types';
+import type { GenericNode } from 'mystjs';
+
+export function toReact(
+  fragment: GenericNode[],
+  replacements: Record<string, NodeRenderer>,
+): React.ReactNode {
+  if (fragment.length === 0) return undefined;
+  return fragment.map((node) => {
+    if (node.type === 'text') return node.value;
+    const custom = replacements[node.type] as NodeRenderer | undefined;
+    if (node.children) {
+      const children = toReact(node.children, replacements);
+      if (custom) {
+        return custom(node, children);
+      }
+      return e('div', { key: node.key }, children);
+    }
+    if (custom) {
+      return custom(node, node.value);
+    }
+    return e('span', { children: node.value, key: node.key });
+  });
+}
+
+export function mystToReact(
+  content: GenericNode,
+  replacements: Record<string, NodeRenderer>,
+): React.ReactNode {
+  return toReact(content.children ?? [], replacements);
+}

package/src/crossReference.tsx

@@ -0,0 +1,139 @@
+import { selectAll } from 'unist-util-select';
+import { EXIT, SKIP, visit } from 'unist-util-visit';
+import type { Root } from 'mdast';
+import type { CrossReference } from 'myst-spec';
+import LinkIcon from '@heroicons/react/outline/LinkIcon';
+import ExternalLinkIcon from '@heroicons/react/outline/ExternalLinkIcon';
+import { useReferences, useXRefState, XRefProvider } from '@curvenote/ui-providers';
+import { useParse } from '.';
+import { InlineError } from './inlineError';
+import type { NodeRenderer } from './types';
+import { ClickPopover } from './components/ClickPopover';
+import useSWR from 'swr';
+import { Link } from '@remix-run/react';
+
+const MAX_NODES = 3; // Max nodes to show after a header
+
+function selectMdastNodes(mdast: Root, identifier: string) {
+  const identifiers = selectAll(`[identifier=${identifier}],[key=${identifier}]`, mdast);
+  const container = identifiers.filter(({ type }) => type === 'container' || type === 'math')[0];
+  const nodes = container ? [container] : [];
+  if (nodes.length === 0 && identifiers.length > 0 && mdast) {
+    let begin = false;
+    visit(mdast, (node) => {
+      if ((begin && node.type === 'heading') || nodes.length >= MAX_NODES) {
+        return EXIT;
+      }
+      if ((node as any).identifier === identifier && node.type === 'heading') begin = true;
+      if (begin) {
+        nodes.push(node);
+        return SKIP; // Don't traverse the children
+      }
+    });
+  }
+  if (nodes.length === 0 && identifiers.length > 0) {
+    // If we haven't found anything, push the first identifier that isn't a cite or crossReference
+    const resolved = identifiers.filter(
+      (node) => node.type !== 'crossReference' && node.type !== 'cite',
+    )[0];
+    nodes.push(resolved ?? identifiers[0]);
+  }
+  return nodes;
+}
+
+const fetcher = (...args: Parameters<typeof fetch>) =>
+  fetch(...args).then((res) => {
+    if (res.status === 200) return res.json();
+    throw new Error(`Content returned with status ${res.status}.`);
+  });
+
+export function ReferencedContent({
+  identifier,
+  close,
+}: {
+  identifier: string;
+  close: () => void;
+}) {
+  const { remote, url } = useXRefState();
+  const external = url?.startsWith('http') ?? false;
+  const lookupUrl = external ? `/api/lookup?url=${url}.json` : `${url}.json`;
+  const { data, error } = useSWR(remote ? lookupUrl : null, fetcher);
+  const references = useReferences();
+  const mdast = data?.mdast ?? references?.article;
+  const nodes = selectMdastNodes(mdast, identifier);
+  const htmlId = (nodes[0] as any)?.html_id || (nodes[0] as any)?.identifier;
+  const link = `${url}${htmlId ? `#${htmlId}` : ''}`;
+  const onClose = () => {
+    // Need to close it first because the ID is on the page twice ...
+    close();
+    setTimeout(() => {
+      const el = document.getElementById(htmlId);
+      el?.scrollIntoView({ behavior: 'smooth' });
+    }, 10);
+  };
+  const children = useParse({ type: 'block', children: nodes });
+  if (remote && !data) {
+    return <>Loading...</>;
+  }
+  if (remote && error) {
+    return <>Error loading remote page.</>;
+  }
+  if (!nodes || nodes.length === 0) {
+    return (
+      <>
+        <InlineError value={identifier || 'No Label'} message="Cross Reference Not Found" />
+      </>
+    );
+  }
+  return (
+    <div className="exclude-from-outline">
+      {remote && external && (
+        <a href={link} className="absolute top-4 right-1" target="_blank">
+          <ExternalLinkIcon className="w-4 h-4" />
+        </a>
+      )}
+      {remote && !external && (
+        <Link to={link} className="absolute top-4 right-1" prefetch="intent">
+          <ExternalLinkIcon className="w-4 h-4" />
+        </Link>
+      )}
+      {!remote && (
+        <button onClick={onClose} className="absolute top-4 right-1">
+          <LinkIcon className="w-4 h-4" />
+        </button>
+      )}
+      <div className="popout">{children}</div>
+    </div>
+  );
+}
+
+export const CrossReferenceNode: NodeRenderer<CrossReference> = (node, children) => {
+  if (!children) {
+    return (
+      <InlineError
+        key={node.key}
+        value={node.label || node.identifier || 'No Label'}
+        message="Cross Reference Not Found"
+      />
+    );
+  }
+  return (
+    <ClickPopover
+      key={node.key}
+      card={({ close }) => (
+        <XRefProvider remote={(node as any).remote} url={(node as any).url}>
+          <ReferencedContent identifier={node.identifier as string} close={close} />
+        </XRefProvider>
+      )}
+      as="span"
+    >
+      {children}
+    </ClickPopover>
+  );
+};
+
+const CROSS_REFERENCE_RENDERERS = {
+  crossReference: CrossReferenceNode,
+};
+
+export default CROSS_REFERENCE_RENDERERS;

package/src/extensions/chemicalFormula.tsx

@@ -0,0 +1,42 @@
+import type { NodeRenderer } from '../types';
+
+/**
+ * Separate numbers and letters so that numbers can be <sub>2</sub>
+ * @param formula a string H2O
+ * @returns ['H', '2', '0']
+ */
+function parseFormula(formula?: string) {
+  return [...(formula ?? '')].reduce((acc, letter) => {
+    const last = acc.pop();
+    const isNumber = letter.match(/[0-9]/);
+    const lastIsNumber = last?.match(/[0-9]/);
+    if (isNumber) {
+      if (lastIsNumber) {
+        return [...acc, `${last ?? ''}${letter}`];
+      }
+      return [...acc, last, letter].filter((v) => !!v) as string[];
+    }
+    if (lastIsNumber) {
+      return [...acc, last, letter].filter((v) => !!v) as string[];
+    }
+    return [...acc, `${last ?? ''}${letter}`];
+  }, [] as string[]);
+}
+
+export const ChemicalFormula: NodeRenderer = (node) => {
+  const parts = parseFormula(node.value);
+  return (
+    <code key={node.key} className="text-inherit">
+      {parts.map((letter, index) => {
+        if (letter.match(/[0-9]/)) return <sub key={index}>{letter}</sub>;
+        return <span key={index}>{letter}</span>;
+      })}
+    </code>
+  );
+};
+
+const CHEM_RENDERERS = {
+  chemicalFormula: ChemicalFormula,
+};
+
+export default CHEM_RENDERERS;

package/src/extensions/index.tsx

@@ -0,0 +1,10 @@
+import type { NodeRenderer } from '../types';
+import CHEM_RENDERERS from './chemicalFormula';
+import SI_RENDERERS from './siunits';
+
+const EXT_RENDERERS: Record<string, NodeRenderer> = {
+  ...CHEM_RENDERERS,
+  ...SI_RENDERERS,
+};
+
+export default EXT_RENDERERS;

package/src/extensions/siunits.tsx

@@ -0,0 +1,15 @@
+import type { NodeRenderer } from '../types';
+
+export const SIUnits: NodeRenderer = (node) => {
+  return (
+    <code key={node.key} className="text-inherit" title={`${node.num} ${node.units}`}>
+      {node.value}
+    </code>
+  );
+};
+
+const SI_RENDERERS = {
+  si: SIUnits,
+};
+
+export default SI_RENDERERS;

package/src/footnotes.tsx

@@ -0,0 +1,30 @@
+import type { GenericParent } from 'mystjs';
+import { useReferences } from '@curvenote/ui-providers';
+import type { NodeRenderer } from '.';
+import { useParse } from '.';
+import { ClickPopover } from './components/ClickPopover';
+
+export function FootnoteDefinition({ identifier }: { identifier: string }) {
+  const references = useReferences();
+  const node = references?.footnotes?.[identifier];
+  const children = useParse(node as GenericParent);
+  return <>{children}</>;
+}
+
+export const FootnoteReference: NodeRenderer = (node) => {
+  return (
+    <ClickPopover
+      key={node.key}
+      card={<FootnoteDefinition identifier={node.identifier as string} />}
+      as="span"
+    >
+      <sup>[{node.identifier}]</sup>
+    </ClickPopover>
+  );
+};
+
+const FOOTNOTE_RENDERERS = {
+  footnoteReference: FootnoteReference,
+};
+
+export default FOOTNOTE_RENDERERS;

package/src/heading.tsx

@@ -0,0 +1,68 @@
+import { Heading } from 'myst-spec';
+import type { NodeRenderer } from './types';
+import { createElement as e } from 'react';
+import classNames from 'classnames';
+import { useXRefState } from '@curvenote/ui-providers';
+
+function getHelpHashText(kind: string) {
+  return `Link to this ${kind}`;
+}
+
+export function HashLink({
+  id,
+  kind,
+  align = 'left',
+}: {
+  id: string;
+  kind: string;
+  align?: 'left' | 'right';
+}) {
+  const { inCrossRef } = useXRefState();
+  // If we are in a cross-reference popout, hide the hash links
+  if (inCrossRef) return null;
+  const helpText = getHelpHashText(kind);
+  return (
+    <a
+      className={classNames(
+        'select-none absolute top-0 font-normal no-underline transition-opacity opacity-0 group-hover:opacity-70',
+        {
+          'left-0 -translate-x-[100%] pr-3': align === 'left',
+          'right-0 translate-x-[100%] pl-3': align === 'right',
+        },
+      )}
+      href={`#${id}`}
+      title={helpText}
+      aria-label={helpText}
+    >
+      #
+    </a>
+  );
+}
+
+const Heading: NodeRenderer<Heading> = (node, children) => {
+  const { enumerator, depth, key, identifier, html_id } = node;
+  const id = html_id || identifier || key;
+  const textContent = (
+    <>
+      <HashLink id={id} align="left" kind="Section" />
+      {enumerator && <span className="select-none mr-3">{enumerator}</span>}
+      <span className="heading-text">{children}</span>
+    </>
+  );
+  // The `heading-text` class is picked up in the Outline to select without the enumerator and "#" link
+  return e(
+    `h${depth}`,
+    {
+      key: node.key,
+      id,
+      className: 'relative group',
+    },
+    textContent,
+  );
+};
+
+const HEADING_RENDERERS = {
+  heading: Heading,
+};
+
+export default HEADING_RENDERERS;

package/src/iframe.tsx

@@ -0,0 +1,42 @@
+import type { NodeRenderer } from './types';
+
+export const IFrame: NodeRenderer = (node) => {
+  return (
+    <figure
+      key={node.key}
+      id={node.label || undefined}
+      style={{ textAlign: node.align || 'center' }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          paddingBottom: '60%',
+          width: `min(max(${node.width || 70}%, 500px), 100%)`,
+        }}
+      >
+        <iframe
+          width="100%"
+          height="100%"
+          src={node.src}
+          allowFullScreen
+          allow="autoplay"
+          style={{
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            border: 'none',
+          }}
+        ></iframe>
+      </div>
+    </figure>
+  );
+};
+
+const IFRAME_RENDERERS = {
+  iframe: IFrame,
+};
+
+export default IFRAME_RENDERERS;

package/src/image.tsx

@@ -0,0 +1,72 @@
+import type { Alignment } from '@curvenote/blocks';
+import type { Image as ImageNode } from 'myst-spec';
+import type { NodeRenderer } from './types';
+
+function alignToMargin(align: string) {
+  switch (align) {
+    case 'left':
+      return { marginRight: 'auto' };
+    case 'right':
+      return { marginLeft: 'auto' };
+    case 'center':
+      return { margin: '0 auto' };
+    default:
+      return {};
+  }
+}
+
+function Picture({
+  src,
+  srcOptimized,
+  urlSource,
+  align = 'center',
+  alt,
+  width,
+}: {
+  src: string;
+  srcOptimized?: string;
+  urlSource?: string;
+  alt?: string;
+  width?: string;
+  align?: Alignment;
+}) {
+  const image = (
+    <img
+      style={{
+        width: width || undefined,
+        ...alignToMargin(align),
+      }}
+      src={src}
+      alt={alt}
+      data-canonical-url={urlSource}
+    />
+  );
+  if (!srcOptimized) return image;
+  return (
+    <picture>
+      <source srcSet={srcOptimized} type="image/webp" />
+      {image}
+    </picture>
+  );
+}
+
+export const Image: NodeRenderer<ImageNode> = (node) => {
+  return (
+    <Picture
+      key={node.key}
+      src={node.url}
+      srcOptimized={(node as any).urlOptimized}
+      alt={node.alt || node.title}
+      width={node.width || undefined}
+      align={node.align}
+      // Note that sourceUrl is for backwards compatibility
+      urlSource={(node as any).urlSource || (node as any).sourceUrl}
+    />
+  );
+};
+
+const IMAGE_RENDERERS = {
+  image: Image,
+};
+
+export default IMAGE_RENDERERS;