@diplodoc/transform 4.0.0

package/src/js/term/utils.ts

@@ -0,0 +1,151 @@
+export const Selector = {
+    TITLE: '.yfm .yfm-term_title',
+    CONTENT: '.yfm .yfm-term_dfn',
+};
+export const openClass = 'open';
+export const openDefinitionClass = Selector.CONTENT.replace(/\./g, '') + ' ' + openClass;
+let isListenerNeeded = true;
+
+export function createDefinitionElement(termElement: HTMLElement) {
+    const termKey = termElement.getAttribute('term-key');
+    const definitionTemplate = document.getElementById(
+        `${termKey}_template`,
+    ) as HTMLTemplateElement;
+    const definitionElement = definitionTemplate?.content.cloneNode(true).firstChild as HTMLElement;
+
+    definitionTemplate?.parentElement?.appendChild(definitionElement);
+    definitionTemplate.remove();
+
+    return definitionElement;
+}
+
+export function setDefinitionId(definitionElement: HTMLElement, termElement: HTMLElement): void {
+    const termId = termElement.getAttribute('id') || Math.random().toString(36).substr(2, 8);
+    definitionElement?.setAttribute('term-id', termId);
+}
+
+export function setDefinitionPosition(
+    definitionElement: HTMLElement,
+    termElement: HTMLElement,
+): void {
+    const {
+        x: termX,
+        y: termY,
+        right: termRight,
+        left: termLeft,
+        width: termWidth,
+        height: termHeight,
+    } = termElement.getBoundingClientRect();
+
+    const termParent = termParentElement(termElement);
+
+    if (!termParent) {
+        return;
+    }
+
+    const {right: termParentRight, left: termParentLeft} = termParent.getBoundingClientRect();
+
+    if ((termParentRight < termLeft || termParentLeft > termRight) && !isListenerNeeded) {
+        closeDefinition(definitionElement);
+        return;
+    }
+
+    if (isListenerNeeded && termParent) {
+        termParent.addEventListener('scroll', termOnResize);
+        isListenerNeeded = false;
+    }
+
+    const relativeX = Number(definitionElement.getAttribute('relativeX'));
+    const relativeY = Number(definitionElement.getAttribute('relativeY'));
+
+    if (relativeX === termX && relativeY === termY) {
+        return;
+    }
+
+    definitionElement.setAttribute('relativeX', String(termX));
+    definitionElement.setAttribute('relativeY', String(termY));
+
+    const offsetTop = termHeight + 5;
+    const definitionParent = definitionElement.parentElement;
+
+    if (!definitionParent) {
+        return;
+    }
+
+    const {width: definitionWidth} = definitionElement.getBoundingClientRect();
+    const {left: definitionParentLeft} = definitionParent.getBoundingClientRect();
+
+    // If definition not fit document change base alignment
+    const definitionRightCoordinate = definitionWidth + Number(getCoords(termElement).left);
+    const fitDefinitionDocument =
+        document.body.clientWidth > definitionRightCoordinate ? 0 : definitionWidth - termWidth;
+
+    const customHeaderTop = getCoords(definitionParent).top - definitionParent.offsetTop;
+
+    definitionElement.style.top =
+        Number(getCoords(termElement).top + offsetTop - customHeaderTop) + 'px';
+    definitionElement.style.left =
+        Number(
+            getCoords(termElement).left -
+                definitionParentLeft +
+                definitionParent.offsetLeft -
+                fitDefinitionDocument,
+        ) + 'px';
+}
+
+function termOnResize() {
+    const openDefinition = document.getElementsByClassName(openDefinitionClass)[0] as HTMLElement;
+
+    if (!openDefinition) {
+        return;
+    }
+    const termId = openDefinition.getAttribute('term-id') || '';
+    const termElement = document.getElementById(termId);
+
+    if (!termElement) {
+        return;
+    }
+
+    setDefinitionPosition(openDefinition, termElement);
+}
+
+function termParentElement(term: HTMLElement | null) {
+    if (!term) {
+        return null;
+    }
+
+    const closestScrollableParent = term.closest('table') || term.closest('code');
+
+    return closestScrollableParent || term.parentElement;
+}
+
+export function closeDefinition(definition: HTMLElement) {
+    definition.classList.remove(openClass);
+    const termId = definition.getAttribute('term-id') || '';
+    const termParent = termParentElement(document.getElementById(termId));
+
+    if (!termParent) {
+        return;
+    }
+
+    termParent.removeEventListener('scroll', termOnResize);
+    isListenerNeeded = true;
+}
+
+function getCoords(elem: HTMLElement) {
+    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)};
+}

package/src/js/utils.ts

@@ -0,0 +1,9 @@
+export const getEventTarget = (event: Event) => {
+    const path = event.composedPath();
+    return Array.isArray(path) && path.length > 0 ? path[0] : event.target;
+};
+
+export const isCustom = (event: Event) => {
+    const target = getEventTarget(event);
+    return !target || !(target as HTMLElement).matches;
+};

package/src/scss/_anchor.scss

