@diplodoc/transform 4.68.3 → 4.69.1

package/lib/plugins/code.js

@@ -1,44 +1,59 @@
 "use strict";
 /* eslint-disable max-len */
 const utils_1 = require("./utils");
-const wrapInClipboard = (element, id) => {
+const wrapInFloatingContainer = (element, id, { lineWrapping }) => {
+    const wrappingButton = lineWrapping
+        ? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
+                <svg width="16" height="16" viewBox="0 0 16 16" class="yfm-code-icon yfm-wrapping-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="currentColor"
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M2.47 11.28a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 1.06L4.81 10H9a3.25 3.25 0 0 0 0-6.5H8A.75.75 0 0 1 8 2h1a4.75 4.75 0 1 1 0 9.5H4.81l1.72 1.72a.75.75 0 1 1-1.06 1.06z"
+                    />
+                </svg>
+            </button>`
+        : '';
     return `
-    <div class="yfm-clipboard">
+    <div class="yfm-code-floating-container">
         ${element}
-        <button class="yfm-clipboard-button" aria-label="Copy">
-            <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
-                <path
-                    fill="currentColor"
-                    d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-                />
-                <path
-                    stroke="currentColor"
-                    fill="transparent"
-                    stroke-width="1.5"
-                    d="M9.5 13l3 3l5 -5"
-                    visibility="hidden"
-                >
-                    <animate
-                        id="visibileAnimation-${id}"
-                        attributeName="visibility"
-                        from="hidden"
-                        to="visible"
-                        dur="0.2s"
-                        fill="freeze"
-                        begin=""
-                    />
-                    <animate
-                        id="hideAnimation-${id}"
-                        attributeName="visibility"
-                        from="visible"
-                        to="hidden"
-                        dur="1s"
-                        begin="visibileAnimation-${id}.end+1"
-                        fill="freeze"
+        <div class="yfm-code-floating">
+            ${wrappingButton}
+            <button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
+                <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
+                    <path
+                        fill="currentColor"
+                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
                     />
-                </path>
-            </svg>
-        </button>
+                    <path
+                        stroke="currentColor"
+                        fill="transparent"
+                        stroke-width="1.5"
+                        d="M9.5 13l3 3l5 -5"
+                        visibility="hidden"
+                    >
+                        <animate
+                            id="visibileAnimation-${id}"
+                            attributeName="visibility"
+                            from="hidden"
+                            to="visible"
+                            dur="0.2s"
+                            fill="freeze"
+                            begin=""
+                        />
+                        <animate
+                            id="hideAnimation-${id}"
+                            attributeName="visibility"
+                            from="visible"
+                            to="hidden"
+                            dur="1s"
+                            begin="visibileAnimation-${id}.end+1"
+                            fill="freeze"
+                        />
+                    </path>
+                </svg>
+            </button>
+        </div>
     </div>
 `;
 };
@@ -52,7 +67,7 @@ function termReplace(str, env, escape) {
     const termCode = str.replace(reg, (_match, p1, _p2, p3) => `<i class="yfm yfm-term_title" term-key=":${p3}" id="${(0, utils_1.generateID)()}">${p1}</i>`);
     return termCode || str;
 }
-function addLineNumbers(code) {
+function addLineNumbers(code, { lineWrapping }) {
     const lines = code.split('\n');
     const lineCount = lines.length;
     const maxDigits = String(lineCount).length;
@@ -62,11 +77,14 @@ function addLineNumbers(code) {
     return (linesToProcess
         .map((line, index) => {
         const lineNumber = String(index + 1).padStart(maxDigits, ' ');
-        return `<span class="yfm-line-number">${lineNumber}</span>${line}`;
+        return lineWrapping
+            ? `<span class="yfm-line-number">${lineNumber}</span><span class="yfm-line">${line}</span>`
+            : `<span class="yfm-line-number">${lineNumber}</span>${line}`;
     })
         .join('\n') + (hasTrailingNewline ? '\n' : ''));
 }
-const code = (md) => {
+const code = (md, opts) => {
+    const lineWrapping = (opts === null || opts === void 0 ? void 0 : opts.codeLineWrapping) || false;
     const superCodeRenderer = md.renderer.rules.fence;
     md.renderer.rules.fence = function (tokens, idx, options, env, self) {
         const token = tokens[idx];
@@ -77,12 +95,12 @@ const code = (md) => {
             const codeMatch = superCode.match(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
             if (codeMatch) {
                 const codeContent = codeMatch[1];
-                const codeWithLineNumbers = addLineNumbers(codeContent);
+                const codeWithLineNumbers = addLineNumbers(codeContent, { lineWrapping });
                 superCode = superCode.replace(codeContent, codeWithLineNumbers);
             }
         }
         const superCodeWithTerms = superCode && (env === null || env === void 0 ? void 0 : env.terms) ? termReplace(superCode, env, md.utils.escapeRE) : superCode;
-        return wrapInClipboard(superCodeWithTerms, idx);
+        return wrapInFloatingContainer(superCodeWithTerms, idx, { lineWrapping });
     };
 };
 module.exports = code;

package/lib/plugins/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/transform/plugins/code.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/transform/plugins/code.ts"],"names":[],"mappings":"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"}

package/lib/typings.d.ts

@@ -72,6 +72,12 @@ export interface OptionsType {
     rawContent?: (path: string, assets: Record<string, string | boolean>) => string | boolean;
     calcPath?: (root: string, path: string) => string;
     replaceImageSrc?: (state: StateCore, currentPath: string, path: string, imgSrc: string, opts: unknown) => string;
+    /**
+     * Show button to toggle line wrapping of code.
+     * @type {boolean}
+     * @default false
+     */
+    codeLineWrapping?: boolean;
 }
 export interface OutputType {
     result: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/transform",
-  "version": "4.68.3",
+  "version": "4.69.1",
   "description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
   "keywords": [
     "markdown",
@@ -41,7 +41,8 @@
     "playground": "run-p dev:*",
     "artifact:playground": "node ./playground/scripts/pages.mjs",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
-    "test": "vitest run --coverage",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:playwright:nobuild": "cd e2e && npm run playwright:docker --",
     "test:playwright": "npm run build && npm run test:playwright:nobuild --",
     "typecheck": "tsc -p tsconfig.json --noEmit",
@@ -62,7 +63,7 @@
     "get-root-node-polyfill": "1.0.0",
     "github-slugger": "^1.5.0",
     "js-yaml": "^4.1.0",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.23",
     "markdown-it": "^13.0.2",
     "markdown-it-attrs": "^4.2.0",
     "markdown-it-deflist": "2.1.0",
@@ -77,12 +78,12 @@
   },
   "devDependencies": {
     "@diplodoc/babel-preset": "^1.0.2",
-    "@diplodoc/lint": "^1.10.2",
+    "@diplodoc/lint": "^1.13.2",
     "@diplodoc/tsconfig": "^1.0.2",
     "@types/css": "0.0.34",
     "@types/github-slugger": "^1.3.0",
     "@types/js-yaml": "^4.0.5",
-    "@types/lodash": "4.14.183",
+    "@types/lodash": "^4.17.23",
     "@types/markdown-it": "^13.0.9",
     "@types/markdown-it-attrs": "4.1.0",
     "@types/node": "^22.19.7",

package/src/js/code.ts

@@ -1,6 +1,7 @@
 import {copyToClipboard, getEventTarget, isCustom} from './utils';
 
-const BUTTON_SELECTOR = '.yfm-clipboard-button';
+const COPY_BUTTON_SELECTOR = '.yfm-clipboard-button';
+const WRAP_BUTTON_SELECTOR = '.yfm-wrapping-button';
 
 function notifySuccess(svgButton: HTMLElement | null) {
     if (!svgButton) {
@@ -20,15 +21,9 @@ function notifySuccess(svgButton: HTMLElement | null) {
 }
 
 function buttonCopyFn(target: HTMLElement) {
-    const parent = target.parentNode;
-
-    if (!parent) {
-        return;
-    }
-
-    const code = parent.querySelector<HTMLElement>('pre code');
-
-    if (!code) {
+    const container = target.parentNode?.parentNode;
+    const code = container?.querySelector<HTMLElement>('pre code');
+    if (!container || !code) {
         return;
     }
 
@@ -45,22 +40,36 @@ function buttonCopyFn(target: HTMLElement) {
         .join('');
 
     copyToClipboard(textContent.trim()).then(() => {
-        notifySuccess(parent.querySelector('.yfm-clipboard-icon'));
+        notifySuccess(container.querySelector('.yfm-clipboard-icon'));
 
         setTimeout(() => target.blur(), 1500);
     });
 }
 
-if (typeof document !== 'undefined') {
-    document.addEventListener('click', (event) => {
-        const target = getEventTarget(event) as HTMLElement;
+function buttonWrapFn(target: HTMLElement) {
+    const container = target.parentNode?.parentNode;
+    const code = container?.querySelector<HTMLElement>('pre code');
+    if (!container || !code) {
+        return;
+    }
+
+    code.classList.toggle('wrap');
 
-        const button = target.matches(BUTTON_SELECTOR);
+    setTimeout(() => target.blur(), 500);
+}
 
-        if (isCustom(event) || !button) {
+if (typeof document !== 'undefined') {
+    document.addEventListener('click', (event) => {
+        if (isCustom(event)) {
             return;
         }
 
-        buttonCopyFn(target);
+        const target = getEventTarget(event) as HTMLElement;
+
+        if (target.matches(COPY_BUTTON_SELECTOR)) {
+            buttonCopyFn(target);
+        } else if (target.matches(WRAP_BUTTON_SELECTOR)) {
+            buttonWrapFn(target);
+        }
     });
 }

package/src/scss/_code.scss

@@ -1,14 +1,23 @@
 .yfm {
-    &-clipboard {
+    &-code-floating-container {
         position: relative;
 
-        .yfm-clipboard-button {
+        .yfm-code-button {
             min-width: 20px;
             min-height: 20px;
+            flex-shrink: 0;
+
+            //reset default button style
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
         }
 
         &:hover {
-            .yfm-clipboard-button {
+            .yfm-code-floating {
                 opacity: 1;
             }
         }
@@ -16,42 +25,50 @@
         & > pre {
             border-radius: 10px;
             overflow: hidden;
+
+            // codeblock has line-wrapping and line-numbers
+            code:has(> .yfm-line) {
+                display: grid;
+                grid-template-columns: auto 1fr;
+            }
+
+            code.wrap {
+                white-space: pre-wrap;
+            }
         }
 
-        &-button {
+        .yfm-code-floating {
             position: absolute;
             top: 16px;
             right: 16px;
             z-index: 1;
+
             opacity: 0;
 
-            //reset default button style
-            background: none;
-            color: inherit;
-            border: none;
-            padding: 0;
-            font: inherit;
-            cursor: pointer;
+            display: flex;
+            flex-wrap: nowrap;
+            gap: 4px;
 
-            &:focus {
+            &:focus,
+            &:has(> .yfm-code-button:focus) {
                 opacity: 1;
             }
         }
 
-        &-icon {
+        .yfm-code-icon {
             pointer-events: none;
         }
+    }
 
-        &-inline-code {
-            transition: 0.3s;
+    &-clipboard-inline-code {
+        transition: 0.3s;
 
-            &:hover {
-                cursor: pointer;
-                background-color: var(
-                    --yfm-color-code-hovered-background,
-                    var(--yfm-color-code-background-hovered-private)
-                );
-            }
+        &:hover {
+            cursor: pointer;
+            background-color: var(
+                --yfm-color-code-hovered-background,
+                var(--yfm-color-code-background-hovered-private)
+            );
         }
     }
 }

package/src/scss/_common.scss

@@ -276,9 +276,9 @@
 
     hr {
         box-sizing: content-box;
-        height: 0.25em;
+        height: var(--yfm-hr-height, 0.25em);
         padding: 0;
-        margin: 1.5em 0;
+        margin: var(--yfm-hr-margin, 1.5em 0);
         overflow: hidden;
 
         background-color: var(--yfm-color-border, var(--yfm-color-border-private));

package/src/scss/print/code.scss

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

package/src/transform/plugins/code.ts

@@ -4,44 +4,64 @@ import type {MarkdownItPluginCb} from './typings';
 
 import {generateID} from './utils';
 
-const wrapInClipboard = (element: string | undefined, id: number) => {
+const wrapInFloatingContainer = (
+    element: string | undefined,
+    id: number,
+    {lineWrapping}: {lineWrapping: boolean},
+) => {
+    const wrappingButton = lineWrapping
+        ? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
+                <svg width="16" height="16" viewBox="0 0 16 16" class="yfm-code-icon yfm-wrapping-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="currentColor"
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M2.47 11.28a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 1.06L4.81 10H9a3.25 3.25 0 0 0 0-6.5H8A.75.75 0 0 1 8 2h1a4.75 4.75 0 1 1 0 9.5H4.81l1.72 1.72a.75.75 0 1 1-1.06 1.06z"
+                    />
+                </svg>
+            </button>`
+        : '';
+
     return `
-    <div class="yfm-clipboard">
+    <div class="yfm-code-floating-container">
         ${element}
-        <button class="yfm-clipboard-button" aria-label="Copy">
-            <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-clipboard-icon" data-animation="${id}">
-                <path
-                    fill="currentColor"
-                    d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-                />
-                <path
-                    stroke="currentColor"
-                    fill="transparent"
-                    stroke-width="1.5"
-                    d="M9.5 13l3 3l5 -5"
-                    visibility="hidden"
-                >
-                    <animate
-                        id="visibileAnimation-${id}"
-                        attributeName="visibility"
-                        from="hidden"
-                        to="visible"
-                        dur="0.2s"
-                        fill="freeze"
-                        begin=""
-                    />
-                    <animate
-                        id="hideAnimation-${id}"
-                        attributeName="visibility"
-                        from="visible"
-                        to="hidden"
-                        dur="1s"
-                        begin="visibileAnimation-${id}.end+1"
-                        fill="freeze"
+        <div class="yfm-code-floating">
+            ${wrappingButton}
+            <button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
+                <svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
+                    <path
+                        fill="currentColor"
+                        d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
                     />
-                </path>
-            </svg>
-        </button>
+                    <path
+                        stroke="currentColor"
+                        fill="transparent"
+                        stroke-width="1.5"
+                        d="M9.5 13l3 3l5 -5"
+                        visibility="hidden"
+                    >
+                        <animate
+                            id="visibileAnimation-${id}"
+                            attributeName="visibility"
+                            from="hidden"
+                            to="visible"
+                            dur="0.2s"
+                            fill="freeze"
+                            begin=""
+                        />
+                        <animate
+                            id="hideAnimation-${id}"
+                            attributeName="visibility"
+                            from="visible"
+                            to="hidden"
+                            dur="1s"
+                            begin="visibileAnimation-${id}.end+1"
+                            fill="freeze"
+                        />
+                    </path>
+                </svg>
+            </button>
+        </div>
     </div>
 `;
 };
@@ -69,7 +89,7 @@ function termReplace(str: string, env: EnvTerm, escape: (str: string) => string)
     return termCode || str;
 }
 
