diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8bd5e1f..5e0f5b4 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -153,6 +153,9 @@ jobs: steps: - uses: actions/checkout@v2 - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1 + - name: Install missing dependencies + # On May 30, 2023 this wasn't included in the base try removing in future! + run: pip install typing_extensions - uses: jupyterlab/maintainer-tools/.github/actions/check-links@v1 with: ignore_links: 'https:\/\/mybinder\.org.*' diff --git a/src/images.ts b/src/images.ts index fb6e66d..98091b6 100644 --- a/src/images.ts +++ b/src/images.ts @@ -6,7 +6,7 @@ import { AttachmentsResolver } from '@jupyterlab/attachments'; type Options = { resolver: IRenderMime.IResolver | null; - cell: MarkdownCell; + cell?: MarkdownCell; }; export async function imageUrlSourceTransform( @@ -17,10 +17,18 @@ export async function imageUrlSourceTransform( await Promise.all( images.map(async image => { if (!image || !image.url) return; - const resolver = new AttachmentsResolver({ - parent: opts.resolver ?? undefined, - model: opts.cell.model.attachments - }); + if (!opts.resolver) { + console.warn( + 'No resolver supplied to `imageUrlSourceTransform`, local images may not work.' + ); + return; + } + const resolver = opts.cell + ? new AttachmentsResolver({ + parent: opts.resolver ?? undefined, + model: opts.cell?.model.attachments + }) + : opts.resolver; const path = await resolver.resolveUrl(image.url); if (!path) return; const url = await resolver.getDownloadUrl(path); diff --git a/src/mime.tsx b/src/mime.tsx index df615f3..c430886 100644 --- a/src/mime.tsx +++ b/src/mime.tsx @@ -33,6 +33,7 @@ import { ReactWidget, UseSignal } from '@jupyterlab/apputils'; import { unified } from 'unified'; import { Signal } from '@lumino/signaling'; import React from 'react'; +import { imageUrlSourceTransform } from './images'; /** * The MIME type for Markdown. @@ -120,8 +121,9 @@ export class RenderedMySTMarkdown * * @returns A promise which resolves when rendering is complete. */ - renderModel(model: IRenderMime.IMimeModel): Promise { - const mdast = markdownParse(model.data[MIME_TYPE] as string); + async renderModel(model: IRenderMime.IMimeModel): Promise { + const markdownText = model.data[MIME_TYPE] as string; + const mdast = markdownParse(markdownText, false); const linkTransforms = [ new WikiTransformer(), new GithubTransformer(), @@ -131,7 +133,6 @@ export class RenderedMySTMarkdown const file = new VFile(); const references = { cite: { order: [], data: {} }, - footnotes: {}, article: mdast as any }; const { frontmatter: frontmatterRaw } = getFrontmatter(mdast, { @@ -159,6 +160,11 @@ export class RenderedMySTMarkdown .use(keysPlugin) .runSync(mdast as any, file); + // Go through all links and replace the source if they are local + await imageUrlSourceTransform(mdast as any, { + resolver: this.resolver + }); + this.state = { mdast, references, diff --git a/src/myst.ts b/src/myst.ts index cce07af..bb92b74 100644 --- a/src/myst.ts +++ b/src/myst.ts @@ -32,7 +32,7 @@ import { internalLinksPlugin } from './links'; import { addCiteChildrenPlugin } from './citations'; import { evalRole } from './roles'; -export function markdownParse(text: string): Root { +export function markdownParse(text: string, inNotebook = true): Root { const mdast = mystParse(text, { directives: [ cardDirective, @@ -56,9 +56,11 @@ export function markdownParse(text: string): Root { } }) .runSync(mdast as any); - // Lift children out of blocks for the next step - // We are working here as one cell at a time - liftChildren(mdast, 'block'); + if (inNotebook) { + // If in the notebook, lift children out of blocks for the next step + // We are working here as one cell at a time + liftChildren(mdast, 'block'); + } return mdast as Root; } diff --git a/style/preflight.css b/style/preflight.css index 9f4e59d..109e7bf 100644 --- a/style/preflight.css +++ b/style/preflight.css @@ -27,6 +27,11 @@ background-image: none; /* 2 */ } +.myst img { + max-width: 100%; +} + .myst figure img { display: block; + max-width: 100%; }