@yltrcc/vditor 0.0.1

package/src/assets/less/_panel.less

@@ -0,0 +1,110 @@
+/**
+ * panel.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 1.0.0.0, Jan 22, 2020
+ */
+
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.vditor {
+  &-panel {
+    background-color: var(--panel-background-color);
+    position: absolute;
+    box-shadow: var(--panel-shadow);
+    border-radius: 3px;
+    padding: 5px;
+    z-index: 3;
+    font-size: 14px;
+    display: none;
+    user-select: none;
+    max-width: 320px;
+    min-width: 80px;
+    animation-duration: 0.15s;
+    animation-name: scale-in;
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+    color: var(--toolbar-icon-color);
+
+    &--none {
+      padding: 0;
+      animation: none;
+      min-width: auto;
+      max-width: none;
+      white-space: nowrap;
+      opacity: 0.86;
+    }
+
+    &--arrow:before {
+      position: absolute;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: " ";
+      border: 7px solid transparent;
+      top: -14px;
+      left: 5px;
+      border-bottom-color: var(--panel-background-color);
+    }
+
+    &--left {
+      right: 0;
+
+      &.vditor-panel--arrow:before {
+        right: 5px;
+        left: auto;
+      }
+    }
+  }
+
+  &-input {
+    border: 0;
+    padding: 3px 5px;
+    background-color: var(--panel-background-color);
+    font-size: 12px;
+    color: var(--textarea-text-color);
+
+    &:focus {
+      background-color: var(--toolbar-background-color);
+      outline: none;
+    }
+  }
+
+  &-icon {
+    color: var(--toolbar-icon-color);
+    cursor: pointer;
+    float: left;
+    padding: 4px 5px;
+    height: 21px;
+    width: 23px;
+    background-color: transparent;
+    border: 0;
+    box-sizing: border-box;
+
+    &:hover,
+    &--current {
+      color: var(--toolbar-icon-hover-color);
+      background-color: transparent;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    svg {
+      height: 13px !important;
+      width: 13px !important;
+      float: left;
+      fill: currentColor;
+      pointer-events: none;
+    }
+  }
+}

package/src/assets/less/_reset.less

@@ -0,0 +1,632 @@
+.vditor {
+    &-reset {
+        &--anchor {
+            padding-left: 20px;
+        }
+
+        &--error {
+            color: @errorColor;
+            font-size: 12px;
+            display: block;
+            line-height: 16px;
+        }
+
+        color: #24292e;
+        font-variant-ligatures: no-common-ligatures;
+        font-family: @font-family-base;
+        word-wrap: break-word;
+        overflow: auto;
+        line-height: 1.5;
+        font-size: 16px;
+        word-break: break-word;
+
+        ul ul ul {
+            list-style-type: square;
+        }
+
+        ul ul {
+            list-style-type: circle;
+        }
+
+        ul {
+            list-style-type: disc;
+        }
+
+        ul,
+        ol {
+            padding-left: 2em;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        li + li {
+            margin-top: 0.25em;
+        }
+
+        li p {
+            margin-top: 16px;
+        }
+
+        audio {
+            max-width: 100%;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        video {
+            max-height: 90vh;
+            max-width: 100%;
+        }
+
+        img {
+            max-width: 100%;
+        }
+
+        img.emoji {
+            cursor: auto;
+            max-width: 20px;
+            vertical-align: sub;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
+
+            &:hover .vditor-anchor svg {
+                visibility: visible;
+            }
+        }
+
+        h1 {
+            font-size: 1.75em;
+        }
+
+        h2 {
+            font-size: 1.55em;
+        }
+
+        h3 {
+            font-size: 1.38em;
+        }
+
+        h4 {
+            font-size: 1.25em;
+        }
+
+        h5 {
+            font-size: 1.13em;
+        }
+
+        h6 {
+            font-size: 1em;
+        }
+
+        hr {
+            height: 2px;
+            padding: 0;
+            margin: 24px 0;
+            background-color: #eaecef;
+            border: 0;
+        }
+
+        p {
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        blockquote {
+            padding: 0 1em;
+            color: #6a737d;
+            border-left: 0.25em solid #eaecef;
+            margin: 0 0 16px 0;
+
+            & > :first-child {
+                margin-top: 0;
+            }
+
+            & > :last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        ins > iframe {
+            border: 0;
+        }
+
+        iframe {
+            border: 1px solid #d1d5da;
+            max-width: 100%;
+            box-sizing: border-box;
+
+            &.iframe__video {
+                min-width: 80%;
+                min-height: 36vh;
+            }
+        }
+
+        table {
+            border-collapse: collapse;
+            empty-cells: show;
+            margin-bottom: 16px;
+            overflow: auto;
+            border-spacing: 0;
+            display: block;
+            word-break: keep-all;
+            width: 100%;
+
+            tr {
+                background-color: #fafbfc;
+                border-top: 1px solid #c6cbd1;
+            }
+
+            td,
+            th {
+                padding: 6px 13px;
+                border: 1px solid #dfe2e5;
+                word-break: normal;
+                white-space: nowrap;
+
+                &:first-child::after {
+                    content: "";
+                    display: inline-block;
+                    vertical-align: top;
+                    min-height: 24px;
+                }
+            }
+
+            th {
+                font-weight: 600;
+            }
+
+            tbody tr:nth-child(2n) {
+                background-color: #fff;
+            }
+        }
+
+        code:not(.hljs):not(.highlight-chroma) {
+            padding: 0.2em 0.4em;
+            margin: 0;
+            font-size: 85%;
+            border-radius: 3px;
+            font-family: @font-family-code;
+            word-break: break-word;
+            background-size: 20px 20px;
+            white-space: pre-wrap;
+        }
+
+        pre {
+            margin: 1em 0;
+
+            & > code {
+                margin: 0;
+                font-size: 85%;
+                padding: 0.5em;
+                border-radius: 5px;
+                display: block;
+                overflow: auto;
+                white-space: pre;
+                font-family: @font-family-code;
+                background-size: 20px 20px;
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+                word-break: initial;
+                word-wrap: normal;
+            }
+
+            &:hover div.vditor-copy {
+                display: block;
+            }
+        }
+
+        .language-math,
+        .language-echarts,
+        .language-mindmap,
+        .language-plantuml,
+        .language-mermaid,
+        .language-smiles,
+        .language-markmap,
+        .language-abc,
+        .language-flowchart,
+        .language-graphviz {
+            margin-bottom: 16px;
+        }
+
+        .language-math {
+            mjx-container:focus {
+                outline: none;
+                cursor: context-menu;
+            }
+
+            .katex-display > .katex > .katex-html > .tag {
+                display: inline-block;
+                font-size: 1.21rem;
+                right: 2px;
+            }
+        }
+
+        .language-echarts,
+        .language-mindmap {
+            overflow: hidden;
+            height: 420px;
+        }
+
+        .language-mermaid,
+        .language-markmap,
+        .language-flowchart,
+        .language-graphviz {
+            text-align: center;
+        }
+
+        .language-graphviz parsererror {
+            overflow: auto;
+        }
+
+        kbd {
+            display: inline-block;
+            padding: 3px 5px;
+            font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+            line-height: 10px;
+            color: #24292e;
+            vertical-align: middle;
+            background-color: #fafbfc;
+            border: solid 1px #d1d5da;
+            border-radius: 3px;
+            box-shadow: inset 0 -1px 0 #d1d5da;
+        }
+
+        summary {
+            cursor: pointer;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        svg {
+            height: auto;
+            width: auto;
+            stroke-width: initial;
+        }
+
+        p:last-child,
+        blockquote:last-child,
+        pre:last-child,
+        ul:last-child,
+        ol:last-child,
+        hr:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &-comment {
+        border-bottom: 2px solid rgb(248, 230, 171);
+
+        &--focus,
+        &--hover {
+            background-color: rgb(250, 241, 209);
+            border-bottom: 2px solid rgb(255, 198, 10);
+
+            .vditor-comment {
+                border-bottom: 2px solid rgb(255, 198, 10);
+            }
+        }
+    }
+
+    &-task {
+        list-style: none !important;
+        word-break: break-all;
+
+        input {
+            margin: 0 0.2em 0.25em -1.6em;
+            font-size: 12px;
+            vertical-align: middle;
+        }
+
+        &:has(input:checked) {
+            color: #818989;
+            text-decoration: line-through;
+            text-decoration-line: line-through;
+            text-decoration-thickness: initial;
+            text-decoration-style: initial;
+            text-decoration-color: initial;
+        }
+
+        & input {
+            text-decoration: none !important;
+        }
+    }
+
+    &-copy {
+        position: relative;
+        display: none;
+        z-index: 1;
+
+        textarea {
+            position: absolute;
+            left: -100000px;
+            height: 10px;
+        }
+
+        span {
+            cursor: pointer;
+            position: absolute;
+            right: 15px;
+            top: 0.5em;
+        }
+
+        svg {
+            color: #586069;
+            height: 14px;
+            width: 14px !important;
+            display: block;
+            fill: currentColor;
+        }
+    }
+
+    &-linenumber {
+        padding-left: 4em !important;
+        position: relative;
+
+        &__rows {
+            position: absolute;
+            pointer-events: none;
+            top: 1em;
+            left: 0;
+            width: 3em; /* works for line-numbers below 1000 lines */
+            user-select: none;
+            counter-reset: linenumber;
+
+            & > span {
+                pointer-events: none;
+                display: block;
+
+                &::before {
+                    counter-increment: linenumber;
+                    content: counter(linenumber);
+                    color: rgba(158, 150, 150, 0.38);
+                    display: block;
+                    padding-right: 1em;
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &-speech {
+        position: absolute;
+        display: none;
+        background-color: #f6f8fa;
+        border: 1px solid #d1d5da;
+        border-radius: 3px;
+        padding: 3px;
+        cursor: pointer;
+        color: #586069;
+
+        &:hover,
+        &--current {
+            color: #4285f4;
+        }
+
+        svg {
+            height: 14px;
+            width: 14px;
+            fill: currentColor;
+            display: block;
+            stroke-width: 0;
+            stroke: currentColor;
+        }
+    }
+
+    &-anchor {
+        margin-left: 5px;
+
+        &--left {
+            float: left;
+            padding-right: 4px;
+            margin-left: -20px;
+        }
+
+        svg {
+            visibility: hidden;
+        }
+
+        &:hover {
+            svg {
+                visibility: visible;
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &-linkcard {
+        margin: 31px auto 16px;
+        transition: @transition;
+        cursor: pointer;
+        max-width: 768px;
+        padding: 0 10px;
+
+        a {
+            border-radius: 3px;
+            background-color: #f6f8fa;
+            overflow: hidden;
+            max-height: 250px;
+            display: flex;
+            text-decoration: none;
+            flex-wrap: wrap-reverse;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+            &:hover {
+                box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
+                text-decoration: none;
+            }
+
+            &:visited .vditor-linkcard__abstract {
+                color: rgba(88, 96, 105, 0.36);
+            }
+        }
+
+        &__info {
+            padding: 10px;
+            min-width: 200px;
+            box-sizing: border-box;
+            flex: 1;
+        }
+
+        &__title {
+            font-size: 14px;
+            font-weight: 400;
+            color: #24292e;
+            display: flex;
+            align-items: center;
+
+            img {
+                cursor: pointer;
+                height: 20px;
+                width: 20px;
+                border-radius: 3px;
+                flex-shrink: 0;
+                margin-right: 5px;
+            }
+        }
+
+        &__abstract {
+            word-wrap: break-word;
+            word-break: break-all;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-box-orient: vertical;
+            display: -webkit-box;
+            font-size: 13px;
+            color: #586069;
+            margin: 5px 0;
+        }
+
+        &__site {
+            font-size: 12px;
+            color: #4285f4;
+        }
+
+        &__image {
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+            max-width: 250px;
+            min-width: 126px;
+            cursor: pointer;
+            background-color: rgba(88, 96, 105, 0.36);
+        }
+    }
+
+    &-footnotes__goto-ref {
+        text-decoration: none;
+    }
+
+    &-toc {
+        margin-bottom: 16px;
+        user-select: text;
+        color: @blurColor;
+
+        .vditor-outline__action {
+            display: none;
+        }
+
+        ul {
+            list-style: none !important;
+            padding-left: 1em;
+        }
+
+        & > ul {
+            padding-left: 0;
+        }
+
+        span {
+            cursor: pointer;
+        }
+
+        li > span > svg {
+            width: 0;
+            height: 0;
+        }
+    }
+
+    &-outline {
+        width: 250px;
+        border-right: 1px solid var(--border-color);
+        background-color: var(--panel-background-color);
+        display: none;
+        overflow: auto;
+
+        &--right {
+            border-right: 0;
+            border-left: 1px solid var(--border-color);
+        }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        ul {
+            list-style: none !important;
+            padding-left: 1em;
+            margin: 0;
+        }
+
+        &__content > ul {
+            padding-left: 0;
+        }
+
+        li > span {
+            display: flex;
+            align-items: center;
+            padding: 5px 10px;
+            cursor: pointer;
+            color: var(--textarea-text-color);
+
+            & > svg {
+                height: 10px;
+                width: 10px;
+                flex-shrink: 0;
+            }
+
+            &:hover {
+                color: var(--toolbar-icon-hover-color);
+            }
+
+            & > span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &__title {
+            border-bottom: 1px dashed var(--border-color);
+            padding: 5px 10px;
+            color: var(--toolbar-icon-color);
+            font-size: 12px;
+        }
+
+        &__action {
+            transition: @transition;
+            fill: currentColor;
+            margin-right: 5px;
+            flex-shrink: 0;
+
+            &--close {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+}