Merge branch 'dev'

* dev:
  chore(release): v0.8.38
  fix: 联想功能支持多实例
  fix: 修复自定义keyword覆盖问题 (#705)
  doc: 更新API文档
  feat: #703 增加动态重置工具栏的API
  feat: #702 提供销毁函数
  feat: 优化联想的选中逻辑，默认不选中任意选项，不影响回车键

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.8.38](https://github.com/Tencent/cherry-markdown/compare/v0.8.37...v0.8.38) (2024-01-29)
+
+
+### Features
+
+* [#702](https://github.com/Tencent/cherry-markdown/issues/702) 提供销毁函数 ([bb3c856](https://github.com/Tencent/cherry-markdown/commit/bb3c85699b1430a5ad90387017f393f82793b5d1))
+* [#703](https://github.com/Tencent/cherry-markdown/issues/703) 增加动态重置工具栏的API ([4011335](https://github.com/Tencent/cherry-markdown/commit/4011335ec0b98adeb2aaa462b33a850767672b15))
+* 优化联想的选中逻辑，默认不选中任意选项，不影响回车键 ([5ef6505](https://github.com/Tencent/cherry-markdown/commit/5ef6505d7c4d1b994cb9c35342f3124bd02c9370))
+
+
+### Bug Fixes
+
+* 修复自定义keyword覆盖问题 ([#705](https://github.com/Tencent/cherry-markdown/issues/705)) ([aa099ea](https://github.com/Tencent/cherry-markdown/commit/aa099eaff80850b6c2bc87d2c321b9bebd739f3f))
+* 联想功能支持多实例 ([9d50c88](https://github.com/Tencent/cherry-markdown/commit/9d50c8806dc017f0575b14b4ba988a507faac9ca))
+
 ### [0.8.37](https://github.com/Tencent/cherry-markdown/compare/v0.8.36...v0.8.37) (2024-01-25)
 
 

examples/api.html

@@ -119,6 +119,27 @@ <h2 class="one-api__name">getHtml()</h2>
       </div>
     </div>
 
+    <div class="one-api">
+      <h2 class="one-api__name">destroy()</h2>
+      <p class="one-api__desc">销毁函数</p>
+      <div class="one-api__try">
+        <textarea id="setMarkdown" placeholder="输入内容">
+cherryObj.destroy();</textarea>
+        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
+      </div>
+    </div>
+
+    <div class="one-api">
+      <h2 class="one-api__name">resetToolbar(type:string, toolbar:array)</h2>
+      <p class="one-api__desc">重置工具栏<br>type 修改工具栏的类型 {'toolbar'|'toolbarRight'|'sidebar'|'bubble'|'float'}<br>toolbar 工具栏配置</p>
+      <div class="one-api__try">
+        <textarea id="setMarkdown" placeholder="输入内容">
+cherryObj.resetToolbar('toolbar', ['bold', 'table']);
+</textarea>
+        <a class="one-api__btn" onclick="dealClick(this, event)">试一试</a>
+      </div>
+    </div>
+
     <div class="one-api">
       <h2 class="one-api__name">export(type:string)</h2>
       <p class="one-api__desc">导出预览区域的内容，type：{'pdf'|'img'}</p>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cherry-markdown",
   "license": "Apache-2.0",
-  "version": "0.8.37",
+  "version": "0.8.38",
   "description": "a new markdown editor",
   "repository": {
     "type": "git",

src/Cherry.js

@@ -110,6 +110,7 @@ export default class Cherry extends CherryStatic {
       if (!this.options.forceAppend) {
         return false;
       }
+      this.noMountEl = true;
       mountEl = document.createElement('div');
       mountEl.id = this.options.id || 'cherry-markdown';
       document.body.appendChild(mountEl);
@@ -140,8 +141,6 @@ export default class Cherry extends CherryStatic {
     const wrapperFragment = document.createDocumentFragment();
     wrapperFragment.appendChild(this.toolbar.options.dom);
     wrapperFragment.appendChild(editor.options.editorDom);
-    // 创建预览区域的侧边工具栏
-    this.createSidebar(wrapperFragment);
     if (!this.options.previewer.dom) {
       wrapperFragment.appendChild(previewer.options.previewerDom);
     }
@@ -150,6 +149,9 @@ export default class Cherry extends CherryStatic {
     wrapperFragment.appendChild(previewer.options.previewerMaskDom);
 
     wrapperDom.appendChild(wrapperFragment);
+    this.wrapperDom = wrapperDom;
+    // 创建预览区域的侧边工具栏
+    this.createSidebar();
     mountEl.appendChild(wrapperDom);
 
     editor.init(previewer);
@@ -199,6 +201,14 @@ export default class Cherry extends CherryStatic {
     }
   }
 
+  destroy() {
+    if (this.noMountEl) {
+      this.cherryDom.remove();
+    } else {
+      this.wrapperDom.remove();
+    }
+  }
+
   createToc() {
     this.toc = new Toc({
       $cherry: this,
@@ -437,10 +447,12 @@ export default class Cherry extends CherryStatic {
    * @returns {Toolbar}
    */
   createToolbar() {
-    const dom = createElement('div', 'cherry-toolbar');
-    this.toolbarContainer = dom;
+    if (!this.toolbarContainer) {
+      const dom = createElement('div', 'cherry-toolbar');
+      this.toolbarContainer = dom;
+    }
     this.toolbar = new Toolbar({
-      dom,
+      dom: this.toolbarContainer,
       $cherry: this,
       buttonConfig: this.options.toolbars.toolbar,
       customMenu: this.options.toolbars.customMenu,
@@ -449,6 +461,42 @@ export default class Cherry extends CherryStatic {
     return this.toolbar;
   }
 
+  /**
+   * 动态重置工具栏配置
+   * @public
+   * @param {'toolbar'|'toolbarRight'|'sidebar'|'bubble'|'float'} [type] 修改工具栏的类型
+   * @param {Array} [toolbar] 要重置的对应工具栏配置
+   * @returns {Boolean}
+   */
+  resetToolbar(type, toolbar) {
+    const $type = /(toolbar|toolbarRight|sidebar|bubble|float)/.test(type) ? type : false;
+    if ($type === false) {
+      return false;
+    }
+    if (this.toolbarContainer) {
+      this.toolbarContainer.innerHTML = '';
+    }
+    if (this.toolbarFloatContainer) {
+      this.toolbarFloatContainer.innerHTML = '';
+    }
+    if (this.toolbarBubbleContainer) {
+      this.toolbarBubbleContainer.innerHTML = '';
+    }
+    if (this.sidebarDom) {
+      this.sidebarDom.innerHTML = '';
+    }
+    this.cherryDom.querySelectorAll('.cherry-dropdown').forEach((item) => {
+      item.remove();
+    });
+    this.options.toolbars[type] = toolbar;
+    this.createToolbar();
+    this.createToolbarRight();
+    this.createBubble();
+    this.createFloatMenu();
+    this.createSidebar();
+    return true;
+  }
+
   /**
    * @private
    * @returns {Toolbar}
@@ -468,19 +516,26 @@ export default class Cherry extends CherryStatic {
    * @private
    * @returns
    */
-  createSidebar(wrapperFragment) {
+  createSidebar() {
     if (this.options.toolbars.sidebar) {
       $expectTarget(this.options.toolbars.sidebar, Array);
-      const externalClass = this.options.toolbars.theme === 'dark' ? 'dark' : '';
-      const dom = createElement('div', `cherry-sidebar ${externalClass}`);
+      let init = false;
+      if (!this.sidebarDom) {
+        init = true;
+        const externalClass = this.options.toolbars.theme === 'dark' ? 'dark' : '';
+        const dom = createElement('div', `cherry-sidebar ${externalClass}`);
+        this.sidebarDom = dom;
+      }
       this.sidebar = new Sidebar({
-        dom,
+        dom: this.sidebarDom,
         $cherry: this,
         buttonConfig: this.options.toolbars.sidebar,
         customMenu: this.options.toolbars.customMenu,
       });
       this.toolbar.collectMenuInfo(this.sidebar);
-      wrapperFragment.appendChild(this.sidebar.options.dom);
+      if (init === true) {
+        this.wrapperDom.appendChild(this.sidebarDom);
+      }
     }
   }
 
@@ -490,10 +545,13 @@ export default class Cherry extends CherryStatic {
    */
   createFloatMenu() {
     if (this.options.toolbars.float) {
-      const dom = createElement('div', 'cherry-floatmenu');
+      if (!this.toolbarFloatContainer) {
+        const dom = createElement('div', 'cherry-floatmenu');
+        this.toolbarFloatContainer = dom;
+      }
       $expectTarget(this.options.toolbars.float, Array);
       this.floatMenu = new FloatMenu({
-        dom,
+        dom: this.toolbarFloatContainer,
         $cherry: this,
         buttonConfig: this.options.toolbars.float,
         customMenu: this.options.toolbars.customMenu,
@@ -508,10 +566,13 @@ export default class Cherry extends CherryStatic {
    */
   createBubble() {
     if (this.options.toolbars.bubble) {
-      const dom = createElement('div', 'cherry-bubble');
+      if (!this.toolbarBubbleContainer) {
+        const dom = createElement('div', 'cherry-bubble');
+        this.toolbarBubbleContainer = dom;
+      }
       $expectTarget(this.options.toolbars.bubble, Array);
       this.bubble = new Bubble({
-        dom,
+        dom: this.toolbarBubbleContainer,
         $cherry: this,
         buttonConfig: this.options.toolbars.bubble,
         customMenu: this.options.toolbars.customMenu,

src/core/HookCenter.js

@@ -108,6 +108,7 @@ export default class HookCenter {
    */
   constructor(hooksConfig, editorConfig, cherry) {
     this.$locale = cherry.locale;
+    this.$cherry = cherry;
     /**
      * @property
      * @type {Record<import('./SyntaxBase').HookType, SyntaxBase[]>} hookList hook 名称 -> hook 类型的映射
@@ -209,6 +210,7 @@ export default class HookCenter {
     // filter Configs Here
     const { externals, engine } = editorConfig;
     const { syntax } = engine;
+    const { $cherry } = this;
 
     /** @type {SyntaxBase | CustomSyntax} */
     let instance;
@@ -233,7 +235,7 @@ export default class HookCenter {
       hookName = HookClass.HOOK_NAME;
       // TODO: 需要考虑自定义 hook 配置的传入方式
       const config = syntax?.[hookName] || {};
-      instance = new HookClass({ externals, config, globalConfig: engine.global });
+      instance = new HookClass({ externals, config, globalConfig: engine.global, cherry: $cherry });
       instance.afterInit(() => {
         instance.setLocale(this.$locale);
       });