From 4c9a941b639ba73842c823579577abe98259a7ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Mon, 28 Jun 2021 10:47:36 +0800
Subject: [PATCH] fix

---
 src/App.vue                            |   2 +
 src/assets/.DS_Store                   | Bin 0 -> 6148 bytes
 src/assets/js/utils.js                 |  27 ++++-
 src/assets/style/global.less           |   4 +-
 src/assets/style/markdown.less         | 132 +++++++++++++------------
 src/components/content/md-preview.vue  |  19 ++--
 src/components/content/md-textarea.vue |   1 +
 src/components/header/md-header.vue    |  17 +++-
 src/main.js                            |   2 +-
 9 files changed, 126 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/.DS_Store

diff --git a/src/App.vue b/src/App.vue
index 705ccbe..57cf760 100644
--- a/src/App.vue
+++ b/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"
     />
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..c44f08dfdd3e3472f768db3732f04e7e118eb58c
GIT binary patch
literal 6148
zcmeHK&1%~~5Z?7qBgGI@$RUOv7JBH#2Rp9qt8nd{0tr=U4sGK~NYnx$1xb!6#vt+l
zd4TlVqz{th9r`3acV>58Y@8lb>M{ef-)MGbR{O2k)iTC-f8w_ovlwFrC}PQk<`Kbu
z)HNw-4<eT}0&kj~dr{)8#ggOSWB}K$$}*O-FDzoq>-W<;kHRc(Hh=I^xl(<$WtiJF
zv$j(+KRV-N>f~-d$@*?OvR*i$A9!wh8v6P8B#4Jma1q2u>7knk>3a-5Ns<Txl<j)&
z!eBbGcHbm%?uK!Y%6h8Chtn|jlW9Mh#C|5@b#ZAQyZIRE7%%NmNIp%&99i|*tkvsu
z8lv0YpEty;*K0P!>vnfOHw~ly>fr6!<nrqJ>$jWR?|1iV8902eQl4vEzyladd|Wtb
z93}B*@GdeIk%YtmF+dD#E(3Z;GisYV1$uL0fEaip25^56poq4{LZRF`puyiq?5`lA
zfQ@$vM4{2vSSW-Z5Ux@IRVvq446f3_FLa!(u~4Ye8J8nN9X&GFHxw>M2fvWvjN1yS
zB?gFrRR+rH(Zch8_~-loY7#vW1H{08#Q?7ioIxL^q|es1$>CWmKtF+^U|gZ_cM2Ht
hD27-(iuXXJfM1{iXlpDKf(L|t1SAdA5CeaefnSJWVL$)?

literal 0
HcmV?d00001

diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index f356e75..3751421 100644
--- a/src/assets/js/utils.js
+++ b/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;
+    }
+  }
 }
 
 //
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
index 37f69cb..1996b77 100644
--- a/src/assets/style/global.less
+++ b/src/assets/style/global.less
@@ -1,11 +1,11 @@
 @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,
diff --git a/src/assets/style/markdown.less b/src/assets/style/markdown.less
index b145965..2cc7b7d 100644
--- a/src/assets/style/markdown.less
+++ b/src/assets/style/markdown.less
@@ -1,13 +1,13 @@
-.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;
 }
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index 7840a7d..6281b63 100644
--- a/src/components/content/md-preview.vue
+++ b/src/components/content/md-preview.vue
@@ -1,6 +1,6 @@
 <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;
diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue
index 5b2ac90..b602512 100644
--- a/src/components/content/md-textarea.vue
+++ b/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"
diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue
index 05c5608..faaa33d 100644
--- a/src/components/header/md-header.vue
+++ b/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 {
diff --git a/src/main.js b/src/main.js
index 5c6769d..6ae1ec9 100644
--- a/src/main.js
+++ b/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,
-- 
GitLab