#421 Add experiment function RTL support (#439)

* feature: Add experiment RTL support

* fix: binding to currentfile textdirection

* feature: add sourcecode RTL support

* feature: add text direction menu upgrade

* fix sourceCode does't change from menu switch text direction

src/main/actions/edit.js

@@ -42,6 +42,10 @@ ipcMain.on('AGANI::update-line-ending-menu', (e, lineEnding) => {
   appMenu.updateLineEndingnMenu(lineEnding)
 })
 
+ipcMain.on('AGANI::update-text-direction-menu', (e, textDirection) => {
+  appMenu.updateTextDirectionMenu(textDirection)
+})
+
 export const edit = (win, type) => {
   win.webContents.send('AGANI::edit', { type })
 }
@@ -57,3 +61,7 @@ export const insertImage = (win, type) => {
     win.webContents.send('AGANI::INSERT_IMAGE', { type })
   }
 }
+
+export const textDirection = (win, textDirection) => {
+  win.webContents.send('AGANI::set-text-direction', { textDirection })
+}

src/main/menu.js

@@ -107,6 +107,17 @@ class AppMenu {
       lfMenu.checked = true
     }
   }
+
+  updateTextDirectionMenu (textDirection) {
+    const menus = Menu.getApplicationMenu()
+    const ltrMenu = menus.getMenuItemById('textDirectionLTRMenuEntry')
+    const rtlMenu = menus.getMenuItemById('textDirectionRTLMenuEntry')
+    if (textDirection === 'ltr') {
+      ltrMenu.checked = true
+    } else {
+      rtlMenu.checked = true
+    }
+  }
 }
 
 export default new AppMenu()

src/main/menus/edit.js

@@ -128,5 +128,24 @@ export default {
         actions.lineEnding(browserWindow, 'lf')
       }
     }]
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Text Direction',
+    submenu: [{
+      id: 'textDirectionLTRMenuEntry',
+      label: 'Left-To-Right',
+      type: 'radio',
+      click (menuItem, browserWindow) {
+        actions.textDirection(browserWindow, 'ltr')
+      }
+    }, {
+      id: 'textDirectionRTLMenuEntry',
+      label: 'Right-To-Left',
+      type: 'radio',
+      click (menuItem, browserWindow) {
+        actions.textDirection(browserWindow, 'rtl')
+      }
+    }]
   }]
 }

src/main/utils/filesystem.js

@@ -11,6 +11,11 @@ export const getOsLineEndingName = () => {
   return endOfLine === 'crlf' || isWindows ? 'crlf' : 'lf'
 }
 
+export const getDefaultTextDirection = () => {
+  const { textDirection } = userPreference.getAll()
+  return textDirection
+}
+
 const getLineEnding = lineEnding => {
   if (lineEnding === 'lf') {
     return '\n'
@@ -78,6 +83,8 @@ export const loadMarkdownFile = async pathname => {
 
   const filename = path.basename(pathname)
 
+  const textDirection = getDefaultTextDirection()
+
   return {
     markdown,
     filename,
@@ -85,6 +92,7 @@ export const loadMarkdownFile = async pathname => {
     isUtf8BomEncoded,
     lineEnding,
     adjustLineEndingOnSave,
-    isMixed
+    isMixed,
+    textDirection
   }
 }

src/main/window.js

@@ -1,7 +1,7 @@
 import path from 'path'
 import { app, BrowserWindow, screen } from 'electron'
 import windowStateKeeper from 'electron-window-state'
-import { getOsLineEndingName, loadMarkdownFile } from './utils/filesystem'
+import { getOsLineEndingName, loadMarkdownFile, getDefaultTextDirection } from './utils/filesystem'
 import appMenu from './menu'
 import Watcher from './watcher'
 import { isMarkdownFile, isDirectory, log } from './utils'
@@ -78,10 +78,12 @@ class AppWindow {
               isUtf8BomEncoded,
               lineEnding,
               adjustLineEndingOnSave,
-              isMixed
+              isMixed,
+              textDirection
             } = data
 
             appMenu.updateLineEndingnMenu(lineEnding)
+            appMenu.updateTextDirectionMenu(textDirection)
             win.webContents.send('AGANI::open-single-file', {
               markdown,
               filename,
@@ -108,11 +110,13 @@ class AppWindow {
         // open a window but do not open a file or directory
       } else {
         const lineEnding = getOsLineEndingName()
+        const textDirection = getDefaultTextDirection()
         win.webContents.send('AGANI::open-blank-window', {
           lineEnding,
           ignoreSaveStatus: true
         })
         appMenu.updateLineEndingnMenu(lineEnding)
+        appMenu.updateTextDirectionMenu(textDirection)
       }
     })
 
@@ -123,6 +127,7 @@ class AppWindow {
         this.focusedWindowId = win.id
         win.webContents.send('AGANI::req-update-line-ending-menu')
         win.webContents.send('AGANI::request-for-view-layout')
+        win.webContents.send('AGANI::req-update-text-direction-menu')
       }
     })
 

src/muya/lib/codeMirror/index.js

@@ -143,4 +143,8 @@ export const setMode = (doc, text) => {
   })
 }
 
