优化富文本编辑器;优化滚动条组件

src/editor/index.wc

@@ -37,7 +37,7 @@
   display: flex;
   min-width: 200px;
   min-height: 100px;
-  max-height: 360px;
+  max-height: 640px;
   border-radius: 2px;
 }
 
@@ -108,6 +108,7 @@ table {
   }
 }
 wc-scroll {
+  overflow: hidden;
   flex: 1;
 }
 .editor {
@@ -277,14 +278,18 @@ function renderToolbar(list) {
     .join('')
 }
 
-export default class Neditor {
+export default class Editor {
   props = {
-    toolbar: null,
+    toolbar: '',
     value: '',
     readonly: false,
     disabled: false
   }
 
+  state = {
+    toolbar: null
+  }
+
   __init__() {
     /* render */
 
@@ -298,26 +303,30 @@ export default class Neditor {
     this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button')
   }
 
+  __stat__(name, val) {
+    var type = typeof val
+
+    if (val === this.props[name]) {
+      return
+    }
+
+    if ((type === name && val) || type !== 'boolean') {
+      this.props[name] = true
+      this.setAttribute(name, '')
+      this.__EDITOR__.removeAttribute('contenteditable')
+    } else {
+      this.props[name] = false
+      this.removeAttribute(name)
+      this.__EDITOR__.setAttribute('contenteditable', true)
+    }
+  }
+
   get readOnly() {
     return this.props.readonly
   }
 
   set readOnly(val) {
-    var type = typeof val
+    this.__stat__('readonly', val)
-
-    if (val === this.props.readonly) {
-      return
-    }
-
-    if ((type === 'boolean' && val) || type !== 'boolean') {
-      this.props.readonly = true
-      this.setAttribute('readonly', '')
-      this.__EDITOR__.removeAttribute('contenteditable')
-    } else {
-      this.props.readonly = false
-      this.removeAttribute('readonly')
-      this.__EDITOR__.setAttribute('contenteditable', true)
-    }
   }
 
   get disabled() {
@@ -325,21 +334,7 @@ export default class Neditor {
   }
 
   set disabled(val) {
-    var type = typeof val
+    this.__stat__('disabled', val)
-
-    if (val === this.props.disabled) {
-      return
-    }
-
-    if ((type === 'boolean' && val) || type !== 'boolean') {
-      this.props.disabled = true
-      this.setAttribute('disabled', '')
-      this.__EDITOR__.removeAttribute('contenteditable')
-    } else {
-      this.props.disabled = false
-      this.removeAttribute('disabled')
-      this.__EDITOR__.setAttribute('contenteditable', true)
-    }
   }
 
   get value() {
@@ -357,18 +352,9 @@ export default class Neditor {
   }
 
   _updateToolbar() {
-    var { toolbar } = this.props
+    var { toolbar } = this.state
-    var isToolbarShow = true
+
-    if (Array.isArray(toolbar)) {
+    this.__TOOLBAR__.innerHTML = renderToolbar(toolbar)
-      if (toolbar.length) {
-        this.__TOOLBAR__.innerHTML = renderToolbar(toolbar)
-      } else {
-        isToolbarShow = false
-      }
-    } else {
-      this.__TOOLBAR__.innerHTML = renderToolbar()
-    }
-    this.__TOOLBAR__.style.display = isToolbarShow ? 'flex' : ''
   }
 
   // 保存选中
@@ -588,11 +574,7 @@ export default class Neditor {
     })
 
     this.__observer = new MutationObserver(_ => {
-      this.dispatchEvent(
+      this.dispatchEvent(new CustomEvent('input'))
-        new CustomEvent('input', {
-          detail: this.value
-        })
-      )
     })
 
     this.__observer.observe(this.__EDITOR__, {
@@ -615,9 +597,11 @@ export default class Neditor {
   watch() {
     switch (name) {
       case 'toolbar':
-        if (val) {
+        if (val === null) {
+          this.state.toolbar = [...DEFAULT_TOOLS]
+        } else if (val) {
           val = val.split(',').map(it => it.trim())
-          this.props.toolbar = val
+          this.state.toolbar = val
         }
         break
 
@@ -631,7 +615,7 @@ export default class Neditor {
         if (k === 'readonly') {
           k = 'readOnly'
         }
-        this[k] = true
+        this[k] = val !== null
         break
 
       default:

src/index.js

@@ -8,7 +8,7 @@ import './keyboard/index'
 import './layer/index'
 import './markd/index'
 import './meditor/index'
-import './neditor/index'
+import './editor/index'
 import './pager/index'
 import './picker/date'
 // import './picker/time'

src/scroll/index.wc

@@ -390,16 +390,22 @@ export default class Scroll {
       $.bind(document, 'mouseup', mouseupFn)
     })
 
-    this.__observer = new ResizeObserver(this._initFn)
+    this.__observer1 = new ResizeObserver(this._initFn)
-    this.__observer.observe(this.__BOX__)
+    this.__observer2 = new MutationObserver(this._initFn)
+    this.__observer1.observe(this.__BOX__)
+    this.__observer2.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
   }
 
   unmounted() {
-    this.__observer.disconnect()
+    this.__observer1.disconnect()
+    this.__observer2.disconnect()
 
     $.unbind(this.__X__, 'mousedown', this._xBarFn)
     $.unbind(this.__Y__, 'mousedown', this._yBarFn)
-    $.unbind(this, 'ready', this._initFn)
     $.unbind(this.__BOX__, 'scroll', this._scrollFn)
   }