优化meditor

src/meditor/addon.js

@@ -120,7 +120,11 @@ export default {
   fullscreen(elem) {
     //
     this.props.fullscreen = !this.props.fullscreen
-    this.classList.toggle('fullscreen', this.props.fullscreen)
+    if (this.props.fullscreen) {
+      this.setAttribute('fullscreen', '')
+    } else {
+      this.removeAttribute('fullscreen')
+    }
     elem.classList.toggle('active', this.props.fullscreen)
   },
   preview(elem) {

src/meditor/index.wc

@@ -25,7 +25,7 @@
       </li>
       <li>
         <label></label>
-        <wc-button class="submit" color="teal" size="mini">确定</wc-button>
+        <wc-button class="submit" type="primary" size="mini">确定</wc-button>
       </li>
     </ul>
   </wc-layer>
@@ -44,7 +44,7 @@
         </li>
         <li>
           <label></label>
-          <wc-button class="submit" color="teal" size="mini">确定</wc-button>
+          <wc-button class="submit" type="primary" size="mini">确定</wc-button>
         </li>
       </ul>
       <div class="locale">
@@ -59,7 +59,7 @@
   display: flex;
   min-width: 200px;
   min-height: 100px;
-  // max-height: 360px;
+  height: 100%;
   border-radius: 3px;
   transition: box-shadow 0.15s linear;
 }
@@ -69,9 +69,10 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--color-plain-2);
+  border: 1px solid var(--color-grey-2);
   border-radius: inherit;
   font-size: 14px;
