Feature: auto pair

.github/CHANGELOG.md

@@ -1,10 +1,11 @@
-### 0.10.4
+### 0.10.7
 
 **:cactus:Feature**
 
 - block html #110
 - raw html #110
 - you can now indent list items with tab key
+- auto pair `markdown syntax`, `quote`, `bracket`
 
 **:butterfly:Optimization**
 

.github/TODOLIST.md

@@ -28,7 +28,7 @@
 
 - [x] Inline and block Math
 
-- [ ] Auto Pair
+- [x] Auto Pair
 
 - [ ] Tabs in Mark Text, add toggle in view menu.
 

src/editor/contentState/index.js

@@ -58,11 +58,9 @@ const convertBlocksToArray = blocks => {
 const exemption = new Set()
 
 class ContentState {
-  constructor (eventCenter, floatBox, tablePicker, preferLooseListItem) {
-    this.eventCenter = eventCenter
-    this.floatBox = floatBox
-    this.tablePicker = tablePicker
-    this.preferLooseListItem = preferLooseListItem
+  constructor (options) {
+    const { eventCenter } = options
+    Object.assign(this, options)
     this.keys = new Set()
     this.blocks = [ this.createBlock() ]
     this.stateRender = new StateRender(eventCenter)

src/editor/contentState/updateCtrl.js

@@ -294,7 +294,7 @@ const updateCtrl = ContentState => {
     const key = start.key
     const oldKey = lastCursor ? lastCursor.start.key : null
     const paragraph = document.querySelector(`#${key}`)
-    const text = getTextContent(paragraph, [ CLASS_OR_ID['AG_MATH_RENDER'] ])
+    let text = getTextContent(paragraph, [ CLASS_OR_ID['AG_MATH_RENDER'] ])
     const block = this.getBlock(key)
 
     let needRender = false
@@ -332,6 +332,33 @@ const updateCtrl = ContentState => {
     }
 
     if (block && block.text !== text) {
+      const BRACKET_HASH = {
+        '{': '}',
+        '[': ']',
+        '(': ')',
+        '*': '*',
+        '_': '_',
+        '"': '"',
+        "'": "'",
+        '`': '`'
+      }
+      if (start.key === end.key && start.offset === end.offset && event.type === 'input' && BRACKET_HASH[event.data]) {
+        const { offset } = start
+        const {
+          autoPairBracket, autoPairMarkdownSyntax, autoPairQuote
+        } = this
+        const inputChar = text.charAt(+offset - 1)
+        console.log(BRACKET_HASH[inputChar], text, offset)
+        /* eslint-disable no-useless-escape */
+        if (
+          (autoPairQuote && /["'`]{1}/.test(inputChar)) ||
+          (autoPairBracket && /[\{\[\(]{1}/.test(inputChar)) ||
+          (autoPairMarkdownSyntax && /[*_]{1}/.test(inputChar))
+        ) {
+          text = text.substring(0, offset) + BRACKET_HASH[inputChar] + text.substring(offset)
+        }
+        /* eslint-ensable no-useless-escape */
+      }
       block.text = text
     }
 

src/editor/index.js

@@ -19,12 +19,17 @@ import './assets/symbolIcon/index.css'
 
 class Aganippe {
   constructor (container, options) {
-    const { focusMode = false, theme = 'light', markdown = '', preferLooseListItem = true } = options
+    const {
+      focusMode = false, theme = 'light', markdown = '', preferLooseListItem = true,
+      autoPairBracket = true, autoPairMarkdownSyntax = true, autoPairQuote = true
+    } = 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, preferLooseListItem)
+    this.contentState = new ContentState({
+      eventCenter, floatBox, tablePicker, preferLooseListItem, autoPairBracket, autoPairMarkdownSyntax, autoPairQuote
+    })
     this.emoji = new Emoji() // emoji instance: has search(text) clear() methods.
     this.focusMode = focusMode
     this.theme = theme
@@ -444,7 +449,6 @@ class Aganippe {
   }
 
   setMarkdown (markdown, cursor, renderCursor = true) {
-    console.log(cursor)
     // if markdown is blank, dont need to import markdown
     // if (!markdown.trim()) return
     let newMarkdown = markdown

src/renderer/components/editor.vue

@@ -98,7 +98,7 @@
     },
     computed: {
       ...mapState([
-        'preferLooseListItem'
+        'preferLooseListItem', 'autoPairBracket', 'autoPairMarkdownSyntax', 'autoPairQuote'
       ])
     },
     data () {
@@ -152,9 +152,14 @@
     created () {
       this.$nextTick(() => {
         const ele = this.$refs.editor
-        const { theme, focus: focusMode, markdown, preferLooseListItem, typewriter } = this
+        const {
+          theme, focus: focusMode, markdown, preferLooseListItem, typewriter,
+          autoPairBracket, autoPairMarkdownSyntax, autoPairQuote
+        } = this
 
-        const { container } = this.editor = new Aganippe(ele, { theme, focusMode, markdown, preferLooseListItem })
+        const { container } = this.editor = new Aganippe(ele, {
+          theme, focusMode, markdown, preferLooseListItem, autoPairBracket, autoPairMarkdownSyntax, autoPairQuote
+        })
 
         if (typewriter) {
           this.scrollToCursor()

src/renderer/store/editor.js

@@ -18,6 +18,9 @@ const state = {
   darkColor: 'rgb(217, 217, 217)', // color in dark theme
   autoSave: false,
   preferLooseListItem: true, // prefer loose or tight list items
+  autoPairBracket: true,
+  autoPairMarkdownSyntax: true,
+  autoPairQuote: true,
   // edit mode
   typewriter: false, // typewriter mode
   focus: false, // focus mode

static/preference.md

@@ -15,7 +15,10 @@ Edit and save to update preferences, You can only change the json bellow!
   "theme": "light",
   "autoSave": false,
   "aidou": false,
-  "preferLooseListItem": true
+  "preferLooseListItem": true,
+  "autoPairBracket": true,
+  "autoPairMarkdownSyntax": true,
+  "autoPairQuote": true
 }
 ```