:art: fix #392

CHANGELOG.md

@@ -67,6 +67,7 @@
 
 ### v3.2.4 / 2020-05-xx
 
+* [392](https://github.com/Vanessa219/vditor/issues/392) anchor option `改进功能`
 * [389](https://github.com/Vanessa219/vditor/issues/389) marker option at preview `改进功能`
 * [388](https://github.com/Vanessa219/vditor/pull/388) changed some korean i18n and demo text `文档相关`
 
@@ -94,6 +95,7 @@
   * 为 `options.upload` 添加 `extraData`
   * 添加静态方法 `mindmapRender`
   * 为 `IMarkdownConfig` 添加 `sanitize`, `listMarker` 配置
+  * IPreviewOptions.anchor 从 boolean 修改为 number
 
 ### v3.1.23 / 2020-05-05
 

demo/index.js

@@ -3,47 +3,47 @@ import '../src/assets/scss/index.scss'
 
 let toolbar
 if (window.innerWidth < 768) {
-  toolbar =  [
-    "emoji",
-    "headings",
-    "bold",
-    "italic",
-    "strike",
-    "link",
-    "|",
-    "list",
-    "ordered-list",
-    "check",
-    "outdent",
-    "indent",
-    "|",
-    "quote",
-    "line",
-    "code",
-    "inline-code",
-    "insert-before",
-    "insert-after",
-    "|",
-    "upload",
-    "record",
-    "table",
-    "|",
-    "undo",
-    "redo",
-    "|",
-    "edit-mode",
-    "content-theme",
-    "code-theme",
-    "export",
+  toolbar = [
+    'emoji',
+    'headings',
+    'bold',
+    'italic',
+    'strike',
+    'link',
+    '|',
+    'list',
+    'ordered-list',
+    'check',
+    'outdent',
+    'indent',
+    '|',
+    'quote',
+    'line',
+    'code',
+    'inline-code',
+    'insert-before',
+    'insert-after',
+    '|',
+    'upload',
+    'record',
+    'table',
+    '|',
+    'undo',
+    'redo',
+    '|',
+    'edit-mode',
+    'content-theme',
+    'code-theme',
+    'export',
     {
-      name: "more",
+      name: 'more',
       toolbar: [
-        "fullscreen",
-        "both",
-        "format",
-        "preview",
-        "info",
-        "help",
+        'fullscreen',
+        'both',
+        'format',
+        'preview',
+        'info',
+        'help',
       ],
     }]
 }

demo/static-preview.html

@@ -34,8 +34,8 @@
     <meta name="twitter:url" content="https://hacpai.com/tag/vditor"/>
     <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/index.css"/>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/method.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].4/dist/index.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/method.min.js"></script>
     <style>
         a {
             color: #4285f4;
@@ -737,7 +737,7 @@ https://www.youtube.com/watch?v=S4xoOW4DVKE
 [^bignote]: 각주 정의는 여러 단락을 사용할 수 있습니다.
 
     들여 쓰기 및 정렬된 단락이 이 각주 정의에 포함됩니다.
-    
+
     ```
     코드 블록을 사용할 수 있습니다.
     ```
@@ -750,7 +750,7 @@ https://www.youtube.com/watch?v=S4xoOW4DVKE
 [^bignote]: 각주 정의는 여러 단락을 사용할 수 있습니다.
 
     들여 쓰기 및 정렬된 단락이 이 각주 정의에 포함됩니다.
-    
+
     ```
     코드 블록을 사용할 수 있습니다.
     ```
@@ -779,7 +779,7 @@ https://www.youtube.com/watch?v=S4xoOW4DVKE
       speech: {
         enable: true,
       },
-      anchor: true,
+      anchor: 1,
       after () {
         Vditor.outlineRender(document.getElementById('preview'), document.getElementById('outline'))
       },

src/assets/scss/_reset.scss

@@ -359,9 +359,13 @@
   }
 
   &-anchor {
-    float: left;
-    padding-right: 4px;
-    margin-left: -20px;
+    margin-right: 5px;
+
+    &--left {
+      float: left;
+      padding-right: 4px;
+      margin-left: -20px;
+    }
 
     svg {
       visibility: hidden;

src/ts/markdown/anchorRender.ts

@@ -1,5 +1,8 @@
-export const anchorRender = () => {
+export const anchorRender = (type: number) => {
     document.querySelectorAll(".vditor-anchor").forEach((anchor: HTMLLinkElement) => {
+        if (type === 1) {
+            anchor.classList.add("vditor-anchor--left");
+        }
         anchor.onclick = () => {
             const id = anchor.getAttribute("href").substr(1);
             const top = document.getElementById("vditorAnchor-" + id).offsetTop;

src/ts/markdown/previewRender.ts

@@ -17,7 +17,7 @@ import {speechRender} from "./speechRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption = {
-        anchor: false,
+        anchor: 0,
         cdn: `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`,
         customEmoji: {},
         emojiPath: `${(options && options.emojiPath) ||
@@ -76,7 +76,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             emojis: mergedOptions.customEmoji,
             fixTermTypo: mergedOptions.markdown.fixTermTypo,
             footnotes: mergedOptions.markdown.footnotes,
-            headingAnchor: mergedOptions.anchor,
+            headingAnchor: mergedOptions.anchor !== 0,
             inlineMathDigit: mergedOptions.math.inlineDigit,
             lazyLoadImage: mergedOptions.lazyLoadImage,
             listMarker: mergedOptions.markdown.listMarker,
@@ -105,7 +105,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.innerHTML = html;
     previewElement.classList.add("vditor-reset");
     setContentTheme(mergedOptions.markdown.theme, mergedOptions.cdn);
-    if (mergedOptions.anchor) {
+    if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
     }
     codeRender(previewElement, mergedOptions.lang);
@@ -123,8 +123,8 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.speech.enable) {
         speechRender(previewElement, mergedOptions.lang);
     }
-    if (mergedOptions.anchor) {
-        anchorRender();
+    if (mergedOptions.anchor !== 0) {
+        anchorRender(mergedOptions.anchor);
     }
     if (mergedOptions.after) {
         mergedOptions.after();

types/index.d.ts

@@ -366,7 +366,7 @@ interface IPreviewOptions {
     speech?: {
         enable?: boolean,
     };
-    anchor?: boolean;
+    anchor?: number; // 0: no render, 1: render left, 2: render right
     math?: IMath;
     cdn?: string;
     markdown?: IMarkdownConfig;