@diplodoc/transform
Version:
A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML
439 lines (429 loc) • 16.1 kB
JavaScript
;
(() => {
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
// node_modules/get-root-node-polyfill/index.js
var require_get_root_node_polyfill = __commonJS({
"node_modules/get-root-node-polyfill/index.js"(exports, module) {
"use strict";
function getRootNode2(opt) {
var composed = typeof opt === "object" && Boolean(opt.composed);
return composed ? getShadowIncludingRoot(this) : getRoot(this);
}
function getShadowIncludingRoot(node) {
var root = getRoot(node);
if (isShadowRoot(root)) {
return getShadowIncludingRoot(root.host);
}
return root;
}
function getRoot(node) {
if (node.parentNode != null) {
return getRoot(node.parentNode);
}
return node;
}
function isShadowRoot(node) {
return node.nodeName === "#document-fragment" && node.constructor.name === "ShadowRoot";
}
if (typeof module === "object" && module.exports) {
module.exports = getRootNode2;
}
}
});
// src/js/polyfill.js
var import_get_root_node_polyfill = __toESM(require_get_root_node_polyfill());
if (typeof document !== "undefined") {
(function(e) {
const matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
if (matches) {
e.matches = e.matchesSelector = matches;
} else {
e.matches = e.matchesSelector = function matches2(selector) {
const rootNode = e.getRootNode ? e.getRootNode() : import_get_root_node_polyfill.default.call(e);
const matches3 = rootNode.querySelectorAll(selector);
const th = this;
return Array.prototype.some.call(matches3, (e2) => {
return e2 === th;
});
};
}
})(Element.prototype);
}
// src/js/utils.ts
var getEventTarget = (event) => {
const path = event.composedPath();
return Array.isArray(path) && path.length > 0 ? path[0] : event.target;
};
var isCustom = (event) => {
const target = getEventTarget(event);
return !target || !target.matches;
};
var copyToClipboard = (text) => __async(void 0, null, function* () {
if (!text) {
return;
}
if (navigator.clipboard && typeof navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
const textarea = document.createElement("textarea");
textarea.setAttribute("style", "position: absolute; left: 1000%");
textarea.textContent = text;
document.body.append(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
});
// src/js/code.ts
var BUTTON_SELECTOR = ".yfm-clipboard-button";
function notifySuccess(svgButton) {
if (!svgButton) {
return;
}
const id = svgButton.getAttribute("data-animation");
const icon = svgButton.getRootNode().getElementById(`visibileAnimation-${id}`);
if (!icon) {
return;
}
icon.beginElement();
}
function buttonCopyFn(target) {
const parent = target.parentNode;
if (!parent) {
return;
}
const code = parent.querySelector("pre code");
if (!code) {
return;
}
const textContent = Array.from(code.childNodes).filter((node) => {
if (node instanceof HTMLElement && node.classList.contains("yfm-line-number")) {
return false;
}
return true;
}).map((node) => node.textContent).join("");
copyToClipboard(textContent.trim()).then(() => {
notifySuccess(parent.querySelector(".yfm-clipboard-icon"));
setTimeout(() => target.blur(), 1500);
});
}
if (typeof document !== "undefined") {
document.addEventListener("click", (event) => {
const target = getEventTarget(event);
const button = target.matches(BUTTON_SELECTOR);
if (isCustom(event) || !button) {
return;
}
buttonCopyFn(target);
});
}
// src/js/anchor.ts
var ANCHOR_BUTTON_SELECTOR = ".yfm-clipboard-anchor";
if (typeof document !== "undefined") {
document.addEventListener("click", (event) => {
const target = getEventTarget(event);
if (isCustom(event) || !target.matches(ANCHOR_BUTTON_SELECTOR)) {
return;
}
const href = target.getAttribute("data-href") || "";
const link = new URL(href, window.location.href).toString();
copyToClipboard(link);
});
}
// src/js/inline-code/constant.ts
var INLINE_CODE = ".yfm-clipboard-inline-code";
var INLINE_CODE_ID = "tooltip_inline_clipboard_dialog";
var INLINE_CODE_CLASS = "yfm inline_code_tooltip";
var OPEN_CLASS = "open";
var LANG_TOKEN = {
ru: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E",
en: "Copied",
ar: "\u062A\u0645 \u0627\u0644\u0646\u0633\u062E",
cs: "Zkop\xEDrov\xE1no",
fr: "Copi\xE9",
es: "Copiado",
he: "\u05D4\u05D5\u05E2\u05EA\u05E7",
bg: "\u041A\u043E\u043F\u0438\u0440\u0430\u043D\u043E",
et: "Kopeeritud",
el: "\u0391\u03BD\u03C4\u03B9\u03B3\u03C1\u03AC\u03C6\u03B7\u03BA\u03B5",
pt: "Copiado",
zh: "\u5DF2\u590D\u5236",
"zh-tw": "\u5DF2\u8907\u88FD",
kk: "\u041A\u04E9\u0448\u0456\u0440\u0456\u043B\u0434\u0456",
tr: "Kopyaland\u0131",
uz: "Nusxalandi"
};
// src/js/term/utils.ts
var Selector = {
TITLE: ".yfm .yfm-term_title",
CONTENT: ".yfm .yfm-term_dfn"
};
var openClass = "open";
var openDefinitionClass = Selector.CONTENT.replace(/\./g, "") + " " + openClass;
function getCoords(elem) {
const box = elem.getBoundingClientRect();
const body = document.body;
const docEl = document.documentElement;
const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
const clientTop = docEl.clientTop || body.clientTop || 0;
const clientLeft = docEl.clientLeft || body.clientLeft || 0;
const top = box.top + scrollTop - clientTop;
const left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
// src/js/inline-code/utils.ts
var timer = null;
var isListenerNeeded = true;
function getTooltipElement() {
return document.getElementById(INLINE_CODE_ID);
}
function setTooltipAriaAttributes(tooltipElement, targetElement) {
const ariaLive = targetElement.getAttribute("aria-live") || "polite";
tooltipElement == null ? void 0 : tooltipElement.setAttribute("aria-live", ariaLive);
tooltipElement == null ? void 0 : tooltipElement.setAttribute("aria-modal", "true");
}
function checkTimerAndClear() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function tooltipParentElement(target) {
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);
}
function setTooltipPosition(tooltipElement, targetElement) {
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();
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";
}
function getInlineCodeByTooltip(definition) {
const inlineId = definition.getAttribute("inline-id");
return inlineId ? document.getElementById(inlineId) : null;
}
function closeTooltipFn(definition) {
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() {
var _a;
let tooltip = getTooltipElement();
if (!tooltip) {
const pageContent = document.querySelector(".dc-doc-page__content") || document.body;
const lang = document.documentElement.lang || "en";
const tooltipText = (_a = LANG_TOKEN[lang]) != null ? _a : 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;
pageContent.appendChild(tooltip);
}
return tooltip;
}
function openTooltip(target) {
const tooltip = createTooltip();
if (!target.matches(INLINE_CODE) || !tooltip) {
return;
}
tooltip.setAttribute("inline-id", target.getAttribute("id") || "");
setTooltipAriaAttributes(tooltip, target);
setTooltipPosition(tooltip, target);
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;
}
function closeTooltip(target) {
checkTimerAndClear();
closeTooltipFn(target);
}
function tooltipWorker(target) {
const definition = openTooltip(target);
if (!definition) {
return;
}
checkTimerAndClear();
timer = setTimeout(() => {
closeTooltip(definition);
timer = null;
}, 1e3);
}
// src/js/inline-code/index.ts
function inlineCopyFn(target) {
const innerText = target.innerText;
if (!innerText) {
return;
}
copyToClipboard(innerText).then(() => {
tooltipWorker(target);
});
}
if (typeof document !== "undefined") {
document.addEventListener("click", (event) => {
const target = getEventTarget(event);
const inline = target.matches(INLINE_CODE);
if (isCustom(event) || !inline) {
return;
}
inlineCopyFn(target);
});
document.addEventListener("keydown", (event) => {
var _a;
if (event.key === "Enter" && document.activeElement) {
const activeElement = document.activeElement;
const classInlineCode = INLINE_CODE.replace(".", "");
if (!activeElement.classList.contains(classInlineCode)) {
return;
}
const innerText = activeElement.innerText;
if (!innerText) {
return;
}
copyToClipboard(innerText).then(() => {
tooltipWorker(activeElement);
});
}
const inlineTooltip = getTooltipElement();
if (event.key === "Escape" && inlineTooltip) {
closeTooltip(inlineTooltip);
(_a = getInlineCodeByTooltip(inlineTooltip)) == null ? void 0 : _a.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);
});
}
})();
//# sourceMappingURL=base.js.map