@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/toolbars/ShortcutKeyConfigPanel.js

@@ -0,0 +1,345 @@
+import { mac } from 'codemirror/src/util/browser';
+import {
+  getAllowedShortcutKey,
+  keyStackIsModifierkeys,
+  ENTER_KEY,
+  BACKSPACE_KEY,
+  keyStack2UniqueString,
+  shortcutCode2Key,
+  keyStack2UnPlatformUniqueString,
+  isEnableShortcutKey,
+  setDisableShortcutKey,
+  storageKeyMap,
+} from '@/utils/shortcutKey';
+import { createElement } from '@/utils/dom';
+/**
+ * 隐藏输入框，展示快捷键配置项
+ * @param {Element} inputWrapper
+ * @param {HTMLElement} shortcutPanel
+ */
+function hiddenInputWrapper(inputWrapper, shortcutPanel) {
+  inputWrapper.setAttribute('style', 'display: none;');
+  shortcutPanel.style.display = 'flex';
+}
+
+export default class ShortcutKeyConfigPanel {
+  /**
+   *
+   * @param {Partial<import('@/Cherry').default> & {$currentMenuOptions?:import('~types/menus').CustomMenuConfig}} $cherry
+   */
+  constructor($cherry) {
+    this.$cherry = $cherry;
+    this.shortcutUlClassName = 'cherry-shortcut-key-config-panel-ul';
+    this.shortcutUlId = this.shortcutUlClassName;
+    this.shortcutConfigPanelKbdClassName = 'shortcut-key-config-panel-kbd';
+    this.shortcutKeyboardKeyClassName = 'keyboard-key';
+    // 双击快捷键区域
+    this.handleDbClick = (/** @type {MouseEvent} */ e) => {
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        return;
+      }
+      if (e.target instanceof HTMLElement) {
+        if (
+          e.target.classList.contains(this.shortcutConfigPanelKbdClassName) ||
+          e.target.classList.contains(this.shortcutKeyboardKeyClassName)
+        ) {
+          const shortcutPanel = e.target.classList.contains(this.shortcutConfigPanelKbdClassName)
+            ? e.target
+            : e.target.parentElement;
+          // 隐藏展示快捷键的容器
+          shortcutPanel.style.display = 'none';
+          const inputWrapper = shortcutPanel.nextElementSibling;
+          // 显示输入框
+          inputWrapper.setAttribute('style', 'display: block;');
+          const inputElement = inputWrapper.querySelector('input');
+          const placeholder = [];
+          shortcutPanel.childNodes.forEach((element) => {
+            // @ts-ignore
+            placeholder.push(element.innerText);
+          });
+          inputElement.placeholder = placeholder.join('-');
+          // 获取焦点
+          inputElement.focus();
+          inputElement.onblur = () => {
+            hiddenInputWrapper(inputWrapper, shortcutPanel);
+            inputElement.value = '';
+          };
+          /** @type {string[]} 按下的快捷键栈 */
+          let keyStack = [];
+          inputElement.onkeydown = (/** @type {KeyboardEvent} */ e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.key === ENTER_KEY || e.key === BACKSPACE_KEY) {
+              if (e.key === ENTER_KEY) {
+                const { hookname = '' } = shortcutPanel.parentElement?.dataset ?? {};
+                const oldShortcutKeys = [];
+                for (let i = 0; i < shortcutPanel.children.length; i++) {
+                  /** @type {HTMLDivElement} */
+                  // @ts-ignore
+                  const element = shortcutPanel.children.item(i);
+                  const { code } = element.dataset ?? {};
+                  if (code) {
+                    oldShortcutKeys.push(code);
+                  }
+                }
+                // 防止修改
+                if (oldShortcutKeys.length === shortcutPanel.children.length) {
+                  // 旧的shortcutKey用于在更新时比较，删除旧值
+                  const oldShortcutKey = keyStack2UniqueString(oldShortcutKeys);
+                  if (hookname) {
+                    // 触发更新快捷键
+                    this.$cherry?.toolbar?.updateShortcutKeyMap(oldShortcutKey, keyStack2UniqueString(keyStack));
+                    // 取二者较大者
+                    const endIndex = Math.max(keyStack.length, shortcutPanel.children.length);
+                    // 更新界面展示的快捷键
+                    for (let i = 0; i < endIndex; i++) {
+                      const element = shortcutPanel.children.item(i);
+                      // 如果当前快捷键栈不存在了，说明新的快捷键个数比上一次少，则应该删除当前element
+                      if (!keyStack[i] && element) {
+                        element.remove();
+                        continue;
+                      }
+                      const matchRes = shortcutCode2Key(keyStack[i], mac);
+                      if (element) {
+                        element.setAttribute('title', matchRes.tip);
+                        element.textContent = matchRes.text;
+                        element.setAttribute('data-code', keyStack[i]);
+                      } else {
+                        const matchRes = shortcutCode2Key(keyStack[i], mac);
+                        const kbd = createElement('span', this.shortcutKeyboardKeyClassName, {
+                          title: matchRes.tip,
+                        });
+                        kbd.setAttribute('data-code', keyStack[i]);
+                        kbd.innerText = matchRes.text;
+                        shortcutPanel.appendChild(kbd);
+                      }
+                    }
+                  }
+                }
+                hiddenInputWrapper(inputWrapper, shortcutPanel);
+              } else {
+                if (keyStack.length === 0) {
+                  hiddenInputWrapper(inputWrapper, shortcutPanel);
+                }
+                // 退栈
+                keyStack.pop();
+                inputElement.value = keyStack2UnPlatformUniqueString(keyStack, mac);
+              }
+            } else {
+              keyStack = getAllowedShortcutKey(e);
+              if (!keyStackIsModifierkeys(keyStack) && Array.isArray(keyStack) && keyStack.length >= 2) {
+                inputElement.value = keyStack2UnPlatformUniqueString(keyStack, mac);
+              }
+            }
+          };
+        }
+      }
+    };
+    this.clickSettingsDisableBtn = () => {
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        setDisableShortcutKey(this.$cherry.nameSpace, 'enable');
+        this.dom.classList.remove('disable');
+        this.$cherry.editor.disableShortcut(false);
+      } else {
+        setDisableShortcutKey(this.$cherry.nameSpace, 'disable');
+        this.dom.classList.add('disable');
+        this.$cherry.editor.disableShortcut(true);
+      }
+    };
+    this.clickSettingsRecoverBtn = () => {
+      setDisableShortcutKey(this.$cherry.nameSpace, 'enable');
+      this.dom.classList.remove('disable');
+      this.$cherry.editor.disableShortcut(false);
+      this.$cherry.toolbar.shortcutKeyMap = {};
+      this.$cherry.toolbar.collectShortcutKey(false);
+      storageKeyMap(this.$cherry.nameSpace, this.$cherry.toolbar.shortcutKeyMap);
+      this.dom.innerHTML = this.generateShortcutKeyConfigPanelHtmlStr();
+      this.show();
+    };
+    this.init();
+  }
+
+  init() {
+    if (this.$cherry?.toolbar?.shortcutKeyMap) {
+      this.dom = document.createElement('div');
+      this.dom.className = [
+        'cherry-dropdown',
+        'cherry-shortcut-key-config-panel',
+        'cherry-shortcut-key-config-panel-wrapper',
+      ].join(' ');
+      this.dom.innerHTML = this.generateShortcutKeyConfigPanelHtmlStr();
+      // 实例化后，将容器插入到富文本编辑器中，默认隐藏
+      this.dom.style.display = 'none';
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        this.dom.classList.add('disable');
+      }
+      this.$cherry.wrapperDom.append(this.dom);
+    }
+  }
+
+  generateShortcutKeyConfigPanelHtmlStr() {
+    const liStr = Object.entries(this.$cherry.toolbar.shortcutKeyMap ?? {})
+      .filter(([key, val]) => typeof val === 'object' && val)
+      .map(([key, val]) => {
+        const { hookName, aliasName, ...rest } = val;
+        let otherDataSet = '';
+        if (rest && typeof rest === 'object') {
+          otherDataSet = Object.entries(rest)
+            .map(([otherField, fieldValue]) => `data-${otherField}=${fieldValue}`)
+            .join(' ');
+        }
+        return `<li class="cherry-dropdown-item shortcut-key-item" data-hookname=${hookName} ${otherDataSet}>
+        <div class="shortcut-key-config-panel-name">${aliasName}</div>
+        <div class="${this.shortcutConfigPanelKbdClassName}">${key
+          ?.split('-')
+          .map((singalKey) => {
+            const matchRes = shortcutCode2Key(singalKey, mac);
+            const shortKey = matchRes ?? {
+              text: singalKey,
+              tip: singalKey,
+            };
+            return `<span class="${this.shortcutKeyboardKeyClassName}" title="${shortKey.tip}" data-code="${singalKey}">${shortKey.text}</span>`;
+          })
+          .join('')}</div>
+        <div style="display: none;" class="input-shortcut-wrapper"><input type="text" /></div>
+      </li>`;
+      })
+      .join('');
+    //   <div class="cherry-dropdown-item">
+    //   <input type="checkbox" id="enableMacControl" name="enableMacControl" checked />
+    //   <label for="enableMacControl">启用Mac平台的Control键</label>
+    // </div>
+    const ulStr = `
+      <div class="cherry-shortcut-key-config-panel-inner">
+        <div class="shortcut-panel-settings">
+          <btn class="shortcut-settings-btn j-shortcut-settings-disable-btn"><i class="ch-icon ch-icon-cherry-table-delete"></i> ${
+            this.$cherry.locale.disableShortcut
+          }</btn>
+          <btn class="shortcut-settings-btn j-shortcut-settings-recover-btn"><i class="ch-icon ch-icon-undo"></i> ${
+            this.$cherry.locale.recoverShortcut
+          }</btn>
+        </div>
+        <div class="shortcut-panel-title">${this.$cherry.locale.editShortcutKeyConfigTip}</div>
+        <ul class="${this.shortcutUlClassName}" id="${this.shortcutUlId}">${liStr}</ul>
+        ${this.$getStaticShortcut()}
+      </div>`;
+    return ulStr;
+  }
+
+  /**
+   * 定义不支持修改的快捷键信息（是codemirror提供的类sublime快捷键）
+   */
+  $getStaticShortcut() {
+    if (this.$cherry.options.editor.keyMap === 'vim') {
+      return '';
+    }
+    const list = [
+      { name: this.$cherry.locale.shortcutStatic1, key: 'Ctrl+[' },
+      { name: this.$cherry.locale.shortcutStatic2, key: 'Ctrl+]' },
+      { name: this.$cherry.locale.shortcutStatic3, key: 'Ctrl+Shift+D' },
+      { name: this.$cherry.locale.shortcutStatic4, key: 'Ctrl+Enter' },
+      { name: this.$cherry.locale.shortcutStatic5, key: 'Ctrl+Shift+Enter' },
+      { name: this.$cherry.locale.shortcutStatic6, key: 'Ctrl+Shift+↑' },
+      { name: this.$cherry.locale.shortcutStatic7, key: 'Ctrl+Shift+↓' },
+      { name: this.$cherry.locale.shortcutStatic8, key: 'Ctrl+Shift+K' },
+      { name: this.$cherry.locale.shortcutStatic9, key: 'Ctrl+Shift+←' },
+      { name: this.$cherry.locale.shortcutStatic10, key: 'Ctrl+Shift+→' },
+      { name: this.$cherry.locale.shortcutStatic11, key: 'Ctrl+Backspace' },
+      { name: this.$cherry.locale.shortcutStatic12, key: 'Ctrl+Shift+M' },
+      { name: this.$cherry.locale.shortcutStatic13, key: `Ctrl+${this.$cherry.locale.leftMouseButton}` },
+      { name: this.$cherry.locale.shortcutStatic14, key: 'Ctrl+Shift+L' },
+      { name: this.$cherry.locale.shortcutStatic16, key: 'Alt+F3' },
+      { name: this.$cherry.locale.shortcutStatic17, key: 'Ctrl+Z' },
+      { name: this.$cherry.locale.shortcutStatic18, key: 'Ctrl+Y' },
+    ];
+    const li = [];
+    for (let i = 0; i < list.length; i++) {
+      const one = list[i];
+      li.push(`
+        <li class="cherry-dropdown-item shortcut-key-item">
+          <div class="shortcut-key-config-panel-name">${one.name}</div>
+          <div class="shortcut-key-config-panel-static">${one.key.replace(
+            /\+/g,
+            '<span class="shortcut-split">+</span>',
+          )}
+          </div>
+        </li>
+      `);
+    }
+    return `<div class="shortcut-static">
+      <div class="shortcut-panel-title">${this.$cherry.locale.shortcutStaticTitle}</div>
+      <ul class="cherry-shortcut-key-config-panel-ul">${li.join('')}</ul>
+    </div>`;
+  }
+
+  /**
+   * 显示快捷键配置面板
+   */
+  show() {
+    this.dom.style.removeProperty('display');
+    const ulWrapper = this.dom.querySelector(`#${this.shortcutUlId}`);
+    if (ulWrapper instanceof HTMLUListElement) {
+      // 监听双击
+      ulWrapper.addEventListener('dblclick', this.handleDbClick);
+    }
+    const settingsDisableBtn = this.dom.querySelector('.j-shortcut-settings-disable-btn');
+    if (settingsDisableBtn instanceof HTMLElement) {
+      settingsDisableBtn.addEventListener('click', this.clickSettingsDisableBtn);
+    }
+    const settingsRecoverBtn = this.dom.querySelector('.j-shortcut-settings-recover-btn');
+    if (settingsRecoverBtn instanceof HTMLElement) {
+      settingsRecoverBtn.addEventListener('click', this.clickSettingsRecoverBtn);
+    }
+  }
+
+  hide() {
+    this.dom.style.display = 'none';
+    const ulWrapper = this.dom.querySelector(`#${this.shortcutUlId}`);
+    if (ulWrapper instanceof HTMLUListElement) {
+      // 销毁时取消监听
+      ulWrapper.removeEventListener('dblclick', this.handleDbClick);
+    }
+    const settingsDisableBtn = this.dom.querySelector('.j-shortcut-settings-disable-btn');
+    if (settingsDisableBtn instanceof HTMLElement) {
+      settingsDisableBtn.removeEventListener('click', this.clickSettingsDisableBtn);
+    }
+    const settingsRecoverBtn = this.dom.querySelector('.j-shortcut-settings-recover-btn');
+    if (settingsRecoverBtn instanceof HTMLElement) {
+      settingsRecoverBtn.removeEventListener('click', this.clickSettingsRecoverBtn);
+    }
+  }
+
+  isShow() {
+    return this.dom.style.display === 'block';
+  }
+
+  isHide() {
+    return this.dom.style.display === 'none';
+  }
+
+  /**
+   * 展示/隐藏快捷键配置面板
+   * @param {HTMLElement} settingsDom
+   */
+  toggle(settingsDom) {
+    if (!(settingsDom instanceof HTMLElement)) {
+      throw new Error(`settingsDom must be an instance of HTMLElement, but got: ${settingsDom}`);
+    }
+    const pos = settingsDom.getBoundingClientRect();
+    const cherryWrapPos = this.$cherry.wrapperDom.getBoundingClientRect();
+    if (this.isHide()) {
+      this.dom.style.left = `${pos.left - cherryWrapPos.left + pos.width / 2}px`;
+      this.dom.style.top = `${pos.top - cherryWrapPos.top + pos.height}px`;
+      this.show();
+      const me = this.dom.getBoundingClientRect();
+      this.dom.style.marginLeft = `0px`;
+      this.dom.style.left = `${pos.left - cherryWrapPos.left + pos.width / 2 - me.width / 2}px`;
+      // 如果弹窗位置超出屏幕，则自动调整位置
+      if (me.left + me.width > window.innerWidth) {
+        this.dom.style.left = `${window.innerWidth - me.width - 5}px`;
+      }
+      return;
+    }
+    return this.hide();
+  }
+}

