From 4694653def7314ac8bd52f123ef9f29bdccb012a Mon Sep 17 00:00:00 2001
From: Le Ma <24167796@qq.com>
Date: Sat, 13 Jul 2024 22:01:42 +1200
Subject: [PATCH] auto height and markdown

---
 package.json             |  2 ++
 public/index.html        |  5 +--
 src/App.vue              | 78 ++++++++++++++++++++++++++++------------
 src/views/EditNote.vue   | 76 +++++++++++++++++----------------------
 src/views/ErrorNote.vue  | 52 ++++++---------------------
 src/views/ErrorRoute.vue |  3 ++
 src/views/ViewMdNote.vue | 64 +++++++++++++++++++++++++--------
 src/views/ViewNote.vue   | 76 +++++++++++++++------------------------
 8 files changed, 183 insertions(+), 173 deletions(-)

diff --git a/package.json b/package.json
index 2606e23..c2c4588 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "crypto-js": "^4.1.1",
     "escape-html": "^1.0.3",
     "file-saver": "^2.0.5",
+    "github-markdown-css": "^5.6.1",
     "html2canvas": "^1.4.1",
     "pako": "^2.1.0",
     "qrcodejs2-fixes": "^0.0.2",
@@ -29,6 +30,7 @@
     "vue": "^3.2.13",
     "vue-axios": "^3.5.2",
     "vue-i18n": "^9.2.2",
+    "vue-markdown-render": "^2.2.1",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.0"
   },
diff --git a/public/index.html b/public/index.html
index 271f274..4368341 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,10 +22,7 @@
     <%= htmlWebpackPlugin.options.title %>
   </title>
   <style>
-    body {
-      background-color: #dddddd;
-      height: 100%;
-    }
+
   </style>
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
     <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
diff --git a/src/App.vue b/src/App.vue
index 96b73ae..a5a9cc6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-view></router-view>
+  <router-view></router-view>
 </template>
 
 <script>
