@diplodoc/transform 4.60.1 → 4.60.3

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;
     }
@@ -113,6 +120,10 @@
         }
     }
 
+    .mermaid svg[id*='mermaid'] {
+        max-height: none;
+    }
+
     img {
         object-fit: contain;
         background-color: var(--yfm-color-base);
@@ -409,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) => {