:bug: fix #406

CHANGELOG.md

@@ -66,6 +66,7 @@
 
 ### v3.2.6 / 2020-05-xx
 
+* [406](https://github.com/Vanessa219/vditor/issues/406) 相同标题内容 ID 生成问题 `修复缺陷`
 * [412](https://github.com/Vanessa219/vditor/issues/412) 预览界面大纲无法定位 `修复缺陷`
 * [411](https://github.com/Vanessa219/vditor/issues/411) 复制到微信公众号后代码块背景丢失 `修复缺陷`
 * [410](https://github.com/Vanessa219/vditor/issues/410) not delete inline code(firfox) `修复缺陷`

src/ts/markdown/outlineRender.ts

@@ -2,7 +2,7 @@ import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 
 export const outlineRender = (contentElement: HTMLElement, targetElement: Element, vditor?: IVditor) => {
     let tocHTML = "";
-    Array.from(contentElement.children).forEach((item: HTMLElement) => {
+    Array.from(contentElement.children).forEach((item: HTMLElement, index) => {
         if (hasClosestByHeadings(item)) {
             const headingNo = parseInt(item.tagName.substring(1), 10);
             const space = new Array((headingNo - 1) * 2).fill(" ").join("");
@@ -12,6 +12,9 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
             } else {
                 text = item.textContent.trim();
             }
+            const lastIndex = item.id.lastIndexOf("_");
+            const lastId = item.id.substring(0, lastIndex === -1 ? undefined : lastIndex);
+            item.id = lastId + "_" + index;
             tocHTML += `<div data-id="${item.id}" class="vditor-outline__item">${space}${text}</div>`;
         }
     });
@@ -30,7 +33,7 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
                     if (vditor.element.offsetTop < window.scrollY) {
                         window.scrollTo(window.scrollX, vditor.element.offsetTop);
                     }
-                    if (vditor.element.querySelector('.vditor-preview').contains(contentElement)) {
+                    if (vditor.element.querySelector(".vditor-preview").contains(contentElement)) {
                         contentElement.parentElement.scrollTop = document.getElementById(id).offsetTop;
                     } else {
                         contentElement.scrollTop = document.getElementById(id).offsetTop;

src/ts/toolbar/Preview.ts

@@ -1,8 +1,9 @@
 import {Constants} from "../constants";
+import {setPadding} from "../ui/initUI";
 import {getEventName} from "../util/compatibility";
+import {renderOutline} from "../util/fixBrowserBehavior";
 import {MenuItem} from "./MenuItem";
 import {disableToolbar, enableToolbar, hidePanel} from "./setToolbar";
-import {renderOutline} from "../util/fixBrowserBehavior";
 
 export class Preview extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
@@ -47,8 +48,9 @@ export class Preview extends MenuItem {
                 hidePanel(vditor, ["subToolbar", "hint", "popover"]);
                 setTimeout(() => {
                     renderOutline(vditor);
-                }, vditor.options.preview.delay);
+                }, vditor.options.preview.delay + 10);
             }
+            setPadding(vditor);
         });
     }
 }

src/ts/ui/initUI.ts

@@ -136,8 +136,10 @@ export const setPadding = (vditor: IVditor) => {
         outlineWidth = outlienElement.offsetWidth;
     }
 
-    vditor.toolbar.element.style.paddingLeft =
-        Math.max(5, parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) + outlineWidth) + "px";
+    if ((vditor.element.querySelector(".vditor-preview") as HTMLElement)?.style.display !== "block") {
+        vditor.toolbar.element.style.paddingLeft = Math.max(5,
+            parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) + outlineWidth) + "px";
+    }
 };
 
 export const setTypewriterPosition = (vditor: IVditor) => {

src/ts/util/fixBrowserBehavior.ts

@@ -387,7 +387,7 @@ export const isToC = (text: string) => {
 export const renderOutline = (vditor: IVditor) => {
     const outlineElement = vditor.element.querySelector(".vditor-outline") as HTMLElement;
     if (outlineElement && outlineElement.style.display === "block") {
-        const previewElement: HTMLElement = vditor.element.querySelector('.vditor-preview')
+        const previewElement: HTMLElement = vditor.element.querySelector(".vditor-preview");
         if (previewElement && previewElement.style.display === "block") {
             outlineRender(previewElement.lastElementChild as HTMLElement,
                 outlineElement.querySelector(".vditor-outline__content"), vditor);