@@ -11,27 +11,61 @@ export default {
 </script>
 
 <style>
-
-.ivu-btn:focus {
-  box-shadow: none !important;
-}
-
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  font-size: medium;
-}
-
 body {
   -webkit-text-size-adjust: 100% !important;
   font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
     "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
     sans-serif;
   background-color: #dddddd;
+  height: 100%;
 }
 
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: medium;
+}
+
+.ivu-layout-content {
+  padding: 0px;
+}
+
+.header {
+  background: #dddddd;
+}
+
+.ivu-layout-header {
+  line-height: normal;
+  height: auto;
+  padding: 0px;
+}
+
+.layout-footer-center {
+  background: #dddddd;
+  text-align: center;
+}
+
+.ivu-card-bordered {
+  border: 0px solid #dcdee2;
+  border-color: #e8eaec;
+}
+
+.layout {
+  height: 100%;
+  background: #dddddd;
+}
+
+.content {
+  background: #dddddd;
+}
+
+.ivu-btn:focus {
+  box-shadow: none !important;
+}
+
+
+
 .monoFt {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -47,14 +81,14 @@ body {
 
 .noteHeader {
   background-color: white;
-  width:100%;
-  height:40px;
+  width: 100%;
+  height: 40px;
 }
 
 .noteHeaderShade {
   background-color: white;
-  width:100%;
-  height:40px;
+  width: 100%;
+  height: 40px;
   border-bottom: dashed #ed4014 1px;
 }
 
@@ -78,22 +112,22 @@ body {
 }
 
 
-#noteText::selection {
+::selection {
   background: #dddddd;
   color: #ed4014;
 }
 
-#noteText::-moz-selection {
+::-moz-selection {
   background: #dddddd;
   color: #ed4014;
 }
 
-#noteText br::selection {
+br::selection {
   background: #dddddd;
   color: #ed4014;
 }
 
-#noteText br::-moz-selection {
+br::-moz-selection {
   background: #dddddd;
   color: #ed4014;
 }
diff --git a/src/views/EditNote.vue b/src/views/EditNote.vue
index 9c02cc8..ed12673 100644
--- a/src/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -1,37 +1,6 @@
 <style scoped>
-.layout {
-  height: 100%;
-  background: #dddddd;
-}
-
-.header {
-  background: #dddddd;
-}
-
-.ivu-layout-header {
-  line-height: normal;
-  height: auto;
-  padding: 0px;
-}
-
-.content {
-  background: #dddddd;
-}
-
-.ivu-layout-content {
-  padding: 0px;
-}
 
 
-.layout-footer-center {
-  background: #dddddd;
-  text-align: center;
-}
-
-.ivu-card-bordered {
-  border: 0px solid #dcdee2;
-  border-color: #e8eaec;
-}
 
 .fnmodal {
   align-items: center;
@@ -107,17 +76,18 @@
               style="z-index: 100; position: absolute;top:43px;right:0px;left:auto;">
               <Button-group vertical size="large">
                 <Button aria-label="create note" type="error" style="border-radius: 0px;font-size: 24px;"
-                  @click="createNote(); switchMenu(); " icon="md-add"></Button>
+                  @click="createNote(); switchMenu();" icon="md-add"></Button>
 
                 <Button aria-label="crop" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();" icon="md-crop"></Button>
+                  style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"
+                  icon="md-crop"></Button>
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
                   style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); switchMenu();"
                   icon="md-download"></Button>
 
                 <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
-                  @click="showDeleteModel(); switchMenu(); "></Button>
+                  @click="showDeleteModel(); switchMenu();"></Button>
 
               </Button-group>
 
@@ -141,7 +111,7 @@
       </Content>
 
       <Content class="content">
-        <div style="min-height: 650px;">
+        <div style="min-height: 250px;">
           <Row>
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
@@ -149,8 +119,8 @@
               <Form :model="noteForm" :label-width="80">
                 <div ref="html2canvas" id="wrapper" style="border-left: 2px solid #ed4014;">
                   <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
-                    :autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
-                    @on-keydown="recordEventKdown" />
+                    :autosize="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
+                    @input="recordText" @on-keydown="recordEventKdown" />
 
                 </div>
               </Form>
@@ -166,18 +136,21 @@
       <Footer class="layout-footer-center">2024 &copy; flagnote.com</Footer>
     </Layout>
 
-    <Modal scrollable  v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
+      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
         {{ $t("message.askTodelete") }}
       </p>
       <p style="text-align: center;">
-        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;" @click="dropNote()">{{
-          $t("button.yes")
-        }}</Button>
+        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size: 19px;"
+          @click="dropNote()">{{
+            $t("button.yes")
+          }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable  v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
+      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
         {{ errorInfo }}
       </p>
@@ -301,9 +274,22 @@ export default {
     this.bindCtrlAllEvent();
     this.bindToTopEvent();
 
+    this.$nextTick(() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+    })
+
   },
   mounted() {
     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.onresize = () => {
+      return (() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+      })()
+    }
   },
   updated() {
   },
@@ -435,9 +421,11 @@ export default {
         //save
         this.submitNote();
       }
