feat: #658 增加悬浮目录及相关配置、记忆、回显、跳转等功能

examples/scripts/index-demo.js

@@ -178,6 +178,10 @@ var basicConfig = {
     toolbarRight: ['fullScreen', '|'],
     bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
     sidebar: ['mobilePreview', 'copy', 'theme'],
+    toc: {
+      updateLocationHash: false, // 要不要更新URL的hash
+      defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
+    },
     customMenu: {
       customMenuAName: customMenuA,
       customMenuBName: customMenuB,

src/Cherry.config.js

@@ -292,6 +292,11 @@ const defaultConfig = {
     sidebar: [],
     bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color'], // array or false
     float: ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code'], // array or false
+    toc: false, // 不展示悬浮目录
+    // toc: {
+    //   updateLocationHash: false, // 要不要更新URL的hash
+    //   defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
+    // },
     // 快捷键配置，如果配置为空，则使用toolbar的配置
     shortcutKey: {
       // 'Alt-1': 'header',

src/Cherry.js

@@ -21,6 +21,7 @@ import Bubble from './toolbars/Bubble';
 import FloatMenu from './toolbars/FloatMenu';
 import Toolbar from './toolbars/Toolbar';
 import ToolbarRight from './toolbars/ToolbarRight';
+import Toc from './toolbars/Toc';
 import { createElement } from './utils/dom';
 import Sidebar from './toolbars/Sidebar';
 import { customizer, getThemeFromLocal, changeTheme } from './utils/config';
@@ -191,6 +192,21 @@ export default class Cherry extends CherryStatic {
     if (this.options.autoScrollByHashAfterInit) {
       setTimeout(this.scrollByHash.bind(this));
     }
+    // 强制进行一次渲染
+    this.editText(null, this.editor.editor);
+    if (this.options.toolbars.toc !== false) {
+      this.createToc();
+    }
+  }
+
+  createToc() {
+    this.toc = new Toc({
+      $cherry: this,
+      // @ts-ignore
+      updateLocationHash: this.options.toolbars.toc.updateLocationHash ?? true,
+      // @ts-ignore
+      defaultModel: this.options.toolbars.toc.defaultModel ?? 'pure',
+    });
   }
 
   /**
@@ -318,7 +334,7 @@ export default class Cherry extends CherryStatic {
     const headerList = [];
     const headerRegex = /<h([1-6]).*?id="([^"]+?)".*?>(.+?)<\/h[0-6]>/g;
     str.replace(headerRegex, (match, level, id, text) => {
-      headerList.push({ level: +level, id, text });
+      headerList.push({ level: +level, id, text: text.replace(/<a .+?<\/a>/, '') });
       return match;
     });
     return headerList;

src/core/hooks/Suggester.js

@@ -101,7 +101,6 @@ export default class Suggester extends SyntaxBase {
     this.suggester = {};
     const defaultSuggest = [];
     // 默认的唤醒关键字
-    debugger;
     for (const suggesterKeyword of suggesterKeywords) {
       defaultSuggest.push({
         keyword: suggesterKeyword,

src/sass/ch-icon.scss

@@ -105,4 +105,6 @@
 .ch-icon-justify:before { content: "\EA6C" }
 .ch-icon-justifyCenter:before { content: "\EA6D" }
 .ch-icon-justifyLeft:before { content: "\EA6E" }
-.ch-icon-justifyRight:before { content: "\EA6F" }
+.ch-icon-justifyRight:before { content: "\EA6F" }
+.ch-icon-chevronsLeft:before { content: "\EA70" }
+.ch-icon-chevronsRight:before { content: "\EA71" }

src/sass/cherry.scss

@@ -772,6 +772,130 @@
   cursor: pointer;
 }
 
+.cherry-flex-toc {
+  z-index: 11;
+  position: absolute;
+  width: 160px;
+  height: calc(100% - 220px);
+  max-height: 600px;
+  right: 0;
+  top: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: #FFFFFF33;
+  margin-right: 8px;
+  box-sizing: border-box;
+  user-select: none;
+  box-shadow: 0px 5px 11px #33333333;
+  border-radius: 10px;
+  transition: all 0.3s;
+  &:hover {
+    background-color: #FFF;
+    width: 260px;
+  }
+  .cherry-toc-head {
+    border-bottom: 1px dashed #33333333;
+    padding: 5px;
+    .cherry-toc-title{
+      font-size: 16px;
+      font-weight: bold;
+      padding-left: 5px;
+    }
+    .ch-icon-chevronsLeft {
+      display: none;
+    }
+    .ch-icon-chevronsRight, .ch-icon-chevronsLeft {
+      padding: 5px;
+      position: absolute;
+      right: 0;
+      top:0;
+    }
+    i {
+      cursor: pointer;
+      padding: 5px 5px 0;
+      &:hover {
+        color: #3582fb;
+      }
+    }
+  }
+  .cherry-toc-list {
+    overflow-y: auto;
+    height: calc(100% - 40px);
+    overflow-x: hidden;
+    width: 100%;
+    padding-bottom: 10px;
+    .cherry-toc-one-a {
+      display: block;
+      text-decoration: none;
+      color: #000;
+      border-left: 5px solid #33333333;
+      height: 28px;
+      line-height: 28px;
+      transition: all 0.3s;
+      padding-left: 10px;
+      overflow: hidden;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      &.current {
+        border-left-color: #3582fb;
+        color: #3582fb;
+      }
+      &:hover {
+        border-left-color: #3582fbaa;
+        color: #3582fbaa;
+      }
+    }
+    .cherry-toc-one-a__1 {
+      font-weight: bold;
+    }
+    .cherry-toc-one-a__2 {
+      padding-left: 20px;
+    }
+    .cherry-toc-one-a__3 {
+      padding-left: 40px;
+    }
+    .cherry-toc-one-a__4 {
+      padding-left: 60px;
+    }
+    .cherry-toc-one-a__5 {
+      padding-left: 80px;
+    }
+  }
+  &.cherry-flex-toc__pure {
+    width: 30px;
+    height: calc(100% - 200px);
+    max-height: 600px;
+    background: #FFFFFF00;
+    box-shadow: none;
+    border-radius: 0;
+    .cherry-toc-head {
+      height: 25px;
+      border-bottom: 1px dashed #33333300;
+      .cherry-toc-title {
+        display: none;
+      }
+      .ch-icon-chevronsRight {
+        display: none;
+      }
+      .ch-icon-chevronsLeft {
+        display: inline;
+      }
+    }
+    .cherry-toc-list {
+      padding-left: 7px;
+      .cherry-toc-one-a {
+        overflow: hidden;
+        width: 0;
+        margin-bottom: 3px;
+        height: 5px;
+        border-left-width: 18px;
+      }
+    }
+  }
+}
+
 /** 引入自带的主题 */
 @import './themes/default.scss';
 @import './themes/dark.scss';