简化富文本编辑器的工具栏

src/editor/index.js

@@ -37,7 +37,7 @@ const ACTTION = {
   unordered: 'insertUnorderedList'
 }
 
-const DEFAULT_TOOLS = [
+const TOOLBAR = [
   'font',
   'color',
   'bold',
@@ -52,7 +52,8 @@ const DEFAULT_TOOLS = [
   'right',
   'link',
   'image',
-  'fullscreen'
+  'fullscreen',
+  'copy'
 ]
 
 const COLORS = [
@@ -87,18 +88,6 @@ class Editor extends Component {
   static watches = ['value']
 
   static props = {
-    toolbar: {
-      type: String,
-      default: '',
-      attribute: false,
-      observer(v) {
-        if (v === null) {
-          this.#toolbar = [...DEFAULT_TOOLS]
-        } else if (v) {
-          this.#toolbar = v.split(',').map(it => it.trim())
-        }
-      }
-    },
     readonly: {
       type: Boolean,
       observer(v) {
@@ -407,7 +396,6 @@ class Editor extends Component {
     `
   ]
 
-  #toolbar = []
   #value = ''
   #cache = { bar: 0, y: 0 }
   #gridx = 0
@@ -794,15 +782,10 @@ class Editor extends Component {
   }
 
   render() {
-    toolbar = [
-      ...(this.#toolbar.length ? this.#toolbar : DEFAULT_TOOLS),
-      'copy'
-    ]
-
     return html`
       <div class="editor">
         <section class="toolbar" @click=${this.#toolbarClick}>
-          ${toolbar.map(
+          ${TOOLBAR.map(
             it => html`
               <span data-act=${it}>
                 <svg class="icon" viewBox="0 0 1024 1024">

src/meditor/index.js

@@ -98,18 +98,8 @@ class MEditor extends Component {
       }
     },
     value: 'str!',
-    readonly: {
+    readonly: false,
-      type: Boolean,
+    disabled: false
-      observer(v) {
-        this.#updateStat()
-      }
-    },
-    disabled: {
-      type: Boolean,
-      observer(v) {
-        this.#updateStat()
-      }
-    }
   }
 
   static styles = [
@@ -472,18 +462,6 @@ class MEditor extends Component {
     thumb.style.height = bar + 'px'
   }
 
-  #updateStat() {
-    if (this.$refs.editor) {
-      if (this.readOnly || this.disabled) {
-        this.$refs.editor.removeAttribute('contenteditable')
-      } else {
-        this.$refs.editor.setAttribute('contenteditable', '')
-      }
-    } else {
-      nextTick(_ => this.#updateStat())
-    }
-  }
-
   #fetchScroll(moveY) {
     let { bar } = this.#cache
     let { outer, thumb, inner } = this.$refs
@@ -741,9 +719,15 @@ class MEditor extends Component {
         <section class="toolbar"></section>
         <div class="editor-outbox">
           <textarea
+            ref="editor"
             class="editor"
             spellcheck="false"
             :value=${this.value}
+            :readOnly=${this.readOnly}
+            :disabled=${this.disabled}
+            @input=${function (ev) {
+              this.value = ev.target.value
+            }}
           ></textarea>
           <wc-markd class="preview"></wc-markd>
         </div>