Add Support for JATS preview

Author: dragonstyle

src/command/preview/preview.ts

@@ -79,6 +79,7 @@ import { isJupyterNotebook } from "../../core/jupyter/jupyter.ts";
 import { watchForFileChanges } from "../../core/watch.ts";
 import {
   pandocBinaryPath,
+  resourcePath,
   textHighlightThemePath,
 } from "../../core/resources.ts";
 import { execProcess } from "../../core/process.ts";
@@ -89,6 +90,8 @@ import {
   inputExtensionDirs,
 } from "../../extension/extension.ts";
 import { kOutputFile } from "../../config/constants.ts";
+import { isJatsOutput } from "../../config/format.ts";
+import { kDefaultProjectFileContents } from "../../project/types/project-default.ts";
 
 interface PreviewOptions {
   port?: number;
@@ -642,17 +645,46 @@ function htmlFileRequestHandlerOptions(
       }
     },
     onFile: async (file: string, req: Request) => {
-      if (isHtmlContent(file)) {
+      const staticResponse = await staticResource(format, baseDir, file);
+      if (staticResponse) {
+        const resolveBody = () => {
+          if (staticResponse.injectClient) {
+            const client = reloader.clientHtml(
+              req,
+              inputFile,
+            );
+            const contents = new TextDecoder().decode(
+              staticResponse.contents,
+            );
+            return staticResponse.injectClient(contents, client);
+          } else {
+            return staticResponse.contents;
+          }
+        };
+        const body = resolveBody();
+
+        return {
+          body,
+          contentType: staticResponse.contentType,
+        };
+      } else if (isHtmlContent(file)) {
         // does the provide an alternate preview file?
         if (format.formatPreviewFile) {
           file = format.formatPreviewFile(file, format);
         }
         const fileContents = await Deno.readFile(file);
         return reloader.injectClient(req, fileContents, inputFile);
       } else if (isTextContent(file)) {
-        const html = await textPreviewHtml(file, req);
-        const fileContents = new TextEncoder().encode(html);
-        return reloader.injectClient(req, fileContents, inputFile);
+        if (isJatsOutput(format.pandoc)) {
+          const xml = await jatsPreviewXml(file, req);
+          return {
+            body: new TextEncoder().encode(xml),
+          };
+        } else {
+          const html = await textPreviewHtml(file, req);
+          const fileContents = new TextEncoder().encode(html);
+          return reloader.injectClient(req, fileContents, inputFile);
+        }
       }
     },
   };
@@ -693,8 +725,8 @@ function pdfFileRequestHandler(
         const url = isRStudioWorkbench()
           ? await rswURL(port, kPdfJsInitialPath)
           : isVSCodeServer()
-          ? vsCodeServerProxyUri()!.replace("{{port}}", `${port}`)
-            + kPdfJsInitialPath
+          ? vsCodeServerProxyUri()!.replace("{{port}}", `${port}`) +
+            kPdfJsInitialPath
           : "/" + kPdfJsInitialPath;
         return Promise.resolve(serveRedirect(url));
       } else {
@@ -777,3 +809,75 @@ async function textPreviewHtml(file: string, req: Request) {
     throw new Error();
   }
 }
