feat: #755 增加隐藏工具栏机制

Tencent · Jul 25, 2024 · 71b8c03 · 71b8c03
1 parent ba0f71e
commit 71b8c03
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 2 deletions.
diff --git a/examples/scripts/api-demo.js b/examples/scripts/api-demo.js
@@ -75,10 +75,9 @@ var cherryConfig = {
       { insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word', 'file'] },
       'graph',
       'settings',
-      'panel',
-      'justify',
       'export'
     ],
+    hiddenToolbar: ['panel', 'justify'],
   },
   editor: {},
   previewer: {

diff --git a/src/Cherry.config.js b/src/Cherry.config.js
@@ -312,6 +312,7 @@ const defaultConfig = {
     sidebar: false,
     bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color'], // array or false
     float: ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code'], // array or false
+    hiddenToolbar: [], // 不展示在编辑器中的工具栏，只使用工具栏的api和快捷键功能
     toc: false, // 不展示悬浮目录
     // toc: {
     //   updateLocationHash: false, // 要不要更新URL的hash

diff --git a/src/Cherry.js b/src/Cherry.js
@@ -24,6 +24,7 @@ import ToolbarRight from './toolbars/ToolbarRight';
 import Toc from './toolbars/Toc';
 import { createElement } from './utils/dom';
 import Sidebar from './toolbars/Sidebar';
+import HiddenToolbar from './toolbars/HiddenToolbar';
 import { customizer, getThemeFromLocal, changeTheme, getCodeThemeFromLocal } from './utils/config';
 import NestedError, { $expectTarget } from './utils/error';
 import getPosBydiffs from './utils/recount-pos';
@@ -188,6 +189,7 @@ export default class Cherry extends CherryStatic {
     this.wrapperDom = wrapperDom;
     // 创建预览区域的侧边工具栏
     this.createSidebar();
+    this.createHiddenToolbar();
     mountEl.appendChild(wrapperDom);
 
     editor.init(previewer);
@@ -592,6 +594,7 @@ export default class Cherry extends CherryStatic {
     this.createBubble();
     this.createFloatMenu();
     this.createSidebar();
+    this.createHiddenToolbar();
     return true;
   }
 
@@ -637,6 +640,19 @@ export default class Cherry extends CherryStatic {
     }
   }
 
+  createHiddenToolbar() {
+    console.log(this.options.toolbars.hiddenToolbar);
+    if (this.options.toolbars.hiddenToolbar) {
+      $expectTarget(this.options.toolbars.hiddenToolbar, Array);
+      this.hiddenToolbar = new HiddenToolbar({
+        $cherry: this,
+        buttonConfig: this.options.toolbars.hiddenToolbar,
+        customMenu: this.options.toolbars.customMenu,
+      });
+      this.toolbar.collectMenuInfo(this.hiddenToolbar);
+    }
+  }
+
   /**
    * @private
    * @returns

diff --git a/src/toolbars/HiddenToolbar.js b/src/toolbars/HiddenToolbar.js
@@ -0,0 +1,29 @@
+/**
+ * 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';
+/**
+ * 预览区域右侧悬浮的工具栏
+ * 推荐放置跟编辑区域完全无关的工具栏
+ *    比如复制预览区域内容、修改预览区域主题等
+ */
+export default class HiddenToolbar extends Toolbar {
+  // constructor(options) {
+  //   super(options);
+  // }
+  appendMenusToDom(menus) {
+    return;
+  }
+}
diff --git a/types/cherry.d.ts b/types/cherry.d.ts
@@ -307,6 +307,8 @@ export interface CherryToolbarOptions {
     position: 'absolute' | 'fixed', // 悬浮目录的悬浮方式。当滚动条在cherry内部时，用absolute；当滚动条在cherry外部时，用fixed
     cssText: string, // 额外样式
   };
+  /** 不展示在编辑器中的工具栏，只使用工具栏的api和快捷键功能 */
+  hiddenToolbar?: any[];
   /** 是否展示顶部工具栏 */
   showToolbar?: boolean;
   /** 侧边栏配置 */