fix(drawio): diagrams not working in include pages (#109)

* fix(drawio): diagrams not working in include pages * fix(tests): fixDrawio unit test
Sanofi-IADC · Apr 24, 2021 · 4a493a0 · 4a493a0
1 parent 596b06a
commit 4a493a0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/proxy-page/steps/fixDrawio.ts b/src/proxy-page/steps/fixDrawio.ts
@@ -15,13 +15,27 @@ export default (config: ConfigService): Step => {
         const thisBlock = $(element).html();
         if (thisBlock) {
           // Finding a block with the pattern diagramDisplayName=<name-file> is enought the determine the name of the file
-          const foundBlock = thisBlock.match(/diagramDisplayName=s*([^|]*)/g);
+          // const foundBlock = thisBlock.match(/diagramDisplayName=s*([^|]*)/g);
+          const foundBlock = thisBlock.match(
+            /pageId=s*([^|]*)|diagramDisplayName=s*([^|]*)/g,
+          );
           if (foundBlock) {
+            // $(element).prepend(
+            //   `<figure><img class="img-zoomable" src="${webBasePath}/wiki/download/attachments/${context.getPageId()}/${foundBlock[0].replace(
+            //     /diagramDisplayName=s*([^|]*)/g,
+            //     '$1.png',
+            //   )}" alt="${foundBlock[0]}" /></figure>`,
+            // );
             $(element).prepend(
-              `<figure><img class="img-zoomable" src="${webBasePath}/wiki/download/attachments/${context.getPageId()}/${foundBlock[0].replace(
-                /diagramDisplayName=s*([^|]*)/g,
-                '$1.png',
-              )}" alt="${foundBlock[0]}" /></figure>`,
+              `<figure><img class="img-zoomable" 
+                  src="${webBasePath}/wiki/download/attachments/${foundBlock[0].replace(
+                /pageId=s*([^|]*)|diagramDisplayName=s*([^|]*)/g,
+                '$1',
+              )}/${foundBlock[1].replace(
+                /pageId=s*([^|]*)|diagramDisplayName=s*([^|]*)/g,
+                '$2.png',
+              )}" 
+                  alt="${foundBlock[1]}" /></figure>`,
             );
           }
         }

diff --git a/tests/unit/steps/fixDrawio.spec.ts b/tests/unit/steps/fixDrawio.spec.ts
@@ -15,7 +15,7 @@ const example =
   `<script>document.addEventListener('DOMContentLoaded', function () {new Zooming({}).listen('.img-zoomable');new Zooming({}).listen('.confluence-embedded-image')})</script><script>var coll = document.getElementsByClassName("expand-control");        var i;        for (i = 0; i < coll.length; i++) {          coll[i].addEventListener("click", function() {            this.classList.toggle("active");            var content = this.nextElementSibling;            if (content.style.display === "block") {              content.style.display = "none";            } else {              content.style.display = "block";            }          });        }</script></div>` +
   `</body></html>`;
 
-const image0 = `<img class="img-zoomable" src="/cpv/wiki/download/attachments/123456/Test Styles Content Confluence.drawio.png" alt="diagramDisplayName=Test Styles Content Confluence.drawio">`;
+const image0 = `<img class="img-zoomable" src="/cpv/wiki/download/attachments/473006389/Test Styles Content Confluence.drawio.png" alt="diagramDisplayName=Test Styles Content Confluence.drawio">`;
 const image1 = `<img class="img-zoomable" src="/cpv/wiki/download/attachments/123456/MS-Whispr-iObeya-Architecture-079f65948d008454029450fc73f0e032de29ca68.png" alt="diagramDisplayName=MS-Whispr-iObeya-Architecture">`;
 
 describe('ConfluenceProxy / fixDrawio', () => {