+export const setTextDirection = (cm, textDirection) => {
+  cm.setOption('direction', textDirection)
+}
+
 export default codeMirror

src/renderer/app.vue

@@ -23,6 +23,7 @@
         :theme="theme"
         :source-code="sourceCode"
         :show-tab-bar="showTabBar"
+        :text-direction="textDirection"
       ></editor-with-tabs>
     </div>
     <bottom-bar
@@ -82,7 +83,8 @@
         'isSaved': state => state.editor.currentFile.isSaved,
         'markdown': state => state.editor.currentFile.markdown,
         'cursor': state => state.editor.currentFile.cursor,
-        'wordCount': state => state.editor.currentFile.wordCount
+        'wordCount': state => state.editor.currentFile.wordCount,
+        'textDirection': state => state.editor.currentFile.textDirection
       }),
       ...mapState([
         'windowActive', 'platform', 'init'
@@ -130,6 +132,8 @@
       dispatch('LISTEN_FOR_NEW_TAB')
       dispatch('LISTEN_FOR_CLOSE_TAB')
       dispatch('LINTEN_FOR_EXPORT_SUCCESS')
+      dispatch('LISTEN_FOR_SET_TEXT_DIRECTION')
+      dispatch('LISTEN_FOR_TEXT_DIRECTION_MENU')
       // module: notification
       dispatch('LISTEN_FOR_NOTIFICATION')
     }

src/renderer/components/editorWithTabs/editor.vue

@@ -4,6 +4,7 @@
     :class="[{ 'typewriter': typewriter, 'focus': focus, 'source': sourceCode }, theme]"
     :style="{ 'color': theme === 'dark' ? darkColor : lightColor, 'lineHeight': lineHeight, 'fontSize': fontSize,
     'font-family': editorFontFamily ? `${editorFontFamily}, ${defaultFontFamily}` : `${defaultFontFamily}` }"
+    :dir="textDirection"
   >
     <div
       ref="editor"
@@ -16,6 +17,7 @@
       custom-class="ag-dialog-table"
       width="454px"
       center
+      dir='ltr'
     >
       <div slot="title" class="dialog-title">
         <svg class="icon" aria-hidden="true">
@@ -80,7 +82,11 @@
         required: true
       },
       markdown: String,
-      cursor: Object
+      cursor: Object,
+      textDirection: {
+        type: String,
+        required: true
+      }
     },
     computed: {
       ...mapState({

src/renderer/components/editorWithTabs/index.vue

@@ -8,12 +8,14 @@
           :theme="theme"
           :markdown="markdown"
           :cursor="cursor"
+          :text-direction="textDirection"
         ></editor>
         <source-code
           v-if="sourceCode"
           :theme="theme"
           :markdown="markdown"
           :cursor="cursor"
+          :text-direction="textDirection"
         ></source-code>
       </div>
     </div>
@@ -47,6 +49,10 @@
       showTabBar: {
         type: Boolean,
         required: true
+      },
+      textDirection: {
+        type: String,
+        required: true
       }
     },
     components: {

src/renderer/components/editorWithTabs/sourceCode.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import codeMirror, { setMode, setCursorAtLastLine } from 'muya/lib/codeMirror'
+  import codeMirror, { setMode, setCursorAtLastLine, setTextDirection } from 'muya/lib/codeMirror'
   import { wordCount as getWordCount } from 'muya/lib/utils'
   import { adjustCursor } from '../../util'
   import bus from '../../bus'
@@ -20,7 +20,11 @@
         required: true
       },
       markdown: String,
-      cursor: Object
+      cursor: Object,
+      textDirection: {
+        type: String,
+        required: true
+      }
     },
 
     data () {
@@ -42,12 +46,18 @@
             cm.classList.remove('cm-s-railscasts')
           }
         }
