优化meditor

src/meditor/index.js

@@ -226,6 +226,7 @@ class MEditor extends Component {
         top: 0;
         z-index: 99;
         width: 80px;
+        height: 0;
         padding: 5px 0;
         line-height: 25px;
         background: #fff;
@@ -237,6 +238,7 @@ class MEditor extends Component {
         &.fadein {
           visibility: visible;
           top: 34px;
+          height: auto;
           opacity: 1;
         }
       }
@@ -274,12 +276,12 @@ class MEditor extends Component {
       }
 
       .table-layer {
+        overflow: hidden;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         left: 240px;
         width: 200px;
-        height: 200px;
         padding: 2px;
         background: #fff;
 
@@ -292,6 +294,10 @@ class MEditor extends Component {
             background: rgba(77, 182, 172, 0.3);
           }
         }
+
+        &.fadein {
+          height: 200px;
+        }
       }
 
       .link-layer {
@@ -358,9 +364,9 @@ class MEditor extends Component {
   previewEnabled = false
 
   #hideLayers() {
-    this.$refs.header.classList.remove('fadein')
-    this.$refs.link.classList.remove('fadein')
-    this.$refs.table.classList.remove('fadein')
+    this.$refs.header?.classList.remove('fadein')
+    this.$refs.link?.classList.remove('fadein')
+    this.$refs.table?.classList.remove('fadein')
   }
 
   // 处理图片
@@ -772,7 +778,7 @@ class MEditor extends Component {
 
   #fixedPadding() {
     if (this.clientHeight > 64) {
-      let pb = ~~(this.clientHeight * 0.6)
+      let pb = ~~(this.clientHeight * 0.6) - (this.#toolbar.length ? 34 : 0)
       pb = pb < 64 ? 64 : pb
       this.$refs.editor.style.paddingBottom = pb + 'px'
     } else {
@@ -794,6 +800,10 @@ class MEditor extends Component {
   }
 
   render() {
+    let hasTable = this.#toolbar.includes('table')
+    let hasHeader = this.#toolbar.includes('header')
+    let hasLink = this.#toolbar.includes('link')
+
     return html`
       <div class="meditor">
         <header
@@ -834,7 +844,8 @@ class MEditor extends Component {
           <wc-markd ref="view" class="preview"></wc-markd>
         </div>
 
-        <div
+        ${hasHeader
+          ? html`<div
               class="font-layer noselect"
               ref="header"
               @click=${this.#setHeaderLevel}
@@ -845,9 +856,10 @@ class MEditor extends Component {
               <span data-value="4">H4</span>
               <span data-value="5">H5</span>
               <span data-value="6">H6</span>
-        </div>
-
-        <div
+            </div>`
+          : ''}
+        ${hasTable
+          ? html`<div
               class="table-layer noselect"
               ref="table"
               @click=${this.#insertTable}
@@ -855,12 +867,14 @@ class MEditor extends Component {
               @mouseleave=${this.#tableSelect}
             >
               ${range(81).map((_, n) => html`<span data-idx=${n}></span>`)}
-        </div>
-
-        <div class="link-layer noselect" ref="link">
+            </div>`
+          : ''}
+        ${hasLink
+          ? html`<div class="link-layer noselect" ref="link">
               <wc-input ref="linkinput" placeholder="请输入链接地址"></wc-input>
               <wc-button size="m" @click=${this.#insertLink}>插入</wc-button>
-        </div>
+            </div>`
+          : ''}
       </div>
     `
   }