@difizen/libro-rendermime 0.0.2-alpha.0

package/src/components/html-render.tsx

@@ -0,0 +1,42 @@
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React, { useEffect, useRef } from 'react';
+
+import { renderHTML } from '../renderers.js';
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const HTMLRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderHTMLRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  useEffect(() => {
+    if (mimeType) {
+      renderHTML({
+        host: renderHTMLRef.current as HTMLElement,
+        source: concatMultilineString(JSON.parse(JSON.stringify(model.data[mimeType]))),
+        trusted: model.trusted,
+        resolver: defaultRenderMime.resolver,
+        sanitizer: defaultRenderMime.sanitizer,
+        linkHandler: defaultRenderMime.linkHandler,
+        shouldTypeset: false,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div className="libro-html-render-container">
+      <div className="libro-html-common-render">
+        <div className="libro-html-render" ref={renderHTMLRef} />
+      </div>
+    </div>
+  );
+};

package/src/components/image-render.tsx

@@ -0,0 +1,46 @@
+import type { JSONObject } from '@difizen/libro-common';
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React, { useEffect, useRef } from 'react';
+
+import { renderImage } from '../renderers.js';
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const ImageRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderImageRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  useEffect(() => {
+    if (mimeType) {
+      renderImage({
+        host: renderImageRef.current as HTMLElement,
+        source: concatMultilineString(JSON.parse(JSON.stringify(model.data[mimeType]))),
+        width: (model.metadata['width'] ||
+          (model.metadata[mimeType] as JSONObject)?.['width']) as unknown as
+          | number
+          | undefined,
+        height: (model.metadata['height'] ||
+          (model.metadata[mimeType] as JSONObject)?.['height']) as unknown as
+          | number
+          | undefined,
+        needsBackground: model.metadata['needs_background'] as string | undefined,
+        unconfined:
+          model.metadata && (model.metadata['unconfined'] as boolean | undefined),
+        mimeType: mimeType,
+      });
+    }
+  }, [mimeType, model.data, model.metadata, renderImageRef]);
+  return (
+    <div className="libro-image-render-container">
+      <div className="libro-image-render" ref={renderImageRef} />
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './html-render.js';
+export * from './image-render.js';
+export * from './markdown-render.js';
+export * from './svg-render.js';
+export * from './text-render.js';
+export * from './latex-render.js';

package/src/components/latex-render.tsx

@@ -0,0 +1,30 @@
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React from 'react';
+
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const LatexRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  if (!mimeType) {
+    return null;
+  }
+
+  return (
+    <div className="libro-latex-render-container">
+      <div className="libro-latex-render">
+        {concatMultilineString(JSON.parse(JSON.stringify(model.data[mimeType])))}
+      </div>
+    </div>
+  );
+};

package/src/components/markdown-render.tsx

@@ -0,0 +1,42 @@
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React, { useEffect, useRef } from 'react';
+
+import { renderMarkdown } from '../renderers.js';
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const MarkdownRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderMarkdownRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  useEffect(() => {
+    if (mimeType) {
+      renderMarkdown({
+        host: renderMarkdownRef.current as HTMLElement,
+        source: concatMultilineString(JSON.parse(JSON.stringify(model.data[mimeType]))),
+        trusted: model.trusted,
+        resolver: defaultRenderMime.resolver,
+        sanitizer: defaultRenderMime.sanitizer,
+        linkHandler: defaultRenderMime.linkHandler,
+        // shouldTypeset: options.isAttached,
+        markdownParser: defaultRenderMime.markdownParser,
+        cellId: model.cell.model.id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div className="libro-markdown-render-container">
+      <div className="libro-markdown-render" ref={renderMarkdownRef} />
+    </div>
+  );
+};

package/src/components/svg-render.tsx

@@ -0,0 +1,38 @@
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React, { useEffect, useRef } from 'react';
+
+import { renderSVG } from '../renderers.js';
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const SVGRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderSVGRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  useEffect(() => {
+    if (mimeType) {
+      renderSVG({
+        host: renderSVGRef.current as HTMLElement,
+        source: concatMultilineString(JSON.parse(JSON.stringify(model.data[mimeType]))),
+        trusted: model.trusted,
+        unconfined:
+          model.metadata && (model.metadata['unconfined'] as boolean | undefined),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div className="libro-svg-render-container">
+      <div className="libro-svg-render" ref={renderSVGRef} />
+    </div>
+  );
+};

package/src/components/text-render.tsx

@@ -0,0 +1,51 @@
+import type { JSONValue } from '@difizen/libro-common';
+import { concatMultilineString } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import React, { useEffect, useRef } from 'react';
+
+import { renderText } from '../renderers.js';
+import type { IRenderMimeRegistry } from '../rendermime-protocol.js';
+import { RenderMimeRegistry } from '../rendermime-registry.js';
+
+export const RawTextRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderTextRef = useRef<HTMLDivElement>(null);
+  const renderTextContainerRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  const mimeType = defaultRenderMime.defaultPreferredMimeType(
+    model,
+    // model.trusted ? 'any' : 'ensure'
+  );
+  let dataContent: JSONValue | null = null;
+  if (mimeType) {
+    dataContent = model.data[mimeType];
+  }
+  useEffect(() => {
+    if (dataContent && mimeType) {
+      renderText({
+        host: renderTextRef.current as HTMLElement,
+        source: concatMultilineString(JSON.parse(JSON.stringify(dataContent))),
+        sanitizer: defaultRenderMime.sanitizer,
+        mimeType: mimeType,
+      });
+      if (mimeType === 'application/vnd.jupyter.stderr') {
+        renderTextContainerRef.current?.setAttribute(
+          'data-mime-type',
+          'application/vnd.jupyter.stderr',
+        );
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mimeType, dataContent]);
+  return (
+    <div className="libro-text-render-container" ref={renderTextContainerRef}>
+      <div className="libro-text-render" ref={renderTextRef} />
+    </div>
+  );
+};
+
+export const TextRender = React.memo(RawTextRender);

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './rendermime-utils.js';
+export * from './renderers.js';
+export * from './rendermime-registry.js';
+export * from './rendermime-protocol.js';
+export * from './rendermime-factory.js';
+export * from './rendermime-module.js';

package/src/renderers.ts

@@ -0,0 +1,325 @@
+import { concatMultilineString } from '@difizen/libro-common';
+
+import type {
+  IRenderHTMLOptions,
+  IRenderImageOptions,
+  IRenderMarkdownOptions,
+  IRenderSVGOptions,
+  IRenderTextOptions,
+} from './rendermime-protocol.js';
+import {
+  ansiSpan,
+  autolink,
+  evalInnerHTMLScriptTags,
+  handleDefaults,
+  handleUrls,
+  splitShallowNode,
+} from './rendermime-utils.js';
+
+/**
+ * Render text into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export function renderText(options: IRenderTextOptions): Promise<void> {
+  // Unpack the options.
+  const { host, sanitizer, source, mimeType } = options;
+  const data = concatMultilineString(JSON.parse(JSON.stringify(source)));
+  // Create the HTML content.
+  const content = sanitizer.sanitize(ansiSpan(data), {
+    allowedTags: ['span'],
+  });
+
+  if (mimeType === 'application/vnd.jupyter.stderr') {
+    host.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
+  }
+  // Set the sanitized content for the host node.
+  const pre = document.createElement('pre');
+  pre.innerHTML = content;
+
+  const preTextContent = pre.textContent;
+
+  if (preTextContent) {
+    // Note: only text nodes and span elements should be present after sanitization in the `<pre>` element.
+    const linkedNodes = autolink(preTextContent);
+    let inAnchorElement = false;
+
+    const combinedNodes: (HTMLAnchorElement | Text | HTMLSpanElement)[] = [];
+    const preNodes = Array.from(pre.childNodes) as (Text | HTMLSpanElement)[];
+
+    while (preNodes.length && linkedNodes.length) {
+      // Use non-null assertions to workaround TypeScript context awareness limitation
+      // (if any of the arrays were empty, we would not enter the body of the loop).
+      let preNode = preNodes.shift()!;
+      let linkNode = linkedNodes.shift()!;
+
+      // This should never happen because we modify the arrays in flight so they should end simultaneously,
+      // but this makes the coding assistance happy and might make it easier to conceptualize.
+      if (typeof preNode === 'undefined') {
+        combinedNodes.push(linkNode);
+        break;
+      }
+      if (typeof linkNode === 'undefined') {
+        combinedNodes.push(preNode);
+        break;
+      }
+
+      const preLen = preNode.textContent?.length;
+      const linkLen = linkNode.textContent?.length;
+      if (preLen && linkLen) {
+        if (preLen > linkLen) {
+          // Split pre node and only keep the shorter part
+          const { pre: keep, post: postpone } = splitShallowNode(preNode, linkLen);
+          preNodes.unshift(postpone);
+          preNode = keep;
+        } else if (linkLen > preLen) {
+          const { pre: keep, post: postpone } = splitShallowNode(linkNode, preLen);
+          linkedNodes.unshift(postpone);
+          linkNode = keep;
+        }
+      }
+
+      const lastCombined = combinedNodes[combinedNodes.length - 1];
+
+      // If we are already in an anchor element and the anchor element did not change,
+      // we should insert the node from <pre> which is either Text node or coloured span Element
+      // into the anchor content as a child
+      if (
+        inAnchorElement &&
+        (linkNode as HTMLAnchorElement).href ===
+          (lastCombined as HTMLAnchorElement).href
+      ) {
+        lastCombined.appendChild(preNode);
+      } else {
+        // the `linkNode` is either Text or AnchorElement;
+        const isAnchor = linkNode.nodeType !== Node.TEXT_NODE;
+        // if we are NOT about to start an anchor element, just add the pre Node
+        if (!isAnchor) {
+          combinedNodes.push(preNode);
+          inAnchorElement = false;
+        } else {
+          // otherwise start a new anchor; the contents of the `linkNode` and `preNode` should be the same,
+          // so we just put the neatly formatted `preNode` inside the anchor node (`linkNode`)
+          // and append that to combined nodes.
+          linkNode.textContent = '';
+          linkNode.appendChild(preNode);
+          combinedNodes.push(linkNode);
+          inAnchorElement = true;
+        }
+      }
+    }
+    // TODO: replace with `.replaceChildren()` once the target ES version allows it
+    pre.innerHTML = '';
+    for (const child of combinedNodes) {
+      pre.appendChild(child);
+    }
+  }
+
+  host.appendChild(pre);
+  host.classList.add('libro-text-render');
+
+  // Return the rendered promise.
+  return Promise.resolve(undefined);
+}
+
+/**
+ * Render an image into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export function renderImage(options: IRenderImageOptions): Promise<void> {
+  // Unpack the options.
+  const { host, mimeType, source, width, height, needsBackground, unconfined } =
+    options;
+
+  // Clear the content in the host.
+  host.textContent = '';
+
+  // Create the image element.
+  const img = document.createElement('img');
+
+  // Set the source of the image.
+  img.src = `data:${mimeType};base64,${source}`;
+
+  // Set the size of the image if provided.
+  if (typeof height === 'number') {
+    img.height = height;
+  }
+  if (typeof width === 'number') {
+    img.width = width;
+  }
+
+  if (needsBackground === 'light') {
+    img.classList.add('jp-needs-light-background');
+  } else if (needsBackground === 'dark') {
+    img.classList.add('jp-needs-dark-background');
+  }
+
+  if (unconfined === true) {
+    img.classList.add('jp-mod-unconfined');
+  }
+
+  // Add the image to the host.
+  host.appendChild(img);
+
+  // Return the rendered promise.
+  return Promise.resolve(undefined);
+}
+
+/**
+ * Render HTML into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export function renderHTML(options: IRenderHTMLOptions): Promise<void> {
+  // Unpack the options.
+  const {
+    host,
+    trusted,
+    sanitizer,
+    resolver,
+    linkHandler,
+    // translator,
+  } = options;
+  let source = options.source;
+
+  // translator = translator || nullTranslator;
+  // const trans = translator?.load('jupyterlab');
+  let originalSource = source;
+
+  // Bail early if the source is empty.
+  if (!source) {
+    host.textContent = '';
+    return Promise.resolve(undefined);
+  }
+
+  // Sanitize the source if it is not trusted. This removes all
+  // `<script>` tags as well as other potentially harmful HTML.
+  if (!trusted) {
+    originalSource = `${source}`;
+    source = sanitizer.sanitize(source);
+  }
+
+  // Set the inner HTML of the host.
+  host.innerHTML = source;
+
+  if (host.getElementsByTagName('script').length > 0) {
+    // If output it trusted, eval any script tags contained in the HTML.
+    // This is not done automatically by the browser when script tags are
+    // created by setting `innerHTML`.
+    if (trusted) {
+      evalInnerHTMLScriptTags(host);
+    } else {
+      const container = document.createElement('div');
+      const warning = document.createElement('pre');
+      warning.textContent =
+        'This HTML output contains inline scripts. Are you sure that you want to run arbitrary Javascript within your JupyterLab session?';
+      const runButton = document.createElement('button');
+      runButton.textContent = 'Run';
+      runButton.onclick = () => {
+        host.innerHTML = originalSource;
+        evalInnerHTMLScriptTags(host);
+        if (host.firstChild) {
+          host.removeChild(host.firstChild);
+        }
+      };
+      container.appendChild(warning);
+      container.appendChild(runButton);
+      host.insertBefore(container, host.firstChild);
+    }
+  }
+
+  // Handle default behavior of nodes.
+  handleDefaults(host, resolver);
+
+  // Patch the urls if a resolver is available.
+  let promise: Promise<void>;
+  if (resolver) {
+    promise = handleUrls(host, resolver, linkHandler);
+  } else {
+    promise = Promise.resolve(undefined);
+  }
+
+  // Return the final rendered promise.
+  return promise;
+}
+
+/**
+ * Render SVG into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export function renderSVG(options: IRenderSVGOptions): Promise<void> {
+  // Unpack the options.
+  const { host, unconfined } = options;
+  let source = options.source;
+  // Clear the content if there is no source.
+  if (!source) {
+    host.textContent = '';
+    return Promise.resolve(undefined);
+  }
+
+  // // Display a message if the source is not trusted.
+  // if (!trusted) {
+  //   host.textContent = 'Cannot display an untrusted SVG. Maybe you need to run the cell?';
+  //   return Promise.resolve(undefined);
+  // }
+
+  // Add missing SVG namespace (if actually missing)
+  const patt = '<svg[^>]+xmlns=[^>]+svg';
+  if (source.search(patt) < 0) {
+    source = source.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+
+  // Render in img so that user can save it easily
+  const img = new Image();
+  img.src = `data:image/svg+xml,${encodeURIComponent(source)}`;
+  host.appendChild(img);
+
+  if (unconfined === true) {
+    host.classList.add('jp-mod-unconfined');
+  }
+  return Promise.resolve();
+}
+
+/**
+ * Render Markdown into a host node.
+ *
+ * @param options - The options for rendering.
+ *
+ * @returns A promise which resolves when rendering is complete.
+ */
+export async function renderMarkdown(options: IRenderMarkdownOptions): Promise<void> {
+  // Unpack the options.
+  const { host, source, ...others } = options;
+
+  // Clear the content if there is no source.
+  if (!source) {
+    host.textContent = '';
+    return;
+  }
+
+  let html = '';
+
+  // Fallback if the application does not have any markdown parser.
+  html = `<pre>${source}</pre>`;
+
+  // Render HTML.
+  await renderHTML({
+    host,
+    source: html,
+    shouldTypeset: false,
+    ...others,
+  });
+
+  // Apply ids to the header nodes.
+  // headerAnchors(host);
+}

package/src/rendermime-factory.ts

@@ -0,0 +1,92 @@
+import {
+  HTMLRender,
+  ImageRender,
+  LatexRender,
+  MarkdownRender,
+  SVGRender,
+  TextRender,
+} from './components/index.js';
+import type { IRendererFactory } from './rendermime-protocol.js';
+
+/**
+ * A mime renderer factory for raw html.
+ */
+export const htmlRendererFactory: IRendererFactory = {
+  renderType: 'htmlRenderer',
+  safe: true,
+  mimeTypes: ['text/html'],
+  defaultRank: 50,
+  render: HTMLRender,
+};
+
+/**
+ * A mime renderer factory for images.
+ */
+export const imageRendererFactory: IRendererFactory = {
+  renderType: 'imageRenderer',
+  safe: true,
+  mimeTypes: ['image/bmp', 'image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+  defaultRank: 90,
+  render: ImageRender,
+};
+
+/**
+ * A mime renderer factory for LaTeX.
+ */
+export const latexRendererFactory: IRendererFactory = {
+  renderType: 'latexRenderer',
+  safe: true,
+  mimeTypes: ['text/latex'],
+  defaultRank: 70,
+  render: LatexRender,
+};
+
+/**
+ * A mime renderer factory for Markdown.
+ */
+export const markdownRendererFactory: IRendererFactory = {
+  renderType: 'markdownRenderer',
+  safe: true,
+  mimeTypes: ['text/markdown'],
+  defaultRank: 60,
+  render: MarkdownRender,
+};
+
+/**
+ * A mime renderer factory for svg.
+ */
+export const svgRendererFactory: IRendererFactory = {
+  renderType: 'svgRenderer',
+  safe: false,
+  mimeTypes: ['image/svg+xml'],
+  defaultRank: 80,
+  render: SVGRender,
+};
+
+/**
+ * A mime renderer factory for plain and jupyter console text data.
+ */
+export const textRendererFactory: IRendererFactory = {
+  renderType: 'textRenderer',
+  safe: true,
+  mimeTypes: [
+    'text/plain',
+    'application/vnd.jupyter.stdout',
+    'application/vnd.jupyter.stderr',
+  ],
+  defaultRank: 120,
+  render: TextRender,
+};
+
+/**
+ * The standard factories provided by the rendermime package.
+ */
+export const standardRendererFactories: IRendererFactory[] = [
+  htmlRendererFactory,
+  markdownRendererFactory,
+  latexRendererFactory,
+  svgRendererFactory,
+  imageRendererFactory,
+  // javaScriptRendererFactory,
+  textRendererFactory,
+];