package/src/toolbars/Sidebar.js

@@ -0,0 +1,36 @@
+/**
+ * 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 Sidebar extends Toolbar {
+  // constructor(options) {
+  //   super(options);
+  // }
+  appendMenusToDom(menus) {
+    this.options.dom.appendChild(menus);
+  }
+
+  init() {
+    super.init();
+    Object.entries(this.shortcutKeyMap).forEach(([key, value]) => {
+      this.$cherry.toolbar.shortcutKeyMap[key] = value;
+    });
+  }
+}

package/src/toolbars/Toc.js

@@ -0,0 +1,242 @@
+/**
+ * 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 { createElement } from '../utils/dom';
+/**
+ * 悬浮目录
+ */
+export default class Toc {
+  constructor(options) {
+    this.$cherry = options.$cherry;
+    this.editor = options.$cherry.editor.editor;
+    this.tocStr = '';
+    this.updateLocationHash = options.updateLocationHash ?? true;
+    this.defaultModel = options.defaultModel ?? 'full';
+    this.showAutoNumber = options.showAutoNumber ?? false;
+    this.position = options.position ?? 'absolute';
+    this.cssText = options.cssText ?? '';
+    this.init();
+  }
+
+  init() {
+    this.drawDom();
+    this.timer = setTimeout(() => {
+      this.updateTocList();
+    }, 300);
+    this.editor.on('change', (codemirror, evt) => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.updateTocList();
+        this.$switchModel(this.model);
+      }, 300);
+    });
+    this.$switchModel(this.getModelFromLocalStorage());
+  }
+
+  getModelFromLocalStorage() {
+    if (typeof localStorage === 'undefined') {
+      return this.defaultModel;
+    }
+    return localStorage.getItem('cherry-toc-model') || this.defaultModel;
+  }
+
+  setModelToLocalStorage(model) {
+    if (typeof localStorage === 'undefined') {
+      return;
+    }
+    localStorage.setItem('cherry-toc-model', model);
+  }
+
+  drawDom() {
+    const tocDom = createElement(
+      'div',
+      `cherry-flex-toc cherry-flex-toc__pure${this.showAutoNumber ? ' auto-num' : ''}`,
+    );
+    if (this.position === 'fixed') {
+      tocDom.classList.add('cherry-flex-toc__fixed');
+    }
+
+    if (this.cssText.length > 0) {
+      tocDom.style.cssText = this.cssText;
+    }
+
+    const tocHead = createElement('div', 'cherry-toc-head');
+    const tocTitle = createElement('span', 'cherry-toc-title');
+    tocTitle.append(this.$cherry.locale.toc);
+    const tocClose = createElement('i', 'ch-icon ch-icon-chevronsRight');
+    const tocOpen = createElement('i', 'ch-icon ch-icon-chevronsLeft');
+    this.tocClose = tocClose;
+    this.tocOpen = tocOpen;
+    tocHead.appendChild(tocTitle);
+    tocHead.appendChild(tocClose);
+    tocHead.appendChild(tocOpen);
+    tocDom.appendChild(tocHead);
+    const tocListDom = createElement('div', 'cherry-toc-list');
+    this.tocListDom = tocListDom;
+    tocDom.appendChild(tocListDom);
+    this.tocDom = tocDom;
+    this.$cherry.wrapperDom.appendChild(tocDom);
+    this.bindClickEvent();
+  }
+
+  bindClickEvent() {
+    this.tocDom.addEventListener('click', (e) => {
+      const a = this.$getClosestNode(e.target, 'A');
+      if (a === false) {
+        return;
+      }
+      if (/cherry-toc-one-a/.test(a.className)) {
+        const { id, index } = a.dataset;
+        if (this.$cherry.status.previewer === 'hide') {
+          // editorOnly模式下，需要定位到编辑区对应位置
+          const searcher = this.$cherry.editor.editor.getSearchCursor(
+            /(?:^|\n)\n*((?:[ \t\u00a0]*#{1,6}).+?|(?:[ \t\u00a0]*.+)\n(?:[ \t\u00a0]*[=]+|[-]+))(?=$|\n)/g,
+          );
+          for (let i = 0; i <= index; i++) {
+            searcher.findNext();
+          }
+          const target = searcher.from();
+          this.$cherry.editor.scrollToLineNum(target.line, target.line + 1, 0);
+        } else {
+          // 有预览的情况下，直接通过滚动预览区位置实现滚动到锚点
+          this.$cherry.previewer.scrollToHeadByIndex(index);
+        }
+        if (this.updateLocationHash) {
+          location.href = id;
+        }
+      }
+    });
+    this.tocClose.addEventListener('click', (e) => {
+      this.$switchModel('pure');
+      this.setModelToLocalStorage('pure');
+    });
+    this.tocOpen.addEventListener('click', (e) => {
+      this.$switchModel('full');
+      this.setModelToLocalStorage('full');
+    });
+    if (window) {
+      window.addEventListener('resize', () => {
+        this.$switchModel(this.model);
+      });
+    }
+    this.editor.on('scroll', (codemirror, evt) => {
+      this.updateTocList(true);
+    });
+    const scrollDom = this.$cherry.previewer.getDomCanScroll();
+    if (scrollDom.nodeName === 'HTML') {
+      window.addEventListener('scroll', () => {
+        this.updateTocList(true);
+      });
+    } else {
+      scrollDom.addEventListener('scroll', () => {
+        this.updateTocList(true);
+      });
+    }
+  }
+
+  $switchModel(model = 'pure') {
+    this.model = model;
+    const targetClassName = `cherry-flex-toc__${model}`;
+    if (!this.tocDom.classList.contains(targetClassName)) {
+      this.tocDom.classList.remove(`cherry-flex-toc__pure`);
+      this.tocDom.classList.remove(`cherry-flex-toc__full`);
+      this.tocDom.classList.add(targetClassName);
+    }
+    const list = this.tocListDom.querySelectorAll('.cherry-toc-one-a');
+    if (list.length > 0) {
+      let targetHeight = 28;
+      if (model === 'pure') {
+        const { height } = this.tocListDom.getBoundingClientRect();
+        const minHeight = Math.floor((height - list.length * 3) / list.length);
+        // eslint-disable-next-line no-nested-ternary
+        targetHeight = minHeight < 3 ? 3 : minHeight > 10 ? 10 : minHeight;
+      }
+      for (let i = 0; i < list.length; i++) {
+        // @ts-ignore
+        if (list[i].style.height !== `${targetHeight}px`) {
+          // @ts-ignore
+          list[i].style.height = `${targetHeight}px`;
+        }
+      }
+    }
+  }
+
+  $getClosestNode(node, targetNodeName) {
+    if (!node || !node.tagName) {
+      return false;
+    }
+    if (node.tagName === targetNodeName) {
+      return node;
+    }
+    if (node.parentNode.tagName === 'BODY') {
+      return false;
+    }
+    return this.$getClosestNode(node.parentNode, targetNodeName);
+  }
+
+  updateTocList(onlyScroll = false) {
+    if (onlyScroll === true) {
+      // do nothing
+    } else {
+      const tocList = this.$cherry.getToc();
+      let tocStr = '';
+      tocList.map((item) => {
+        tocStr += item.text;
+        return item;
+      });
+      tocStr = this.$cherry.engine.hash(tocStr);
+      if (this.tocStr !== tocStr) {
+        this.tocStr = tocStr;
+        let tocHtml = '';
+        let index = 0;
+        tocList.map((item) => {
+          const text = item.text.replace(/<a .+?<\/a>/g, '');
+          const title = text.replace(/<[^>]+?>/g, '');
+          tocHtml += `<a class="cherry-toc-one-a cherry-toc-one-a__${item.level > 5 ? 5 : item.level}"
+            title="${title}"
+            data-index="${index}"
+            data-id="#${item.id}"
+            >${text}</a>`;
+          index += 1;
+          return item;
+        });
+        this.tocListDom.innerHTML = tocHtml;
+      }
+    }
+    // 处理当前标题的高亮
+    if (this.$cherry.status.previewer === 'hide') {
+      // 似乎没有特别好的办法，先欠着
+    } else {
+      const scrollDom = this.$cherry.previewer.getDomCanScroll();
+      const minY = scrollDom.nodeName === 'HTML' ? 0 : scrollDom.getBoundingClientRect().y;
+      const headList = this.$cherry.previewer.getDomContainer().querySelectorAll('h1,h2,h3,h4,h5,h6,h7,h8');
+      let index = 0;
+      for (; index < headList.length; index++) {
+        const { y } = headList[index].getBoundingClientRect();
+        if (y > minY + 20) {
+          break;
+        }
+      }
+      index = index > 0 ? index - 1 : index;
+      this.tocListDom.querySelectorAll('.cherry-toc-one-a').forEach((item, key) => {
+        if (key === index) {
+          item.classList.add('current');
+        } else {
+          item.classList.remove('current');
+        }
+      });
+    }
+  }
+}