@diplodoc/transform 4.60.2 → 4.60.4

package/src/js/code.ts

@@ -8,6 +8,7 @@ function notifySuccess(svgButton: HTMLElement | null) {
     }
 
     const id = svgButton.getAttribute('data-animation');
+
     // @ts-expect-error
     const icon = svgButton.getRootNode().getElementById(`visibileAnimation-${id}`);
 
@@ -26,6 +27,7 @@ function buttonCopyFn(target: HTMLElement) {
     }
 
     const code = parent.querySelector<HTMLElement>('pre code');
+
     if (!code) {
         return;
     }
@@ -44,6 +46,8 @@ function buttonCopyFn(target: HTMLElement) {
 
     copyToClipboard(textContent).then(() => {
         notifySuccess(parent.querySelector('.yfm-clipboard-icon'));
+
+        setTimeout(() => target.blur(), 1500);
     });
 }
 

package/src/js/inline-code/index.ts

@@ -37,6 +37,11 @@ if (typeof document !== 'undefined') {
     document.addEventListener('keydown', (event) => {
         if (event.key === 'Enter' && document.activeElement) {
             const activeElement = document.activeElement as HTMLElement;
+            const classInlineCode = INLINE_CODE.replace('.', '');
+
+            if (!activeElement.classList.contains(classInlineCode)) {
+                return;
+            }
 
             const innerText = activeElement.innerText;
 

package/src/scss/_code.scss

@@ -2,11 +2,14 @@
     &-clipboard {
         position: relative;
 
+        .yfm-clipboard-button {
+            min-width: 20px;
+            min-height: 20px;
+        }
+
         &:hover {
             .yfm-clipboard-button {
                 opacity: 1;
-                min-height: 20px;
-                min-width: 20px;
             }
         }
 

package/src/scss/_common.scss

@@ -1,8 +1,8 @@
 /* stylelint-disable declaration-no-important */
 
-@import 'private';
-@import 'brand';
-@import 'lists';
+@use 'private';
+@use 'brand';
+@use 'lists';
 
 @mixin removeMarginForEdgeChildren {
     & > *:first-child {
@@ -15,8 +15,8 @@
 }
 
 .yfm {
-    @include private-brand();
-    @include brand();
+    @include private.private-brand();
+    @include brand.brand();
 
     font-family: var(--yfm-font-family-sans);
     font-size: 15px;
@@ -25,6 +25,13 @@
     color: var(--yfm-color-text);
     tab-size: var(--yfm-tab-size, inherit);
 
+    --yfm-font-family-monospace:
+        'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono', 'DejaVu Sans Mono',
+        'Courier New', 'Courier', monospace;
+    --yfm-font-family-sans:
+        'Segoe UI', arial, helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+
     * {
         box-sizing: border-box;
     }
@@ -413,9 +420,4 @@
         clip-path: inset(100%);
         user-select: none;
     }
-
-    --yfm-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
-        'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
-    --yfm-font-family-sans: 'Segoe UI', arial, helvetica, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol';
 }

package/src/scss/_inline-code.scss

@@ -2,15 +2,6 @@
     position: absolute;
     z-index: 100;
 
-    width: fit-content;
-    max-width: 450px;
-
-    @media screen and (max-width: 600px) {
-        & {
-            max-width: 80%;
-        }
-    }
-
     visibility: hidden;
     opacity: 0;
 
@@ -26,6 +17,15 @@
 
     box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
     outline: none;
+    width: fit-content;
+
+    max-width: 450px;
+
+    @media screen and (max-width: 600px) {
+        & {
+            max-width: 80%;
+        }
+    }
 
     &::before {
         content: '';

package/src/scss/_note.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .yfm .yfm-note {
     max-width: 1296px;
     margin: 20px 0;
@@ -40,9 +42,9 @@
 
     @each $type, $color in $colors {
         &.#{$type} > :first-child::before {
-            $r: red($color);
-            $g: green($color);
-            $b: blue($color);
+            $r: color.channel($color, 'red', $space: rgb);
+            $g: color.channel($color, 'green', $space: rgb);
+            $b: color.channel($color, 'blue', $space: rgb);
             $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
             content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
         }

package/src/scss/_term.scss

@@ -18,15 +18,6 @@
         position: absolute;
         z-index: 100;
 
-        width: fit-content;
-        max-width: 450px;
-
-        @media screen and (max-width: 600px) {
-            & {
-                max-width: 80%;
-            }
-        }
-
         visibility: hidden;
         opacity: 0;
 
@@ -43,6 +34,15 @@
         box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
         outline: none;
 
+        width: fit-content;
+        max-width: 450px;
+
+        @media screen and (max-width: 600px) {
+            & {
+                max-width: 80%;
+            }
+        }
+
         &::before {
             content: '';
             position: absolute;

package/src/scss/_yfm-only.scss

@@ -6,8 +6,8 @@
     as the file is subject to changes without prior notice.
  */
 
-@import 'note';
-@import 'katex';
-@import 'table';
-@import 'term';
-@import 'inline-code';
+@use 'note';
+@use 'katex';
+@use 'table';
+@use 'term';
+@use 'inline-code';

package/src/scss/base.scss

@@ -1,4 +1,4 @@
-@import 'common';
-@import 'anchor';
-@import 'highlight';
-@import 'code';
+@use 'common';
+@use 'anchor';
+@use 'highlight';
+@use 'code';

package/src/scss/print.scss

@@ -1,8 +1,8 @@
-@import 'print/code';
-@import 'print/common';
-@import 'print/cut';
-@import 'print/note';
-@import 'print/table';
-@import 'print/tabs';
-@import 'print/term';
-@import 'print/iframe';
+@use 'print/code';
+@use 'print/common';
+@use 'print/cut';
+@use 'print/note';
+@use 'print/table';
+@use 'print/tabs';
+@use 'print/term';
+@use 'print/iframe';

package/src/scss/yfm.scss

@@ -1,6 +1,7 @@
-@import 'base';
-@import 'yfm-only';
-@import 'modal';
-@import '@diplodoc/cut-extension/runtime';
-@import '@diplodoc/file-extension/runtime';
-@import '@diplodoc/tabs-extension/runtime';
+@use 'base';
+@use 'yfm-only';
+@use 'modal';
+
+@forward '@diplodoc/cut-extension/runtime';
+@forward '@diplodoc/file-extension/runtime';
+@forward '@diplodoc/tabs-extension/runtime';

package/src/transform/plugins/inline-code/constant.ts

@@ -1,4 +1,4 @@
-import {Lang} from '../typings';
+import type {Lang} from '../typings';
 
 export const LANG_TOKEN: Record<Lang, string> = {
     ru: 'Скопировано',

package/src/transform/plugins/inline-code/index.ts

@@ -1,4 +1,7 @@
-import {MarkdownItPluginCb, StateCore} from '../../typings';
+import type {MarkdownItPluginCb, StateCore} from '../../typings';
+
+import {escapeHtml} from 'markdown-it/lib/common/utils';
+
 import {generateID} from '../utils';
 
 import {LANG_TOKEN, LANG_TOKEN_DESCRIPTION, LANG_TOKEN_LABEL} from './constant';
@@ -12,7 +15,7 @@ const inlineCode: MarkdownItPluginCb = (md, options) => {
         const description = LANG_TOKEN_DESCRIPTION[lang] ?? LANG_TOKEN_DESCRIPTION.en;
         const label = LANG_TOKEN_LABEL[lang] ?? LANG_TOKEN_LABEL.en;
 
-        return `<code class="yfm-clipboard-inline-code" role="button" aria-label="${label}" aria-description="${description}" tabindex='0' id="${id}">${tokens[idx].content}</code>`;
+        return `<code class="yfm-clipboard-inline-code" role="button" aria-label="${label}" aria-description="${description}" tabindex='0' id="inline-code-id-${id}">${escapeHtml(tokens[idx].content)}</code>`;
     };
 
     md.core.ruler.after('inline', 'tooltip_code_inline', (state: StateCore) => {

package/src/transform/plugins/meta.ts

@@ -1,6 +1,70 @@
 import type {MarkdownItPluginCb} from './typings';
 
-// @ts-expect-error
-import meta from 'markdown-it-meta';
+import {load} from 'js-yaml';
 
-export = meta as MarkdownItPluginCb;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const SEP = '---';
+
+const meta: MarkdownItPluginCb = (md) => {
+    const mdAny = md as any;
+    mdAny.meta = mdAny.meta || {};
+
+    const getLine = (state: any, line: number) =>
+        state.src.slice(state.bMarks[line], state.eMarks[line]);
+
+    md.block.ruler.before(
+        'code',
+        'meta',
+        (state, startLine, endLine) => {
+            if (startLine !== 0 || state.blkIndent !== 0) {
+                return false;
+            }
+            if (state.tShift[startLine] < 0) {
+                return false;
+            }
+            if (getLine(state, startLine).trim() !== SEP) {
+                return false;
+            }
+
+            let line = startLine + 1;
+            const lines: string[] = [];
+            let found = false;
+
+            while (line < endLine) {
+                const str = getLine(state, line);
+                if (str.trim() === SEP) {
+                    found = true;
+                    break;
+                }
+                if (state.tShift[line] < 0) {
+                    return false;
+                }
+                lines.push(str);
+                line++;
+            }
+
+            if (!found) {
+                return false;
+            }
+
+            let data: unknown;
+            try {
+                data = load(lines.join('\n')) || {};
+            } catch {
+                return false;
+            }
+
+            if (typeof data !== 'object' || data === null || Array.isArray(data)) {
+                return false;
+            }
+
+            mdAny.meta = data as Record<string, unknown>;
+            state.line = line + 1;
+            return true;
+        },
+        {alt: []},
+    );
+};
+
+export = meta;