auto height and markdown

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"
   },

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>

src/App.vue

@@ -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%;
+  width: 100%;
-  height:40px;
+  height: 40px;
 }
 
 .noteHeaderShade {
   background-color: white;
-  width:100%;
+  width: 100%;
-  height:40px;
+  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;
 }

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"
+                    :autosize="{maxRows: 100000 }" :placeholder="$t('content.noteTip')"
-                    @on-keydown="recordEventKdown" />
+                    @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()">{{
+        <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;

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>
@@ -146,4 +115,3 @@ export default {
   }
 }
 </script>
-

src/views/ErrorRoute.vue

@@ -16,3 +16,6 @@ export default {
     }
 }
 </script>
+<style scoped>
+
+</style>

src/views/ViewMdNote.vue

@@ -1,8 +1,24 @@
-
-
 <template>
-    <div class="layout">
+    <div class="layout" onkeydown="keydown">
-        <div v-html="noteForm.renderedMarkdown"></div>
+        <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'
+import VueMarkdown from 'vue-markdown-render'
-const md = markdownit()
+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);
+        this.$nextTick(() => {
-    }, mounted() {
+            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>
-
+.markdown-body {
-body,div {
+    box-sizing: border-box;
-    margin:auto;
+    min-width: 200px;
-    padding:auto;
+    margin: 0 auto;
+    padding: 15px;
+    padding-top: 0px;
+    background: white;
 }
 
+@media (max-width: 767px) {
+    .markdown-body {
+        padding: 15px;
+    }
+}
 </style>

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 }" />
+                  :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 }"
+    <Modal scrollable v-model="model.showShare" width="360" footer-hide class-name="qrmodal"
-      @on-cancel="closeShareModel">
+      :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>
@@ -298,7 +263,8 @@
       </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>
-