@diplodoc/transform 4.60.2 → 4.60.3

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) => {