@diplodoc/transform 4.70.3 → 4.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/transform",
-  "version": "4.70.3",
+  "version": "4.71.0",
   "description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
   "keywords": [
     "markdown",

package/src/js/anchor.ts

@@ -1,8 +1,28 @@
+import type {Lang} from 'src/transform/typings';
+
+import {createTooltipFactory} from './tooltip';
 import {copyToClipboard, getEventTarget, isCustom} from './utils';
+import {COPIED_LANG_TOKEN} from './constant';
 
+const ALLOWED_PROTOCOL_RE = /^(?:https?|file):$/;
 const ANCHOR_BUTTON_SELECTOR = '.yfm-clipboard-anchor';
 
+const tooltip = createTooltipFactory();
+
+function getLink(target: HTMLElement) {
+    const href = target.nodeName === 'A' ? (target as HTMLAnchorElement).href : target.dataset.href;
+    const link = new URL(href || '', window.location.href);
+
+    if (ALLOWED_PROTOCOL_RE.test(link.protocol)) {
+        return link.href;
+    }
+
+    return window.location.href;
+}
+
 if (typeof document !== 'undefined') {
+    tooltip.init();
+
     document.addEventListener('click', (event) => {
         const target = getEventTarget(event) as HTMLElement;
 
@@ -10,9 +30,13 @@ if (typeof document !== 'undefined') {
             return;
         }
 
-        const href = target.getAttribute('data-href') || '';
-        const link = new URL(href, window.location.href).toString();
+        const link = getLink(target);
+
+        copyToClipboard(link).then(() => {
+            const lang = document.documentElement.lang || 'en';
+            const tooltipText = COPIED_LANG_TOKEN[lang as Lang] ?? COPIED_LANG_TOKEN.en;
 
-        copyToClipboard(link);
+            tooltip.show(target, tooltipText);
+        });
     });
 }

package/src/js/{inline-code/constant.ts → constant.ts}

@@ -1,14 +1,6 @@
 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> = {
+export const COPIED_LANG_TOKEN: Record<Lang, string> = {
     ru: 'Скопировано',
     en: 'Copied',
     ar: 'تم النسخ',

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

@@ -1,13 +1,16 @@
+import type {Lang} from 'src/transform/typings';
+
+import {createTooltipFactory} from '../tooltip';
 import {copyToClipboard, getEventTarget, isCustom} from '../utils';
+import {COPIED_LANG_TOKEN} from '../constant';
+
+const CLASS_INLINE_CODE = 'yfm-clipboard-inline-code';
+const INLINE_CODE = `.${CLASS_INLINE_CODE}`;
 
-import {INLINE_CODE, OPEN_CLASS} from './constant';
-import {
-    closeTooltip,
-    getInlineCodeByTooltip,
-    getTooltipElement,
-    setTooltipPosition,
-    tooltipWorker,
-} from './utils';
+const tooltip = createTooltipFactory({
+    // NOTE: Add additional className for backward capability
+    additionalClassName: 'inline_code_tooltip',
+});
 
 export function inlineCopyFn(target: HTMLElement) {
     const innerText = target.innerText;
@@ -17,14 +20,18 @@ export function inlineCopyFn(target: HTMLElement) {
     }
 
     copyToClipboard(innerText).then(() => {
-        tooltipWorker(target);
+        const lang = document.documentElement.lang || 'en';
+        const tooltipText = COPIED_LANG_TOKEN[lang as Lang] ?? COPIED_LANG_TOKEN.en;
+
+        tooltip.show(target, tooltipText);
     });
 }
 
 if (typeof document !== 'undefined') {
+    tooltip.init();
+
     document.addEventListener('click', (event) => {
         const target = getEventTarget(event) as HTMLElement;
-
         const inline = target.matches(INLINE_CODE);
 
         if (isCustom(event) || !inline) {
@@ -37,45 +44,20 @@ 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;
 
-            if (!innerText) {
+            if (!activeElement.classList.contains(CLASS_INLINE_CODE)) {
                 return;
             }
 
-            copyToClipboard(innerText).then(() => {
-                tooltipWorker(activeElement);
-            });
+            inlineCopyFn(activeElement);
         }
 
-        const inlineTooltip = getTooltipElement();
+        if (event.key === 'Escape' && tooltip.visible) {
+            const reference = tooltip.getActiveReference();
 
-        if (event.key === 'Escape' && inlineTooltip) {
-            closeTooltip(inlineTooltip);
-            getInlineCodeByTooltip(inlineTooltip)?.focus(); // Set focus back to open button after closing popup
+            tooltip.hide();
+            // Set focus back to open button after closing popup
+            reference?.focus();
         }
     });
-
-    window.addEventListener('resize', () => {
-        const inlineTooltip = getTooltipElement();
-        if (!inlineTooltip) {
-            return;
-        }
-
-        const inlineId = inlineTooltip.getAttribute('inline-id') || '';
-        const inlineCodeElement = document.getElementById(inlineId);
-
-        if (!inlineCodeElement) {
-            inlineTooltip.classList.toggle(OPEN_CLASS);
-            return;
-        }
-
-        setTooltipPosition(inlineTooltip, inlineCodeElement);
-    });
 }

package/src/js/tooltip/constant.ts

@@ -0,0 +1,25 @@
+import type {OffsetValues, Side, SideObject} from './types';
+
+export const PAGE_CONTAINER_SELECTOR = '.dc-doc-page__content';
+
+export const TOOLTIP_BASE_CLASS = 'yfm yfm-tooltip';
+
+export const TOOLTIP_OPEN_CLASS = 'open';
+
+export const TOOLTIP_DATA_ATTR = 'data-tooltip-id';
+
+export const DEFAULT_OFFSET_VALUES: OffsetValues = {mainAxis: 5};
+
+export const OPPOSITE_SIDES: Record<Side, Side> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+
+export const DEFAULT_SIDE_OBJECT: SideObject = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+};

package/src/js/tooltip/index.ts

@@ -0,0 +1,2 @@
+export type {TooltipOptions} from './types';
+export {createTooltipFactory} from './tooltip';

package/src/js/tooltip/tooltip.ts

@@ -0,0 +1,263 @@
+import type {
+    Coords,
+    TooltipContext,
+    TooltipContextElements,
+    TooltipElementOptions,
+    TooltipOptions,
+} from './types';
+
+import {
+    DEFAULT_OFFSET_VALUES,
+    PAGE_CONTAINER_SELECTOR,
+    TOOLTIP_BASE_CLASS,
+    TOOLTIP_DATA_ATTR,
+    TOOLTIP_OPEN_CLASS,
+} from './constant';
+import {
+    computePosition,
+    convertToRelativeToOffsetParentRect,
+    createRect,
+    generateId,
+    getElementRect,
+    getViewportRect,
+    updateRect,
+} from './utils';
+
+interface TooltipState {
+    currentId: string | null;
+    timer: ReturnType<typeof setTimeout> | null;
+    unsubscribe: (() => void) | null;
+}
+
+export function createTooltipFactory(options: TooltipOptions = {}) {
+    const {closeDelay = 1_000, additionalClassName} = options;
+    let initialized = false;
+
+    const state: TooltipState = {
+        currentId: null,
+        timer: null,
+        unsubscribe: null,
+    };
+
+    const getActiveTooltip = () => {
+        if (!state.currentId) {
+            return null;
+        }
+
+        return document.getElementById(state.currentId);
+    };
+
+    const getActiveReference = () => {
+        if (!state.currentId) {
+            return null;
+        }
+
+        return getReferenceByTooltipId(state.currentId);
+    };
+
+    const hide = () => {
+        const tooltip = getActiveTooltip();
+
+        if (state.timer) {
+            clearTimeout(state.timer);
+            state.timer = null;
+        }
+
+        if (state.unsubscribe) {
+            state.unsubscribe();
+            state.unsubscribe = null;
+        }
+
+        if (tooltip) {
+            tooltip.classList.remove(TOOLTIP_OPEN_CLASS);
+            detachTooltip(tooltip);
+
+            state.currentId = null;
+        }
+    };
+
+    const show = (reference: HTMLElement, text: string) => {
+        hide();
+
+        const tooltip = createTooltipElement({text, className: additionalClassName});
+        const update = updateTooltipPosition.bind(null, options, reference, tooltip);
+
+        state.currentId = tooltip.id;
+
+        attachTooltip(tooltip, reference);
+
+        state.unsubscribe = subscribeToScroll(reference, update);
+
+        tooltip.classList.add(TOOLTIP_OPEN_CLASS);
+
+        update();
+
+        if (closeDelay > 0) {
+            state.timer = setTimeout(hide, closeDelay);
+        }
+    };
+
+    const handleUpdate = () => {
+        const activeTooltip = getActiveTooltip();
+        const activeReference = getActiveReference();
+
+        if (activeTooltip && !activeReference) {
+            hide();
+            return;
+        }
+
+        if (activeTooltip && activeReference) {
+            updateTooltipPosition(options, activeReference, activeTooltip);
+        }
+    };
+
+    const init = () => {
+        if (!initialized) {
+            initialized = true;
+
+            window.addEventListener('scroll', handleUpdate);
+            window.addEventListener('resize', handleUpdate);
+        }
+    };
+
+    const cleanup = () => {
+        if (initialized) {
+            initialized = false;
+
+            window.removeEventListener('scroll', handleUpdate);
+            window.removeEventListener('resize', handleUpdate);
+        }
+    };
+
+    return {
+        get visible() {
+            return Boolean(state.currentId);
+        },
+        getActiveReference,
+        show,
+        hide,
+        init,
+        cleanup,
+    };
+}
+
+function createTooltipElement(options: TooltipElementOptions) {
+    const {text, className} = options;
+
+    const id = generateId();
+    const tooltip = document.createElement('div');
+
+    tooltip.id = id;
+    tooltip.className = className ? `${TOOLTIP_BASE_CLASS} ${className}` : TOOLTIP_BASE_CLASS;
+
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.setAttribute('aria-live', 'polite');
+
+    tooltip.textContent = text;
+
+    return tooltip;
+}
+
+function attachTooltip(tooltip: HTMLElement, reference: HTMLElement) {
+    const container = document.querySelector(PAGE_CONTAINER_SELECTOR) || document.body;
+    const ariaLive = reference.getAttribute('aria-live');
+
+    reference.setAttribute(TOOLTIP_DATA_ATTR, tooltip.id);
+
+    if (ariaLive) {
+        tooltip.setAttribute('aria-live', ariaLive);
+    }
+
+    container.appendChild(tooltip);
+}
+
+function detachTooltip(tooltip: HTMLElement) {
+    if (tooltip.id) {
+        const reference = getReferenceByTooltipId(tooltip.id);
+
+        reference?.removeAttribute(TOOLTIP_DATA_ATTR);
+    }
+
+    tooltip.remove();
+}
+
+function getReferenceByTooltipId(id: string) {
+    return document.querySelector<HTMLElement>(`[${TOOLTIP_DATA_ATTR}="${id}"]`);
+}
+
+function subscribeToScroll(reference: HTMLElement, update: () => void) {
+    const scrollableElement = getParentScrollableElement(reference);
+
+    scrollableElement.addEventListener('scroll', update);
+
+    return () => {
+        scrollableElement.removeEventListener('scroll', update);
+    };
+}
+
+function getParentScrollableElement(target: HTMLElement) {
+    const closestScrollableParent = target.closest('table') || target.closest('code');
+
+    return closestScrollableParent || target.parentElement || document.body;
+}
+
+function createTooltipContext(
+    referenceElement: HTMLElement,
+    tooltipElement: HTMLElement,
+): TooltipContext | null {
+    const tooltipParent = tooltipElement.parentElement;
+
+    if (!tooltipParent) {
+        return null;
+    }
+
+    const elements: TooltipContextElements = {
+        reference: referenceElement,
+        tooltip: tooltipElement,
+        offsetParent: tooltipParent,
+    };
+
+    const viewport = getViewportRect();
+    const reference = getElementRect(referenceElement);
+    const {width, height} = tooltipElement.getBoundingClientRect();
+
+    return {
+        isRtl: document.dir === 'rtl',
+        viewport,
+        reference,
+        tooltip: createRect({top: 0, left: 0, width, height}),
+        elements,
+    };
+}
+
+function updateTooltipPosition(
+    options: TooltipOptions,
+    referenceElement: HTMLElement,
+    tooltipElement: HTMLElement,
+) {
+    const context = createTooltipContext(referenceElement, tooltipElement);
+
+    if (!context) {
+        return;
+    }
+
+    const coords = getTooltipCoords(context, options);
+
+    tooltipElement.style.top = `${coords.y}px`;
+    tooltipElement.style.left = `${coords.x}px`;
+}
+
+function getTooltipCoords(context: TooltipContext, options: TooltipOptions): Coords {
+    const {placement = 'bottom-start', offset = DEFAULT_OFFSET_VALUES, flip = true} = options;
+    const {reference, tooltip, viewport, isRtl} = context;
+
+    const {coords} = computePosition(reference, tooltip, viewport, placement, offset, isRtl, flip);
+
+    const rect = updateRect(tooltip, {top: coords.y, left: coords.x});
+    const relativeRect = convertToRelativeToOffsetParentRect(rect, context.elements.offsetParent);
+
+    return {
+        x: relativeRect.left,
+        y: relativeRect.top,
+    };
+}

package/src/js/tooltip/types.ts

@@ -0,0 +1,59 @@
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+export interface ElementRect {
+    readonly top: number;
+    readonly left: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly width: number;
+    readonly height: number;
+}
+
+export interface Coords {
+    x: number;
+    y: number;
+}
+
+export interface OffsetValues {
+    mainAxis?: number;
+    crossAxis?: number;
+}
+
+export type Alignment = 'start' | 'end';
+
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+
+export type AlignedPlacement = `${Side}-${Alignment}`;
+
+export type Placement = Prettify<Side | AlignedPlacement>;
+
+export type SideObject = {[key in Side]: number};
+
+export interface TooltipContextElements {
+    reference: HTMLElement;
+    tooltip: HTMLElement;
+    offsetParent: HTMLElement;
+}
+
+export interface TooltipContext {
+    isRtl: boolean;
+    viewport: ElementRect;
+    reference: ElementRect;
+    tooltip: ElementRect;
+    elements: TooltipContextElements;
+}
+
+export interface TooltipElementOptions {
+    text: string;
+    className?: string;
+}
+
+export interface TooltipOptions {
+    closeDelay?: number;
+    additionalClassName?: string;
+    placement?: Placement;
+    offset?: OffsetValues;
+    flip?: boolean;
+}