fix: Code blocks in HTML output transformer

vriteio · May 7, 2024 · 916896b · 916896b
1 parent 86961ba
commit 916896b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/apps/web/src/views/editor/menus/export/index.tsx b/apps/web/src/views/editor/menus/export/index.tsx
@@ -61,13 +61,7 @@ const ExportMenu: Component<ExportMenuProps> = (props) => {
       if (!content) return;
 
       if (type === "html") {
-        return formatCode(
-          htmlOutputTransformer(content).replace(/<code>((?:.|\n)+?)<\/code>/g, (_, code) => {
-            return `<code>${escapeHTML(code)}</code>`;
-          }),
-          "html",
-          prettierConfig
-        );
+        return formatCode(htmlOutputTransformer(content), "html", prettierConfig);
       }
 
       if (type === "md") {

diff --git a/packages/sdk/javascript/package.json b/packages/sdk/javascript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vrite/sdk",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "private": false,
   "description": "JavaScript SDK and API client for Vrite - open-source developer content platform",
   "license": "MIT",

diff --git a/packages/sdk/javascript/src/transformers/output-transformers.ts b/packages/sdk/javascript/src/transformers/output-transformers.ts
@@ -227,6 +227,14 @@ const gfmOutputTransformer = createOutputTransformer<string>((contentNode) => {
 });
 const htmlOutputTransformer = createOutputTransformer<string>((contentNode) => {
   const contentWalker = createContentWalker(contentNode);
+  const escapeHTML = (input: string): string => {
+    return input
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
   const stringifyAttributes = (
     attributes: Record<string, string | boolean | number | undefined>
   ): string => {
@@ -264,7 +272,7 @@ const htmlOutputTransformer = createOutputTransformer<string>((contentNode) => {
             output = `<strong>${output}</strong>`;
             break;
           case "code":
-            output = `<code>${output}</code>`;
+            output = `<code>${escapeHTML(output)}</code>`;
             break;
           case "italic":
             output = `<em>${output}</em>`;
@@ -360,9 +368,11 @@ const htmlOutputTransformer = createOutputTransformer<string>((contentNode) => {
       case "codeBlock":
         return `<pre ${stringifyAttributes({
           lang: nodeWalker.node.attrs?.lang
-        })}><code>${(nodeWalker as JSONContentNodeWalker<JSONContentNode["codeBlock"]>).children
-          .map(transformContentNode)
-          .join("")}</code></pre>`;
+        })}><code>${escapeHTML(
+          (nodeWalker as JSONContentNodeWalker<JSONContentNode["codeBlock"]>).children
+            .map(transformContentNode)
+            .join("")
+        )}</code></pre>`;
       case "image":
         return `<img ${stringifyAttributes({
           src: nodeWalker.node.attrs?.src,