Add (optional) excalidraw custom asset path (#1654)

Co-authored-by: Guillaume Grossetie <[email protected]>
yuzutech · Oct 13, 2023 · 2965a67 · 2965a67
1 parent cc0a6d1
commit 2965a67
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/docs/modules/setup/pages/configuration.adoc b/docs/modules/setup/pages/configuration.adoc
@@ -218,6 +218,14 @@ TIP: Keep in mind that browsers also have a URI limit on `<img>` tags.
 Most modern browsers https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers/417184#417184[support a URI length greater than 64000] on `<img>` tags but this value is probably a bit excessive.
 We recommend to use a maximum length that's not greater than 8192 and not greater than 5120 if you are supporting IE 11.
 
+== Excalidraw static assets
+
+By default, Excalidraw loads assets from a public CDN (https://unpkg.com).
+
+It's possible to change this behavior by setting the `KROKI_EXCALIDRAW_ASSET_PATH` environment variable, which is empty by default.
+
+More information about Excalidraw' static assets can be found here: https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation
+
 == Enabling SSL on the server
 
 By default, SSL/TLS is not enabled on the server but you can enable it by setting `KROKI_SSL` environment variable to `true`.

diff --git a/excalidraw/Dockerfile b/excalidraw/Dockerfile
@@ -12,6 +12,7 @@ WORKDIR /usr/local/kroki/
 RUN mkdir -p /usr/local/kroki/node && chown kroki:kroki -R /usr/local/kroki
 
 ENV KROKI_EXCALIDRAW_PAGE_URL=file:///usr/local/kroki/assets/index.html
+ENV KROKI_EXCALIDRAW_ASSET_PATH=
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/lib/chromium/chrome
 #ENV DEBUG="puppeteer:*"
 ENV LEVEL="info"

diff --git a/excalidraw/assets/index.html b/excalidraw/assets/index.html
@@ -3,6 +3,5 @@
 <body>
   <script src="./excalidraw/react.production.min.js" charset="utf-8"></script>
   <script src="./excalidraw/react-dom.production.min.js" charset="utf-8"></script>
-  <script src="./excalidraw/excalidraw.production.min.js" charset="utf-8"></script>
 </body>
 </html>
diff --git a/excalidraw/src/worker.js b/excalidraw/src/worker.js
@@ -9,6 +9,7 @@ export default class Worker {
   constructor (browserInstance) {
     this.browserWSEndpoint = browserInstance.wsEndpoint()
     this.pageUrl = process.env.KROKI_EXCALIDRAW_PAGE_URL || `file://${path.join(__dirname, '..', 'assets', 'index.html')}`
+    this.assetPath = process.env.KROKI_EXCALIDRAW_ASSET_PATH || ''
   }
 
   async convert (task) {
@@ -20,6 +21,13 @@ export default class Worker {
     try {
       await page.setViewport({ height: 800, width: 600 })
       await page.goto(this.pageUrl)
+      await page.addScriptTag({
+        content: `window.EXCALIDRAW_ASSET_PATH="${this.assetPath}"`
+      })
+      // excalidraw.production.min.js is using the EXCALIDRAW_ASSET_PATH variable.
+      await page.addScriptTag({
+        path: `${path.join(__dirname, '..', 'assets', 'excalidraw', 'excalidraw.production.min.js')}`
+      })
       // QUESTION: should we reuse the page for performance reason ?
       return await page.evaluate(async (definition) => {
         const svgElement = await window.ExcalidrawLib.exportToSvg(JSON.parse(definition))