@diplodoc/transform 4.1.0 → 4.2.0

package/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 {};

package/src/scss/print/code.scss

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

package/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;
+            }
+        }
+    }
+}

package/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;
+            }
+        }
+    }
+}

package/src/scss/print/note.scss

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

package/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;
+            }
+        }
+    }
+}

package/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;
+            }
+        }
+    }
+}

package/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';

package/src/scss/yfm.scss

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

package/src/transform/index.ts

@@ -43,7 +43,7 @@ function transform(originInput: string, options: OptionsType = {}) {
 
 export = transform;
 
-// eslint-disable-next-line @typescript-eslint/no-namespace -- backward compatibility
+// eslint-disable-next-line @typescript-eslint/no-namespace, no-redeclare -- backward compatibility
 namespace transform {
     export type Options = OptionsType;
     export type Output = OutputType;

package/src/transform/plugins/images/index.ts

@@ -87,6 +87,12 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
 
             while (j < childrenTokens.length) {
                 if (childrenTokens[j].type === 'image') {
+                    const didPatch = childrenTokens[j].attrGet('yfm_patched') || false;
+
+                    if (didPatch) {
+                        return;
+                    }
+
                     const imgSrc = childrenTokens[j].attrGet('src') || '';
 
                     if (imgSrc.endsWith('.svg') && !isExternalHref(imgSrc)) {
@@ -94,6 +100,8 @@ const index: MarkdownItPluginCb<Opts> = (md, opts) => {
                     } else {
                         replaceImageSrc(childrenTokens[j], state, opts);
                     }
+
+                    childrenTokens[j].attrSet('yfm_patched', '1');
                 }
 
                 j++;

package/src/transform/plugins/video/index.ts

@@ -5,6 +5,7 @@
 // Process @[osf](guid)
 
 import type MarkdownIt from 'markdown-it';
+// eslint-disable-next-line no-duplicate-imports
 import type {PluginWithOptions} from 'markdown-it';
 import type ParserInline from 'markdown-it/lib/parser_inline';
 import type Renderer from 'markdown-it/lib/renderer';
@@ -81,6 +82,7 @@ function tokenizeVideo(md: MarkdownIt, options: VideoFullOptions): Renderer.Rend
 }
 
 const EMBED_REGEX = /@\[([a-zA-Z].+)]\([\s]*(.*?)[\s]*[)]/im;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function videoEmbed(md: MarkdownIt, _options: VideoFullOptions): ParserInline.RuleInline {
     return (state, silent) => {
         const theState = state;

package/src/transform/yfmlint/index.ts

@@ -98,7 +98,7 @@ function yfmlint(opts: Options) {
 
 export = yfmlint;
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
+// eslint-disable-next-line @typescript-eslint/no-namespace, no-redeclare
 namespace yfmlint {
     export interface LintMarkdownFunctionOptions {
         input: string;

package/CHANGELOG.diplodoc.md

@@ -1,38 +0,0 @@
-# Changelog @diplodoc/transform@4.0.0
-
-## It's major update of @doc-tools/transform@3.11.0 with security changes.
-
-### New term's linter
-
-The main feature of term is generating a hidden content, that will be show on click. Terms plugins creates MarkadownIt tokens at place, where term was defined and it can brake our `@doc-tools/docs` navigation. Now `@diplodoc/transform` has new yfmlint rule: `no-term-definition-in-content`. There are several restrictions: - You can't define content between term-def - All term-def should be placed at the end of file.
-
-### Enabling `needToSanitizeHtml` by default
-
-The sanitizer includes default options with safe, allowed tags, and attributes. However, by default, both the `style` tag and the `style` attribute are also allowed. The values will be processed by the [cssfilter](https://github.com/leizongmin/js-css-filter) module to prevent XSS attacks. The cssfilter module includes a default CSS whitelist.
-
-You can override the options for sanitizer like this:
-
-```javascript
-const transform = require('@doc-tools/transform');
-const {defaultOptions} = require('@doc-tools/transform/lib/sanitize');
-
-const sanitizeOptions = Object.assign({}, defaultOptions);
-
-// Allow css property
-sanitizeOptions.cssWhiteList['position'] = true;
-
-// Disallow css property
-delete sanitizeOptions.cssWhiteList['color'];
-
-// Disable `style` tag
-sanitizeOptions.allowedTags = sanitizeOptions.allowedTags.filter((tag) => tag !== 'style');
-
-// Disable `style` attribute
-sanitizeOptions.allowedAttributes['*'] = sanitizeOptions.allowedAttributes['*'].filter(
-  (attr) => attr !== 'style',
-);
-
-const {
-  result: {html},
-} = transform(content, {sanitizeOptions});
-```