@8btc/mditor 0.0.1

package/src/assets/less/_math-menu.less

@@ -0,0 +1,78 @@
+/* 数学右键菜单全局样式（参考 ECharts 菜单风格） */
+.vditor-math-menu {
+  position: fixed;
+  z-index: 9999;
+  min-width: 7.50rem;
+  background: #fff;
+  color: #333;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 0.50rem rgba(0,0,0,0.15);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  padding: 0.25rem 0;
+}
+
+.vditor-math-menu__item {
+  padding: 0.38rem 0.75rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.vditor-math-menu__item:hover {
+  background: #f5f7fa;
+}
+
+/* 二级子菜单样式（显示公式 HTML 渲染与复制选项） */
+.vditor-math-submenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 13.75rem;
+  background: #fff;
+  color: #333;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 0.50rem rgba(0,0,0,0.15);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  padding: 0.38rem 0.50rem;
+}
+
+.vditor-math-submenu__item {
+  padding: 0.38rem 0.50rem;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+}
+
+.vditor-math-submenu__item:hover {
+  background: #f5f7fa;
+}
+
+.vditor-math-submenu__code {
+  margin-top: 0.38rem;
+  max-width: 26.25rem;
+  max-height: 11.25rem;
+  overflow: auto;
+  font-family: @font-family-code;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 0.25rem;
+  padding: 0.38rem 0.50rem;
+  color: #333;
+}
+
+/* 仅展示渲染内容的预览面板，支持手动选区复制 */
+.vditor-math-submenu__preview {
+  margin-top: 0.25rem;
+  max-width: 30.00rem;
+  max-height: 13.75rem;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  padding: 0.50rem;
+  /* 允许选择复制 */
+  user-select: text;
+  -webkit-user-select: text;
+}

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: 0.25rem;
+    padding: 0.31rem;
+    z-index: 3;
+    font-size: 0.88rem;
+    display: none;
+    user-select: none;
+    max-width: 20.00rem;
+    min-width: 5.00rem;
+    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: 0.44rem solid transparent;
+      top: -0.88rem;
+      left: 0.31rem;
+      border-bottom-color: var(--panel-background-color);
+    }
+
+    &--left {
+      right: 0;
+
+      &.vditor-panel--arrow:before {
+        right: 0.31rem;
+        left: auto;
+      }
+    }
+  }
+
+  &-input {
+    border: 0;
+    padding: 0.25rem 0.31rem;
+    background-color: var(--panel-background-color);
+    font-size: 0.75rem;
+    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: 0.25rem 0.31rem;
+    height: 1.31rem;
+    width: 1.44rem;
+    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: 0.81rem !important;
+      width: 0.81rem !important;
+      float: left;
+      fill: currentColor;
+      pointer-events: none;
+    }
+  }
+}