+  background: #fff;
 }
 
 .toolbar {
@@ -79,7 +80,7 @@
   height: 34px;
   padding: 5px;
   line-height: 24px;
-  border-bottom: 1px solid var(--color-plain-2);
+  border-bottom: 1px solid var(--color-grey-1);
 
   span {
     position: relative;
@@ -91,7 +92,7 @@
     height: 24px;
     margin: 0 3px;
     border-radius: 3px;
-    color: var(--color-dark-1);
+    color: var(--color-grey-3);
 
     .icon {
       overflow: hidden;
@@ -118,6 +119,7 @@
   flex: 1;
   display: flex;
   min-height: 300px;
+  border-radius: 3px;
   background: #fff;
 
   .editor,
@@ -132,11 +134,15 @@
     border: 0;
     font-size: 14px;
     font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-    color: var(--color-grey-3);
+    color: var(--color-dark-1);
     background: none;
     outline: none;
     resize: none;
     cursor: inherit;
+
+    &::placeholder {
+      color: var(--color-grey-1);
+    }
   }
 
   .preview {
@@ -324,13 +330,31 @@
 }
 
 :host([disabled]) {
-  .meditor {
+  opacity: 0.6;
+
+  .meditor,
+  .toolbar {
     cursor: not-allowed;
-    opacity: 0.6;
+  }
+
+  .toolbar {
+    span:hover {
+      background: none;
+    }
   }
 }
 
-:host(.fullscreen) {
+:host([readonly]) {
+  opacity: 0.6;
+
+  .toolbar {
+    span:hover {
+      background: none;
+    }
+  }
+}
+
+:host([fullscreen]) {
   position: fixed;
   left: 0;
   top: 0;
@@ -358,16 +382,17 @@ import Addon from './addon'
 
 export default class Meditor {
   props = {
-    toolbar: null,
+    toolbar: '',
     value: '',
     readonly: false,
     disabled: false,
-    height: 180,
+    preview: '',
-    preview: window.innerWidth > 768
+    placeholder: ''
   }
 
   state = {
-    toolbar: []
+    toolbar: null,
+    preview: window.innerWidth > 768
   }
 
   __init__() {
@@ -385,20 +410,22 @@ export default class Meditor {
   }
 
   _updateToolbar() {
-    var { toolbar, preview } = this.props
+    var { toolbar, preview } = this.state
     var isToolbarShow = true
-    if (Array.isArray(toolbar)) {
+    if (toolbar === null) {
+      this.__TOOLBAR__.innerHTML = renderToolbar(null, 'span', TOOL_TITLE)
+    } else {
       if (toolbar.length) {
         this.__TOOLBAR__.innerHTML = renderToolbar(toolbar, 'span', TOOL_TITLE)
       } else {
         isToolbarShow = false
       }
-    } else {
-      this.__TOOLBAR__.innerHTML = renderToolbar(null, 'span', TOOL_TITLE)
     }
-    this.__TOOLBAR__.classList.toggle('active', isToolbarShow)
+    if (isToolbarShow) {
-    this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview)
+      this.__TOOLBAR__.classList.toggle('active', isToolbarShow)
-    this.__VIEW__.classList.toggle('active', preview)
+      this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview)
+      this.__VIEW__.classList.toggle('active', preview)
+    }
   }
 
   _createTableAddon() {
@@ -506,7 +533,6 @@ export default class Meditor {
     var $submit = $link.querySelector('.submit')
 
     this.__LINK_ADDON__.__txt__ = $txt
-    // Addon.link.call(this, this.__TOOLBAR__.children[12])
 
     $.bind($submit, 'click', ev => {
       var txt = $txt.value.trim()
@@ -738,11 +764,32 @@ export default class Meditor {
 
   set value(val) {
     this.__EDITOR__.value = val
-    if (this.props.preview) {
+    if (this.state.preview) {
       this.__VIEW__.value = val
     }
   }
 
+  get readOnly() {
+    return this.props.readonly
+  }
+
+  set readOnly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.__EDITOR__.readOnly = true
+      this.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.__EDITOR__.readOnly = false
+      this.removeAttribute('readonly')
+    }
+  }
+
   get disabled() {
     return this.props.disabled
   }
@@ -772,8 +819,8 @@ export default class Meditor {
     this._createLinkAddon()
     this._createAttachAddon()
 
-    $.bind(this.__EDITOR__, 'input', _ => {
+    this._inputFn = $.bind(this.__EDITOR__, 'input', _ => {
-      if (this.props.preview) {
+      if (this.state.preview) {
         var txt = this.__EDITOR__.value.trim()
         if (txt) {
           this.__VIEW__.value = txt
@@ -783,10 +830,14 @@ export default class Meditor {
       }
     })
 
-    $.bind(this.__EDITOR__, 'keydown', ev => {
+    this._keydownFn = $.bind(this.__EDITOR__, 'keydown', ev => {
       let wrap = this.selection() || ''
       let select = !!wrap
 
+      if (this.readOnly || this.disabled) {
+        return
+      }
+
       switch (ev.keyCode) {
         //tab键改为插入2个空格,阻止默认事件,防止焦点失去
         case 9:
@@ -871,12 +922,16 @@ export default class Meditor {
       }
     })
 
-    $.bind(this.__EDITOR__, 'paste', ev => {
+    this._pasteFn = $.bind(this.__EDITOR__, 'paste', ev => {
       ev.preventDefault()
       var txt = ev.clipboardData.getData('text/plain').trim()
       var html = ev.clipboardData.getData('text/html').trim()
       var items = ev.clipboardData.items
 
+      if (this.readOnly || this.disabled) {
+        return
+      }
+
       if (html) {
         html = html2md(html)
         return this.insert(html)
@@ -903,13 +958,20 @@ export default class Meditor {
       }
     })
 
-    $.bind(this.__TOOLBAR__, 'click', ev => {
+    this._clickFn = $.bind(this.__TOOLBAR__, 'click', ev => {
       ev.preventDefault()
+
       var elem = ev.target
       var act
+
       if (elem === ev.currentTarget) {
         return
       }
+
+      if (this.readOnly || this.disabled) {
+        return
+      }
+
       while (elem.tagName !== 'SPAN') {
         elem = elem.parentNode
       }
@@ -918,12 +980,23 @@ export default class Meditor {
     })
   }
 
+  unmount() {
+    $.unbind(this.__EDITOR__, 'input', this._inputFn)
+    $.unbind(this.__EDITOR__, 'keydown', this._keydownFn)
+    $.unbind(this.__EDITOR__, 'paste', this._pasteFn)
+    $.unbind(this.__TOOLBAR__, 'click', this._clickFn)
+  }
+
   watch() {
     switch (name) {
       case 'toolbar':
-        if (val) {
+        if (val === null) {
-          val = val.split(',').map(it => it.trim())
+          this.state.toolbar = null
-          this.props.toolbar = val
+        } else {
+          this.state.toolbar = val
+            .split(',')
+            .map(it => it.trim())
+            .filter(it => it)
         }
         break
 
@@ -931,11 +1004,15 @@ export default class Meditor {
         this.value = val
         break
 
+      case 'placeholder':
+        this.__EDITOR__.setAttribute('placeholder', val || '')
+        break
+
       case 'preview':
         if (val === 'false') {
-          this.props.preview = false
+          this.state.preview = false
         } else {
-          this.props.preview = window.innerWidth > 768
+          this.state.preview = window.innerWidth > 768
         }
         break