feat: scratchpad to save persistent notes

src/renderer/components/BaseTextEditor.vue

@@ -22,6 +22,7 @@ export default {
       editorClass: { type: String, default: '' },
       autoFocus: { type: Boolean, default: false },
       readOnly: { type: Boolean, default: false },
+      showLineNumbers: { type: Boolean, default: true },
       height: { type: Number, default: 200 }
    },
    data () {
@@ -71,7 +72,9 @@ export default {
          value: this.value,
          fontSize: '14px',
          printMargin: false,
-         readOnly: this.readOnly
+         readOnly: this.readOnly,
+         showLineNumbers: this.showLineNumbers,
+         showGutter: this.showLineNumbers
       });
 
       this.editor.setOptions({

src/renderer/components/TheScratchpad.vue

@@ -0,0 +1,75 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.update')"
+      :cancel-text="$t('word.close')"
+      size="large"
+      :hide-footer="true"
+      @hide="hideScratchpad"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ $t('word.scratchpad') }}
+         </div>
+      </template>
+      <div :slot="'body'">
+         <div>
+            <div>
+               <TextEditor
+                  :value.sync="localNotes"
+                  editor-class="textarea-editor"
+                  mode="markdown"
+                  :auto-focus="true"
+                  :show-line-numbers="false"
+               />
+            </div>
+            <small class="text-gray">{{ $t('message.markdownSupported') }}</small>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import TextEditor from '@/components/BaseTextEditor';
+
+export default {
+   name: 'TheScratchpad',
+   components: {
+      ConfirmModal,
+      TextEditor
+   },
+   data () {
+      return {
+         localNotes: '',
+         debounceTimeout: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         notes: 'scratchpad/getNotes'
+      })
+   },
+   watch: {
+      localNotes () {
+         clearTimeout(this.debounceTimeout);
+
+         this.debounceTimeout = setTimeout(() => {
+            this.changeNotes(this.localNotes);
+         }, 200);
+      }
+   },
+   created () {
+      this.localNotes = this.notes;
+   },
+   methods: {
+      ...mapActions({
+         hideScratchpad: 'application/hideScratchpad',
+         changeNotes: 'scratchpad/changeNotes'
+      }),
+      hideModal () {
+         this.$emit('hide');
+      }
+   }
+};
+</script>

src/renderer/components/TheSettingBar.vue

@@ -36,7 +36,7 @@
 
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
-            <li class="settingbar-element btn btn-link ex-tooltip">
+            <li class="settingbar-element btn btn-link ex-tooltip" @click="showScratchpad">
                <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
                <span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
             </li>
@@ -94,6 +94,7 @@ export default {
          updateConnections: 'connections/updateConnections',
          showNewConnModal: 'application/showNewConnModal',
          showSettingModal: 'application/showSettingModal',
+         showScratchpad: 'application/showScratchpad',
          selectWorkspace: 'workspaces/selectWorkspace'
       }),
       contextMenu (event, connection) {