@cherry-markdown/cherry-markdown-dev 0.9.0-dev.202504110650.834443a → 0.9.0-dev.202504160300.d23d141

package/src/toolbars/ShortcutKeyConfigPanel.js

@@ -1,345 +0,0 @@
-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

@@ -1,36 +0,0 @@
-/**
- * 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

@@ -1,242 +0,0 @@
-/**
- * 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');
-        }
-      });
-    }
-  }
-}