+      },
+      textDirection: function (value, oldValue) {
+        const { editor } = this
+        if (value !== oldValue && editor) {
+          setTextDirection(editor, value)
+        }
       }
     },
 
     created () {
       this.$nextTick(() => {
-        const { markdown = '', theme, cursor } = this
+        const { markdown = '', theme, cursor, textDirection } = this
         const container = this.$refs.sourceCode
         const codeMirrorConfig = {
           value: markdown,
@@ -55,6 +65,7 @@
           autofocus: true,
           lineWrapping: true,
           styleActiveLine: true,
+          direction: textDirection,
           lineNumberFormatter (line) {
             if (line % 10 === 0 || line === 1) {
               return line

src/renderer/store/editor.js

@@ -9,7 +9,8 @@ const toc = require('markdown-toc')
 const state = {
   lineEnding: 'lf',
   currentFile: {},
-  tabs: []
+  tabs: [],
+  textDirection: 'ltr'
 }
 
 const getters = {
@@ -135,6 +136,11 @@ const mutations = {
   },
   SET_GLOBAL_LINE_ENDING (state, ending) {
     state.lineEnding = ending
+  },
+  SET_TEXT_DIRECTION (state, textDirection) {
+    if (hasKeys(state.currentFile)) {
+      state.currentFile.textDirection = textDirection
+    }
   }
 }
 
@@ -174,6 +180,19 @@ const actions = {
     }
   },
 
+  LISTEN_FOR_TEXT_DIRECTION_MENU ({ commit, state, dispatch }) {
+    ipcRenderer.on('AGANI::req-update-text-direction-menu', e => {
+      dispatch('UPDATE_TEXT_DIRECTION_MENU')
+    })
+  },
+
+  UPDATE_TEXT_DIRECTION_MENU ({ commit, state }) {
+    const { textDirection } = state.currentFile
+    if (textDirection) {
+      ipcRenderer.send('AGANI::update-text-direction-menu', textDirection)
+    }
+  },
+
   CLOSE_SINGLE_FILE ({ commit, state }, file) {
     const { id, pathname, filename, markdown } = file
     const options = getOptionsFromState(file)
@@ -299,8 +318,9 @@ const actions = {
     }
   },
 
-  UPDATE_CURRENT_FILE ({ commit, state }, currentFile) {
+  UPDATE_CURRENT_FILE ({ commit, state, dispatch }, currentFile) {
     commit('SET_CURRENT_FILE', currentFile)
+    dispatch('UPDATE_TEXT_DIRECTION_MENU', state)
     const { tabs } = state
     if (!tabs.some(file => file.id === currentFile.id)) {
       commit('ADD_FILE_TO_TABS', currentFile)
@@ -475,6 +495,15 @@ const actions = {
         }
       }
     })
+  },
+
+  LISTEN_FOR_SET_TEXT_DIRECTION ({ commit, state }) {
+    ipcRenderer.on('AGANI::set-text-direction', (e, { textDirection }) => {
+      const { textDirection: oldTextDirection } = state.currentFile
+      if (textDirection !== oldTextDirection) {
+        commit('SET_TEXT_DIRECTION', textDirection)
+      }
+    })
   }
 }
 

src/renderer/store/help.js

@@ -8,6 +8,7 @@ export const defaultFileState = {
   isUtf8BomEncoded: false,
   lineEnding: 'lf', // lf or crlf
   adjustLineEndingOnSave: false,
+  textDirection: 'ltr',
   history: {
     stack: [],
     index: -1
@@ -39,7 +40,8 @@ export const getFileStateFromData = data => {
     pathname,
     isUtf8BomEncoded,
     lineEnding,
-    adjustLineEndingOnSave
+    adjustLineEndingOnSave,
+    textDirection
   } = data
   const id = getUniqueId()
 
@@ -50,7 +52,8 @@ export const getFileStateFromData = data => {
     pathname,
     isUtf8BomEncoded,
     lineEnding,
-    adjustLineEndingOnSave
+    adjustLineEndingOnSave,
+    textDirection
   })
 }
 

static/preference.md

@@ -10,6 +10,8 @@ Edit and save to update preferences. You can only change the JSON below!
 
 - **bulletListMarker**: *String* `+`,`-` or `*`
 
+- **textDirection**: *String* `ltr` or `rtl`
+
 ```json
 {
   "fontSize": "16px",
@@ -26,7 +28,8 @@ Edit and save to update preferences. You can only change the JSON below!
   "autoPairMarkdownSyntax": true,
   "autoPairQuote": true,
   "endOfLine": "default",
-  "tabSize": 4
+  "tabSize": 4,
+  "textDirection": "ltr"
 }
 ```