opti: make UI components to plugins, disable spellcheck

src/muya/lib/index.js

@@ -7,16 +7,14 @@ import { CLASS_OR_ID, MUYA_DEFAULT_OPTION } from './config'
 import { wordCount } from './utils'
 import ExportMarkdown from './utils/exportMarkdown'
 import ExportHtml from './utils/exportHtml'
-import TablePicker from './ui/tablePicker'
 import ToolTip from './ui/tooltip'
-import QuickInsert from './ui/quickInsert'
-import CodePicker from './ui/codePicker'
-import EmojiPicker from './ui/emojiPicker'
-import ImagePathPicker from './ui/imagePicker'
-import FormatPicker from './ui/formatPicker'
 import './assets/styles/index.css'
 
 class Muya {
+  static plugins = []
+  static use (plugin) {
+    this.plugins.push(plugin)
+  }
   constructor (container, options) {
     this.options = Object.assign({}, MUYA_DEFAULT_OPTION, options)
     const { focusMode, theme, markdown } = this.options
@@ -26,12 +24,13 @@ class Muya {
     this.container = getContainer(container)
     this.eventCenter = new EventCenter()
     this.tooltip = new ToolTip(this)
-    this.quickInsert = new QuickInsert(this)
+    // UI plugins
-    this.codePicker = new CodePicker(this)
+    if (Muya.plugins.length) {
-    this.tablePicker = new TablePicker(this)
+      for (const Plugin of Muya.plugins) {
-    this.emojiPicker = new EmojiPicker(this)
+        this[Plugin.pluginName] = new Plugin(this)
-    this.imagePathPicker = new ImagePathPicker(this)
+      }
-    this.formatPicker = new FormatPicker(this)
+    }
+
     this.contentState = new ContentState(this, this.options)
     this.clipboard = new Clipboard(this)
     this.clickEvent = new ClickEvent(this)
@@ -276,7 +275,11 @@ function getContainer (originContainer) {
   Array.from(attrs).forEach(attr => {
     container.setAttribute(attr.name, attr.value)
   })
+
   container.setAttribute('contenteditable', true)
+  container.setAttribute('autocorrect', false)
+  container.setAttribute('autocomplete', 'off')
+  container.setAttribute('spellcheck', false)
   container.appendChild(rootDom)
   originContainer.replaceWith(container)
   return container

src/muya/lib/ui/codePicker/index.js

@@ -6,6 +6,7 @@ import fileIcons from '../fileIcons'
 import './index.css'
 
 class CodePicker extends BaseScrollFloat {
+  static pluginName = 'codePicker'
   constructor (muya) {
     const name = 'ag-list-picker'
     super(muya, name)

src/muya/lib/ui/emojiPicker/index.js

@@ -4,6 +4,7 @@ import { patch, h } from '../../parser/render/snabbdom'
 import './index.css'
 
 class EmojiPicker extends BaseScrollFloat {
+  static pluginName = 'emojiPicker'
   constructor (muya) {
     const name = 'ag-emoji-picker'
     super(muya, name)

src/muya/lib/ui/formatPicker/index.js

@@ -15,6 +15,7 @@ const defaultOptions = {
 }
 
 class FormatPicker extends BaseFloat {
+  static pluginName = 'formatPicker'
   constructor (muya, options = {}) {
     const name = 'ag-format-picker'
     const opts = Object.assign({}, defaultOptions, options)

src/muya/lib/ui/imagePicker/index.js

@@ -11,6 +11,7 @@ const iconhash = {
 }
 
 class ImagePathPicker extends BaseScrollFloat {
+  static pluginName = 'imagePathPicker'
   constructor (muya) {
     const name = 'ag-list-picker'
     super(muya, name)

src/muya/lib/ui/quickInsert/index.js

@@ -6,6 +6,7 @@ import { quicInsertObj } from './config'
 import './index.css'
 
 class QuickInsert extends BaseScrollFloat {
+  static pluginName = 'quickInsert'
   constructor (muya) {
     const name = 'ag-quick-insert'
     super(muya, name)

src/muya/lib/ui/tablePicker/index.js

@@ -4,6 +4,7 @@ import './index.css'
 import { EVENT_KEYS } from '../../config'
 
 class TablePicker extends BaseFloat {
+  static pluginName = 'tablePicker'
   constructor (muya) {
     const name = 'ag-table-picker'
     super(muya, name)

src/renderer/components/editorWithTabs/editor.vue

@@ -64,6 +64,12 @@
 <script>
   import { mapState } from 'vuex'
   import Muya from 'muya/lib'
+  import TablePicker from 'muya/lib/ui/tablePicker'
+  import QuickInsert from 'muya/lib/ui/quickInsert'
+  import CodePicker from 'muya/lib/ui/codePicker'
+  import EmojiPicker from 'muya/lib/ui/emojiPicker'
+  import ImagePathPicker from 'muya/lib/ui/imagePicker'
+  import FormatPicker from 'muya/lib/ui/formatPicker'
   import bus from '../../bus'
   import { animatedScrollTo } from '../../util'
   import { showContextMenu } from '../../contextMenu/editor'
@@ -177,7 +183,13 @@
           bulletListMarker,
           tabSize
         } = this
-
+        // use muya UI plugins
+        Muya.use(TablePicker)
+        Muya.use(QuickInsert)
+        Muya.use(CodePicker)
+        Muya.use(EmojiPicker)
+        Muya.use(ImagePathPicker)
+        Muya.use(FormatPicker)
         const { container } = this.editor = new Muya(ele, {
           theme,
           focusMode,