@8btc/mditor 0.0.1

package/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "@8btc/mditor",
+    "version": "0.0.1",
+    "description": "mditor, Md编辑器",
+    "author": "wujie-vditor",
+    "jsdelivr": "dist/index.min.js",
+    "main": "dist/index.js",
+    "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.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@eslint/js": "9.12.0",
+        "@types/diff-match-patch": "^1.0.32",
+        "@types/node": "^17.0.19",
+        "@typescript-eslint/eslint-plugin": "^8.9.0",
+        "@typescript-eslint/parser": "^8.9.0",
+        "autoprefixer": "^10.4.2",
+        "babel-loader": "^9.2.1",
+        "clean-webpack-plugin": "^4.0.0-alpha.0",
+        "copy-webpack-plugin": "^6.4.1",
+        "css-loader": "^5.2.4",
+        "eslint": "^9.12.0",
+        "eslint-plugin-prettier": "5.2.1",
+        "html-webpack-plugin": "^5.3.1",
+        "less": "^4.2.0",
+        "less-loader": "^10.2.0",
+        "mini-css-extract-plugin": "^2.6.0",
+        "postcss": "^8.4.12",
+        "postcss-loader": "^5.2.0",
+        "prettier": "3.4.1",
+        "qiniu": "7.8.0",
+        "style-loader": "^1.3.0",
+        "terser-webpack-plugin": "^5.3.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^4.9.5",
+        "typescript-eslint": "^8.9.0",
+        "webpack": "^5.66.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0"
+    },
+    "scripts": {
+        "lint": "eslint src",
+        "format": "prettier --write \"src/**/*.ts\"",
+        "validate:config": "node scripts/validate-config.js",
+        "start": "webpack serve --config webpack.start.js",
+        "upload:dist": "node scripts/uploadQiniu static",
+        "build": "webpack && node scripts/patch-dts.js"
+    },
+    "keywords": [
+        "editor",
+        "markdown"
+    ]
+}

package/src/assets/less/_content.less

@@ -0,0 +1,247 @@
+@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: 0.25rem;
+  box-sizing: border-box;
+  font-family: @font-family-base;
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    left: 0;
+    height: 100vh !important;
+    z-index: 90;
+    border-radius: 0;
+  }
+
+  &-content {
+    display: flex;
+    min-height: 3.75rem;
+    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 0.25rem 0;
+    // background-color: var(--textarea-background-color);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    // 已移除预览动作面板样式
+
+    & > .vditor-reset {
+      padding: 0.625rem;
+      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 0.25rem 0;
+    padding: 0.625rem;
+  }
+
+  &-counter {
+    padding: 0.25rem;
+    color: var(--toolbar-icon-color);
+    background-color: var(--count-background-color);
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    user-select: none;
+    float: right;
+    margin: 0.5rem 0.25rem 0 0;
+
+    &--error {
+      color: @errorColor;
+      background-color: rgba(@errorColor, 0.1);
+    }
+  }
+
+  &-resize {
+    padding: 0.25rem 0;
+    cursor: row-resize;
+    user-select: none;
+    position: absolute;
+    width: 100%;
+
+    &--top {
+      top: -0.19rem;
+    }
+
+    &--bottom {
+      bottom: -0.19rem;
+    }
+
+    & > div {
+      height: 0.25rem;
+      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: 0.81rem;
+      height: 0.25rem;
+      display: block;
+      margin: 0 auto;
+      color: var(--resize-icon-color);
+    }
+  }
+
+  &-upload {
+    position: absolute;
+    height: 0.25rem;
+    left: 0;
+    top: -2px;
+    transition: @transition;
+    background-color: @primaryColor;
+  }
+
+  &-tip {
+    position: absolute;
+    font-size: 0.75rem;
+    top: 0.63rem;
+    animation-duration: 0.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: 1.00rem;
+      padding: 0.25rem 0.63rem;
+      border-radius: 0.25rem;
+      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 1.13rem;
+      }
+
+      a {
+        color: @primaryColor;
+      }
+    }
+
+    &__close {
+      position: absolute;
+      color: var(--toolbar-icon-color);
+      top: -0.44rem;
+      right: -0.94rem;
+      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: 100;
+
+    &__bar {
+      border-bottom: 1px solid var(--border-color);
+      background-color: var(--toolbar-background-color);
+      text-align: center;
+      height: 2.25rem;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 1.50rem;
+      user-select: none;
+      color: var(--toolbar-icon-color);
+
+      &:hover {
+        color: var(--toolbar-icon-hover-color);
+      }
+
+      svg {
+        height: 0.88rem;
+        width: 0.88rem;
+        margin-right: 0.50rem;
+        fill: currentColor;
+      }
+    }
+
+    &__img {
+      flex: 1;
+      // background-color: var(--textarea-background-color);
+      overflow: auto;
+      cursor: zoom-out;
+
+      img {
+        max-width: none;
+      }
+    }
+  }
+}

