vditor 3.8.7

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vditor",
+  "version": "3.8.7",
+  "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
+  "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
+  "homepage": "https://b3log.org/vditor",
+  "jsdelivr": "dist/index.min.js",
+  "main": "dist/index.min.js",
+  "funding": "https://ld246.com/sponsor",
+  "files": [
+    "dist/*",
+    "src/index.ts",
+    "src/method.ts",
+    "src/ts/*",
+    "src/assets/*"
+  ],
+  "dependencies": {
+    "diff-match-patch": "^1.0.5"
+  },
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
+    "@types/diff-match-patch": "^1.0.32",
+    "@types/jest": "^26.0.23",
+    "@types/puppeteer": "^2.1.5",
+    "autoprefixer": "^9.8.6",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "copy-webpack-plugin": "^6.4.1",
+    "css-loader": "^5.2.4",
+    "file-loader": "^4.3.0",
+    "html-webpack-plugin": "^5.3.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^0.8.2",
+    "node-sass": "^6.0.1",
+    "postcss-loader": "^5.2.0",
+    "puppeteer": "^1.20.0",
+    "sass-loader": "^10.2.0",
+    "style-loader": "^1.3.0",
+    "terser-webpack-plugin": "^5.1.2",
+    "ts-jest": "^26.5.6",
+    "ts-loader": "^6.2.2",
+    "tslint": "^5.20.1",
+    "typescript": "^3.9.9",
+    "webpack": "^5.37.0",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^4.1.0"
+  },
+  "license": "MIT",
+  "repository": "git://github.com/Vanessa219/vditor.git",
+  "bugs": {
+    "url": "https://github.com/Vanessa219/vditor/issues"
+  },
+  "scripts": {
+    "lint": "tslint --fix -c tslint.json '{src,types}/**/*.ts'",
+    "test:watch": "jest --watch",
+    "test": "jest --coverage",
+    "start": "webpack serve --config webpack.start.js",
+    "build": "webpack"
+  },
+  "keywords": [
+    "editor",
+    "markdown",
+    "b3log"
+  ]
+}

package/src/assets/scss/_content.scss

@@ -0,0 +1,284 @@
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.vditor {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  box-sizing: border-box;
+  font-family: $font-family-base;
+
+  .vditor-copy {
+    z-index: auto;
+  }
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    left: 0;
+    height: 100vh !important;
+    z-index: 90;
+    border-radius: 0;
+  }
+
+  &-content {
+    display: flex;
+    min-height: 60px;
+    flex: 1;
+    min-width: 1px;
+    position: relative;
+  }
+
+  &-preview {
+    flex: 1;
+    min-width: 1px;
+    overflow: auto;
+    margin-left: -1px;
+    border-left: 1px solid var(--border-color);
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0;
+    background-color: var(--textarea-background-color);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &__action {
+      text-align: center;
+      padding: 10px;
+      background-color: var(--toolbar-background-color);
+
+      button {
+        background-color: var(--toolbar-background-color);
+        color: var(--toolbar-icon-color);
+        line-height: 20px;
+        border: 0;
+        margin: 0 10px;
+        cursor: pointer;
+        padding: 0 7px;
+        font-size: 12px;
+
+        &.vditor-preview__action--current,
+        &:hover {
+          color: var(--toolbar-icon-hover-color);
+          background-color: var(--toolbar-background-color);
+        }
+
+        &:focus {
+          outline: none;
+        }
+
+        svg {
+          fill: currentColor;
+          height: 15px;
+          width: 15px;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    & > .vditor-reset {
+      padding: 10px;
+      margin: 0 auto;
+    }
+
+    img:not(.emoji) {
+      cursor: pointer;
+    }
+  }
+
+  &-devtools {
+    display: none;
+    background-color: var(--textarea-background-color);
+    overflow: auto;
+    flex: 1;
+    min-width: 1px;
+    box-shadow: inset 1px 0 var(--border-color);
+    box-sizing: border-box;
+    border-radius: 0 0 3px 0;
+    padding: 10px;
+  }
+
+  &-counter {
+    padding: 3px;
+    color: var(--toolbar-icon-color);
+    background-color: var(--count-background-color);
+    border-radius: 3px;
+    font-size: 12px;
+    user-select: none;
+    float: right;
+    margin: 8px 3px 0 0;
+
+    &--error {
+      color: $errorColor;
+      background-color: rgba($errorColor, 0.1);
+    }
+  }
+
+  &-resize {
+    padding: 3px 0;
+    cursor: row-resize;
+    user-select: none;
+    position: absolute;
+    width: 100%;
+
+    &--top {
+      top: -3px;
+    }
+
+    &--bottom {
+      bottom: -3px;
+    }
+
+    & > div {
+      height: 3px;
+      background-color: var(--resize-background-color);
+      transition: $transition;
+    }
+
+    &:hover,
+    &--selected {
+      & > div {
+        background-color: var(--resize-hover-background-color);
+      }
+
+      svg {
+        color: var(--resize-hover-icon-color);
+      }
+    }
+
+    svg {
+      fill: currentColor;
+      stroke-width: 0;
+      stroke: currentColor;
+      width: 13px;
+      height: 3px;
+      display: block;
+      margin: 0 auto;
+      color: var(--resize-icon-color);
+    }
+  }
+
+  &-upload {
+    position: absolute;
+    height: 3px;
+    left: 0;
+    top: -2px;
+    transition: $transition;
+    background-color: $blurColor;
+  }
+
+  &-tip {
+    position: absolute;
+    font-size: 12px;
+    top: 10px;
+    animation-duration: .15s;
+    animation-fill-mode: both;
+    left: 50%;
+    z-index: 5;
+
+    &--show {
+      display: block;
+      animation-name: slideInDown;
+    }
+
+    &__content {
+      text-align: left;
+      display: inline-block;
+      line-height: 16px;
+      padding: 3px 10px;
+      border-radius: 3px;
+      background: var(--toolbar-background-color);
+      position: relative;
+      margin-left: -50%;
+      color: var(--toolbar-icon-color);
+      max-width: 100%;
+      box-shadow: var(--panel-shadow);
+
+      ul {
+        margin: 2px 0;
+        padding: 0 0 0 18px;
+      }
+
+      a {
+        color: $blurColor;
+      }
+    }
+
+    &__close {
+      position: absolute;
+      color: var(--toolbar-icon-color);
+      top: -7px;
+      right: -15px;
+      font-weight: bold;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--toolbar-icon-hover-color);
+      }
+    }
+  }
+
+  &-img {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    z-index: 3;
+
+    &__bar {
+      border-bottom: 1px solid var(--border-color);
+      background-color: var(--toolbar-background-color);
+      text-align: center;
+      height: 36px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 24px;
+      user-select: none;
+      color: var(--toolbar-icon-color);
+
+      &:hover {
+        color: var(--toolbar-icon-hover-color);
+      }
+
+      svg {
+        height: 14px;
+        width: 14px;
+        margin-right: 8px;
+        fill: currentColor;
+      }
+    }
+
+    &__img {
+      flex: 1;
+      background-color: var(--textarea-background-color);
+      overflow: auto;
+      cursor: zoom-out;
+
+      img {
+        max-width: none;
+      }
+    }
+  }
+}

