@diplodoc/transform 4.70.4 → 4.71.0

package/src/js/tooltip/utils.ts

@@ -0,0 +1,247 @@
+import type {
+    Alignment,
+    Coords,
+    ElementRect,
+    OffsetValues,
+    Placement,
+    Side,
+    SideObject,
+} from './types';
+
+import {DEFAULT_SIDE_OBJECT, OPPOSITE_SIDES} from './constant';
+
+function isVerticalSide(side: Side): boolean {
+    return side === 'top' || side === 'bottom';
+}
+
+function createSideObject(value: Partial<SideObject> | number = 0): SideObject {
+    if (typeof value === 'number') {
+        return {top: value, bottom: value, left: value, right: value};
+    }
+
+    return {...DEFAULT_SIDE_OBJECT, ...value};
+}
+
+function parsePlacement(placement: Placement): {side: Side; alignment?: Alignment} {
+    const [side, alignment] = placement.split('-') as [Side, Alignment | undefined];
+
+    return {side, alignment};
+}
+
+function getOppositeSide(side: Side): Side {
+    return OPPOSITE_SIDES[side];
+}
+
+function flipPlacement(placement: Placement): Placement {
+    const {side, alignment} = parsePlacement(placement);
+    const opposite = getOppositeSide(side);
+
+    return (alignment ? `${opposite}-${alignment}` : opposite) as Placement;
+}
+
+function getOverflow(tooltip: ElementRect, coords: Coords, viewport: ElementRect): SideObject {
+    const rect = updateRect(tooltip, {top: coords.y, left: coords.x});
+
+    return detectOverflow(viewport, rect, 5);
+}
+
+function shouldFlip(overflow: SideObject, flippedOverflow: SideObject, side: Side): boolean {
+    const opposite = getOppositeSide(side);
+
+    return overflow[side] > 0 && flippedOverflow[opposite] < overflow[side];
+}
+
+export function computePosition(
+    reference: ElementRect,
+    tooltip: ElementRect,
+    viewport: ElementRect,
+    placement: Placement,
+    offset: OffsetValues,
+    isRtl: boolean,
+    flip = true,
+): {coords: Coords; placement: Placement} {
+    const coords = computeCoordsFromPlacement(reference, tooltip, offset, placement, isRtl);
+
+    if (!flip) {
+        return {coords, placement};
+    }
+
+    const overflow = getOverflow(tooltip, coords, viewport);
+    const {side} = parsePlacement(placement);
+
+    if (overflow[side] <= 0) {
+        return {coords, placement};
+    }
+
+    const flipped = flipPlacement(placement);
+    const flippedCoords = computeCoordsFromPlacement(reference, tooltip, offset, flipped, isRtl);
+    const flippedOverflow = getOverflow(tooltip, flippedCoords, viewport);
+
+    if (shouldFlip(overflow, flippedOverflow, side)) {
+        return {coords: flippedCoords, placement: flipped};
+    }
+
+    return {coords, placement};
+}
+
+export function generateId() {
+    const random = Math.random().toString(36).substring(2, 6);
+    const now = Date.now().toString(36);
+
+    return `${random}${now}`;
+}
+
+export function createRect(
+    params: Pick<ElementRect, 'top' | 'left' | 'width' | 'height'>,
+): ElementRect {
+    return {
+        ...params,
+        right: params.left + params.width,
+        bottom: params.top + params.height,
+    };
+}
+
+export function updateRect(rect: ElementRect, params: Partial<ElementRect>): ElementRect {
+    return createRect({
+        top: params.top ?? rect.top,
+        left: params.left ?? rect.left,
+        width: params.width ?? rect.width,
+        height: params.height ?? rect.height,
+    });
+}
+
+export function getViewportRect(): ElementRect {
+    const {documentElement, body} = document;
+
+    const scrollTop = window.scrollY || documentElement.scrollTop || body.scrollTop;
+    const scrollLeft = window.scrollX || documentElement.scrollLeft || body.scrollLeft;
+
+    const clientTop = documentElement.clientTop || body.clientTop || 0;
+    const clientLeft = documentElement.clientLeft || body.clientLeft || 0;
+
+    return createRect({
+        top: Math.round(scrollTop - clientTop),
+        left: Math.round(scrollLeft - clientLeft),
+        width: document.body.clientWidth,
+        height: document.body.clientHeight,
+    });
+}
+
+export function getElementRect(element: HTMLElement): ElementRect {
+    const viewport = getViewportRect();
+    const box = element.getBoundingClientRect();
+
+    return createRect({
+        top: Math.round(box.top + viewport.top),
+        left: Math.round(box.left + viewport.left),
+        width: box.width,
+        height: box.height,
+    });
+}
+
+export function computeAxisOffset(offset: OffsetValues, side: Side, isRtl?: boolean): Coords {
+    const {mainAxis = 0, crossAxis = 0} = offset;
+
+    const isVertical = isVerticalSide(side);
+    const mainDirection = side === 'top' || side === 'left' ? -1 : 1;
+    const crossDirection = isRtl && isVertical ? -1 : 1;
+
+    const mainOffset = mainAxis * mainDirection;
+    const crossOffset = crossAxis * crossDirection;
+
+    if (isVertical) {
+        return {x: crossOffset, y: mainOffset};
+    }
+
+    return {x: mainOffset, y: crossOffset};
+}
+
+export function computeCoordsFromPlacement(
+    reference: ElementRect,
+    tooltip: ElementRect,
+    offset: OffsetValues,
+    placement: Placement,
+    isRtl: boolean,
+) {
+    const {side, alignment} = parsePlacement(placement);
+    const isVertical = isVerticalSide(side);
+    const alignmentAxis = isVertical ? 'x' : 'y';
+    const alignLength = alignmentAxis === 'y' ? 'height' : 'width';
+
+    const centerX = reference.left + reference.width / 2 - tooltip.width / 2;
+    const centerY = reference.top + reference.height / 2 - tooltip.height / 2;
+    const alignmentOffset = reference[alignLength] / 2 - tooltip[alignLength] / 2;
+
+    const coords: Coords = {x: reference.left, y: reference.top};
+
+    switch (side) {
+        case 'top': {
+            coords.x = centerX;
+            coords.y = reference.top - tooltip.height;
+            break;
+        }
+
+        case 'bottom': {
+            coords.x = centerX;
+            coords.y = reference.top + reference.height;
+            break;
+        }
+
+        case 'right': {
+            coords.x = reference.left + reference.width;
+            coords.y = centerY;
+            break;
+        }
+
+        case 'left': {
+            coords.x = reference.left - tooltip.width;
+            coords.y = centerY;
+            break;
+        }
+    }
+
+    switch (alignment) {
+        case 'start': {
+            coords[alignmentAxis] -= alignmentOffset * (isRtl && isVertical ? -1 : 1);
+            break;
+        }
+
+        case 'end': {
+            coords[alignmentAxis] += alignmentOffset * (isRtl && isVertical ? -1 : 1);
+            break;
+        }
+    }
+
+    const axisOffset = computeAxisOffset(offset, side, isRtl);
+
+    coords.x += axisOffset.x;
+    coords.y += axisOffset.y;
+
+    return coords;
+}
+
+export function convertToRelativeToOffsetParentRect(rect: ElementRect, offsetParent: HTMLElement) {
+    const offsetRect = getElementRect(offsetParent);
+
+    return createRect({
+        top: rect.top - offsetRect.top + offsetParent.offsetTop,
+        left: rect.left - offsetRect.left + offsetParent.offsetLeft,
+        width: rect.width,
+        height: rect.height,
+    });
+}
+
+export function detectOverflow(
+    boundary: ElementRect,
+    element: ElementRect,
+    padding: Partial<SideObject> | number = 0,
+): SideObject {
+    const {top, bottom, left, right} = createSideObject(padding);
+
+    return {
+        top: boundary.top - element.top + top,
+        bottom: element.bottom - boundary.bottom + bottom,
+        left: boundary.left - element.left + left,
+        right: element.right - boundary.right + right,
+    };
+}

