myst-to-react 0.1.18 → 0.1.19

package/src/links/wiki.tsx

@@ -1,119 +0,0 @@
-import useSWR from 'swr';
-import { ExternalLinkIcon } from '@heroicons/react/outline';
-import { HoverPopover } from '../components/HoverPopover';
-import { LinkCard } from '../components/LinkCard';
-import React from 'react';
-
-const WikiTextMark = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    id="svg3400"
-    viewBox="0 0 500 85"
-    className="h-4"
-  >
-    <g transform="translate(-357.71336,-784.65111)">
-      <path
-        fill="currentColor"
-        d="m 412.98736,806.72288 c 0,0 -1.468,-2.984 -1.968,-3.976 -3.336,-6.612 -3.264,-6.964 -6.636,-7.408 -0.944,-0.124 -1.432,-0.244 -1.432,-0.712 v -2.092 l 0.284,-0.204 c 6.092,-0.008 19.648,-0.008 19.648,-0.008 l 0.52,0.172 v 2.084 c 0,0.476 -0.34,0.72 -1.032,0.72 l -1.424,0.204 c -3.6,0.28 -3.012,1.752 -0.62,6.516 l 22.708,46.46 0.776,0.212 20.16,-47.844 c 0.7,-1.928 0.592,-3.296 -0.308,-4.1 -0.904,-0.784 -1.54,-1.248 -3.876,-1.344 l -1.892,-0.096 c -0.232,0 -0.452,-0.084 -0.664,-0.24 -0.208,-0.148 -0.316,-0.344 -0.316,-0.58 v -1.992 l 0.288,-0.204 c 5.68,0 22.776,0 22.776,0 l 0.232,0.204 v 1.992 c 0,0.54 -0.308,0.812 -0.916,0.812 -2.984,0.132 -5.196,0.78 -6.628,1.936 -1.436,1.164 -2.556,2.768 -3.36,4.852 0,0 -18.54,42.436 -24.884,56.54 -2.428,4.624 -4.816,4.2 -6.916,-0.132 -4.436,-9.136 -16.928,-36.852 -16.928,-36.852 l -7.592,-14.92 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 449.37136,792.29888 c 0,0 -12.812,-0.04 -18.516,0 l -0.284,0.204 v 1.984 c 0,0.244 0.104,0.436 0.312,0.584 0.212,0.156 0.428,0.236 0.66,0.236 l 0.916,0.1 c 2.332,0.096 3.404,0.708 3.724,1.092 0.556,0.68 0.832,1.416 -0.516,4.356 l -23.92,47.708 -0.628,-0.164 c 0,0 -17.132,-36.124 -22.092,-48.208 -0.516,-1.252 -0.748,-2.18 -0.748,-2.752 0,-1.228 1.108,-1.892 3.324,-1.984 l 2.584,-0.108 c 0.684,0 1.032,-0.264 1.032,-0.812 v -1.984 l -0.232,-0.204 c 0,0 -20.52,-0.024 -24.76,0 l -0.232,0.204 v 2.084 c 0,0.376 0.476,0.608 1.432,0.712 2.604,0.14 4.316,0.556 5.14,1.248 0.82,0.7 1.688,2.468 2.84,5.224 6.228,14.96 19.46,41.656 25.904,56.86 1.856,4.152 4.188,4.796 7.02,-0.128 4.904,-9.096 18.2,-36.872 18.2,-36.872 l 10.472,-19.584 c 1.22,-2.068 2.396,-3.912 2.992,-4.772 1.092,-1.572 1.704,-1.868 4.688,-2.008 0.608,0 0.916,-0.272 0.916,-0.82 v -1.984 l -0.228,-0.212 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 488.32736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.128,-0.212 -2.912,0 -11.024,0.212 -11.024,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.432,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.252,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.44,0.208 2.808,0 10.816,-0.208 10.816,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 v 34.632 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 519.01936,854.23088 c 0,2.288 1.352,3.432 4.368,3.952 l 1.144,0.212 c 0.312,0.1 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -6.552,-0.212 -9.672,-0.212 -2.912,0 -11.44,0.212 -11.44,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.12,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.144,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.528,0.208 11.752,0.208 2.916,0 9.464,-0.208 9.464,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.416 -0.624,0.52 l -1.144,0.212 c -3.224,0.62 -4.368,1.144 -4.368,3.228 v 15.704 c 3.432,0 5.408,-1.764 9.984,-6.656 4.16,-4.58 7.384,-8.42 7.384,-10.4 0,-0.836 -0.936,-1.768 -3.016,-2.084 -0.416,-0.1 -0.624,-0.208 -0.624,-0.52 v -2.396 l 0.104,-0.1 c 0,0 8.424,0.208 11.44,0.208 2.704,0 7.28,-0.208 7.28,-0.208 l 0.312,0.1 v 2.396 c 0,0.312 -0.312,0.52 -0.832,0.52 -4.056,0.312 -6.864,0.52 -10.608,4.784 l -8.944,10.292 c -1.768,1.876 -2.392,3.016 -2.392,3.852 0,0.624 0.416,1.14 0.936,1.764 l 15.704,18.928 c 1.248,1.452 3.744,2.08 5.824,2.492 l 0.52,0.1 c 0.312,0.104 0.728,0.312 0.728,0.624 v 2.184 l -0.312,0.104 c 0,0 -5.512,-0.104 -8.424,-0.104 -2.6,0 -6.344,0.104 -6.344,0.104 l -0.104,-0.104 v -1.248 c 0,-1.356 -0.104,-2.492 -1.56,-4.156 l -11.544,-14.356 c -1.56,-2.084 -3.224,-2.596 -5.512,-2.596 v 15.404 l 0,0 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 575.08736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.128,-0.212 -2.912,0 -11.024,0.212 -11.024,0.212 l -0.208,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.08,-0.212 c 3.432,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.248,-2.916 -4.472,-3.22 l -2.08,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.44,0.208 2.808,0 10.816,-0.208 10.816,-0.208 l 0.104,0.208 v 2.288 c 0,0.312 -0.208,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 v 34.632 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 597.55936,819.80288 c 0,-3.224 -1.352,-3.328 -6.24,-3.64 -0.624,0 -0.728,-0.308 -0.728,-0.52 v -2.392 l 0.208,-0.104 c 1.56,0 7.696,0.208 10.712,0.208 2.912,0 7.072,-0.208 10.92,-0.208 14.76,0 17.464,7.276 17.464,12.692 0,6.244 -3.016,16.016 -17.776,16.016 -2.6,0 -4.68,-0.212 -6.556,-1.04 v 13.928 c 0,2.288 1.248,2.812 4.58,3.328 l 2.084,0.312 c 0.416,0.104 0.728,0.212 0.728,0.624 v 2.184 l -0.1,0.208 c 0,0 -8.32,-0.208 -11.544,-0.208 -2.912,0 -10.712,0.208 -10.712,0.208 l -0.104,-0.208 v -2.184 c 0,-0.416 0.208,-0.52 0.624,-0.624 l 2.184,-0.312 c 3.224,-0.416 4.264,-1.352 4.264,-3.328 l -0.008,-34.94 0,0 z m 8.008,18.1 c 2.08,0.836 4.68,0.936 6.76,0.936 6.244,0 9.248,-3.752 9.248,-11.752 0,-8.944 -4.056,-10.92 -9.768,-10.92 -4.996,0 -6.244,0.936 -6.244,3.64 l 0.004,18.096 0,0 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 647.80736,861.19888 c -3.12,0 -10.292,0.212 -10.292,0.212 l -0.108,-0.212 v -2.288 c 0,-0.204 0.108,-0.516 0.624,-0.516 l 2.396,-0.212 c 3.228,-0.312 4.164,-2.392 4.164,-4.468 v -34.32 c 0,-2.4 -1.252,-2.812 -4.164,-3.016 l -2.396,-0.216 c -0.624,-0.096 -0.624,-0.308 -0.624,-0.416 v -2.396 l 0.108,-0.208 c 0,0 8.108,0.208 11.228,0.208 h 15.288 c 3.12,0 10.508,-0.208 10.508,-0.208 l 0.212,0.208 c 0.1,4.472 0.828,8.536 1.56,12.484 l -2.596,0.416 c -1.14,-3.852 -3.116,-9.36 -9.772,-9.36 h -8.32 c -1.976,0 -3.016,0.728 -3.016,2.492 v 15.084 h 7.796 c 2.916,0 3.64,-1.248 4.06,-3.328 l 0.62,-2.184 c 0,-0.312 0.212,-0.524 0.624,-0.524 h 1.764 c 0.212,0 0.212,0.108 0.212,0.312 -0.212,2.288 -0.624,5.204 -0.624,7.7 0,2.596 0.416,4.784 0.624,7.176 l -0.212,0.212 h -1.764 c -0.516,0 -0.732,-0.212 -0.732,-0.524 l -0.52,-2.284 c -0.416,-2.084 -1.352,-3.228 -4.064,-3.228 h -7.792 v 15.916 c 0,1.972 1.136,3.948 3.016,3.948 h 9.88 c 5.304,0 8.22,-3.328 9.464,-8.74 l 2.596,0.312 -2.084,11.956 -0.208,0.208 c 0,0 -6.136,-0.208 -9.256,-0.208 l -18.2,0.012 0,0 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 686.91936,858.39488 2.392,-0.212 c 3.124,-0.312 4.164,-1.248 4.164,-4.468 v -34.32 c 0,-2.712 -0.736,-2.712 -4.164,-3.016 l -2.28,-0.216 c -0.416,0 -0.736,-0.208 -0.736,-0.52 v -2.288 l 0.1,-0.208 c 0,0 9.156,0.208 11.032,0.208 1.968,0 11.024,-0.208 13.728,-0.208 17.368,0 25.9,10.816 25.9,24.648 0,18.204 -12.9,23.604 -24.44,23.604 -8.32,0 -11.956,-0.208 -15.18,-0.208 -3.124,0 -11.028,0.208 -11.028,0.208 l -0.104,-0.208 v -2.184 c -0.008,-0.3 0.204,-0.612 0.616,-0.612 z m 23.196,0 c 11.436,0 17.892,-4.26 17.892,-18.828 0,-10.812 -2.396,-23.404 -19.868,-23.404 -4.056,0 -6.656,0.624 -6.656,3.232 v 34.32 c 0,2.904 0.724,4.68 8.632,4.68 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 761.60736,854.23088 c 0,2.288 1.04,3.64 4.368,3.952 l 2.184,0.212 c 0.312,0 0.624,0.204 0.624,0.62 v 2.184 l -0.104,0.212 c 0,0 -7.904,-0.212 -11.124,-0.212 -2.916,0 -11.024,0.212 -11.024,0.212 l -0.212,-0.212 v -2.184 c 0,-0.416 0.312,-0.62 0.728,-0.62 l 2.084,-0.212 c 3.428,-0.312 4.472,-1.976 4.472,-3.952 v -34.632 c 0,-2.284 -1.252,-2.916 -4.472,-3.22 l -2.084,-0.216 c -0.416,0 -0.728,-0.096 -0.728,-0.416 v -2.396 l 0.104,-0.208 c 0,0 8.216,0.208 11.432,0.208 2.808,0 10.82,-0.208 10.82,-0.208 l 0.1,0.208 v 2.288 c 0,0.312 -0.212,0.52 -0.624,0.52 l -2.184,0.212 c -3.224,0.308 -4.368,1.144 -4.368,3.228 l 0.008,34.632 0,0 z"
-      />
-      <path
-        fill="currentColor"
-        d="m 793.64736,858.18288 3.016,0.212 c 0.416,0 0.832,0.312 0.832,0.828 v 1.976 l -0.208,0.212 c 0,0 -11.336,-0.212 -13.832,-0.212 -2.708,0 -9.364,0.212 -9.364,0.212 l -0.212,-0.212 v -1.976 c 0,-0.516 0.312,-0.828 0.836,-0.828 4.58,-0.312 7.172,-1.148 10.084,-7.804 l 23.084,-54.084 c 1.14,-2.704 1.976,-3.748 3.54,-3.748 1.452,0 1.976,1.044 2.804,3.124 l 21.32,56.368 c 1.46,4.06 3.54,5.616 7.7,6.032 l 1.144,0.1 c 0.52,0 1.04,0.312 1.04,0.836 v 1.972 l -0.312,0.208 c 0,0 -8.008,-0.208 -12.064,-0.208 -3.64,0 -13.836,0.208 -13.836,0.208 l -0.1,-0.208 v -1.972 c 0,-0.524 0.208,-0.836 0.736,-0.836 l 2.912,-0.208 c 3.948,-0.308 5.412,-1.564 4.368,-4.472 l -6.344,-17.58 h -21.632 c -2.496,0 -3.12,0.416 -3.636,1.764 l -6.036,15.084 c -1.04,2.608 0.312,4.9 4.16,5.212 z m 25.48,-26.424 -10.088,-27.764 h -0.208 l -10.4,26.416 c -0.416,1.044 0.308,1.352 2.596,1.352 h 18.1 z"
-      />
-    </g>
-  </svg>
-);
-
-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}.`);
-  });
-
-const ENGLISH_WIKIPEDIA = 'https://en.wikipedia.org/';
-function createWikiUrl(name: string, wiki?: string): string {
-  return `${wiki || ENGLISH_WIKIPEDIA}wiki/${name}`;
-}
-function createWikiApiUrl(name: string, wiki?: string): string {
-  return `${wiki || ENGLISH_WIKIPEDIA}api/rest_v1/page/summary/${name}`;
-}
-
-function WikiChild({ page, wiki, open }: { page: string; wiki: string; open: boolean }) {
-  const { data, error } = useSWR(open ? createWikiApiUrl(page, wiki) : null, fetcher);
-  const { thumbnail, extract, content_urls } = data ?? {};
-  const url = content_urls?.desktop?.page ?? createWikiUrl(page);
-  const image = thumbnail?.source;
-  if (error) {
-    return (
-      <span>
-        <a href={url} className="block" target="_blank" rel="noreferrer">
-          <ExternalLinkIcon className="w-4 h-4 float-right" />
-          <WikiTextMark />
-        </a>
-        <div className="mt-2">Error loading "{page}" from wikipedia.</div>
-      </span>
-    );
-  }
-  return (
-    <LinkCard
-      loading={!data}
-      url={url}
-      title={<WikiTextMark />}
-      thumbnail={image}
-      description={extract}
-    />
-  );
-}
-
-export function WikiLink({
-  children,
-  page,
-  url,
-  wiki,
-}: {
-  children: React.ReactNode;
-  page: string;
-  url: string;
-  wiki: string;
-}) {
-  return (
-    <HoverPopover card={({ open }) => <WikiChild wiki={wiki} page={page} open={open} />}>
-      <a href={url} className="italic" target="_blank" rel="noreferrer">
-        {children}
-      </a>
-    </HoverPopover>
-  );
-}

package/src/math.tsx

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import { ExclamationIcon } from '@heroicons/react/outline';
-import type { InlineMath, Math } from 'myst-spec';
-import { InlineError } from './inlineError';
-import { HashLink } from './heading';
-import type { NodeRenderer } from './types';
-
-// function Math({ value, html }: { value: string; html: string }) {
-//   const [loaded, setLoaded] = useState(false);
-//   const ref = useRef<HTMLDivElement | null>(null);
-//   useEffect(() => {
-//     import('katex').then(() => {
-//       setLoaded(true);
-//     });
-//   }, []);
-//   useEffect(() => {
-//     if (!loaded) return;
-//     import('katex').then(({ default: katex }) => {
-//       if (!ref.current) return;
-//       katex.render(value, ref.current, { displayMode: true });
-//     });
-//   }, [loaded, ref]);
-//   return (
-//     <>
-//       {(typeof document === 'undefined' || !loaded) && (
-//         <div dangerouslySetInnerHTML={{ __html: html }} />
-//       )}
-//       {loaded && <div ref={ref} />}
-//     </>
-//   );
-// }
-
-type MathLike = (InlineMath | Math) & {
-  error?: boolean;
-  message?: string;
-  html?: string;
-};
-
-const mathRenderer: NodeRenderer<MathLike> = (node) => {
-  if (node.type === 'math') {
-    if (node.error || !node.html) {
-      return (
-        <pre key={node.key} title={node.message}>
-          <span className="text-red-500">
-            <ExclamationIcon className="inline h-[1em] mr-1" />
-            {node.message}
-            {'\n\n'}
-          </span>
-          {node.value}
-        </pre>
-      );
-    }
-    const id = node.html_id || node.identifier || node.key;
-    return (
-      <div key={node.key} id={id} className={classNames('flex group')}>
-        <div
-          dangerouslySetInnerHTML={{ __html: node.html }}
-          className="overflow-x-auto flex-grow"
-        />
-        {node.enumerator && (
-          <div className="flex-none text-right m-0 pl-2 self-center relative">
-            <span>({node.enumerator})</span>
-            <HashLink id={id} align="right" kind="Equation" />
-          </div>
-        )}
-      </div>
-    );
-  }
-  if (node.error || !node.html) {
-    return <InlineError key={node.key} value={node.value} message={node.message} />;
-  }
-  return <span key={node.key} dangerouslySetInnerHTML={{ __html: node.html }} />;
-  // return <Math key={node.key} html={node.html} value={node.value as string} />;
-};
-
-const MATH_RENDERERS = {
-  math: mathRenderer,
-  inlineMath: mathRenderer,
-};
-
-export default MATH_RENDERERS;

package/src/mermaid.tsx

@@ -1,49 +0,0 @@
-import type { NodeRenderer } from './types';
-import { useEffect, useState } from 'react';
-
-async function parse(id: string, text: string): Promise<string> {
-  const { default: mermaid } = await import('mermaid');
-  return await new Promise<string>((resolve) => {
-    mermaid.render(id, text, (code) => {
-      resolve(code);
-    });
-  });
-}
-
-export function MermaidRenderer({ id, value }: { value: string; id: string }) {
-  const [graph, setGraph] = useState<string>();
-  const [error, setError] = useState<Error>();
-  useEffect(() => {
-    parse(id, value)
-      .then((svg) => {
-        setGraph(svg);
-        setError(undefined);
-      })
-      .catch((err) => {
-        setGraph(undefined);
-        setError(err as Error);
-      });
-  }, []);
-  return (
-    <figure className="">
-      {graph && <div dangerouslySetInnerHTML={{ __html: graph }}></div>}
-      {error && (
-        <pre>
-          Error parsing mermaid graph.
-          {'\n\n'}
-          {value}
-        </pre>
-      )}
-    </figure>
-  );
-}
-
-const MermaidNodeRenderer: NodeRenderer = (node) => {
-  return <MermaidRenderer key={node.key} id={node.key} value={node.value} />;
-};
-
-const MERMAID_RENDERERS = {
-  mermaid: MermaidNodeRenderer,
-};
-
-export default MERMAID_RENDERERS;

package/src/myst.tsx

@@ -1,226 +0,0 @@
-import { useParse } from '.';
-import { VFile } from 'vfile';
-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';
-import classnames from 'classnames';
-import ExclamationIcon from '@heroicons/react/outline/ExclamationIcon';
-import ExclamationCircleIcon from '@heroicons/react/outline/ExclamationCircleIcon';
-import InformationCircleIcon from '@heroicons/react/outline/InformationCircleIcon';
-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 { visit } = await import('unist-util-visit');
-  const { unified } = await import('unified');
-  const { MyST } = await import('mystjs');
-  const {
-    mathPlugin,
-    footnotesPlugin,
-    keysPlugin,
-    basicTransformationsPlugin,
-    enumerateTargetsPlugin,
-    resolveReferencesPlugin,
-    WikiTransformer,
-    DOITransformer,
-    RRIDTransformer,
-    linksPlugin,
-    ReferenceState,
-    getFrontmatter,
-  } = await import('myst-transforms');
-  const { default: mystToTex } = await import('myst-to-tex');
-  const myst = new MyST();
-  const mdast = myst.parse(text);
-  const linkTransforms = [new WikiTransformer(), new DOITransformer(), new RRIDTransformer()];
-  // For the mdast that we show, duplicate, strip positions and dump to yaml
-  // Also run some of the transforms, like the links
-  const mdastPre = JSON.parse(JSON.stringify(mdast));
-  unified().use(linksPlugin, { transformers: linkTransforms }).runSync(mdastPre);
-  visit(mdastPre, (n) => delete n.position);
-  const mdastString = yaml.dump(mdastPre);
-  const htmlString = myst.renderMdast(mdastPre);
-  const file = new VFile();
-  const references = {
-    cite: { order: [], data: {} },
-    footnotes: {},
-  };
-  const { frontmatter } = getFrontmatter(mdast, { removeYaml: true, removeHeading: false });
-  const state = new ReferenceState({
-    numbering: frontmatter.numbering ?? defaultFrontmatter?.numbering,
-    file,
-  });
-  unified()
-    .use(basicTransformationsPlugin)
-    .use(mathPlugin, { macros: frontmatter?.math ?? {} }) // This must happen before enumeration, as it can add labels
-    .use(enumerateTargetsPlugin, { state })
-    .use(linksPlugin, { transformers: linkTransforms })
-    .use(footnotesPlugin, { references })
-    .use(resolveReferencesPlugin, { state })
-    .use(keysPlugin)
-    .runSync(mdast as any, file);
-  const tex = unified()
-    .use(mystToTex)
-    .stringify(mdast as any).result as LatexResult;
-  const content = useParse(mdast as any);
-  return {
-    frontmatter,
-    yaml: mdastString,
-    references: { ...references, article: mdast } as References,
-    html: htmlString,
-    tex: tex.value,
-    content,
-    warnings: file.messages,
-  };
-}
-
-export function MySTRenderer({ value, numbering }: { value: string; numbering: any }) {
-  const area = useRef<HTMLTextAreaElement | null>(null);
-  const [text, setText] = useState<string>(value.trim());
-  const [references, setReferences] = useState<References>({});
-  const [frontmatter, setFrontmatter] = useState<PageFrontmatter>({});
-  const [mdastYaml, setYaml] = useState<string>('Loading...');
-  const [html, setHtml] = useState<string>('Loading...');
-  const [tex, setTex] = useState<string>('Loading...');
-  const [warnings, setWarnings] = useState<VFileMessage[]>([]);
-  const [content, setContent] = useState<React.ReactNode>(<p>{value}</p>);
-  const [previewType, setPreviewType] = useState('DEMO');
-
-  useEffect(() => {
-    const ref = { current: true };
-    parse(text, { numbering }).then((result) => {
-      if (!ref.current) return;
-      setFrontmatter(result.frontmatter);
-      setYaml(result.yaml);
-      setReferences(result.references);
-      setHtml(result.html);
-      setTex(result.tex);
-      setContent(result.content);
-      setWarnings(result.warnings);
-    });
-    return () => {
-      ref.current = false;
-    };
-  }, [text]);
-
-  useEffect(() => {
-    if (!area.current) return;
-    area.current.style.height = 'auto'; // for the scroll area in the next step!
-    area.current.style.height = `${area.current.scrollHeight}px`;
-  }, [text]);
-
-  return (
-    <figure className="relative shadow-lg rounded">
-      <div className="absolute right-0 p-1">
-        <CopyIcon text={text} />
-      </div>
-      <div className="myst">
-        <label>
-          <span className="sr-only">Edit the MyST text</span>
-          <textarea
-            ref={area}
-            value={text}
-            className="block p-6 shadow-inner resize-none w-full font-mono bg-slate-50 dark:bg-slate-800 outline-none"
-            onChange={(e) => setText(e.target.value)}
-          ></textarea>
-        </label>
-      </div>
-      {/* The `exclude-from-outline` class is excluded from the document outline */}
-      <div className="exclude-from-outline relative min-h-1 pt-[50px] px-6 pb-6 dark:bg-slate-900">
-        <div className="absolute cursor-pointer top-0 left-0 border dark:border-slate-600">
-          {['DEMO', 'AST', 'HTML', 'LaTeX'].map((show) => (
-            <button
-              key={show}
-              className={classnames('px-2', {
-                'bg-white hover:bg-slate-200 dark:bg-slate-500 dark:hover:bg-slate-700':
-                  previewType !== show,
-                'bg-blue-800 text-white': previewType === show,
-              })}
-              title={`Show the ${show}`}
-              aria-label={`Show the ${show}`}
-              aria-pressed={previewType === show ? 'true' : 'false'}
-              onClick={() => setPreviewType(show)}
-            >
-              {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} frontmatter={frontmatter}>
-            {content}
-          </ReferencesProvider>
-        )}
-        {previewType === 'AST' && <CodeBlock lang="yaml" value={mdastYaml} showCopy={false} />}
-        {previewType === 'HTML' && <CodeBlock lang="xml" value={html} showCopy={false} />}
-        {previewType === 'LaTeX' && <CodeBlock lang="latex" value={tex} showCopy={false} />}
-      </div>
-      {previewType === 'DEMO' && warnings.length > 0 && (
-        <div>
-          {warnings.map((m) => (
-            <div
-              className={classnames('p-1 shadow-inner text-white not-prose', {
-                'bg-red-500 dark:bg-red-800': m.fatal === true,
-                'bg-orange-500 dark:bg-orange-700': m.fatal === false,
-                'bg-slate-500 dark:bg-slate-800': m.fatal === null,
-              })}
-            >
-              {m.fatal === true && <ExclamationCircleIcon className="inline h-[1.3em] mr-1" />}
-              {m.fatal === false && <ExclamationIcon className="inline h-[1.3em] mr-1" />}
-              {m.fatal === null && <InformationCircleIcon className="inline h-[1.3em] mr-1" />}
-              <code>{m.ruleId || m.source}</code>: {m.message}
-            </div>
-          ))}
-        </div>
-      )}
-    </figure>
-  );
-}
-
-const MystNodeRenderer: NodeRenderer = (node) => {
-  return <MySTRenderer key={node.key} value={node.value} numbering={node.numbering} />;
-};
-
-const MYST_RENDERERS = {
-  myst: MystNodeRenderer,
-};
-
-export default MYST_RENDERERS;

package/src/output/components.tsx

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useLongContent } from './hooks';
-
-export const MaybeLongContent = ({
-  content,
-  path,
-  render,
-}: {
-  content?: string;
-  path?: string;
-  render: (content: string) => JSX.Element;
-}) => {
-  const { error, data } = useLongContent(content, path);
-  if (error) {
-    return <div className="text-red-500">Error loading content: {error.message}</div>;
-  }
-  if (!data) {
-    return <div>Fetching long content....</div>;
-  }
-  return <div>{render(data.content)}</div>;
-};
-
-export const DangerousHTML = ({ content, ...rest }: { content: string }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!content || !ref.current) return;
-    const el = document.createRange().createContextualFragment(content);
-    ref.current.innerHTML = '';
-    ref.current.appendChild(el);
-  }, [content, ref]);
-
-  return <div {...rest} ref={ref} />;
-};

package/src/output/error.tsx

@@ -1,20 +0,0 @@
-import Ansi from 'ansi-to-react';
-import { ensureString } from '@curvenote/blocks';
-import type { MinifiedErrorOutput } from '@curvenote/nbtx';
-import { MaybeLongContent } from './components';
-
-export default function Error({ output }: { output: MinifiedErrorOutput }) {
-  return (
-    <MaybeLongContent
-      content={ensureString(output.traceback)}
-      path={output.path}
-      render={(content?: string) => {
-        return (
-          <pre className="text-sm font-thin font-system jupyter-error">
-            <Ansi>{content ?? ''}</Ansi>
-          </pre>
-        );
-      }}
-    />
-  );
-}

package/src/output/hooks.ts

@@ -1,127 +0,0 @@
-import useSWRImmutable from 'swr/immutable';
-import type {
-  MinifiedErrorOutput,
-  MinifiedMimeBundle,
-  MinifiedMimePayload,
-  MinifiedOutput,
-  MinifiedStreamOutput,
-} from '@curvenote/nbtx/dist/minify/types';
-import { walkPaths } from '@curvenote/nbtx/dist/minify/utils';
-import { useState, useLayoutEffect } from 'react';
-
-/**
- * Truncation vs Summarization
- *
- * In Curvespace, we're decided to change our data structure for outputs to align it as
- * closely as possible with Jupyters nbformat.IOutput[] type, but in a way that still allows
- * us to truncate output content and push that to storage.
- *
- * This will be used only in the CLI and Curvespace initially but should be ported back to
- * the rest of the code base. This will mean
- *
- * - changing the DB schema
- * - migration
- * - changing API response
- * - changing the frontend
- * - changing the extension
- *
- */
-
-interface LongContent {
-  content_type?: string;
-  content: string;
-}
-
-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 useLongContent(
-  content?: string,
-  url?: string,
-): { data?: LongContent; error?: Error } {
-  if (typeof document === 'undefined') {
-    // This is ONLY called on the server
-    return url ? {} : { data: { content: content ?? '' } };
-  }
-  const { data, error } = useSWRImmutable<LongContent>(url || null, fetcher);
-  if (!url) return { data: { content: content ?? '' } };
-  return { data, error };
-}
-
-const arrayFetcher = (...urls: string[]) => {
-  return Promise.all(urls.map((url) => fetcher(url)));
-};
-
-type ObjectWithPath = MinifiedErrorOutput | MinifiedStreamOutput | MinifiedMimePayload;
-
-function shallowCloneOutputs(outputs: MinifiedOutput[]) {
-  return outputs.map((output) => {
-    if ('data' in output && output.data) {
-      const data = output.data as MinifiedMimeBundle;
-      return {
-        ...output,
-        data: Object.entries(data).reduce((acc, [mimetype, payload]) => {
-          return { ...acc, [mimetype]: { ...payload } };
-        }, {}),
-      };
-    }
-    return { ...output };
-  });
-}
-
-export function useFetchAnyTruncatedContent(outputs: MinifiedOutput[]) {
-  const itemsWithPaths: ObjectWithPath[] = [];
-  const updated = shallowCloneOutputs(outputs);
-
-  walkPaths(updated, (path, obj) => {
-    // images have paths, but we don't need to fetch them
-    if ('content_type' in obj && (obj as MinifiedMimePayload).content_type.startsWith('image/'))
-      return;
-    obj.path = path;
-    itemsWithPaths.push(obj);
-  });
-
-  const { data, error } = useSWRImmutable<LongContent[]>(
-    itemsWithPaths.map(({ path }) => path),
-    arrayFetcher,
-  );
-
-  data?.forEach(({ content }, idx) => {
-    const obj = itemsWithPaths[idx];
-    if ('text' in obj) obj.text = content; // stream
-    if ('traceback' in obj) obj.traceback = content; // error
-    if ('content' in obj) obj.content = content; // mimeoutput
-    obj.path = undefined;
-  });
-
-  return {
-    data: itemsWithPaths.length === 0 || data ? updated : undefined,
-    error,
-  };
-}
-
-function getWindowSize() {
-  const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height,
-  };
-}
-
-export default function useWindowSize() {
-  const [windowSize, setWindowSize] = useState(getWindowSize());
-
-  useLayoutEffect(() => {
-    function handleResize() {
-      setWindowSize(getWindowSize());
-    }
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return windowSize;
-}

package/src/output/index.tsx

@@ -1,7 +0,0 @@
-import { Output } from './output';
-
-const OUTPUT_RENDERERS = {
-  output: Output,
-};
-
-export default OUTPUT_RENDERERS;