Fix toolbar right

src/Cherry.js

@@ -20,6 +20,7 @@ import Previewer from './Previewer';
 import Bubble from './toolbars/Bubble';
 import FloatMenu from './toolbars/FloatMenu';
 import Toolbar from './toolbars/Toolbar';
+import ToolbarRight from './toolbars/ToolbarRight';
 import { createElement } from './utils/dom';
 import Sidebar from './toolbars/Sidebar';
 import { customizer, getThemeFromLocal, changeTheme } from './utils/config';
@@ -133,7 +134,8 @@ export default class Cherry extends CherryStatic {
     }
     $expectTarget(this.options.toolbars.toolbar, Array);
     // 创建顶部工具栏
-    this.toolbar = this.createToolbar();
+    this.createToolbar();
+    this.createToolbarRight();
 
     const wrapperFragment = document.createDocumentFragment();
     wrapperFragment.appendChild(this.toolbar.options.dom);
@@ -388,16 +390,31 @@ export default class Cherry extends CherryStatic {
    */
   createToolbar() {
     const dom = createElement('div', 'cherry-toolbar');
+    this.toolbarContainer = dom;
     this.toolbar = new Toolbar({
       dom,
       $cherry: this,
-      buttonRightConfig: this.options.toolbars.toolbarRight,
       buttonConfig: this.options.toolbars.toolbar,
       customMenu: this.options.toolbars.customMenu,
     });
     return this.toolbar;
   }
 
+  /**
+   * @private
+   * @returns {Toolbar}
+   */
+  createToolbarRight() {
+    this.toolbarRight = new ToolbarRight({
+      dom: this.toolbarContainer,
+      $cherry: this,
+      buttonConfig: this.options.toolbars.toolbarRight,
+      customMenu: this.options.toolbars.customMenu,
+    });
+    this.toolbar.toolbarHandlers = Object.assign({}, this.toolbar.toolbarHandlers, this.toolbarRight.toolbarHandlers);
+    return this.toolbarRight;
+  }
+
   /**
    * @private
    * @returns
@@ -413,6 +430,7 @@ export default class Cherry extends CherryStatic {
         buttonConfig: this.options.toolbars.sidebar,
         customMenu: this.options.toolbars.customMenu,
       });
+      this.toolbar.toolbarHandlers = Object.assign({}, this.toolbar.toolbarHandlers, this.sidebar.toolbarHandlers);
       wrapperFragment.appendChild(this.sidebar.options.dom);
     }
   }
@@ -431,6 +449,7 @@ export default class Cherry extends CherryStatic {
         buttonConfig: this.options.toolbars.float,
         customMenu: this.options.toolbars.customMenu,
       });
+      this.toolbar.toolbarHandlers = Object.assign({}, this.toolbar.toolbarHandlers, this.floatMenu.toolbarHandlers);
     }
   }
 
@@ -449,6 +468,7 @@ export default class Cherry extends CherryStatic {
         customMenu: this.options.toolbars.customMenu,
         engine: this.engine,
       });
+      this.toolbar.toolbarHandlers = Object.assign({}, this.toolbar.toolbarHandlers, this.bubble.toolbarHandlers);
     }
   }
 

src/toolbars/Toolbar.js

@@ -37,7 +37,6 @@ export default class Toolbar {
       dom: document.createElement('div'),
       buttonConfig: ['bold'],
       customMenu: [],
-      buttonRightConfig: [],
     };
 
     Object.assign(this.options, options);
@@ -107,40 +106,6 @@ export default class Toolbar {
 
     toolbarLeft.appendChild(fragLeft);
     this.options.dom.appendChild(toolbarLeft);
-
-    this.options.buttonRightConfig?.length ? this.drawRightMenus(this.options.buttonRightConfig) : null;
-  }
-  /**
-   * 根据配置画出来右侧一级工具栏
-   */
-  drawRightMenus(buttonRightConfig) {
-    const toolbarRight = createElement('div', 'toolbar-right');
-    const fragRight = document.createDocumentFragment();
-    const rightOptions = {
-      options: {
-        $cherry: this.$cherry,
-        buttonConfig: buttonRightConfig,
-        customMenu: [],
-      },
-    };
-
-    const rightMenus = new HookCenter(rightOptions);
-
-    rightMenus.level1MenusName.forEach((name) => {
-      const btn = rightMenus.hooks[name].createBtn();
-      btn.addEventListener(
-        'click',
-        (event) => {
-          console.log('第一次点击');
-          rightMenus.hooks[name].fire(event, name);
-        },
-        false,
-      );
-      fragRight.appendChild(btn);
-    });
-
-    toolbarRight.appendChild(fragRight);
-    this.options.dom.appendChild(toolbarRight);
   }
 
   setSubMenuPosition(menuObj, subMenuObj) {

src/toolbars/ToolbarRight.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Toolbar from './Toolbar';
+import { createElement } from '@/utils/dom';
+/**
+ * 在编辑区域选中文本时浮现的bubble工具栏
+ */
+export default class ToolbarRight extends Toolbar {
+  /**
+   * 根据配置画出来一级工具栏
+   */
+  drawMenus() {
+    const fragRight = document.createDocumentFragment();
+    const toolbarRight = createElement('div', 'toolbar-right');
+
+    this.menus.level1MenusName.forEach((name) => {
+      const btn = this.menus.hooks[name].createBtn();
+      btn.addEventListener(
+        'click',
+        (event) => {
+          this.onClick(event, name);
+        },
+        false,
+      );
+      if (this.isHasSubMenu(name)) {
+        btn.classList.add('cherry-toolbar-dropdown');
+      }
+      fragRight.appendChild(btn);
+    });
+
+    toolbarRight.appendChild(fragRight);
+    this.options.dom.appendChild(toolbarRight);
+  }
+}