myst-to-react 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myst-to-react",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
   "files": [
@@ -21,9 +21,11 @@
     "@popperjs/core": "^2.11.5",
     "@remix-run/react": "^1.6.3",
     "ansi-to-react": "^6.1.6",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "mermaid": "^9.1.6",
     "myst-spec": "^0.0.4",
+    "myst-to-docx": "*",
     "myst-to-tex": "*",
     "myst-transforms": "*",
     "mystjs": "^0.0.13",

package/src/admonitions.tsx

@@ -120,7 +120,7 @@ function Admonition({
   return (
     <aside
       className={classNames(
-        'admonition rounded-md my-4 border-l-4 shadow-md dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
+        'admonition rounded-md my-4 border-l-4 shadow-md dark:shadow-2xl dark:shadow-neutral-900',
         {
           'border-blue-500': color === 'blue',
           'border-green-600': color === 'green',

package/src/card.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import type { NodeRenderer } from './types';
+import classNames from 'classnames';
+import { Link } from '@remix-run/react';
+// import { AdmonitionKind } from 'mystjs';
+
+type CardSpec = {
+  type: 'card';
+  url?: string;
+};
+type CardTitleSpec = {
+  type: 'cardTitle';
+};
+type HeaderSpec = {
+  type: 'header';
+};
+type FooterSpec = {
+  type: 'footer';
+};
+
+export const Header: NodeRenderer<HeaderSpec> = (node, children) => {
+  return (
+    <header
+      key={node.key}
+      className="m-0 py-1 pl-3 bg-gray-50 dark:bg-slate-900 border-b border-gray-100 dark:border-gray-800"
+    >
+      {children}
+    </header>
+  );
+};
+
+export const Footer: NodeRenderer<FooterSpec> = (node, children) => {
+  return (
+    <footer
+      key={node.key}
+      className="m-0 py-1 pl-3 bg-gray-50 dark:bg-slate-900 border-t border-gray-100 dark:border-gray-800"
+    >
+      {children}
+    </footer>
+  );
+};
+
+export const CardTitle: NodeRenderer<CardTitleSpec> = (node, children) => {
+  return (
+    <div key={node.key} className="pt-3 font-bold group-hover:underline">
+      {children}
+    </div>
+  );
+};
+
+type Parts = {
+  header?: React.ReactNode;
+  body?: React.ReactNode;
+  footer?: React.ReactNode;
+};
+
+function getParts(children: React.ReactNode): Parts {
+  const parts: Parts = {};
+  if (!Array.isArray(children)) return parts;
+  const next = [...children];
+  if (next[0]?.type === 'header') {
+    parts.header = next.splice(0, 1);
+  }
+  if (next[next.length - 1]?.type === 'footer') {
+    parts.footer = next.splice(-1, 1);
+  }
+  parts.body = next;
+  return parts;
+}
+
+function ExternalOrInternalLink({
+  to,
+  className,
+  prefetch = 'intent',
+  children,
+}: {
+  to: string;
+  className?: string;
+  prefetch?: 'intent' | 'render' | 'none';
+  children: React.ReactNode;
+}) {
+  if (to.startsWith('http')) {
+    return (
+      <a href={to} className={className} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link to={to} className={className} prefetch={prefetch}>
+      {children}
+    </Link>
+  );
+}
+
+function Card({ children, url }: { children: React.ReactNode; url?: string }) {
+  const parts = getParts(children);
+  const link = !!url;
+  const sharedStyle =
+    'rounded-md shadow dark:shadow-neutral-800 overflow-hidden border border-gray-100 dark:border-gray-800 flex flex-col';
+  if (link) {
+    return (
+      <ExternalOrInternalLink
+        to={url}
+        className={classNames(
+          sharedStyle,
+          'block font-normal no-underline cursor-pointer group',
+          'hover:border-blue-500 dark:hover:border-blue-400',
+        )}
+      >
+        {parts.header}
+        <div className="py-2 px-4 flex-grow">{parts.body}</div>
+        {parts.footer}
+      </ExternalOrInternalLink>
+    );
+  }
+  return (
+    <div className={sharedStyle}>
+      {parts.header}
+      <div className="py-2 px-4 flex-grow">{parts.body}</div>
+      {parts.footer}
+    </div>
+  );
+}
+
+export const CardRenderer: NodeRenderer<CardSpec> = (node, children) => {
+  return (
+    <Card key={node.key} url={node.url}>
+      {children}
+    </Card>
+  );
+};
+
+const CARD_RENDERERS = {
+  card: CardRenderer,
+  cardTitle: CardTitle,
+  header: Header,
+  footer: Footer,
+};
+
+export default CARD_RENDERERS;

package/src/dropdown.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { NodeRenderer } from './types';
+import { ChevronRightIcon } from '@heroicons/react/solid';
+import classNames from 'classnames';
+
+type DropdownSpec = {
+  type: 'details';
+  open?: boolean;
+};
+type SummarySpec = {
+  type: 'summary';
+};
+
+const iconClass = 'h-8 w-8 inline-block pl-2 mr-2 -translate-y-[1px]';
+
+export const SummaryTitle: NodeRenderer<SummarySpec> = (node, children) => {
+  return children;
+};
+
+function Details({
+  title,
+  children,
+  open,
+}: {
+  title: React.ReactNode;
+  children: React.ReactNode[];
+  open?: boolean;
+}) {
+  return (
+    <details
+      className={classNames(
+        'rounded-md my-4 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
+      )}
+      open={open}
+    >
+      <summary
+        className={classNames(
+          'm-0 text-lg font-medium py-1 min-h-[2em] pl-3',
+          'cursor-pointer hover:shadow-[inset_0_0_0px_20px_#00000003] dark:hover:shadow-[inset_0_0_0px_20px_#FFFFFF03]',
+          'bg-gray-100 dark:bg-slate-900',
+        )}
+      >
+        <span className="text-neutral-900 dark:text-white">
+          <span className="block float-right font-thin text-sm text-neutral-700 dark:text-neutral-200">
+            <ChevronRightIcon className={classNames(iconClass, 'transition-transform')} />
+          </span>
+          {title}
+        </span>
+      </summary>
+      <div className="px-4 py-1 bg-gray-50 dark:bg-stone-800">{children}</div>
+    </details>
+  );
+}
+
+export const DetailsRenderer: NodeRenderer<DropdownSpec> = (node, children) => {
+  const [title, ...rest] = children as any[];
+  return (
+    <Details key={node.key} title={title} open={node.open}>
+      {rest}
+    </Details>
+  );
+};
+
+const DROPDOWN_RENDERERS = {
+  details: DetailsRenderer,
+  summary: SummaryTitle,
+};
+
+export default DROPDOWN_RENDERERS;

package/src/footnotes.tsx

@@ -18,7 +18,7 @@ export const FootnoteReference: NodeRenderer = (node) => {
       card={<FootnoteDefinition identifier={node.identifier as string} />}
       as="span"
     >
-      <sup>[{node.identifier}]</sup>
+      <sup>[{node.number ?? node.identifier}]</sup>
     </ClickPopover>
   );
 };

package/src/grid.tsx

@@ -0,0 +1,127 @@
+import classNames from 'classnames';
+import React from 'react';
+import type { NodeRenderer } from './types';
+
+type GridSpec = {
+  type: 'grid';
+  columns: number[];
+};
+
+const gridClassNames = {
+  main: [
+    'grid-cols-1',
+    'grid-cols-2',
+    'grid-cols-3',
+    'grid-cols-4',
+    'grid-cols-5',
+    'grid-cols-6',
+    'grid-cols-7',
+    'grid-cols-8',
+    'grid-cols-9',
+    'grid-cols-10',
+    'grid-cols-11',
+    'grid-cols-12',
+  ],
+  sm: [
+    'sm:grid-cols-1',
+    'sm:grid-cols-2',
+    'sm:grid-cols-3',
+    'sm:grid-cols-4',
+    'sm:grid-cols-5',
+    'sm:grid-cols-6',
+    'sm:grid-cols-7',
+    'sm:grid-cols-8',
+    'sm:grid-cols-9',
+    'sm:grid-cols-10',
+    'sm:grid-cols-11',
+    'sm:grid-cols-12',
+  ],
+  md: [
+    'md:grid-cols-1',
+    'md:grid-cols-2',
+    'md:grid-cols-3',
+    'md:grid-cols-4',
+    'md:grid-cols-5',
+    'md:grid-cols-6',
+    'md:grid-cols-7',
+    'md:grid-cols-8',
+    'md:grid-cols-9',
+    'md:grid-cols-10',
+    'md:grid-cols-11',
+    'md:grid-cols-12',
+  ],
+  lg: [
+    'lg:grid-cols-1',
+    'lg:grid-cols-2',
+    'lg:grid-cols-3',
+    'lg:grid-cols-4',
+    'lg:grid-cols-5',
+    'lg:grid-cols-6',
+    'lg:grid-cols-7',
+    'lg:grid-cols-8',
+    'lg:grid-cols-9',
+    'lg:grid-cols-10',
+    'lg:grid-cols-11',
+    'lg:grid-cols-12',
+  ],
+  xl: [
+    'xl:grid-cols-1',
+    'xl:grid-cols-2',
+    'xl:grid-cols-3',
+    'xl:grid-cols-4',
+    'xl:grid-cols-5',
+    'xl:grid-cols-6',
+    'xl:grid-cols-7',
+    'xl:grid-cols-8',
+    'xl:grid-cols-9',
+    'xl:grid-cols-10',
+    'xl:grid-cols-11',
+    'xl:grid-cols-12',
+  ],
+};
+
+const DEFAULT_NUM_COLUMNS = 3;
+
+function getColumnClassName(classes: string[], number?: string | number): string {
+  const num = Number(number);
+  if (!number || Number.isNaN(num)) {
+    return getColumnClassName(classes, DEFAULT_NUM_COLUMNS);
+  }
+  return classes[num - 1] ?? classes[DEFAULT_NUM_COLUMNS];
+}
+
+function gridColumnClasses(columns?: number[]): string {
+  if (!columns || columns.length <= 1) {
+    return getColumnClassName(gridClassNames.main, columns?.[0]);
+  }
+  if (columns.length !== 4) {
+    return getColumnClassName(gridClassNames.main, columns[0]);
+  }
+  return [
+    // getColumnClassName(gridClassNames.main, columns[0]),
+    getColumnClassName(gridClassNames.sm, columns[0]),
+    getColumnClassName(gridClassNames.md, columns[1]),
+    getColumnClassName(gridClassNames.lg, columns[2]),
+    getColumnClassName(gridClassNames.xl, columns[3]),
+  ].join(' ');
+}
+
+function Grid({ columns, children }: { columns?: number[]; children: React.ReactNode }) {
+  const gridClasses = gridColumnClasses(columns);
+  const gutterClasses = 'gap-4';
+  return <div className={classNames('grid', gridClasses, gutterClasses)}>{children}</div>;
+}
+
+export const GridRenderer: NodeRenderer<GridSpec> = (node, children) => {
+  return (
+    <Grid key={node.key} columns={node.columns}>
+      {children}
+    </Grid>
+  );
+};
+
+const GRID_RENDERERS = {
+  grid: GridRenderer,
+};
+
+export default GRID_RENDERERS;

package/src/image.tsx

@@ -1,7 +1,28 @@
 import type { Alignment } from '@curvenote/blocks';
-import type { Image as ImageNode } from 'myst-spec';
+import type { Image as ImageNodeSpec } from 'myst-spec';
 import type { NodeRenderer } from './types';
 
+type ImageNode = ImageNodeSpec & { height?: string };
+
+function getStyleValue(width?: number | string): string | number | undefined {
+  if (typeof width === 'number' && Number.isNaN(width)) {
+    // If it is nan, return undefined.
+    return undefined;
+  }
+  if (typeof width === 'string') {
+    if (width.endsWith('%')) {
+      return width;
+    } else if (width.endsWith('px')) {
+      return Number(width.replace('px', ''));
+    } else if (!Number.isNaN(Number(width))) {
+      return Number(width);
+    }
+    console.log(`Unknown width ${width} in getImageWidth`);
+    return undefined;
+  }
+  return width;
+}
+
 function alignToMargin(align: string) {
   switch (align) {
     case 'left':
@@ -22,18 +43,21 @@ function Picture({
   align = 'center',
   alt,
   width,
+  height,
 }: {
   src: string;
   srcOptimized?: string;
   urlSource?: string;
   alt?: string;
   width?: string;
+  height?: string;
   align?: Alignment;
 }) {
   const image = (
     <img
       style={{
-        width: width || undefined,
+        width: getStyleValue(width),
+        height: getStyleValue(height),
         ...alignToMargin(align),
       }}
       src={src}
@@ -58,6 +82,7 @@ export const Image: NodeRenderer<ImageNode> = (node) => {
       srcOptimized={(node as any).urlOptimized}
       alt={node.alt || node.title}
       width={node.width || undefined}
+      height={node.height || undefined}
       align={node.align}
       // Note that sourceUrl is for backwards compatibility
       urlSource={(node as any).urlSource || (node as any).sourceUrl}

package/src/index.tsx

@@ -3,6 +3,9 @@ import type { GenericParent } from 'mystjs';
 import { mystToReact } from './convertToReact';
 import BASIC_RENDERERS from './basic';
 import ADMONITION_RENDERERS from './admonitions';
+import DROPDOWN_RENDERERS from './dropdown';
+import CARD_RENDERERS from './card';
+import GRID_RENDERERS from './grid';
 import CITE_RENDERERS from './cite';
 import FOOTNOTE_RENDERERS from './footnotes';
 import CODE_RENDERERS from './code';
@@ -41,6 +44,9 @@ export const DEFAULT_RENDERERS: Record<string, NodeRenderer> = {
   ...CROSS_REFERENCE_RENDERERS,
   ...MYST_RENDERERS,
   ...MERMAID_RENDERERS,
+  ...DROPDOWN_RENDERERS,
+  ...CARD_RENDERERS,
+  ...GRID_RENDERERS,
   ...EXT_RENDERERS,
 };
 

package/src/myst.tsx

@@ -4,6 +4,7 @@ import type { LatexResult } from 'myst-to-tex'; // Only import the type!!
 import type { VFileMessage } from 'vfile-message';
 import yaml from 'js-yaml';
 import type { References } from '@curvenote/site-common';
+import type { DocxResult } from 'myst-to-docx';
 import type { PageFrontmatter } from 'myst-frontmatter';
 import type { NodeRenderer } from './types';
 import React, { useEffect, useRef, useState } from 'react';
@@ -15,9 +16,33 @@ import { CopyIcon } from './components/CopyIcon';
 import { CodeBlock } from './code';
 import { ReferencesProvider } from '@curvenote/ui-providers';
 
+function downloadBlob(filename: string, blob: Blob) {
+  const a = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  a.href = url;
+  a.download = filename;
+  a.click();
+}
+
+async function saveDocxFile(filename: string, mdast: any, footnotes?: any) {
+  const { unified } = await import('unified');
+  const { mystToDocx, fetchImagesAsBuffers } = await import('myst-to-docx');
+  // Clone the tree
+  const tree = JSON.parse(JSON.stringify(mdast));
+  // Put the footnotes back in
+  if (footnotes) tree.children.push(...Object.values(footnotes));
+  const opts = await fetchImagesAsBuffers(tree);
+  const docxBlob = await (unified()
+    .use(mystToDocx, opts)
+    .stringify(tree as any).result as DocxResult);
+  downloadBlob(filename, docxBlob as Blob);
+}
+
 async function parse(text: string, defaultFrontmatter?: PageFrontmatter) {
   // Ensure that any imports from myst are async and scoped to this function
-  const { MyST, unified, visit } = await import('mystjs');
+  const { visit } = await import('unist-util-visit');
+  const { unified } = await import('unified');
+  const { MyST } = await import('mystjs');
   const {
     mathPlugin,
     footnotesPlugin,
@@ -110,7 +135,7 @@ export function MySTRenderer({ value, numbering }: { value: string; numbering: a
   }, [text]);
 
   return (
-    <figure className="relative shadow-lg rounded overflow-hidden">
+    <figure className="relative shadow-lg rounded">
       <div className="absolute right-0 p-1">
         <CopyIcon text={text} />
       </div>
@@ -144,6 +169,17 @@ export function MySTRenderer({ value, numbering }: { value: string; numbering: a
               {show}
             </button>
           ))}
+          <button
+            className={classnames(
+              'px-2',
+              'bg-white hover:bg-slate-200 dark:bg-slate-500 dark:hover:bg-slate-700',
+            )}
+            title={`Download Micorsoft Word`}
+            aria-label={`Download Micorsoft Word`}
+            onClick={() => saveDocxFile('demo.docx', references.article, references.footnotes)}
+          >
+            DOCX
+          </button>
         </div>
         {previewType === 'DEMO' && (
           <ReferencesProvider references={references}>{content}</ReferencesProvider>

package/src/tabs.tsx

@@ -19,12 +19,13 @@ export const TabSetRenderer: NodeRenderer = (node, children) => {
     onClick(items[0]?.sync || items[0]?.key);
   }, []);
   return (
-    <div className="">
+    <div key={node.key} className="">
       <div className="flex flex-row border-b border-b-gray-100 overflow-x-auto">
         {items.map((item) => {
           const key = item.sync || item.key;
           return (
             <div
+              key={item.key}
               className={classNames('flex-none px-3 py-1 font-semibold cursor-pointer', {
                 'text-blue-600 border-b-2 border-b-blue-600 dark:border-b-white dark:text-white':
                   active[key],
@@ -47,7 +48,11 @@ export const TabSetRenderer: NodeRenderer = (node, children) => {
 
 export const TabItemRenderer: NodeRenderer<TabItem> = (node, children) => {
   const open = useIsTabOpen(node.sync || node.key);
-  return <div className={classNames({ hidden: !open })}>{children}</div>;
+  return (
+    <div key={node.key} className={classNames({ hidden: !open })}>
+      {children}
+    </div>
+  );
 };
 
 const TAB_RENDERERS: Record<string, NodeRenderer> = {