Fix Mermaid block diagrams and clipped labels on published sites (#4687)

.changeset/mermaid-block-diagrams.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix Mermaid block diagrams falling back to a code block on published sites.

.changeset/mermaid-clipped-labels.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix long Mermaid labels being clipped instead of wrapping at some browser zoom levels.

bun.lock

@@ -343,6 +343,7 @@
   "patchedDependencies": {
     "decode-named-character-reference@1.0.2": "patches/decode-named-character-reference@1.0.2.patch",
     "next@16.3.8": "patches/next@16.3.8.patch",
+    "mermaid@11.14.0": "patches/mermaid@11.14.0.patch",
   },
   "overrides": {
     "@codemirror/state": "6.4.1",

package.json

@@ -67,6 +67,7 @@
     "patchedDependencies": {
         "decode-named-character-reference@1.0.2": "patches/decode-named-character-reference@1.0.2.patch",
         "@vercel/next@4.4.2": "patches/@vercel%2Fnext@4.4.2.patch",
-        "next@16.3.8": "patches/next@16.3.8.patch"
+        "next@16.3.8": "patches/next@16.3.8.patch",
+        "mermaid@11.14.0": "patches/mermaid@11.14.0.patch"
     }
 }

packages/gitbook/scripts/generate-mermaid-runtime.ts

@@ -1,5 +1,6 @@
 import { build } from 'bun';
-import { mkdir, rename, rm } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, rename, rm } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -12,14 +13,20 @@ const temporaryDir = join(outputDir, '.build');
 const require = createRequire(import.meta.url);
 const mermaidPackage = require('mermaid/package.json') as { version: string };
 const zenumlPackage = require('@mermaid-js/mermaid-zenuml/package.json') as { version: string };
+const mermaidPatch = await readFile(
+    join(scriptDir, `../../../patches/mermaid@${mermaidPackage.version}.patch`)
+).catch(() => null);
+const mermaidPatchSuffix = mermaidPatch
+    ? `-patch.${createHash('sha256').update(mermaidPatch).digest('hex').slice(0, 8)}`
+    : '';
 
-// The runtime URL is served as immutable, it has to change whenever the bundled versions change.
+// The runtime URL is served as immutable, it has to change whenever the bundled versions or patch change.
 if (
     MERMAID_RUNTIME_PATH !==
-    `mermaid/mermaid@${mermaidPackage.version}-zenuml@${zenumlPackage.version}.mjs`
+    `mermaid/mermaid@${mermaidPackage.version}${mermaidPatchSuffix}-zenuml@${zenumlPackage.version}.mjs`
 ) {
     throw new Error(
-        'Update MERMAID_RUNTIME_PATH for the installed mermaid and @mermaid-js/mermaid-zenuml versions'
+        'Update MERMAID_RUNTIME_PATH for the installed mermaid and @mermaid-js/mermaid-zenuml versions and the mermaid patch'
     );
 }
 

packages/gitbook/src/components/DocumentView/CodeBlock/mermaid-runtime-path.ts

@@ -1 +1 @@
-export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-zenuml@0.2.2.mjs';
+export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-patch.caefc3e9-zenuml@0.2.2.mjs';

patches/mermaid@11.14.0.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs b/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
+index f37722f2f65d3c49904ec704998a9a0ce6f01d21..0b97ddef583d120235530222990f08db3de83e5d 100644
+--- a/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
++++ b/dist/chunks/mermaid.core/blockDiagram-DXYQGD6D.mjs
+@@ -3658,7 +3658,7 @@ async function calculateBlockSize(elem, block, db2) {
+   const nodeEl = await insertNode(elem, node, { config: config2 });
+   const boundingBox = nodeEl.node().getBBox();
+   const obj = db2.getBlock(node.id);
+-  obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
++  obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0 };
+   db2.setBlock(obj);
+   nodeEl.remove();
+ }
+diff --git a/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs b/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
+index 6f5ff605824cec370f0ff1077fe3005823fa59f5..1468e9b37b3c1ef3449774b816202e3143174476 100644
+--- a/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
++++ b/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
+@@ -308,7 +308,7 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false,
+     div.attr("class", "labelBkg");
+   }
+   let bbox = div.node().getBoundingClientRect();
+-  if (bbox.width === width) {
++  if (Math.round(bbox.width) === width) {
+     div.style("display", "table");
+     div.style("white-space", "break-spaces");
+     div.style("width", width + "px");