X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/6917ea088f905ec57e16d8795ad0bcb191c38b52..refs/pull/3391/head:/resources/js/components/page-display.js

diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js
index 2be1c1c48..88254fd3a 100644
--- a/resources/js/components/page-display.js
+++ b/resources/js/components/page-display.js
@@ -1,5 +1,4 @@
 import Clipboard from "clipboard/dist/clipboard.min";
-import Code from "../services/code";
 import * as DOM from "../services/dom";
 import {scrollAndHighlightElement} from "../services/util";
 
@@ -9,9 +8,10 @@ class PageDisplay {
         this.elem = elem;
         this.pageId = elem.getAttribute('page-display');
 
-        Code.highlight();
+        window.importVersioned('code').then(Code => Code.highlight());
         this.setupPointer();
         this.setupNavHighlighting();
+        this.setupDetailsCodeBlockRefresh();
 
         // Check the hash on load
         if (window.location.hash) {
@@ -196,6 +196,16 @@ class PageDisplay {
             });
         }
     }
+
+    setupDetailsCodeBlockRefresh() {
+        const onToggle = event => {
+            const codeMirrors = [...event.target.querySelectorAll('.CodeMirror')];
+            codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh());
+        };
+
+        const details = [...this.elem.querySelectorAll('details')];
+        details.forEach(detail => detail.addEventListener('toggle', onToggle));
+    }
 }
 
 export default PageDisplay;