@diplodoc/transform 4.63.0 → 4.63.1

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

@@ -1,3 +1,28 @@
+import type {Lang} from 'src/transform/typings';
+
 export const INLINE_CODE = '.yfm-clipboard-inline-code';
 
+export const INLINE_CODE_ID = 'tooltip_inline_clipboard_dialog';
+
+export const INLINE_CODE_CLASS = 'yfm inline_code_tooltip';
+
 export const OPEN_CLASS = 'open';
+
+export const LANG_TOKEN: Record<Lang, string> = {
+    ru: 'Скопировано',
+    en: 'Copied',
+    ar: 'تم النسخ',
+    cs: 'Zkopírováno',
+    fr: 'Copié',
+    es: 'Copiado',
+    he: 'הועתק',
+    bg: 'Копирано',
+    et: 'Kopeeritud',
+    el: 'Αντιγράφηκε',
+    pt: 'Copiado',
+    zh: '已复制',
+    'zh-tw': '已複製',
+    kk: 'Көшірілді',
+    tr: 'Kopyalandı',
+    uz: 'Nusxalandi',
+};

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

@@ -1,13 +1,15 @@
+import type {Lang} from 'src/transform/typings';
+
 import {getCoords} from '../term/utils';
 
-import {OPEN_CLASS} from './constant';
+import {INLINE_CODE, INLINE_CODE_CLASS, INLINE_CODE_ID, LANG_TOKEN, OPEN_CLASS} from './constant';
 
 export let timer: ReturnType<typeof setTimeout> | null = null;
 
 let isListenerNeeded = true;
 
 export function getTooltipElement(): HTMLElement | null {
-    return document.querySelector('.yfm-inline-code-tooltip');
+    return document.getElementById(INLINE_CODE_ID);
 }
 
 function setTooltipAriaAttributes(tooltipElement: HTMLElement, targetElement: HTMLElement): void {
@@ -135,40 +137,65 @@ export function getInlineCodeByTooltip(definition: HTMLElement) {
 function closeTooltipFn(definition: HTMLElement) {
     definition.classList.remove(OPEN_CLASS);
     const inline = getInlineCodeByTooltip(definition);
-    const tooltipParent = tooltipParentElement(inline);
+    const inlineCodepParent = tooltipParentElement(inline);
+    const tooltipParent = tooltipParentElement(definition);
 
     definition.removeAttribute('inline-id');
 
-    if (!tooltipParent) {
+    if (!inlineCodepParent || !tooltipParent) {
         return;
     }
 
-    tooltipParent.removeEventListener('scroll', tooltipOnResize);
+    tooltipParent.removeChild(definition);
+    inlineCodepParent.removeEventListener('scroll', tooltipOnResize);
     isListenerNeeded = true;
 }
 
+function createTooltip() {
+    let tooltip = getTooltipElement();
+
+    if (!tooltip) {
+        const pageContent = document.querySelector('.dc-doc-page__content') || document.body;
+        const lang = document.documentElement.lang || 'en';
+        const tooltipText = LANG_TOKEN[lang as Lang] ?? LANG_TOKEN.en;
+        const host = document.createElement('div');
+
+        host.innerHTML = `
+            <div id="${INLINE_CODE_ID}" class="${INLINE_CODE_CLASS}"
+                role="dialog" aria-live="polite" aria-modal="true">
+                ${tooltipText}
+            </div>
+        `;
+
+        tooltip = host.firstElementChild as HTMLElement;
+        pageContent.appendChild(tooltip);
+    }
+
+    return tooltip;
+}
+
 export function openTooltip(target: HTMLElement) {
-    const tooltipElement = document.getElementById('tooltip_inline_clipboard_dialog');
+    const tooltip = createTooltip();
 
-    if (!target.matches('.yfm-clipboard-inline-code') || !tooltipElement) {
+    if (!target.matches(INLINE_CODE) || !tooltip) {
         return;
     }
 
-    tooltipElement.setAttribute('inline-id', target.getAttribute('id') || '');
-    setTooltipAriaAttributes(tooltipElement, target);
-    setTooltipPosition(tooltipElement, target);
+    tooltip.setAttribute('inline-id', target.getAttribute('id') || '');
+    setTooltipAriaAttributes(tooltip, target);
+    setTooltipPosition(tooltip, target);
 
     // In order not to get rid of the smooth appearance effect, I had to do this
-    if (tooltipElement.classList.contains(OPEN_CLASS)) {
-        tooltipElement.classList.remove(OPEN_CLASS);
+    if (tooltip.classList.contains(OPEN_CLASS)) {
+        tooltip.classList.remove(OPEN_CLASS);
         requestAnimationFrame(() => {
-            tooltipElement.classList.add(OPEN_CLASS);
+            tooltip.classList.add(OPEN_CLASS);
         });
     } else {
-        tooltipElement.classList.add(OPEN_CLASS);
+        tooltip.classList.add(OPEN_CLASS);
     }
 
-    return tooltipElement;
+    return tooltip;
 }
 
 export function closeTooltip(target: HTMLElement) {

package/src/scss/_inline-code.scss

@@ -2,7 +2,7 @@
     position: absolute;
     z-index: 100;
 
-    visibility: hidden;
+    display: none;
     opacity: 0;
 
     padding: 10px;
@@ -38,7 +38,7 @@
     }
 
     &.open {
-        visibility: visible;
+        display: block;
 
         animation-name: popup;
         animation-duration: 0.1s;

package/src/transform/liquid/index.ts

@@ -177,13 +177,13 @@ function liquidDocument<
     const liquidedContent =
         typeof liquidedResult === 'object' ? liquidedResult.output : liquidedResult;
 
-    const output = composeFrontMatter(liquidedFrontMatter, liquidedContent);
+    const output = composeFrontMatter(liquidedFrontMatter, liquidedContent as string);
 
     if (typeof liquidedResult === 'object') {
         const inputLinesCount = linesCount(input);
         const outputLinesCount = linesCount(output);
         const contentLinesCount = linesCount(strippedContent);
-        const contentLinesDiff = linesCount(liquidedContent) - contentLinesCount;
+        const contentLinesDiff = linesCount(liquidedContent as string) - contentLinesCount;
 
         const fullLinesDiff = outputLinesCount - inputLinesCount;
 

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

@@ -1,24 +1,5 @@
 import type {Lang} from '../typings';
 
-export const LANG_TOKEN: Record<Lang, string> = {
-    ru: 'Скопировано',
-    en: 'Copied',
-    ar: 'تم النسخ',
-    cs: 'Zkopírováno',
-    fr: 'Copié',
-    es: 'Copiado',
-    he: 'הועתק',
-    bg: 'Копирано',
-    et: 'Kopeeritud',
-    el: 'Αντιγράφηκε',
-    pt: 'Copiado',
-    zh: '已复制',
-    'zh-tw': '已複製',
-    kk: 'Көшірілді',
-    tr: 'Kopyalandı',
-    uz: 'Nusxalandi',
-};
-
 export const LANG_TOKEN_DESCRIPTION: Record<Lang, string> = {
     ru: 'Чтобы скопировать текст внутри блока нажмите на блок',
     en: 'To copy the text inside the block, click on the block',

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

@@ -1,10 +1,10 @@
-import type {MarkdownItPluginCb, StateCore} from '../../typings';
+import type {MarkdownItPluginCb} 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';
+import {LANG_TOKEN_DESCRIPTION, LANG_TOKEN_LABEL} from './constant';
 
 const inlineCode: MarkdownItPluginCb = (md, options) => {
     const lang = options.lang;
@@ -17,45 +17,6 @@ const inlineCode: MarkdownItPluginCb = (md, options) => {
 
         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) => {
-        const tokens = state.tokens;
-
-        for (let i = 0; i !== tokens.length; i++) {
-            const token = tokens[i];
-
-            if (token.type !== 'inline') {
-                continue;
-            }
-
-            if (!token.children || token.children.every((e) => e.type !== 'code_inline')) {
-                continue;
-            }
-
-            const child = token.children.find((e) => e.type === 'code_inline');
-
-            if (!child) {
-                return;
-            }
-
-            const dialog = new state.Token('tooltip_open', 'div', 1);
-            dialog.attrSet('class', 'yfm inline_code_tooltip');
-            dialog.attrSet('id', `tooltip_inline_clipboard_dialog`);
-            dialog.attrSet('role', 'dialog');
-            dialog.attrSet('aria-live', 'polite');
-            dialog.attrSet('aria-modal', 'true');
-
-            tokens.push(dialog);
-
-            const text = new state.Token('text', '', 0);
-            text.content = LANG_TOKEN[lang] ?? LANG_TOKEN.en;
-            tokens.push(text);
-
-            const closeDialog = new state.Token('tooltip_close', 'div', -1);
-            tokens.push(closeDialog);
-            break;
-        }
-    });
 };
 
 export = inlineCode;