@@ -0,0 +1,33 @@
+.yfm {
+    h1, h2, h3, h4, h5, h6 {
+        .yfm-anchor {
+            display: inline-block;
+            width: 24px;
+            padding-right: 4px;
+            margin-left: -24px;
+            float: left;
+
+            text-align: center;
+            font-size: 18px;
+        }
+
+        .yfm-anchor::before {
+            content: '#';
+            visibility: hidden;
+        }
+
+        &:hover .yfm-anchor::before {
+            visibility: visible;
+        }
+    }
+
+    table {
+        h1, h2, h3, h4, h5, h6 {
+            .yfm-anchor {
+                width: 1em;
+                margin-left: -1em;
+                padding-right: 0;
+            }
+        }
+    };
+}

package/src/scss/_code.scss

@@ -0,0 +1,23 @@
+.yfm {
+    &-clipboard {
+        position: relative;
+
+        &:hover &-button {
+            display: block;
+        }
+
+        & > pre {
+            border-radius: 10px;
+            overflow: hidden;
+        }
+    }
+
+    &-clipboard-button {
+        display: none;
+        position: absolute;
+        cursor: pointer;
+        top: 16px;
+        right: 16px;
+        z-index: 1;
+    }
+}

package/src/scss/_common.scss

@@ -0,0 +1,407 @@
+@import 'variables';
+
+.yfm {
+    font-family: var(--yfm-font-family-sans);
+    font-size: 15px;
+    line-height: 20px;
+    word-wrap: break-word;
+    color: $textColor;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    & > *:not(h2):not(h3):not(h4):not(h5):not(h6):first-child {
+        margin-top: 0 !important;
+    }
+
+    & > *:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 15px;
+        font-weight: 500;
+    }
+
+    h1 {
+        font-size: 32px;
+        line-height: 40px;
+    }
+
+    h2 {
+        font-size: 24px;
+        line-height: 28px;
+    }
+
+    h3 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    h4 {
+        font-size: 17px;
+        line-height: 24px;
+    }
+
+    h5 {
+        font-size: 15px;
+        line-height: 20px;
+    }
+
+    h6 {
+        font-size: 13px;
+        line-height: 18px;
+    }
+
+    a {
+        background-color: transparent;
+        color: $linkColor;
+        text-decoration: none;
+
+        &:hover, &:active {
+            color: $linkHoverColor;
+        }
+
+        &:not([href]) {
+            color: inherit;
+        }
+
+    }
+
+    strong {
+        font-weight: 700;
+    }
+
+    img, svg {
+        box-sizing: content-box;
+        max-width: 100%;
+        border: none;
+        vertical-align: middle;
+
+        &[align=right] {
+            padding-left: 20px;
+        }
+
+        &[align=left] {
+            padding-right: 20px;
+        }
+    }
+
+    img {
+        background-color: $baseColor;
+    }
+
+    svg {
+        height: auto;
+    }
+
+    .katex svg {
+        height: initial;
+    }
+
+    img + small {
+        display: block;
+    }
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+        margin: 0 0 15px 0;
+    }
+
+    ul, ol, dl {
+        & pre {
+            margin-top: 15px;
+        }
+    }
+
+    code,
+    kbd,
+    pre {
+        font-family: var(--yfm-font-family-monospace);
+        font-size: 1em;
+        font-feature-settings: normal;
+    }
+
+    input {
+        margin: 0;
+        overflow: visible;
+
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+
+        &[type='checkbox'] {
+            position: relative;
+            top: 1px;
+
+            box-sizing: border-box;
+            padding: 0;
+        }
+    }
+
+    table {
+        color: #333;
+
+        display: inline-block;
+        max-width: 100%;
+        width: auto;
+        overflow: auto;
+        position: relative;
+        z-index: 1;
+
+        box-sizing: border-box;
+        border: 1px solid $borderColor;
+        border-radius: 8px;
+        border-collapse: collapse;
+        border-spacing: 0;
+        background: $baseColor;
+
+        thead, tr:nth-child(2n) {
+            background-color: $tableRowBackgroundColor;
+        }
+
+        tr:first-child {
+            td, th {
+                border-top: none;
+            }
+        }
+
+        tr:last-child {
+            td, th {
+                border-bottom: none;
+            }
+        }
+
+
+        th, td {
+            padding: 10px 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border: 1px solid $borderColor;
+
+            p {
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        td {
+            vertical-align: baseline;
+            white-space: normal;
+        }
+
+        th {
+            font-weight: 500;
+            text-align: left;
+        }
+
+        tr td:first-child, tr th:first-child {
+            border-left: none;
+        }
+        tr td:last-child, tr th:last-child {
+            border-right: none;
+        }
+    }
+
+    hr {
+        box-sizing: content-box;
+        height: 0.25em;
+        padding: 0;
+        margin: 1.5em 0;
+        overflow: hidden;
+
+        background-color: $borderColor;
+        border: none;
+
+        &::before {
+            content: '';
+            display: table;
+        }
+
+        &::after {
+            content: '';
+            display: table;
+            clear: both;
+        }
+    }
+
+    blockquote {
+        position: relative;
+        padding-left: 12px;
+        border-left: 3px solid $accentColor;
+
+        & > *:first-child {
+            margin-top: 0;
+        }
+
+        & > *:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    dl {
+        padding: 0;
+
+        & > *:first-child {
+            margin-top: 0;
+        }
+
+        & > *:last-child {
+            margin-bottom: 0;
+        }
+
+        dt {
+            margin-bottom: 5px;
+            font-size: 1em;
+            font-weight: 500;
+            font-style: italic;
+        }
+
+        dd {
+            margin-bottom: 15px;
+            padding: 0 15px;
+        }
+    }
+
+    dd {
+        margin-left: 0;
+
+        & > ol:first-child,
+        & > ul:first-child,
+        & > dd:first-child {
+            padding-left: 0;
+        }
+    }
+
+    ul, ol {
+        padding-left: 2.2em;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    &:not(.yfm_no-list-reset) {
+        ol {
+            list-style-type: none;
+            counter-reset: list;
+
+            & > li {
+                position: relative;
+                counter-increment: list;
+
+                &::before {
+                    position: absolute;
+                    right: 100%;
+                    margin-right: 4px;
+                    content: counters(list, '.') '. ';
+                }
+            }
+        }
+    }
+
+    li {
+        word-wrap: break-word;
+    }
+
+    li + li {
+        margin-top: 0.33em;
+    }
+
+    li p,
+    li blockquote {
+        margin-top: 15px;
+    }
+
+    code {
+        padding: 0.1em 0.4em 0.15em;
+        background-color: $inlineCodeBackgroundColor;
+        border-radius: 4px;
+        font-size: 0.875em;
+        white-space: normal;
+        color: $inlineCodeColor;
+    }
+
+    pre {
+        word-wrap: normal;
+    }
+
+    table code {
+        white-space: nowrap;
+    }
+
+    pre * code {
+        display: inline;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+        color: $textColor;
+    }
+
+    pre > code {
+        display: block;
+        padding: 16px;
+        overflow: auto;
+
+        background-color: $codeBackgroundColor;
+        color: $textColor;
+
+        white-space: pre;
+    }
+
+    sup, sub {
+        line-height: 0;
+    }
+
+    /*
+        Hides element visually, but leaves it visible for search crawlers and screen readers
+
+        https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+        https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+    */
+    .visually-hidden {
+        position: absolute;
+
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+
+        padding: 0;
+
+        white-space: nowrap;
+
+        border: 0;
+
+        clip-path: inset(100%);
+    }
+
+    // highlight.js colors
+    --yfm-color-hljs-background: #{$codeBackgroundColor};
+    --yfm-color-hljs-subst: #444;
+    --yfm-color-hljs-comment: #888888;
+    --yfm-color-hljs-deletion: #880000;
+    --yfm-color-hljs-section: #880000;
+    --yfm-color-hljs-pseudo: #BC6060;
+    --yfm-color-hljs-literal: #78A960;
+    --yfm-color-hljs-addition: #397300;
+    --yfm-color-hljs-meta: #1f7199;
+    --yfm-color-hljs-meta-string: #4d99bf;
+    --yfm-font-family-monospace: "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace;
+    --yfm-font-family-sans: 'Segoe UI', Arial, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

package/src/scss/_cut.scss

@@ -0,0 +1,42 @@
+.yfm-cut {
+    $class: &;
+
+    &-title {
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        padding: 5px 0 5px 30px;
+
+        &:before {
+            content: '';
+            z-index: 1;
+            left: 0;
+            top: 50%;
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=");
+            transform: translateY(-50%) rotate(-90deg);
+            transition: transform 0.3s ease;
+            height: 20px;
+            width: 20px;
+            position: absolute;
+        }
+    }
+
+    &-content {
+        height: 0;
+        overflow: hidden;
+        transition: height 0.3s ease-in-out;
+    }
+
+    &.open {
+        > #{$class}-content {
+            padding: 5px 0 15px 30px;
+            height: auto;
+        }
+
+        > #{$class}-title:before {
+            transform: translateY(-50%);
+        }
+    }
+}
+
+

package/src/scss/_file.scss

@@ -0,0 +1,35 @@
+@import 'variables';
+
+$defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==");
+
+/**
+    Public CSS variables:
+    --yfm-file-icon             sets file icon image
+    --yfm-file-icon-color       sets file icon color
+*/
+
+.yfm-file {
+    &__icon {
+        ---yfm-file-icon-img: var(--yfm-file-icon, #{$defaultIcon});
+
+        display: inline-block;
+        user-select: none;
+
+        width: 16px;
+        margin: 0 2px;
+
+        color: var(--yfm-file-icon-color, #{$textColor});
+        background-color: currentColor;
+        background-repeat: no-repeat;
+        background-position: 50%;
+        background-size: 100%;
+
+        mask-image: var(---yfm-file-icon-img);
+        mask-position: center;
+        mask-repeat: no-repeat;
+
+        &::before {
+            content: '\a0';
+        }
+    }
+}