+
+// Static reources provide a list of 'special' resources that we should
+// satisfy using internal resources
+const kStaticResources = [
+  {
+    name: "quarto-jats-preview.css",
+    contentType: "text/css",
+    isActive: isJatsOutput,
+  },
+  {
+    name: "quarto-jats-html.xsl",
+    contentType: "text/xsl",
+    isActive: isJatsOutput,
+    injectClient: (contents: string, client: string) => {
+      const protectedClient = client.replaceAll(
+        /(<style.*?>)|(<script.*?>)/g,
+        (substring: string) => {
+          return `${substring}\n<![CDATA[`;
+        },
+      ).replaceAll(
+        /(<\/style.*?>)|(<\/script.*?>)/g,
+        (substring: string) => {
+          return `]]>\n${substring}`;
+        },
+      ).replaceAll("data-micromodal-close", 'data-micromodal-close="true"');
+
+      const bodyContents = contents.replace(
+        "<!-- quarto-after-body -->",
+        protectedClient,
+      );
+      return new TextEncoder().encode(bodyContents);
+    },
+  },
+];
+
+const staticResource = async (
+  format: Format,
+  baseDir: string,
+  file: string,
+) => {
+  const filename = relative(baseDir, file);
+  const resource = kStaticResources.find((resource) => {
+    return resource.isActive(format.pandoc) && resource.name === filename;
+  });
+
+  if (resource) {
+    const path = resourcePath(join("preview", "jats", filename));
+    const contents = await Deno.readFile(path);
+    return {
+      ...resource,
+      contents,
+    };
+  }
+};
+
+async function jatsPreviewXml(file: string, _request: Request) {
+  const fileContents = await Deno.readTextFile(file);
+
+  // Attach the stylesheet
+  let xmlContents = fileContents.replace(
+    '<?xml version="1.0" encoding="utf-8" ?>',
+    '<?xml version="1.0" encoding="utf-8" ?>\n<?xml-stylesheet href="quarto-jats-html.xsl" type="text/xsl" ?>',
+  );
+
+  // Strip the DTD to disable the fetching of the DTD and validation (for preview)
+  xmlContents = xmlContents.replace(
+    /<!DOCTYPE((.|\n)*?)>/,
+    "",
+  );
+
+  return xmlContents;
+}

src/config/format.ts

@@ -97,6 +97,18 @@ export function isHtmlSlideOutput(format?: string | FormatPandoc) {
   ].includes(format);
 }
 
+export function isJatsOutput(format?: string | FormatPandoc) {
+  if (typeof (format) !== "string") {
+    format = format?.to || "html";
+  }
+  return [
+    "jats",
+    "jats_archiving",
+    "jats_articleauthoring",
+    "jats_publishing"
+  ].includes(format);
+}
+
 export function isPresentationOutput(format: FormatPandoc) {
   if (format.to) {
     return ["s5", "dzslides", "slidy", "slideous", "revealjs", "beamer", "pptx"]

src/core/http-devserver.ts

@@ -25,6 +25,10 @@ export interface HttpDevServer {
     file: Uint8Array,
     inputFile?: string,
   ) => FileResponse;
+  clientHtml: (
+    req: Request,
+    inputFile?: string,
+  ) => string;
   reloadClients: (reloadTarget?: string) => Promise<void>;
   hasClients: () => boolean;
 }
@@ -78,6 +82,13 @@ export function httpDevServer(
 
   let injectClientInitialized = false;
   let iframeURL: URL | undefined;
+  const getiFrameURL = (req: Request) => {
+    if (!injectClientInitialized) {
+      iframeURL = viewerIFrameURL(req);
+      injectClientInitialized = true;
+    }
+    return iframeURL;
+  };
 
   return {
     handle: (req: Request) => {
@@ -97,23 +108,29 @@ export function httpDevServer(
         return Promise.resolve(undefined);
       }
     },
+    clientHtml: (
+      req: Request,
+      inputFile?: string,
+    ): string => {
+      const script = devServerClientScript(
+        port,
+        inputFile,
+        isPresentation,
+        getiFrameURL(req),
+      );
+      return script;
+    },
     injectClient: (
       req: Request,
       file: Uint8Array,
       inputFile?: string,
     ): FileResponse => {
-      if (!injectClientInitialized) {
-        iframeURL = viewerIFrameURL(req);
-        injectClientInitialized = true;
-      }
-
       const script = devServerClientScript(
         port,
         inputFile,
         isPresentation,
-        iframeURL,
+        getiFrameURL(req),
       );
-
       const scriptContents = new TextEncoder().encode("\n" + script);
       const fileWithScript = new Uint8Array(
         file.length + scriptContents.length,

src/project/serve/watch.ts

@@ -354,6 +354,9 @@ export function watchProject(
     injectClient: (req: Request, file: Uint8Array, inputFile?: string) => {
       return devServer.injectClient(req, file, inputFile);
     },
+    clientHtml: (req: Request, inputFile?: string) => {
+      return devServer.clientHtml(req, inputFile);
+    },
     hasClients: () => devServer.hasClients(),
     reloadClients: async (output: boolean, reloadTarget?: string) => {
       await reloadClients({