fix

src/App.vue

@@ -4,6 +4,7 @@
     :id="'md_' + id"
   >
     <markdown-header
+      :ref="'md_header' + id"
       :text.sync="text"
       :selectionInfo.sync="selectionInfo"
       :showPreview.sync="showPreview"
@@ -43,6 +44,7 @@
       :textLength.sync="textLength"
       :rows="rows"
       :id="textareaId"
+      @tab="$refs['md_header' + id].tab()"
       @submit="submit"
       v-show="!showPreview"
     />

src/assets/js/utils.js

@@ -69,15 +69,18 @@ export function initStyle({
   borderColorActive,
   textColor,
   textColorActive,
+  placeholderColor,
   frameBgColor,
   contentBgColor,
-  codeBgColor
+  codeBgColor,
+  codeTheme
 }) {
   // 夜晚模式
   if (dark) {
     borderColor = "#44444F";
     borderColorActive = "#2998F2";
     textColor = "#777888";
+    placeholderColor = "#777888";
     textColorActive = "#CCCCD8";
     frameBgColor = "#222226";
     codeBgColor = "#777888";
@@ -127,6 +130,28 @@ export function initStyle({
       textColorActive
     );
   }
+  if (codeTheme) {
+    switch (codeTheme) {
+      case "dark":
+        import("highlight.js/styles/dark.css");
+        break;
+      case "github":
+        import("highlight.js/styles/github.css");
+        break;
+      case "idea":
+        import("highlight.js/styles/idea.css");
+        break;
+      case "light":
+        import("highlight.js/styles/lightfair.css");
+        break;
+      case "monokai":
+        import("highlight.js/styles/monokai.css");
+        break;
+
+      default:
+        break;
+    }
+  }
 }
 
 //

src/assets/style/global.less

 @import "./variable.less";
 @import "./iconfont.less";
-@import './markdown.less';
+@import "./markdown.less";
 
 * {
   padding: 0;
   margin: 0;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 html,

src/assets/style/markdown.less

-.htmledit_views address,
-.htmledit_views cite,
-.htmledit_views dfn,
-.htmledit_views em,
-.htmledit_views i,
-.htmledit_views span[lang],
-.htmledit_views var {
+.md_preview address,
+.md_preview cite,
+.md_preview dfn,
+.md_preview em,
+.md_preview i,
+.md_preview span[lang],
+.md_preview var {
   font-style: italic;
 }
-.htmledit_views {
+.md_preview {
   font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
 
@@ -393,51 +393,51 @@
   margin: 24px;
   word-wrap: break-word;
 }
-.htmledit_views .image-grayscale img,
-.htmledit_views img.image-grayscale {
+.md_preview .image-grayscale img,
+.md_preview img.image-grayscale {
   filter: grayscale(100%);
 }
 p[align="center"] {
   text-align: center;
 }
-.htmledit_views strong,
-.htmledit_views strong span,
-.htmledit_views strong em {
+.md_preview strong,
+.md_preview strong span,
+.md_preview strong em {
   font-weight: 700;
 }
 
-.htmledit_views em strong {
+.md_preview em strong {
   font-style: italic;
 }
-.htmledit_views h1,
-.htmledit_views h2,
-.htmledit_views h3,
-.htmledit_views h4,
-.htmledit_views h5,
-.htmledit_views h6 {
+.md_preview h1,
+.md_preview h2,
+.md_preview h3,
+.md_preview h4,
+.md_preview h5,
+.md_preview h6 {
   color: #4f4f4f;
   margin: 8px 0 16px;
   font-weight: 700;
 }
-.htmledit_views ol,
-.htmledit_views ul {
+.md_preview ol,
+.md_preview ul {
   margin: 0 0 24px;
   padding: 0;
   font-size: 16px;
 }
-.htmledit_views blockquote ol,
-.htmledit_views blockquote ul {
+.md_preview blockquote ol,
+.md_preview blockquote ul {
   margin-bottom: 16px;
   padding: 0;
   font-size: 16px;
   line-height: 24px;
 }
-.htmledit_views blockquote ol li,
-.htmledit_views blockquote ul li {
+.md_preview blockquote ol li,
+.md_preview blockquote ul li {
   margin-bottom: 0;
 }
-.htmledit_views table tr td,
-.htmledit_views table tr th {
+.md_preview table tr td,
+.md_preview table tr th {
   border: 1px solid #ddd;
   font-size: 14px;
   color: #4f4f4f;
@@ -445,8 +445,8 @@ p[align="center"] {
   padding: 8px;
   text-align: left;
 }
-.htmledit_views table tr td p,
-.htmledit_views table tr th p {
+.md_preview table tr td p,
+.md_preview table tr th p {
   font-size: 14px;
   color: #4f4f4f;
   margin: 0;
@@ -454,76 +454,84 @@ p[align="center"] {
   text-align: left;
   line-height: 22px;
 }
-.htmledit_views table tr td code,
-.htmledit_views table tr th code {
+.md_preview table tr td code,
+.md_preview table tr th code {
   white-space: normal;
   word-break: break-word;
 }
-.htmledit_views abbr[data-original-title],
-.htmledit_views abbr[title] {
+.md_preview abbr[data-original-title],
+.md_preview abbr[title] {
   cursor: help;
   border-bottom: 1px dotted #999;
 }
 .marker {
   background-color: #ff0;
 }
-.htmledit_views kbd,
-.htmledit_views pre,
-.htmledit_views samp {
+.md_preview pre {
+  overflow: hidden;
+  code {
+    overflow-y: hidden;
+  }
+}
+
+.md_preview kbd,
+.md_preview pre,
+.md_preview samp {
   font-family: Consolas, Inconsolata, Courier, monospace;
   font-size: 14px;
   line-height: 22px;
   color: #000;
 }
-.htmledit_views code ol li div.hljs-ln-code,
-.htmledit_views code ol li div.hljs-ln-numbers,
-.htmledit_views pre code,
-.htmledit_views pre code div,
-.htmledit_views pre code span {
+
+.md_preview code ol li div.hljs-ln-code,
+.md_preview code ol li div.hljs-ln-numbers,
+.md_preview pre code,
+.md_preview pre code div,
+.md_preview pre code span {
   font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono",
     "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata,
     Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
 }
-.htmledit_views a:focus,
-.htmledit_views a:hover {
+.md_preview a:focus,
+.md_preview a:hover {
   color: #ca0c16;
 }
-.htmledit_views .flow-chart,
-.htmledit_views .sequence-diagram {
+.md_preview .flow-chart,
+.md_preview .sequence-diagram {
   text-align: center;
   margin-bottom: 24px;
   font-size: 14px !important;
 }
-.htmledit_views .flow-chart [fill="#000"],
-.htmledit_views .flow-chart [fill="#000000"],
-.htmledit_views .flow-chart [fill="black"],
-.htmledit_views .sequence-diagram [fill="#000"],
-.htmledit_views .sequence-diagram [fill="#000000"],
-.htmledit_views .sequence-diagram [fill="black"] {
+.md_preview .flow-chart [fill="#000"],
+.md_preview .flow-chart [fill="#000000"],
+.md_preview .flow-chart [fill="black"],
+.md_preview .sequence-diagram [fill="#000"],
+.md_preview .sequence-diagram [fill="#000000"],
+.md_preview .sequence-diagram [fill="black"] {
   fill: #4f4f4f;
 }
-.htmledit_views .flow-chart [stroke="#000000"],
-.htmledit_views .sequence-diagram [stroke="#000000"] {
+.md_preview .flow-chart [stroke="#000000"],
+.md_preview .sequence-diagram [stroke="#000000"] {
   stroke: #4f4f4f;
 }
-.htmledit_views pre code,
-.htmledit_views pre code div,
-.htmledit_views pre code span {
+.md_preview pre code,
+.md_preview pre code div,
+.md_preview pre code span {
   font-size: 14px;
 }
-.htmledit_views .prettyprint,
-.htmledit_views pre.prettyprint {
+.md_preview .prettyprint,
+.md_preview pre.prettyprint {
   margin: 0 0 24px;
   padding: 8px 16px 4px 56px;
   background-color: #f6f8fa;
   border: none;
 }
-.htmledit_views code ol li div.hljs-ln-code,
-.htmledit_views code ol li div.hljs-ln-numbers {
+.md_preview code ol li div.hljs-ln-code,
+.md_preview code ol li div.hljs-ln-numbers {
   float: left;
   height: 22px;
 }
 
-.htmledit_views pre code .hljs-comment {
+.md_preview pre code .hljs-comment {
   color: green;
 }

src/components/content/md-preview.vue

 <template>
-  <div :class="['htmledit_views', { fullScreen }]">
-    <div v-html="html" :style="{ 'min-height': htmlHeight + 'px' }"></div>
+  <div :class="['md_preview', { fullScreen }]">
+    <div v-html="html" :style="{ 'min-height': htmlMinHeight + 'px' }"></div>
   </div>
 </template>
 <script>
@@ -9,7 +9,7 @@ import "highlight.js/styles/github.css";
 export default {
   data() {
     return {
-      htmlHeight: 150
+      htmlMinHeight: 150
     };
   },
   props: {
@@ -30,9 +30,9 @@ export default {
       default: false
     }
   },
-  mounted() {
-    this.resetHeight();
-  },
+  // mounted() {
+  //   this.resetMinHeight();
+  // },
   methods: {
     transferMarkdown(val) {
       marked.setOptions({
@@ -46,17 +46,18 @@ export default {
       const html = marked(str);
       this.$emit("update:html", html);
     },
-    resetHeight() {
+    resetMinHeight() {
       const textEl = document.getElementById(this.id);
       if (!textEl) return;
       const height = textEl.offsetHeight;
-      this.htmlHeight = height;
+      this.htmlMinHeight = height;
     }
   },
   watch: {
     text: {
       immediate: true,
       handler: function(val) {
+        this.resetMinHeight();
         this.transferMarkdown(val);
       }
     }
@@ -64,7 +65,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.htmledit_views {
+.md_preview {
   // min-height: 148px;
   padding: 14px 0;
   box-sizing: border-box;

src/components/content/md-textarea.vue

@@ -9,6 +9,7 @@
       @paste="pasteFile"
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
+      @keydown.tab.prevent="$emit('tab')"
       v-model="textContent"
       :placeholder="placeholder"
       :maxlength="maxLength"

src/components/header/md-header.vue

@@ -17,6 +17,7 @@
     </div>
     <div class="header_tools" v-if="!showPreview">
       <tool-button
+        ref="tool_button"
         :info="item"
         :fullScreen="fullScreen"
         @setFullScreen="$emit('update:fullScreen', $event)"
@@ -33,7 +34,7 @@
   </div>
 </template>
 <script>
-import { isNotFalse } from "@/assets/js/utils";
+import { isNotFalse, formatText } from "@/assets/js/utils";
 import toolButton from "./tool-button";
 export default {
   components: { toolButton },
@@ -88,7 +89,7 @@ export default {
   watch: {
     fullScreen: {
       handler: function(val) {
-        console.log(val);
+        // console.log(val);
         if (val) {
           this.toolButtonList.pop();
           this.toolButtonList.push(this.cancelFullScreenBtn);
@@ -193,6 +194,16 @@ export default {
   },
 
   methods: {
+    tab() {
+      const startStr = " ";
+      const endStr = "";
+      const originalText = this.text;
+      const selectionInfo = this.selectionInfo;
+      const newText = formatText(originalText, selectionInfo, startStr, endStr);
+      this.updateText(newText);
+
+      // this.$refs.tool_button.tab();
+    },
     setShowPreview(val) {
       this.$emit("update:showPreview", val);
     },
@@ -247,7 +258,7 @@ export default {
         color: var(--md-editor-text-color-active);
         &::after {
           width: 100%;
-          background: var(--md-editor-border-color);
+          background: var(--md-editor-border-color-active);
         }
       }
       &.active {

src/main.js

@@ -4,7 +4,6 @@ import Vtip from "vtip";
 import "vtip/lib/index.min.css";
 import { initStyle, setzIndex, isNotEmpty } from "@/assets/js/utils";
 import "@/assets/style/global.less";
-
 Vue.use(Vtip.directive);
 
 function initMdEditor(obj) {
@@ -39,6 +38,7 @@ function initMdEditor(obj) {
   if (!el || !document.querySelector(el)) throw new Error("请指定容器");
   if (isNotEmpty(themeOptions)) initStyle(themeOptions);
   if (isNotEmpty(zIndex)) setzIndex(zIndex);
+
   const id = new Date().getTime() + "";
   const props = {
     canAttachFile,