-    },
+
+
+     },
     save() {
-      return saveNote(this.noteForm,this.state,this.secret);
+      return saveNote(this.noteForm, this.state, this.secret);
     },
     validateForm() {
       let text = this.noteForm.text;
diff --git a/src/views/ErrorNote.vue b/src/views/ErrorNote.vue
index e65aefd..fb272a6 100644
--- a/src/views/ErrorNote.vue
+++ b/src/views/ErrorNote.vue
@@ -1,41 +1,10 @@
 <style scoped>
-.layout {
-  height: 100%;
-  background: #dddddd;
-}
 
-.header {
-  background: #dddddd;
-}
 
-.ivu-layout-header {
-  line-height: normal;
-  height: auto;
-  padding: 0;
-}
-
-.content {
-  background: #dddddd;
-}
-
-.ivu-layout-content {
-  padding: 0;
-}
-
-.layout-footer-center {
-  background: #dddddd;
-  text-align: center;
-}
-
-.ivu-card-bordered {
-  border: 0px solid #dcdee2;
-  border-color: #e8eaec;
-}
-</style>
-
-<style>
 
 </style>
+
+<style></style>
 <template>
   <div class="layout" onkeydown="keydown">
     <Layout>
@@ -44,16 +13,16 @@
           <Row>
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-              <div style="background: white;width:100%;height:40px;">
-                <img style="height:40px;float:left;" src="/static/logo.png">
+            <div style="background: white;width:100%;height:40px;">
+              <img style="height:40px;float:left;" src="/static/logo.png">
 
-                <div style="float:right;width:auto;">
-                  <Button-group size="large">
-                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
-                      @click="createNote()" icon="md-add"></Button>
-                  </Button-group>
-                </div>
+              <div style="float:right;width:auto;">
+                <Button-group size="large">
+                  <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
+                    @click="createNote()" icon="md-add"></Button>
+                </Button-group>
               </div>
+            </div>
             </Col>
           </Row>
         </div>
@@ -146,4 +115,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/views/ErrorRoute.vue b/src/views/ErrorRoute.vue
index 70f2502..cd386cb 100644
--- a/src/views/ErrorRoute.vue
+++ b/src/views/ErrorRoute.vue
@@ -16,3 +16,6 @@ export default {
     }
 }
 </script>
+<style scoped>
+
+</style>
diff --git a/src/views/ViewMdNote.vue b/src/views/ViewMdNote.vue
index 5402ebc..6fd6b37 100644
--- a/src/views/ViewMdNote.vue
+++ b/src/views/ViewMdNote.vue
@@ -1,8 +1,24 @@
-
-
 <template>
-    <div class="layout">
-        <div v-html="noteForm.renderedMarkdown"></div>
+    <div class="layout" onkeydown="keydown">
+        <Layout>
+            <Content class="content">
+                <div style="min-height: 250px;height: 100%;">
+                    <Row>
+                        <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+                            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+                        <Card :padding="0">
+                            <div id="wrapper" style="border-left: 0px solid #FF3366;" class="markdown-body">
+                                <vue-markdown id="noteMdText" :source="this.noteForm.text" />
+                            </div>
+                        </Card>
+                        </Col>
+                    </Row>
+                </div>
+            </Content>
+            <Footer class="layout-footer-center">
+                2024 &copy; flagnote.com
+            </Footer>
+        </Layout>
     </div>
 </template>
 
@@ -11,12 +27,13 @@ import { md5, unwrap } from "@/libs/secret";
 import { getStoreKey } from "@/api/lock";
 import { getNoteBlob } from "@/api/note";
 import storage from "@/libs/storage";
