Render plain-text without quotations (#103)

Co-authored-by: Rowan Cockett <[email protected]>

src/inlineExpression.tsx

@@ -3,7 +3,7 @@ import { useJupyterCell } from './JupyterCellProvider';
 import { SingletonLayout, Widget } from '@lumino/widgets';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IExpressionResult, isOutput } from './userExpressions';
-import { getUserExpressions } from './metadata';
+import { getUserExpressions, IUserExpressionMetadata } from './metadata';
 import { StaticNotebook } from '@jupyterlab/notebook';
 
 export interface IRenderedExpressionOptions {
@@ -85,47 +85,79 @@ export class RenderedExpression extends Widget {
   }
 }
 
-export function InlineRenderer({ value }: { value?: string }): JSX.Element {
-  const ref = useRef<HTMLDivElement>(null);
-  const { cell } = useJupyterCell();
-  // Load the information from the MystMarkdownCell
-  const metadata = getUserExpressions(cell);
-  const trusted = cell?.model.trusted ?? false;
-  // We use the notebook rendermime directly
-  const rendermime = (cell?.parent as StaticNotebook).rendermime;
+function PlainTextRenderer({ content }: { content: string }) {
+  content = content.replace(/^(["'])(.*)\1$/, '$2');
+  return <span>{content}</span>;
+}
 
+function MimeBundleRenderer({
+  rendermime,
+  trusted,
+  expressionMetadata
+}: {
+  rendermime: IRenderMimeRegistry;
+  trusted: boolean;
+  expressionMetadata: IUserExpressionMetadata;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
   // Create a single RenderedExpression when the rendermime is available
   const renderer = useMemo<RenderedExpression | undefined>(() => {
     if (!rendermime) return undefined;
     return new RenderedExpression({
-      expression: value as string,
+      expression: expressionMetadata.expression,
       trusted,
       rendermime,
       safe: 'any'
     });
   }, [rendermime]);
 
-  // Find the expressionResult that is for this node
-  const expressionResult = metadata?.find(p => p.expression === value);
-
   // Attach and render the widget when the expression result changes
   useEffect(() => {
-    if (!ref.current || !renderer || !expressionResult) return;
+    if (!ref.current || !renderer || !expressionMetadata) return;
     if (!renderer.isAttached) Widget.attach(renderer, ref.current);
-    renderer.renderExpression(expressionResult.result);
-  }, [ref, renderer, expressionResult]);
+    renderer.renderExpression(expressionMetadata.result);
+  }, [ref, renderer, expressionMetadata]);
 
   // Clean up the renderer when the component is removed from the dom
   useEffect(() => {
     if (!renderer) return;
     return () => renderer.dispose();
   }, [renderer]);
-
-  // TODO: improve the renderer when no result is found in the metadata
-  if (!expressionResult) return <code>{value}</code>;
-  const mimeBundle = expressionResult.result.data as Record<string, string>;
-  // TODO: we can do a simple plain-text renderer here in react.
-  const text = mimeBundle?.['text/plain'];
-  console.debug('Rendering react', value, '=', text);
+  console.debug(`Rendering react ${expressionMetadata.expression}`);
   return <div ref={ref} className="not-prose inline-block" />;
 }
+
+function isPlainTextMimeBundle(mimeBundle: Record<string, string>): boolean {
+  return (
+    Object.keys(mimeBundle).length === 1 && mimeBundle['text/plain'] !== null
+  );
+}
+
+export function InlineRenderer({ value }: { value?: string }): JSX.Element {
+  const { cell } = useJupyterCell();
+  // Load the information from the MystMarkdownCell
+  const metadata = getUserExpressions(cell);
+  const trusted = cell?.model.trusted ?? false;
+  // We use the notebook rendermime directly
+  const rendermime = (cell?.parent as StaticNotebook).rendermime;
+
+  // Find the expressionResult that is for this node
+  const expressionMetadata = metadata?.find(p => p.expression === value);
+  const mimeBundle = expressionMetadata?.result.data as Record<string, string>;
+
+  if (!mimeBundle || !expressionMetadata) {
+    return <code>{value}</code>;
+  }
+  if (isPlainTextMimeBundle(mimeBundle)) {
+    return (
+      <PlainTextRenderer content={mimeBundle['text/plain']}></PlainTextRenderer>
+    );
+  }
+  return (
+    <MimeBundleRenderer
+      rendermime={rendermime}
+      trusted={trusted}
+      expressionMetadata={expressionMetadata}
+    ></MimeBundleRenderer>
+  );
+}