-function addLineNumbers(code: string): string {
+function addLineNumbers(code: string, {lineWrapping}: {lineWrapping: boolean}): string {
     const lines = code.split('\n');
     const lineCount = lines.length;
     const maxDigits = String(lineCount).length;
@@ -82,13 +102,26 @@ function addLineNumbers(code: string): string {
         linesToProcess
             .map((line, index) => {
                 const lineNumber = String(index + 1).padStart(maxDigits, ' ');
-                return `<span class="yfm-line-number">${lineNumber}</span>${line}`;
+                return lineWrapping
+                    ? `<span class="yfm-line-number">${lineNumber}</span><span class="yfm-line">${line}</span>`
+                    : `<span class="yfm-line-number">${lineNumber}</span>${line}`;
             })
             .join('\n') + (hasTrailingNewline ? '\n' : '')
     );
 }
 
-const code: MarkdownItPluginCb = (md) => {
+type CodeOptions = {
+    /**
+     * Show button to toggle line wrapping of code.
+     * @type {boolean}
+     * @default false
+     */
+    codeLineWrapping?: boolean;
+};
+
+const code: MarkdownItPluginCb<CodeOptions> = (md, opts) => {
+    const lineWrapping = opts?.codeLineWrapping || false;
+
     const superCodeRenderer = md.renderer.rules.fence;
     md.renderer.rules.fence = function (tokens, idx, options, env, self) {
         const token = tokens[idx];
@@ -101,7 +134,7 @@ const code: MarkdownItPluginCb = (md) => {
             const codeMatch = superCode.match(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
             if (codeMatch) {
                 const codeContent = codeMatch[1];
-                const codeWithLineNumbers = addLineNumbers(codeContent);
+                const codeWithLineNumbers = addLineNumbers(codeContent, {lineWrapping});
                 superCode = superCode.replace(codeContent, codeWithLineNumbers);
             }
         }
@@ -109,7 +142,7 @@ const code: MarkdownItPluginCb = (md) => {
         const superCodeWithTerms =
             superCode && env?.terms ? termReplace(superCode, env, md.utils.escapeRE) : superCode;
 
-        return wrapInClipboard(superCodeWithTerms, idx);
+        return wrapInFloatingContainer(superCodeWithTerms, idx, {lineWrapping});
     };
 };
 

package/src/transform/typings.ts

@@ -103,6 +103,12 @@ export interface OptionsType {
         imgSrc: string,
         opts: unknown,
     ) => string;
+    /**
+     * Show button to toggle line wrapping of code.
+     * @type {boolean}
+     * @default false
+     */
+    codeLineWrapping?: boolean;
 }
 
 export interface OutputType {