package/src/assets/scss/_hint.scss

@@ -0,0 +1,67 @@
+.vditor-hint {
+  background-color: var(--panel-background-color);
+  position: absolute;
+  box-shadow: var(--panel-shadow);
+  border-radius: 3px;
+  padding: 5px 0;
+  z-index: 4;
+  line-height: 20px;
+  list-style: none;
+  font-size: 12px;
+  margin: 0;
+  max-width: 250px;
+  min-width: 80px;
+  display: none;
+
+  .vditor-hint {
+    margin-top: -31px;
+    left: 100%;
+    right: auto;
+
+    &.vditor-panel--left {
+      right: 100%;
+      left: auto;
+    }
+  }
+
+  button {
+    color: var(--toolbar-icon-color);
+    display: block;
+    padding: 3px 10px;
+    border: 0;
+    border-radius: 0;
+    line-height: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    margin: 0;
+    background-color: transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &--current,
+  button:not(.vditor-menu--disabled):hover {
+    background-color: var(--toolbar-background-color) !important;
+    color: var(--toolbar-icon-hover-color) !important;
+  }
+
+  &__emoji {
+    font-size: 16px;
+    float: left;
+    margin-right: 3px;
+  }
+
+  img {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin-right: 3px;
+  }
+}

package/src/assets/scss/_ir.scss

@@ -0,0 +1,275 @@
+.vditor-ir {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 1px;
+  position: relative;
+  width: 100%;
+
+  &__node {
+    &[data-type="code-block"]:before,
+    &[data-type="code-block"]:after,
+    &[data-type="yaml-front-matter"]:before,
+    &[data-type="yaml-front-matter"]:after,
+    &[data-type="math-block"]:before,
+    &[data-type="math-block"]:after {
+      content: ' ';
+      color: var(--second-color);
+    }
+
+    &:not(.vditor-ir__node--expand) .vditor-ir__marker {
+      padding: 0 !important;
+    }
+
+    &:not(.vditor-ir__node--expand)[data-type="a"] {
+      cursor: pointer;
+    }
+
+    &[data-type="link-ref"],
+    &[data-type="footnotes-ref"] {
+      color: $blurColor;
+    }
+
+    &[data-type="html-block"] {
+      margin-bottom: 1em;
+    }
+
+    .vditor-ir__marker {
+      width: 0;
+      overflow: hidden;
+      display: inline-block;
+      height: 0;
+      transition: $transition;
+    }
+
+    &--hidden {
+      .vditor-ir__marker {
+        visibility: hidden;
+      }
+    }
+
+    &--expand {
+      .vditor-ir__marker {
+        color: var(--second-color);
+        display: inline;
+        height: auto;
+        width: auto;
+
+        &--hide {
+          display: none;
+        }
+
+        &--heading {
+          color: var(--ir-heading-color);
+        }
+
+        &--bi {
+          color: var(--ir-bi-color);
+        }
+
+        &--link {
+          color: var(--ir-link-color);
+        }
+
+        &--title {
+          color: var(--ir-title-color);
+        }
+
+        &--bracket {
+          color: var(--ir-bracket-color);
+          text-decoration: underline;
+        }
+
+        &--paren {
+          color: var(--ir-paren-color);
+        }
+
+        &--info {
+          color: var(--ir-heading-color);
+        }
+
+        &--pre code {
+          color: var(--textarea-text-color);
+          height: auto;
+          text-align: left;
+        }
+      }
+
+      &[data-type="code-block"]:before,
+      &[data-type="code-block"]:after {
+        content: '```';
+      }
+
+      &[data-type="yaml-front-matter"]:before,
+      &[data-type="yaml-front-matter"]:after {
+        content: '---';
+      }
+
+      &[data-type="math-block"]:before,
+      &[data-type="math-block"]:after {
+        content: '$$';
+      }
+    }
+
+    span[data-type="code-block-open-marker"],
+    span[data-type="code-block-close-marker"],
+    span[data-type="yaml-front-matter-open-marker"],
+    span[data-type="yaml-front-matter-close-marker"],
+    span[data-type="math-block-open-marker"],
+    span[data-type="math-block-close-marker"] {
+      display: none;
+    }
+  }
+
+  &__preview {
+    cursor: pointer;
+    white-space: initial;
+    min-height: 27px;
+  }
+
+  &__link {
+    color: var(--ir-bracket-color);
+    text-decoration: underline;
+  }
+
+  pre.vditor-reset {
+    background-color: var(--panel-background-color);
+    margin: 0;
+    white-space: pre-wrap;
+    height: 100%;
+    box-sizing: border-box;
+
+    &[contenteditable="false"] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    &:empty::before {
+      content: attr(placeholder);
+      color: var(--second-color);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: var(--textarea-background-color);
+    }
+
+    &:after {
+      content: "";
+      height: var(--editor-bottom);
+      display: block;
+    }
+
+    pre {
+      margin: 0;
+    }
+  }
+
+  hr {
+    display: inline-block;
+    margin: 12px 0;
+    width: 100%;
+  }
+
+  blockquote:empty::before,
+  pre > code:empty::before,
+  p:empty::before,
+  h1:empty::after,
+  h2:empty::after,
+  h3:empty::after,
+  h4:empty::after,
+  h5:empty::after,
+  h6:empty::after {
+    content: ' ';
+  }
+
+  // block title
+  & .vditor-reset > h1:before,
+  & .vditor-reset > h2:before,
+  & .vditor-reset > h3:before,
+  & .vditor-reset > h4:before,
+  & .vditor-reset > h5:before,
+  & .vditor-reset > h6:before,
+  div[data-type="link-ref-defs-block"]:before,
+  div[data-type="footnotes-block"]:before,
+  .vditor-toc:before {
+    float: left;
+    padding-right: 4px;
+    margin-left: -29px;
+    content: 'H1';
+    font-size: 0.85rem;
+    font-weight: normal;
+    color: var(--second-color);
+  }
+
+  & .vditor-reset > h2:before {
+    content: 'H2';
+  }
+
+  & .vditor-reset > h3:before {
+    content: 'H3';
+  }
+
+  & .vditor-reset > h4:before {
+    content: 'H4';
+  }
+
+  & .vditor-reset > h5:before {
+    content: 'H5';
+  }
+
+  & .vditor-reset > h6:before {
+    content: 'H6';
+  }
+
+  div[data-type="link-ref-defs-block"] {
+    &:before {
+      content: '"A"';
+    }
+
+    color: var(--blockquote-color);
+  }
+
+  div[data-type="footnotes-block"] {
+    &:before {
+      content: '^F';
+    }
+
+    border-top: 2px solid var(--heading-border-color);
+    padding-top: 24px;
+    margin-top: 24px;
+
+    & > div[data-type="footnotes-def"] {
+      & > ul, & > ol, & > p, & > blockquote, & > pre, & > table, & > hr {
+        margin-left: 8px;
+      }
+    }
+  }
+
+
+  .vditor-toc {
+    &:before {
+      content: "ToC";
+    }
+
+    span[data-type="toc-h"] {
+      color: $blurColor;
+      text-decoration: underline;
+    }
+  }
+}
+
+@media screen and (max-width: $max-width) {
+  .vditor-ir {
+    h1:before,
+    h2:before,
+    h3:before,
+    h4:before,
+    h5:before,
+    h6:before,
+    div[data-type="link-ref-defs-block"]:before,
+    div[data-type="footnotes-block"]:before,
+    .vditor-toc:before {
+      content: none;
+    }
+  }
+}