package/src/assets/less/_hint.less

@@ -0,0 +1,67 @@
+.vditor-hint {
+  background-color: var(--panel-background-color);
+  position: absolute;
+  box-shadow: var(--panel-shadow);
+  border-radius: 0.25rem;
+  padding: 0.31rem 0;
+  z-index: 4;
+  line-height: 1.25rem;
+  list-style: none;
+  font-size: 0.75rem;
+  margin: 0;
+  max-width: 15.63rem;
+  min-width: 5.00rem;
+  display: none;
+
+  .vditor-hint {
+    margin-top: -1.94rem;
+    left: 100%;
+    right: auto;
+
+    &.vditor-panel--left {
+      right: 100%;
+      left: auto;
+    }
+  }
+
+  button {
+    color: var(--toolbar-icon-color);
+    display: block;
+    padding: 0.25rem 0.63rem;
+    border: 0;
+    border-radius: 0;
+    line-height: 1.25rem;
+    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: 1.00rem;
+    float: left;
+    margin-right: 0.25rem;
+  }
+
+  img {
+    height: 1.25rem;
+    width: 1.25rem;
+    float: left;
+    margin-right: 0.25rem;
+  }
+}

package/src/assets/less/_ir.less

@@ -0,0 +1,282 @@
+.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: @primaryColor;
+    }
+
+    &[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: 1.69rem;
+  }
+
+  &__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: 0.75rem 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: 0.25rem;
+    margin-left: -1.81rem;
+    content: 'H1';
+    font-size: 0.85rem;
+    font-weight: normal;
+    color: var(--second-color);
+    display: none;
+  }
+
+  & .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: 1.50rem;
+    margin-top: 1.50rem;
+
+    & > div[data-type="footnotes-def"] {
+      & > ul, & > ol, & > p, & > blockquote, & > pre, & > table, & > hr {
+        margin-left: 0.50rem;
+      }
+    }
+  }
+
+
+  .vditor-toc {
+    &:before {
+      content: "ToC";
+    }
+
+    span[data-type="toc-h"] {
+      color: @primaryColor;
+      text-decoration: underline;
+    }
+  }
+
+  /*
+   * 以避免公式块与前文之间出现额外间距
+   */
+  .vditor-reset > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, code, pre):has(+ .vditor-ir__node[data-type="math-block"]) {
+    margin-bottom: 0 !important;
+  }
+}
+
+@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;
+    }
+  }
+}

package/src/assets/less/_line-number.less

@@ -0,0 +1,30 @@
+.vditor--linenumber {
+    .vditor-reset {
+        counter-reset: linenumber;
+        padding-left: 4em; /* 预留固定左侧行号栏位 */
+        > ul, ol {
+            &::before {
+                margin-left: -4.5rem !important;
+            }
+        }
+        >[data-block="0"] {
+            position: relative;
+            counter-increment: linenumber;
+
+            &::before {
+                content: counter(linenumber);
+                float: left;
+                padding-right: 0.25rem;
+                margin-left: -2.5rem;
+                width: 2em;
+                text-align: right;
+                color: var(--second-color);
+                font-size: 0.75rem;
+                line-height: inherit;
+                user-select: none;
+                pointer-events: none;
+                display: block;
+            }
+        }
+    }
+}