@yltrcc/vditor 0.0.1

package/src/assets/less/_sv.less

@@ -0,0 +1,132 @@
+.vditor-sv {
+  font-family: @font-family-base;
+  margin: 0 1px 0 0;
+  overflow: auto;
+  width: 100%;
+  flex: 1;
+  min-width: 1px;
+  border: 0;
+  resize: none;
+  padding: 10px 9px 10px 10px;
+  box-sizing: border-box;
+  background-color: var(--panel-background-color);
+  outline: 0 none;
+  font-size: 16px;
+  line-height: 22px;
+  color: var(--textarea-text-color);
+  border-radius: 0 0 3px 3px;
+  font-variant-ligatures: no-common-ligatures;
+  white-space: pre-wrap;
+  word-break: break-word;
+  word-wrap: break-word;
+
+  &[contenteditable="false"] {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &:empty::before {
+    content: attr(placeholder);
+    color: var(--second-color);
+  }
+
+  &:focus {
+    background-color: var(--textarea-background-color);
+  }
+
+  &:after {
+    content: "";
+    height: var(--editor-bottom);
+    display: block;
+  }
+
+  span[data-type="newline"] + span[data-type="text"]:empty {
+    display: inherit;
+  }
+
+  .sup {
+    vertical-align: super;
+    font-size: smaller;
+  }
+
+  .strong {
+    font-weight: bold;
+  }
+
+  .em {
+    font-style: italic;
+  }
+
+  .s {
+    text-decoration: line-through;
+  }
+
+  .mark:not(.vditor-sv__marker) {
+    background-color: yellow;
+    color: black;
+  }
+
+  .h1 {
+    font-size: 1.75em;
+    line-height: 44px;
+  }
+
+  .h2 {
+    font-size: 1.55em;
+    line-height: 38px;
+  }
+
+  .h3 {
+    font-size: 1.38em;
+    line-height: 27px;
+  }
+
+  .h4 {
+    font-size: 1.25em;
+    line-height: 25px;
+  }
+
+  .h5 {
+    font-size: 1.13em;
+  }
+
+  .h6 {
+    font-size: 1em;
+  }
+
+  &__marker {
+    color: var(--second-color);
+
+    &--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);
+    }
+
+    &--paren {
+      color: var(--ir-paren-color);
+    }
+
+    &--info {
+      color: var(--ir-heading-color);
+    }
+
+    &--strong {
+      font-weight: bold;
+    }
+  }
+}

package/src/assets/less/_toolbar.less

@@ -0,0 +1,180 @@
+.vditor {
+  &-toolbar {
+    background-color: var(--toolbar-background-color);
+    border-bottom: 1px solid var(--border-color);
+    padding: 0 5px;
+    line-height: 1;
+
+    &--pin {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    &--hide {
+      transition: @transition;
+      height: 5px;
+      overflow: hidden;
+
+      &:hover {
+        background-color: var(--toolbar-background-color);
+        height: auto;
+        overflow: visible;
+      }
+    }
+
+    &__item {
+      float: left;
+      position: relative;
+
+      .vditor-tooltipped {
+        color: var(--toolbar-icon-color);
+        border: 0;
+        padding: 10px 5px;
+        background-color: transparent;
+        height: var(--toolbar-height);
+        width: 25px;
+        box-sizing: border-box;
+        font-size: 0;
+
+        &:focus {
+          outline: none;
+        }
+
+        &:focus {
+          cursor: pointer;
+          color: var(--toolbar-icon-hover-color);
+        }
+      }
+
+      svg {
+        fill: currentColor;
+        display: inline-block;
+        stroke-width: 0;
+        stroke: currentColor;
+        width: 15px;
+        height: 15px;
+      }
+
+      input {
+        position: absolute;
+        width: 25px;
+        height: var(--toolbar-height);
+        top: 0;
+        left: 0;
+        cursor: pointer;
+        opacity: .001;
+        overflow: hidden;
+      }
+    }
+
+    &__divider {
+      float: left;
+      height: calc(var(--toolbar-height) - (var(--toolbar-divider-margin-top) * 2));
+      border-left: 1px solid var(--second-color);
+      margin: var(--toolbar-divider-margin-top) 8px;
+    }
+
+    &__br {
+      width: 100%;
+      padding: 0 !important;
+      height: 0 !important;
+    }
+  }
+
+  &-menu {
+    &--current {
+      color: var(--toolbar-icon-hover-color) !important;
+    }
+
+    &--disabled {
+      color: var(--second-color) !important;
+      cursor: not-allowed !important;
+    }
+  }
+
+  &-emojis {
+    display: inline-block;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &__tip {
+      flex: 1;
+      min-width: 1px;
+      width: 200px;
+      margin-right: 10px;
+      color: var(--toolbar-icon-color);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &__tail {
+      margin-top: 5px;
+      font-size: 12px;
+      color: var(--toolbar-icon-color);
+      display: flex;
+
+      a {
+        text-decoration: none;
+        color: var(--toolbar-icon-color);
+
+        &:hover {
+          color: var(--toolbar-icon-hover-color);
+        }
+      }
+    }
+
+    button {
+      cursor: pointer;
+      border-radius: 3px;
+      float: left;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      line-height: 26px;
+      padding: 3px;
+      box-sizing: border-box;
+      font-size: 16px;
+      transition: @transition;
+      border: 0;
+      margin: 0;
+      background-color: transparent;
+      overflow: hidden;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover .vditor-emojis__icon {
+        display: inline-block;
+        transform: scale(1.2);
+      }
+    }
+
+    img {
+      height: 20px;
+      width: 20px;
+      float: left;
+      margin: 3px 0 0 3px;
+    }
+  }
+}
+
+@media screen and (max-width: @max-width) {
+  .vditor-toolbar__item {
+    padding: 0 12px;
+  }
+  .vditor-panel--left.vditor-panel--arrow:before {
+    right: 17px;
+  }
+}
+
+@media(hover: hover) and (pointer: fine) {
+  .vditor-toolbar__item .vditor-tooltipped:hover {
+    color: var(--toolbar-icon-hover-color);
+  }
+}

package/src/assets/less/_tooltipped.less

@@ -0,0 +1,171 @@
+/**
+ * tool tip.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Jan 25, 2019
+ */
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.vditor-tooltipped {
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font-size: 11px;
+    font-weight: normal;
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: #3b3e43;
+    border-radius: 3px;
+    line-height: 16px;
+    opacity: 0;
+  }
+
+  &::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: #3b3e43;
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+    opacity: 0;
+  }
+
+  &--hover::before,
+  &--hover::after,
+  &:hover::before,
+  &:hover::after,
+  &:active::before,
+  &:active::after,
+  &:focus::before,
+  &:focus::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: 0.15s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }
+
+  &__s::after,
+  &__se::after,
+  &__sw::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px;
+  }
+
+  &__s::before,
+  &__se::before,
+  &__sw::before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: #3b3e43;
+  }
+
+  &__se::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+  }
+
+  &__sw::after {
+    margin-right: -15px;
+  }
+
+  &__n::after,
+  &__ne::after,
+  &__nw::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px;
+  }
+
+  &__n::before,
+  &__ne::before,
+  &__nw::before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: #3b3e43;
+  }
+
+  &__ne::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+  }
+
+  &__nw::after {
+    margin-right: -15px;
+  }
+
+  &__s::after,
+  &__n::after {
+    transform: translateX(50%);
+  }
+
+  &__w::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    transform: translateY(50%);
+  }
+
+  &__w::before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: #3b3e43;
+  }
+
+  &__e::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    transform: translateY(50%);
+  }
+
+  &__e::before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: #3b3e43;
+  }
+}
+
+@media screen and (max-width: @max-width) {
+  .vditor-tooltipped:before,
+  .vditor-tooltipped:after {
+    content: none;
+  }
+}

