fix: update print handling and improve file tree interactions

assets/css/_page/_single/_code.scss

@@ -281,7 +281,7 @@ pre {
       }
 
       @include media('print') {
-        top: initial;
+        top: initial !important;
       }
     }
 
@@ -705,7 +705,7 @@ pre {
     }
 
     @include media('print') {
-      top: initial;
+      top: initial !important;
     }
   }
 

assets/css/_page/_single/_shortcodes/_file-tree.scss

@@ -56,6 +56,10 @@
           flex-shrink: 0;
         }
 
+        .file-tree-label__inner {
+          word-break: break-all;
+        }
+
         &.is-highlighted {
           color: fixit-var(global-link-hover-color);
         }

assets/js/lib/file-tree.js

@@ -2,7 +2,7 @@
  * FileTree class to handle file tree interactions
  */
 export default class FileTree {
-  init(target = document) {
+  static init(target = document) {
     target.querySelectorAll('.file-tree-toggle:not([data-init])').forEach((label) => {
       label.addEventListener('click', (e) => {
         e.stopPropagation()
@@ -18,7 +18,7 @@ export default class FileTree {
     this.updateLineHeight(target)
   }
 
-  updateLineHeight(target = document) {
+  static updateLineHeight(target = document) {
     const uls = target.querySelectorAll('.file-tree .file-tree')
     uls.forEach((ul) => {
       const parentItem = ul.closest('.file-tree-item.is-collapsed')
@@ -47,4 +47,14 @@ export default class FileTree {
       ul.style.setProperty('--fi-file-tree-line-height', `${height}px`)
     })
   }
+
+  static expandAll(target = document) {
+    target.querySelectorAll('.file-tree-folder').forEach(folder => folder.classList.remove('is-collapsed'))
+    this.updateLineHeight(target)
+  }
+
+  static collapseAll(target = document) {
+    target.querySelectorAll('.file-tree-folder').forEach(folder => folder.classList.add('is-collapsed'))
+    this.updateLineHeight(target)
+  }
 }

assets/js/theme.js

@@ -6,7 +6,6 @@ class FixIt {
   constructor() {
     this.config = window.config;
     this.isDark = document.documentElement.dataset.theme === 'dark';
-    this.fileTree = new FileTree();
     this.newScrollTop = Util.getScrollTop();
     this.oldScrollTop = this.newScrollTop;
     this.scrollEventSet = new Set();
@@ -14,6 +13,7 @@ class FixIt {
     this.switchThemeEventSet = new Set();
     this.clickMaskEventSet = new Set();
     this.beforeprintEventSet = new Set();
+    this.afterprintEventSet = new Set();
     this.disableScrollEvent = false;
     window.objectFitImages && objectFitImages();
   }
@@ -1317,7 +1317,7 @@ class FixIt {
 
   initTabEvents(target = document) {
     target.addEventListener('tab-container-changed', () => {
-      this.fileTree.updateLineHeight(target);
+      FileTree.updateLineHeight(target);
       window.FixItMermaid?.init?.();
     }, false);
   }
@@ -1392,7 +1392,7 @@ class FixIt {
     this.initMathJax();
     this.initJsonViewer();
     this.initTabEvents(target);
-    this.fileTree.init(target);
+    FileTree.init(target);
     window.FixItMermaid?.init?.();
     window.FixItAPlayer?.init?.();
   }
@@ -1581,15 +1581,54 @@ class FixIt {
     }, false);
   }
 
-  beforeprint() {
+  initPrint() {
     window.addEventListener('beforeprint', () => {
-      Util.forEach(document.querySelectorAll('.chroma'), ($el) => {
-        $el.classList.toggle('open', true)
+      const $content = document.getElementById('content');
+      // revert code tabs to code blocks for better printing support
+      Util.forEach($content.querySelectorAll('.code-tabs'), ($codeTabs) => {
+        // restore action buttons to the active tab's code-header before reverting
+        const $actions = $codeTabs.querySelector('.tabs-actions');
+        const $activeBlock = $codeTabs.querySelector('.code-block.active');
+        if ($actions && $activeBlock) {
+          const $codeHeader = $activeBlock.querySelector('.code-header');
+          if ($codeHeader) {
+            Array.from($actions.children).forEach(btn => $codeHeader.appendChild(btn));
+          }
+        }
+        const $codeBlocks = $codeTabs.querySelectorAll('.code-block');
+        $codeBlocks.forEach(($codeBlock) => {
+          $codeTabs.parentElement.insertBefore($codeBlock, $codeTabs);
+        });
+        $codeTabs.parentElement.removeChild($codeTabs);
+      });
+      Util.forEach($content.querySelectorAll('.code-block'), ($el) => {
+        // line wrapping
+        $el.classList.add('line-wrapping');
+        // expand all code blocks
+        $el.classList.remove('is-collapsed');
+        // expand code preview
+        if ($el.querySelector('.code-expand-btn')) {
+          $el.classList.add('is-expanded');
+        }
+      });
+      FileTree.expandAll($content);
+      Util.forEach($content.querySelectorAll('.details'), ($el) => {
+        $el.classList.add('open');
+      });
+      Util.forEach($content.querySelectorAll('details'), ($el) => {
+        $el.setAttribute('open', '');
       });
       for (let event of this.beforeprintEventSet) {
         event();
       }
     }, false);
+
+    window.addEventListener('afterprint', () => {
+      this.initCodeTabs();
+      for (let event of this.afterprintEventSet) {
+        event();
+      }
+    }, false);
   }
 
   init() {
@@ -1625,7 +1664,7 @@ class FixIt {
         this.onScroll();
         this.onResize();
         this.onClickMask();
-        this.beforeprint();
+        this.initPrint();
       }, 100);
     } catch (err) {
       console.error(err);

layouts/_partials/init/index.html

@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.4-20260318072121-789973da" -}}
+{{- hugo.Store.Set "version" "v0.4.4-20260319034216-0bf5d3a4" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}