feat: added print styles and js for plugins

esbuild/build.js

@@ -20,24 +20,35 @@ const common = {
 };
 
 (async function buildCss() {
-    await build({
-        ...common,
-        entryPoints: ['src/scss/yfm.scss'],
-        outfile: 'dist/css/yfm.css',
-        format: 'iife',
-        plugins: [
-            sassPlugin({
-                async transform(source) {
-                    const {css} = await postcss([
-                        autoprefixer({cascade: false}),
-                        postcssPresetEnv({stage: 0}),
-                    ]).process(source, {from: undefined});
-
-                    return css;
-                },
-            }),
-        ],
-    });
+    const plugins = [
+        sassPlugin({
+            async transform(source) {
+                const {css} = await postcss([
+                    autoprefixer({cascade: false}),
+                    postcssPresetEnv({stage: 0}),
+                ]).process(source, {from: undefined});
+
+                return css;
+            },
+        }),
+    ];
+
+    await Promise.all([
+        build({
+            ...common,
+            entryPoints: ['src/scss/yfm.scss'],
+            outfile: 'dist/css/yfm.css',
+            format: 'iife',
+            plugins,
+        }),
+        build({
+            ...common,
+            entryPoints: ['src/scss/print.scss'],
+            outfile: 'dist/css/print.css',
+            format: 'iife',
+            plugins,
+        })
+    ]);
 
     await build({
         ...common,
@@ -48,11 +59,18 @@ const common = {
 })();
 
 (async function buildJs() {
-    await build({
-        ...common,
-        entryPoints: ['src/js/index.ts'],
-        outfile: 'dist/js/yfm.js',
-    });
+    await Promise.all([
+        build({
+            ...common,
+            entryPoints: ['src/js/index.ts'],
+            outfile: 'dist/js/yfm.js',
+        }),
+        build({
+            ...common,
+            entryPoints: ['src/js/print/index.ts'],
+            outfile: 'dist/js/print.js',
+        })
+    ]);
 
     await build({
         ...common,

src/js/print/index.ts

@@ -0,0 +1 @@
+import './table';

src/js/print/table.ts

@@ -0,0 +1,62 @@
+const Selector = {
+    WRAPPED_TABLE: '.pdf .yfm-table-container table',
+    TABLE: '.pdf table',
+};
+const Padding = {
+    BOTTOM: 20,
+};
+
+function resizeElement(element: HTMLElement) {
+    const availableWidth = element.parentElement?.offsetWidth;
+    const contentWidth = (element.firstElementChild as HTMLElement).offsetWidth;
+
+    if (!availableWidth) {
+        return;
+    }
+
+    const needScale = contentWidth > availableWidth;
+
+    if (needScale) {
+        const scale = availableWidth / contentWidth;
+
+        element.style.transform = `scale(${scale})`;
+    }
+
+    element.parentElement.style.height = `${
+        element.getBoundingClientRect().height + Padding.BOTTOM
+    }px`;
+}
+
+function resizeElements() {
+    document.querySelectorAll(Selector.WRAPPED_TABLE).forEach((element) => {
+        resizeElement(element as HTMLElement);
+    });
+}
+
+function wrapTables() {
+    const tables = document.querySelectorAll(Selector.TABLE);
+
+    for (let i = 0; i < tables.length; i++) {
+        const table = tables[i];
+
+        const parent = table.parentNode;
+
+        if (!parent) {
+            continue;
+        }
+
+        const wrapper = document.createElement('div');
+        parent.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+        wrapper.classList.add('yfm-table-container');
+    }
+}
+
+if (typeof document !== 'undefined') {
+    window.addEventListener('load', () => {
+        wrapTables();
+        resizeElements();
+    });
+}
+
+export {};

src/scss/print.scss

@@ -0,0 +1,6 @@
+@import 'print/code';
+@import 'print/common';
+@import 'print/cut';
+@import 'print/note';
+@import 'print/table';
+@import 'print/tabs';

src/scss/print/code.scss

@@ -0,0 +1,9 @@
+@media print {
+    .yfm {
+        .yfm-clipboard {
+            & > pre > code {
+                white-space: pre-wrap;
+            }
+        }
+    }
+}

src/scss/print/common.scss

@@ -0,0 +1,13 @@
+@media print {
+    .yfm {
+        .yfm-page__delimeter {
+            display: none;
+        }
+
+        h1, h2 {
+            &[data-original-article] {
+                page-break-before: always;
+            }
+        }
+    }
+}

src/scss/print/cut.scss

@@ -0,0 +1,18 @@
+@media print {
+    .yfm {
+        .yfm-cut {
+            &-title {
+                padding-left: 0;
+
+                &:before {
+                    display: none;
+                }
+            }
+
+            &-content {
+                height: auto;
+                padding: 5px 0 15px 30px;
+            }
+        }
+    }
+}

src/scss/print/note.scss

@@ -0,0 +1,7 @@
+@media print {
+    .yfm {
+        .yfm-note {
+            page-break-inside: avoid;
+        }
+    }
+}

src/scss/print/table.scss

@@ -0,0 +1,24 @@
+.yfm {
+    .yfm-table-container {
+        position: relative;
+
+        & > table {
+            overflow: initial;
+            position: absolute;
+            top: 0;
+            left: 0;
+            max-width: initial;
+            transform-origin: top left;
+
+            thead {
+                display: table-row-group;
+            }
+
+            th, td {
+                page-break-inside: avoid;
+                white-space: pre-wrap;
+                text-overflow: initial;
+            }
+        }
+    }
+}

src/scss/print/tabs.scss

@@ -0,0 +1,20 @@
+@media print {
+    .yfm {
+        .yfm-tab {
+            &-list {
+                display: none;
+            }
+
+            &-panel:before {
+                content: attr(data-title);
+                margin-bottom: -1px;
+                margin-right: 20px;
+                border-bottom: 2px solid transparent;
+                line-height: 33px;
+                font-weight: 700;
+                outline: 0;
+                cursor: pointer;
+            }
+        }
+    }
+}

src/scss/yfm.scss

@@ -3,7 +3,6 @@
 @import 'anchor';
 @import 'highlight';
 @import 'code';
-@import 'print';
 @import 'cut';
 @import 'file';
 @import 'term';