package/src/scss/{_inline-code.scss → _tooltip.scss}

@@ -1,4 +1,4 @@
-.inline_code_tooltip {
+.yfm-tooltip {
     position: absolute;
     z-index: 100;
 

package/src/scss/_yfm-only.scss

@@ -10,4 +10,4 @@
 @use 'katex';
 @use 'table';
 @use 'term';
-@use 'inline-code';
+@use 'tooltip';

package/src/transform/plugins/anchors/index.ts

@@ -46,7 +46,7 @@ function createAnchorLinkTokens(
         open.attrSet('id', id);
     }
     open.attrSet('href', href + '#' + id);
-    open.attrSet('class', 'yfm-anchor');
+    open.attrSet('class', 'yfm-anchor yfm-clipboard-anchor');
     open.attrSet('aria-hidden', 'true');
 
     // SEO: render invisible heading title because link must have text content.

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

@@ -1,217 +0,0 @@
-import type {Lang} from 'src/transform/typings';
-
-import {getCoords} from '../term/utils';
-
-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.getElementById(INLINE_CODE_ID);
-}
-
-function setTooltipAriaAttributes(tooltipElement: HTMLElement, targetElement: HTMLElement): void {
-    const ariaLive = targetElement.getAttribute('aria-live') || 'polite';
-    tooltipElement?.setAttribute('aria-live', ariaLive);
-    tooltipElement?.setAttribute('aria-modal', 'true');
-}
-
-function checkTimerAndClear() {
-    if (timer) {
-        clearTimeout(timer);
-        timer = null;
-    }
-}
-
-function tooltipParentElement(target: HTMLElement | null) {
-    if (!target) {
-        return null;
-    }
-
-    const closestScrollableParent = target.closest('table') || target.closest('code');
-
-    return closestScrollableParent || target.parentElement;
-}
-
-function tooltipOnResize() {
-    const openedDefinition = getTooltipElement();
-
-    if (!openedDefinition) {
-        return;
-    }
-    const inlineId = openedDefinition.getAttribute('inline-id') || '';
-    const targetElement = document.getElementById(inlineId);
-
-    if (!targetElement) {
-        return;
-    }
-
-    setTooltipPosition(openedDefinition, targetElement);
-}
-
-export function setTooltipPosition(tooltipElement: HTMLElement, targetElement: HTMLElement): void {
-    const {
-        x: inlineX,
-        y: inlineY,
-        right: inlineRight,
-        left: inlineLeft,
-        width: inlineWidth,
-        height: inlineHeight,
-    } = targetElement.getBoundingClientRect();
-
-    const tooltipParent = tooltipParentElement(targetElement);
-
-    if (!tooltipParent) {
-        return;
-    }
-
-    const {right: tooltipParentRight, left: tooltipParentLeft} =
-        tooltipParent.getBoundingClientRect();
-
-    if ((tooltipParentRight < inlineLeft || tooltipParentLeft > inlineRight) && !isListenerNeeded) {
-        closeTooltip(tooltipElement);
-        return;
-    }
-
-    if (isListenerNeeded && tooltipParent) {
-        tooltipParent.addEventListener('scroll', tooltipOnResize);
-        isListenerNeeded = false;
-    }
-
-    const relativeX = Number(tooltipElement.getAttribute('relativeX'));
-    const relativeY = Number(tooltipElement.getAttribute('relativeY'));
-
-    if (relativeX === inlineX && relativeY === inlineY) {
-        return;
-    }
-
-    tooltipElement.setAttribute('relativeX', String(inlineX));
-    tooltipElement.setAttribute('relativeY', String(inlineY));
-
-    const offsetTop = inlineHeight + 5;
-    const definitionParent = tooltipElement.parentElement;
-
-    if (!definitionParent) {
-        return;
-    }
-
-    const {width: definitionWidth} = tooltipElement.getBoundingClientRect();
-    const {left: definitionParentLeft} = definitionParent.getBoundingClientRect();
-
-    // If definition not fit document change base alignment
-    const definitionLeftCoordinate = Number(getCoords(targetElement).left);
-    const definitionRightCoordinate = definitionWidth + definitionLeftCoordinate;
-
-    const definitionOutOfScreenOnLeft = definitionLeftCoordinate - definitionWidth < 0;
-    const definitionOutOfScreenOnRight = definitionRightCoordinate > document.body.clientWidth;
-
-    const isAlignSwapped = definitionOutOfScreenOnRight || document.dir === 'rtl';
-    const fitDefinitionDocument =
-        isAlignSwapped && !definitionOutOfScreenOnLeft ? definitionWidth - inlineWidth : 0;
-    const customHeaderTop = getCoords(definitionParent).top - definitionParent.offsetTop;
-    const offsetRight = 5;
-    const shiftLeft = definitionOutOfScreenOnRight
-        ? definitionRightCoordinate - document.body.clientWidth + offsetRight
-        : 0;
-    const offsetLeft =
-        getCoords(targetElement).left -
-        definitionParentLeft +
-        definitionParent.offsetLeft -
-        fitDefinitionDocument;
-
-    const isShiftLeftNeeded = offsetLeft + definitionWidth >= document.body.clientWidth;
-
-    tooltipElement.style.top =
-        Number(getCoords(targetElement).top + offsetTop - customHeaderTop) + 'px';
-    tooltipElement.style.left = Number(offsetLeft - (isShiftLeftNeeded ? shiftLeft : 0)) + 'px';
-}
-
-export function getInlineCodeByTooltip(definition: HTMLElement) {
-    const inlineId = definition.getAttribute('inline-id');
-
-    return inlineId ? document.getElementById(inlineId) : null;
-}
-
-function closeTooltipFn(definition: HTMLElement) {
-    definition.classList.remove(OPEN_CLASS);
-    const inline = getInlineCodeByTooltip(definition);
-    const inlineCodepParent = tooltipParentElement(inline);
-    const tooltipParent = tooltipParentElement(definition);
-
-    definition.removeAttribute('inline-id');
-
-    if (!inlineCodepParent || !tooltipParent) {
-        return;
-    }
-
-    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 tooltip = createTooltip();
-
-    if (!target.matches(INLINE_CODE) || !tooltip) {
-        return;
-    }
-
-    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 (tooltip.classList.contains(OPEN_CLASS)) {
-        tooltip.classList.remove(OPEN_CLASS);
-        requestAnimationFrame(() => {
-            tooltip.classList.add(OPEN_CLASS);
-        });
-    } else {
-        tooltip.classList.add(OPEN_CLASS);
-    }
-
-    return tooltip;
-}
-
-export function closeTooltip(target: HTMLElement) {
-    checkTimerAndClear();
-    closeTooltipFn(target);
-}
-
-export function tooltipWorker(target: HTMLElement) {
-    const definition = openTooltip(target);
-
-    if (!definition) {
-        return;
-    }
-    checkTimerAndClear();
-    timer = setTimeout(() => {
-        closeTooltip(definition);
-        timer = null;
-    }, 1000);
-}