-import markdownit from 'markdown-it'
-const md = markdownit()
+import VueMarkdown from 'vue-markdown-render'
+import 'github-markdown-css'
+
 
 export default {
     name: 'ViewMdNote',
-    components: {},
+    components: { VueMarkdown },
     data() {
         return {
             noteForm: {
@@ -69,9 +86,20 @@ export default {
             return false;
         }
 
-        this.noteForm.renderedMarkdown = md.render(this.noteForm.text);
-    }, mounted() {
+        this.$nextTick(() => {
+            let clientHeight = document.documentElement.clientHeight;
+            let elementNoteText = document.getElementById("noteMdText");
+            elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+        })
 
+    }, mounted() {
+        window.onresize = () => {
+            return (() => {
+                let clientHeight = document.documentElement.clientHeight;
+                let elementNoteText = document.getElementById("noteMdText");
+                elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+            })()
+        }
     },
     methods: {
         loadText() {
@@ -125,10 +153,18 @@ export default {
 </script>
 
 <style scoped>
-
-body,div {
-    margin:auto;
-    padding:auto;
+.markdown-body {
+    box-sizing: border-box;
+    min-width: 200px;
+    margin: 0 auto;
+    padding: 15px;
+    padding-top: 0px;
+    background: white;
 }
 
-</style>
\ No newline at end of file
+@media (max-width: 767px) {
+    .markdown-body {
+        padding: 15px;
+    }
+}
+</style>
diff --git a/src/views/ViewNote.vue b/src/views/ViewNote.vue
index ff5b50d..7fb84fb 100644
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -1,40 +1,5 @@
 <style scoped>
-.layout {
-  height: 100%;
-  background: #dddddd;
-}
 
-.header {
-  background: #dddddd;
-}
-
-.ivu-layout-header {
-  line-height: normal;
-  height: auto;
-  padding: 0px;
-}
-
-
-
-.content {
-  background: #dddddd;
-}
-
-.ivu-layout-content {
-  padding: 0px;
-}
-
-
-
-.layout-footer-center {
-  background: #dddddd;
-  text-align: center;
-}
-
-.ivu-card-bordered {
-  border: 0px solid #dcdee2;
-  border-color: #e8eaec;
-}
 
 
 
@@ -226,7 +191,7 @@
                   style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
 
                 <Button aria-label="download text" v-show="model.showDownloadText" type="error"
-                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText(); " icon="md-download"></Button>
+                  style="border-radius: 0px;font-size: 24px;" @click="downLoadText();" icon="md-download"></Button>
 
                 <Button type="error" icon="md-trash" style="border-radius: 0px;font-size: 24px;"
                   @click="showDeleteModel(); switchMenu();"></Button>
@@ -256,14 +221,14 @@
       </Content>
 
       <Content class="content">
-        <div style="min-height: 650px;">
+        <div style="min-height: 250px;">
           <Row>
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
               <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
-                    <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
-                      :autosize="{ minRows: 35 }" />
+                <Input element-id="noteText" readonly type="textarea" :border="false" v-model="noteForm.text"
+                  :autosize="{}" />
               </div>
             </Card>
             </Col>
@@ -278,8 +243,8 @@
 
     </Layout>
 
-    <Modal scrollable  v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }"
-      @on-cancel="closeShareModel">
+    <Modal scrollable v-model="model.showShare" width="360" footer-hide class-name="qrmodal"
+      :styles="{ borderRadius: 0 }" @on-cancel="closeShareModel">
       <p style="text-align: center; z-index: 1000; position: absolute; top: -2px; left: 0px; width: 100%;">
         <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
       </p>
@@ -294,11 +259,12 @@
       </div>
       <p style="text-align: center;margin-top:10px;">
         <Button type="error" style="border-radius: 0px;font-size:19px;" @click="closeShareModel()">{{ $t("button.close")
-        }}</Button>
+          }}</Button>
       </p>
     </Modal>
 
-    <Modal scrollable  v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable v-model="model.showTtlDelete" width="360" footer-hide class-name="qrmodal"
+      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-top:20px;">
         {{ $t("content.deleteTip") }}{{ state.ttlDesc }}
       </p>
@@ -310,7 +276,8 @@
       </p>
     </Modal>
 
-    <Modal scrollable  v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable v-model="model.showDelete" width="360" footer-hide class-name="fnmodal"
+      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium;margin-bottom: 20px;">
         {{ $t("message.askTodelete") }}
       </p>
@@ -321,7 +288,8 @@
       </p>
     </Modal>
 
-    <Modal scrollable  v-model="model.showError" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal scrollable v-model="model.showError" width="360" footer-hide class-name="fnmodal"
+      :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium ;margin-bottom: 20px;">
         {{ errorInfo }}
       </p>
@@ -438,6 +406,12 @@ export default {
       return false;
     }
 
+    this.$nextTick(() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+    })
+
   },
   mounted() {
     let qrimg = document.getElementById("qrImg");
@@ -459,6 +433,14 @@ export default {
         this.showShareModel();
       }, 100);
     }
+
+    window.onresize = () => {
+      return (() => {
+      let clientHeight = document.documentElement.clientHeight;
+      let elementNoteText = document.getElementById("noteText");
+      elementNoteText.style.minHeight = (clientHeight - 140) + "px";
+      })()
+    }
   },
   updated() {
   },
@@ -467,7 +449,8 @@ export default {
   destroyed() {
   },
   computed: {},
-  watch: {},
+  watch: {
+  },
   methods: {
     switchMenu() {
       this.showMenuState = !this.showMenuState;
@@ -702,4 +685,3 @@ export default {
   }
 }
 </script>
-