Bugfix: #55

.github/TODOLIST.md

@@ -16,7 +16,7 @@
 
 - [ ] Left click menu.
 
-- [ ] Rename and moveTo in **File Menu**
+- [x] Rename and moveTo in **File Menu**
 
 - [x] Preference in **Mark Text** Menu
 

src/editor/index.js

@@ -18,13 +18,16 @@ import './assets/symbolIcon/index.css'
 
 class Aganippe {
   constructor (container, options) {
+    const { focusMode = false, theme = 'light', markdown = '' } = options
     this.container = container
     const eventCenter = this.eventCenter = new EventCenter()
     const floatBox = this.floatBox = new FloatBox(eventCenter)
     const tablePicker = this.tablePicker = new TablePicker(eventCenter)
     this.contentState = new ContentState(eventCenter, floatBox, tablePicker)
     this.emoji = new Emoji() // emoji instance: has search(text) clear() methods.
-    this.focusMode = false
+    this.focusMode = focusMode
+    this.theme = theme
+    this.markdown = markdown
     // private property
     this._isEditChinese = false
     this.init()
@@ -64,6 +67,11 @@ class Aganippe {
     this.dispatchCopyCut()
     this.dispatchTableToolBar()
     this.dispatchCodeBlockClick()
+
+    const { theme, focusMode, markdown } = this
+    this.setTheme(theme)
+    this.setMarkdown(markdown)
+    this.setFocusMode(focusMode)
   }
 
   /**
@@ -394,7 +402,7 @@ class Aganippe {
     return this.contentState.getCodeMirrorCursor()
   }
 
-  setMarkdown (markdown, cursor) {
+  setMarkdown (markdown, cursor, renderCursor = true) {
     // if markdown is blank, dont need to import markdown
     if (!markdown.trim()) return
     let newMarkdown = markdown
@@ -403,7 +411,7 @@ class Aganippe {
     }
     this.contentState.importMarkdown(newMarkdown)
     this.contentState.importCursor(cursor)
-    this.contentState.render()
+    this.contentState.render(renderCursor)
     this.dispatchChange()
   }
 
@@ -429,11 +437,13 @@ class Aganippe {
   }
 
   setTheme (name) {
+    if (!name) return
     if (name === 'dark') {
       codeMirrorConfig.theme = 'railscasts'
     } else {
       delete codeMirrorConfig.theme
     }
+    this.theme = name
     this.contentState.render()
   }
 

src/main/config.js

@@ -26,8 +26,6 @@ export const EXTENSION_HASN = {
   pdf: '.pdf'
 }
 
-// export const DEFAULT_THEME = 'dark'
-
 export const VIEW_MENU_ITEM = {
   'Source Code Mode': false,
   'Typewriter Mode': false,

src/renderer/app.vue

@@ -15,7 +15,6 @@
       :source-code="sourceCode"
       :markdown="markdown"
       :cursor="cursor"
-      v-if="!sourceCode"
       :theme="theme"
       :dark-color="darkColor"
       :light-color="lightColor"
@@ -23,7 +22,7 @@
       :font-size="fontSize"
     ></editor>
     <source-code
-      v-else
+      v-if="sourceCode"
       :markdown="markdown"
       :cursor="cursor"
       :theme="theme"

src/renderer/components/editor.vue

@@ -83,9 +83,12 @@
         type: Boolean,
         required: true
       },
+      theme: {
+        type: String,
+        required: true
+      },
       markdown: String,
       cursor: Object,
-      theme: String,
       lineHeight: [Number, String],
       fontSize: [Number, String],
       lightColor: String,
@@ -124,23 +127,17 @@
     created () {
       this.$nextTick(() => {
         const ele = this.$refs.editor
-        this.editor = new Aganippe(ele)
-        const { container } = this.editor
-        const { markdown, theme } = this
-        // init set markdown and edit mode(typewriter mode and focus mode)
-        if (markdown.trim()) {
-          this.setMarkdownToEditor(markdown)
-          if (this.typewriter) {
-            this.scrollToCursor()
-          }
-          this.editor.setFocusMode(this.focus)
+        const { theme, focus: focusMode, markdown, typewriter } = this
+        const { container } = this.editor = new Aganippe(ele, { theme, focusMode, markdown })
+
+        if (typewriter) {
+          this.scrollToCursor()
         }
 
-        if (theme) {
-          this.editor.setTheme(theme)
-          this.addThemeStyle(theme)
-        }
+        // the default theme is light write in the store
+        this.addThemeStyle(theme)
 
+        // listen for bus events.
         bus.$on('file-loaded', this.setMarkdownToEditor)
         bus.$on('undo', this.handleUndo)
         bus.$on('redo', this.handleRedo)
@@ -151,6 +148,7 @@
         bus.$on('replaceValue', this.handReplace)
         bus.$on('find', this.handleFind)
         bus.$on('insert-image', this.handleSelect)
+        bus.$on('content-in-source-mode', this.handleMarkdownChange)
 
         this.editor.on('change', (markdown, wordCount, cursor) => {
           this.$store.dispatch('SAVE_FILE', { markdown, wordCount, cursor })
@@ -186,30 +184,36 @@
         }
         link.href = href
       },
+
       handleUndo () {
         if (this.editor) {
           this.editor.undo()
         }
       },
+
       handleRedo () {
         if (this.editor) {
           this.editor.redo()
         }
       },
+
       handleSelect (url) {
         if (!this.sourceCode) {
           this.editor && this.editor.insertImage(url)
         }
       },
+
       handleSearch (value, opt) {
         const searchMatches = this.editor.search(value, opt)
         this.$store.dispatch('SEARCH', searchMatches)
         this.scrollToHighlight()
       },
+
       handReplace (value, opt) {
         const searchMatches = this.editor.replace(value, opt)
         this.$store.dispatch('SEARCH', searchMatches)
       },
+
       scrollToCursor () {
         this.$nextTick(() => {
           const { container } = this.editor
@@ -217,6 +221,7 @@
           animatedScrollTo(container, container.scrollTop + y - STANDAR_Y, 300)
         })
       },
+
       scrollToHighlight () {
         // Scroll to search highlight word
         const { container } = this.editor
@@ -227,11 +232,13 @@
           animatedScrollTo(container, container.scrollTop + y - STANDAR_Y, DURATION)
         }
       },
+
       handleFind (action) {
         const searchMatches = this.editor.find(action)
         this.$store.dispatch('SEARCH', searchMatches)
         this.scrollToHighlight()
       },
+
       async handleExport (type) {
         switch (type) {
           case 'styledHtml': {
@@ -252,6 +259,7 @@
           }
         }
       },
+
       handleEditParagraph (type) {
         if (type === 'table') {
           this.tableChecker = { rows: 4, columns: 3 }
@@ -263,18 +271,28 @@
           this.editor && this.editor.updateParagraph(type)
         }
       },
+
       handleInlineFormat (type) {
         this.editor && this.editor.format(type)
       },
+
       handleDialogTableConfirm () {
         this.dialogTableVisible = false
         this.editor && this.editor.createTable(this.tableChecker)
       },
+
       setMarkdownToEditor (markdown) {
         const { cursor } = this
         this.editor && this.editor.setMarkdown(markdown, cursor)
+      },
+
+      // listen for markdown change form source mode
+      handleMarkdownChange ({ markdown, cursor, renderCursor }) {
+        console.log(markdown, cursor)
+        this.editor && this.editor.setMarkdown(markdown, cursor, renderCursor)
       }
     },
+
     beforeDestroy () {
       bus.$off('file-loaded', this.setMarkdownToEditor)
       bus.$off('undo', this.handleUndo)
@@ -294,7 +312,6 @@
 </script>
 
 <style>
-  /*  @import '../../editor/themes/dark.css';*/
   @import '../../editor/index.css';
   .editor-wrapper {
     height: calc(100vh - 22px);
@@ -302,8 +319,7 @@
   .editor-wrapper.source {
     position: absolute;
     z-index: -1;
-    left: -10000px;
-    opacity: 0;
+    width: 100%;
   }
   .editor-component {
     height: 100%;

src/renderer/components/font.vue

@@ -67,6 +67,9 @@
         bus.$on('font-setting', this.handleFontSetting)
       })
     },
+    beforeDestroy () {
+      bus.$off('font-setting', this.handleFontSetting)
+    },
     methods: {
       handleFontSetting () {
         this.showFontSetting = true

src/renderer/components/sourceCode.vue

@@ -9,7 +9,6 @@
 
 <script>
   import codeMirror, { setMode, setCursorAtLastLine } from '../../editor/codeMirror'
-  import ContentState from '../../editor/contentState'
   import bus from '../bus'
 
   export default {
@@ -41,7 +40,6 @@
     created () {
       this.$nextTick(() => {
         const { markdown = '', theme } = this
-        this.contentState = new ContentState()
         const container = this.$refs.sourceCode
         const codeMirrorConfig = {
           value: '',
@@ -67,9 +65,11 @@
         this.setMarkdown(markdown)
       })
     },
-    beforeDestory () {
+    beforeDestroy () {
       bus.$off('file-loaded', this.setMarkdown)
       bus.$off('dotu-select', this.handleSelectDoutu)
+      const { markdown, cursor } = this
+      bus.$emit('content-in-source-mode', { markdown, cursor, renderCursor: true })
     },
     methods: {
       handleSelectDoutu (url) {
@@ -83,10 +83,7 @@
         editor.on('cursorActivity', (cm, event) => {
           const cursor = cm.getCursor()
           const markdown = cm.getValue()
-          // get word count
-          this.contentState.importMarkdown(markdown, cursor)
-          const wordCount = this.contentState.wordCount()
-          this.$store.dispatch('SAVE_FILE', { markdown, cursor, wordCount })
+          bus.$emit('content-in-source-mode', { markdown, cursor, renderCursor: false })
         })
 
         setMode(editor, 'markdown')

src/renderer/index.css

@@ -5,9 +5,18 @@
   overflow: hidden;
 }
 @media print {
+  html, body {
+    background: #fff !important;
+  }
   body .editor-component {
     height: auto !important;
   }
+  body .editor-wrapper {
+    z-index: 1 !important;
+  }
+  body .source-code {
+    display: none !important;
+  }
   body .editor-component #ag-editor-id,
   body [contenteditable] {
     caret-color: transparent !important;

src/renderer/store/editor.js

@@ -11,7 +11,7 @@ const state = {
     value: ''
   },
   // user preference
-  theme: '',
+  theme: 'light',
   fontSize: '16px',
   lineHeight: 1.6,
   lightColor: '#303133', // color in light theme