package/src/assets/less/_wysiwyg.less

@@ -0,0 +1,195 @@
+.vditor-wysiwyg {
+  box-sizing: border-box;
+  flex: 1;
+  position: relative;
+  width: 100%;
+  min-width: 1px;
+
+  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;
+    }
+  }
+
+  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: ' ';
+  }
+
+  code[data-marker="`"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  &__block {
+    pre:first-child {
+      margin-bottom: -1em;
+
+      code {
+        height: auto;
+        color: var(--textarea-text-color);
+        height: auto;
+        text-align: left;
+      }
+    }
+
+    pre:last-child {
+      margin-bottom: 1em;
+    }
+  }
+
+  &__preview {
+    cursor: pointer;
+    white-space: initial;
+    min-height: 27px;
+  }
+
+  & > .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.vditor-wysiwyg__block: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"';
+  }
+
+  div[data-type="footnotes-block"]:before {
+    content: '^F';
+  }
+
+  div.vditor-wysiwyg__block:before {
+    content: "</>";
+  }
+
+  div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
+    content: "F";
+  }
+
+  div.vditor-wysiwyg__block[data-type="math-block"]:before {
+    content: "$$";
+  }
+
+  .vditor-toc:before {
+    content: "ToC";
+  }
+
+  hr {
+    display: inline-block;
+    margin: 12px 0;
+    width: 100%;
+  }
+
+  details {
+    white-space: initial;
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  span[data-type="backslash"] > span {
+    display: none;
+    color: var(--second-color);
+  }
+
+  span[data-type="link-ref"],
+  sup[data-type="footnotes-ref"] {
+    color: @blurColor;
+  }
+
+  span[data-type="toc-h"] {
+    color: @blurColor;
+    text-decoration: underline;
+  }
+
+  div[data-type="footnotes-block"] {
+    border-top: 2px solid var(--heading-border-color);
+    padding-top: 24px;
+    margin-top: 24px;
+  }
+
+  div[data-type="link-ref-defs-block"] {
+    color: var(--blockquote-color);
+  }
+}
+
+@media screen and (max-width: @max-width) {
+  .vditor-wysiwyg {
+    h1:before,
+    h2:before,
+    h3:before,
+    h4:before,
+    h5:before,
+    h6:before,
+    div.vditor-wysiwyg__block:before,
+    div[data-type="link-ref-defs-block"]:before,
+    div[data-type="footnotes-block"]:before,
+    .vditor-toc:before {
+      content: none;
+    }
+  }
+}