feat: enable paragraph menu and disable paragraph menu

src/editor/contentState/index.js

@@ -12,6 +12,7 @@ import historyCtrl from './historyCtrl'
 import arrowCtrl from './arrowCtrl'
 import pasteCtrl from './pasteCtrl'
 import copyCutCtrl from './copyCutCtrl'
+import paragraphCtrl from './paragraphCtrl'
 import importMarkdown from '../utils/importMarkdown'
 
 const prototypes = [
@@ -25,6 +26,7 @@ const prototypes = [
   pasteCtrl,
   copyCutCtrl,
   tableBlockCtrl,
+  paragraphCtrl,
   importMarkdown
 ]
 

src/editor/contentState/paragraphCtrl.js

@@ -0,0 +1,12 @@
+import selection from '../selection'
+
+const paragraphCtrl = ContentState => {
+  ContentState.prototype.selectionChange = function () {
+    const { start, end } = selection.getCursorRange()
+    start.type = this.getBlock(start.key).type
+    end.type = this.getBlock(end.key).type
+    return { start, end }
+  }
+}
+
+export default paragraphCtrl

src/editor/index.js

@@ -297,6 +297,10 @@ class Aganippe {
       if (!this._isEditChinese || event.type === 'input') {
         this.contentState.updateState(event)
       }
+      if (event.type === 'click' || event.type === 'keyup') {
+        const selectionChanges = this.contentState.selectionChange()
+        eventCenter.dispatch('selectionChange', selectionChanges)
+      }
     }
 
     eventCenter.attachDOMEvent(container, 'click', changeHandler)

src/main/actions/paragraph.js

@@ -1,3 +1,36 @@
+import { Menu, ipcMain } from 'electron'
+
+const getParagraph = () => {
+  const menus = Menu.getApplicationMenu()
+  return menus.items.filter(menu => menu.label === 'Paragraph')[0]
+}
+
+const allCtrl = bool => {
+  const paragraphMenuItem = getParagraph()
+  paragraphMenuItem.submenu.items.forEach(item => (item.enabled = bool))
+}
+
+const disableNoMultiple = () => {
+  const paragraphMenuItem = getParagraph()
+  const disableLabels = [
+    'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6',
+    'Upgrade Heading Level', 'Degrade Heading Level',
+    'Table'
+  ]
+  paragraphMenuItem.submenu.items
+    .filter(item => disableLabels.includes(item.label))
+    .forEach(item => (item.enabled = false))
+}
+
 export const paragraph = (win, type) => {
   win.webContents.send('AGANI::paragraph', { type })
 }
+
+ipcMain.on('AGANI::selection-change', (e, { start, end }) => {
+  allCtrl(true)
+  if (/th|td/.test(start.type) || /th|td/.test(end.type)) {
+    allCtrl(false)
+  } else if (start.key !== end.key) {
+    disableNoMultiple()
+  }
+})

src/renderer/components/Editor.vue

@@ -5,6 +5,8 @@
       title="Insert Table"
       :visible.sync="dialogTableVisible"
       :show-close="isShowClose"
+      :modal="false"
+      custom-class="ag-dialog-table"
       width="450px"
     >
       <el-form :model="tableChecker" :inline="true">
@@ -64,6 +66,9 @@
         this.editor.on('change', (markdown, wordCount) => {
           this.$store.dispatch('SAVE_FILE', { markdown, wordCount })
         })
+        this.editor.on('selectionChange', changes => {
+          this.$store.dispatch('SELECTION_CHANGE', changes)
+        })
       })
     },
     methods: {
@@ -107,11 +112,14 @@
   }
 </script>
 
-<style scoped>
+<style>
   @import '../../editor/themes/github.css';
   @import '../../editor/index.css';
   .editor-component {
     height: calc(100vh - 22px);
     overflow: auto;
   }
+  .ag-dialog-table {
+    background: rgb(239, 239, 239);
+  }
 </style>

src/renderer/store/editor.js

@@ -101,6 +101,10 @@ const actions = {
       commit('SET_STATUS', false)
     }
   },
+  SELECTION_CHANGE ({ commit }, changes) {
+    console.log(changes)
+    ipcRenderer.send('AGANI::selection-change', changes)
+  },
   LISTEN_FOR_EXPORT ({ commit }) {
     ipcRenderer.on('AGANI::export', (e, { type }) => {
       bus.$emit('export', type)