Merge pull request #2 from Vanessa219/master

Merge the last
Vanessa219 · Jun 18, 2020 · c073833 · c073833
2 parents c0d8f3a + 70e520e
commit c073833
Show file tree

Hide file tree

Showing 27 changed files with 158 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -66,8 +66,23 @@
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 * [346](https://github.com/Vanessa219/vditor/issues/346) 内容主题推荐（长期有效） `改进功能`
 
-### v3.3.0 / 2020-06-xx
-
+### v3.3.2 / 2020-06-xx
+
+### v3.3.1 / 2020-06-18
+
+* [478](https://github.com/Vanessa219/vditor/issues/478) add tip to footnote `改进功能`
+* [492](https://github.com/Vanessa219/vditor/issues/492) 列表内含有代码块，修改列表中的文字时，代码块会闪 `修复缺陷`
+* [496](https://github.com/Vanessa219/vditor/issues/496) 行级 HTML 空格问题 `修复缺陷`
+* [495](https://github.com/Vanessa219/vditor/issues/495) 行级 HTML 退格问题 `修复缺陷`
+* [494](https://github.com/Vanessa219/vditor/issues/494) 三种模式支持 list-style 样式 `改进功能`
+* [489](https://github.com/Vanessa219/vditor/issues/489) 为 vditor.b3log.org/demo 添加源码 `改进功能`
+* [493](https://github.com/Vanessa219/vditor/issues/493) 修复 XSS 过滤 `修复缺陷`
+* [486](https://github.com/Vanessa219/vditor/pull/486) getCursorPosition 针对空行会得到错误数据 `修复缺陷`
+* [485](https://github.com/Vanessa219/vditor/issues/485) IR 模式下，<details>的编辑问题 `修复缺陷`
+* [484](https://github.com/Vanessa219/vditor/issues/484) 添加 TED 视频支持 `改进功能`
+* [480](https://github.com/Vanessa219/vditor/issues/480) Mindmap 和 Echarts 内容为空时会报错 `修复缺陷`
+* 文档修改
+  * `options.markdown.listMarker` 修改为 `options.markdown.listStyle`
 
 ### v3.2.12 / 2020-06-07
 

diff --git a/README.md b/README.md
@@ -252,7 +252,7 @@ Can be filled with element `id` or element itself` HTMLElement`
 | setext | Whether to parse the setext header | fa;se |
 | paragraphBeginningSpace | Two spaces before the paragraph | false |
 | sanitize | Use XSS | true |
-| listMarker | add data-marker attribute | false |
+| listStyle | add data-style attribute | false |
 | linkBase | link prefix | '' |
 
 #### options.preview.math

diff --git a/demo/render.html b/demo/render.html
@@ -92,51 +92,51 @@
             background-color: var(--hover-background-color) !important;
         }
 
-        .vditor-reset ul[data-marker="*"] {
+        .vditor-reset ul[data-style="*"] {
             list-style-type: disc
         }
 
-        .vditor-reset ul[data-marker="*"] ul {
+        .vditor-reset ul[data-style="*"] ul {
             list-style-type: circle
         }
 
-        .vditor-reset ul[data-marker="*"] ul ul {
+        .vditor-reset ul[data-style="*"] ul ul {
             list-style-type: square
         }
 
-        .vditor-reset ul[data-marker="+"] {
+        .vditor-reset ul[data-style="+"] {
             list-style-type: "\2764";
         }
 
-        .vditor-reset ul[data-marker="+"] ul {
+        .vditor-reset ul[data-style="+"] ul {
             list-style-type: "\1f49a"
         }
 
-        .vditor-reset ul[data-marker="+"] ul ul {
+        .vditor-reset ul[data-style="+"] ul ul {
             list-style-type: "\1f49b"
         }
 
-        .vditor-reset ul[data-marker="-"] {
+        .vditor-reset ul[data-style="-"] {
             list-style-type: korean-hangul-formal
         }
 
-        .vditor-reset ul[data-marker="-"] ul {
+        .vditor-reset ul[data-style="-"] ul {
             list-style-type: decimal-leading-zero
         }
 
-        .vditor-reset ul[data-marker="-"] ul ul {
+        .vditor-reset ul[data-style="-"] ul ul {
             list-style-type: lower-alpha
         }
 
-        .vditor-reset ol[data-marker="1)"] {
+        .vditor-reset ol[data-style="1)"] {
             list-style-type: simp-chinese-formal
         }
 
-        .vditor-reset ol[data-marker="1)"] ol {
+        .vditor-reset ol[data-style="1)"] ol {
             list-style-type: simp-chinese-informal
         }
 
-        .vditor-reset ol[data-marker="1)"] ol ol {
+        .vditor-reset ol[data-style="1)"] ol ol {
             list-style-type: trad-chinese-formal
         }
 

diff --git a/demo/render.js b/demo/render.js
@@ -16,7 +16,7 @@ const render = (fileName) => {
         markdown, {
           markdown: {
             toc: true,
-            listMarker: fileName === 'cute-list',
+            listStyle: fileName === 'cute-list',
           },
           speech: {
             enable: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "3.2.12",
+  "version": "3.3.1",
   "description": "♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes.",
   "author": "Vanessa <[email protected]> (http://vanessa.b3log.org)",
   "homepage": "https://hacpai.com/tag/vditor",

diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -5,10 +5,6 @@
   position: relative;
   width: 100%;
 
-  &__block[data-type="html-block"] pre {
-    margin: 1em 0 !important;
-  }
-
   &__node {
     &[data-type="code-block"]:before,
     &[data-type="code-block"]:after,
@@ -27,6 +23,10 @@
       color: $blurColor;
     }
 
+    &[data-type="html-block"] {
+      margin-bottom: 1em;
+    }
+
     .vditor-ir__marker {
       width: 0;
       overflow: hidden;

diff --git a/src/assets/scss/_toolbar.scss b/src/assets/scss/_toolbar.scss
@@ -35,6 +35,7 @@
         height: 35px;
         width: 25px;
         box-sizing: border-box;
+        font-size: 0;
 
         &:focus {
           outline: none;

diff --git a/src/index.ts b/src/index.ts
@@ -51,10 +51,14 @@ class Vditor extends VditorMethod {
         this.version = VDITOR_VERSION;
 
         if (typeof id === "string") {
-            if (!options.cache) {
-                options.cache = {
-                    id: `vditor${id}`,
+            if (!options) {
+                options = {
+                    cache: {
+                        id: `vditor${id}`,
+                    },
                 };
+            } else if (!options.cache) {
+                options.cache = {id: `vditor${id}`};
             } else if (!options.cache.id) {
                 options.cache.id = `vditor${id}`;
             }
@@ -114,7 +118,7 @@ class Vditor extends VditorMethod {
                 headingAnchor: false,
                 inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
                 linkBase: this.vditor.options.preview.markdown.linkBase,
-                listMarker: this.vditor.options.preview.markdown.listMarker,
+                listStyle: this.vditor.options.preview.markdown.listStyle,
                 paragraphBeginningSpace: this.vditor.options.preview.markdown.paragraphBeginningSpace,
                 sanitize: this.vditor.options.preview.markdown.sanitize,
                 setext: this.vditor.options.preview.markdown.setext,

diff --git a/src/js/lute/lute.min.js b/src/js/lute/lute.min.js
diff --git a/src/ts/hint/index.ts b/src/ts/hint/index.ts
@@ -3,6 +3,7 @@ import {processAfterRender} from "../ir/process";
 import {getMarkdown} from "../markdown/getMarkdown";
 import {formatRender} from "../sv/formatRender";
 import {code160to32} from "../util/code160to32";
+import {isCtrl} from "../util/compatibility";
 import {execAfterRender} from "../util/fixBrowserBehavior";
 import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
 import {processCodeRender} from "../util/processCode";
@@ -228,7 +229,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
                 currentHintElement.previousElementSibling.className = "vditor-hint--current";
             }
             return true;
-        } else if (event.key === "Enter") {
+        } else if (!isCtrl(event) && event.shiftKey && event.key === "Enter") {
             event.preventDefault();
             event.stopPropagation();
             this.fillEmoji(currentHintElement, vditor);

diff --git a/src/ts/ir/expandMarker.ts b/src/ts/ir/expandMarker.ts
@@ -32,6 +32,17 @@ const nextIsNode = (range: Range) => {
     return false;
 };
 
+const previousIsNode = (range: Range) => {
+    const startContainer = range.startContainer;
+    const previousNode = startContainer.previousSibling as HTMLElement;
+    if (startContainer.nodeType === 3 && range.startOffset === 0 && previousNode && previousNode.nodeType !== 3 &&
+        // *em*|text
+        previousNode.classList.contains("vditor-ir__node") && !previousNode.getAttribute("data-block")) {
+        return previousNode;
+    }
+    return false;
+};
+
 export const expandMarker = (range: Range, vditor: IVditor) => {
     vditor.ir.element.querySelectorAll(".vditor-ir__node--expand").forEach((item) => {
         item.classList.remove("vditor-ir__node--expand");
@@ -49,4 +60,11 @@ export const expandMarker = (range: Range, vditor: IVditor) => {
         nextNode.classList.remove("vditor-ir__node--hidden");
         return;
     }
+
+    const previousNode = previousIsNode(range);
+    if (previousNode) {
+        previousNode.classList.add("vditor-ir__node--expand");
+        previousNode.classList.remove("vditor-ir__node--hidden");
+        return;
+    }
 };
diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -125,9 +125,6 @@ class IR {
                 }
             }
 
-            expandMarker(range, vditor);
-            highlightToolbar(vditor);
-
             // 点击后光标落于预览区
             let previewElement = hasClosestByClassName(event.target, "vditor-ir__preview");
             if (!previewElement) {
@@ -145,6 +142,9 @@ class IR {
                 setSelectionFocus(range);
                 scrollCenter(vditor);
             }
+
+            expandMarker(range, vditor);
+            highlightToolbar(vditor);
         });
 
         this.element.addEventListener("keyup", (event) => {

diff --git a/src/ts/ir/input.ts b/src/ts/ir/input.ts
@@ -100,6 +100,7 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false) => {
     }
 
     const isIRElement = blockElement.isEqualNode(vditor.ir.element);
+    const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
     let html = "";
     if (!isIRElement) {
         // 列表需要到最顶层
@@ -115,7 +116,6 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false) => {
         }
 
         // 修改脚注
-        const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
         if (footnoteElement) {
             blockElement = footnoteElement;
         }
@@ -176,6 +176,20 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false) => {
         if (allFootnoteElement) {
             vditor.ir.element.insertAdjacentElement("beforeend", allFootnoteElement);
         }
+
+        // 更新正文中的 tip
+        if (footnoteElement) {
+            const footnoteItemElement = hasClosestByAttribute(vditor.ir.element.querySelector("wbr"),
+                "data-type", "footnotes-def");
+            if (footnoteItemElement) {
+                const footnoteItemText = footnoteItemElement.textContent;
+                const marker = footnoteItemText.substring(1, footnoteItemText.indexOf("]:"));
+                const footnoteRefElement = vditor.ir.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${marker}"]`);
+                if (footnoteRefElement) {
+                    footnoteRefElement.setAttribute("aria-label", footnoteItemText.substr(marker.length + 3).trim());
+                }
+            }
+        }
     }
     setRangeByWbr(vditor.ir.element, range);
 

diff --git a/src/ts/markdown/chartRender.ts b/src/ts/markdown/chartRender.ts
@@ -11,11 +11,15 @@ export const chartRender = (element: (HTMLElement | Document) = document,
     if (echartsElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             echartsElements.forEach((e: HTMLDivElement) => {
+                const text = e.innerText.trim();
+                if (!text) {
+                    return;
+                }
                 try {
                     if (e.getAttribute("data-processed") === "true") {
                         return;
                     }
-                    const option = JSON.parse(e.innerText.trim());
+                    const option = JSON.parse(text);
                     echarts.init(e).setOption(option);
                     e.setAttribute("data-processed", "true");
                 } catch (error) {

diff --git a/src/ts/markdown/highlightRender.ts b/src/ts/markdown/highlightRender.ts
@@ -19,7 +19,7 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
     }
     addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
 
-    if (!hljsOption.enable) {
+    if (hljsOption.enable === false) {
         return;
     }
 

diff --git a/src/ts/markdown/mediaRender.ts b/src/ts/markdown/mediaRender.ts
@@ -16,6 +16,7 @@ const iframeRender = (element: HTMLElement, url: string) => {
     const facebookMatch = url.match(/(?:www\.|\/\/)facebook\.com\/([^\/]+)\/videos\/([0-9]+)/);
     const dailymotionMatch = url.match(/.+dailymotion.com\/(video|hub)\/(\w+)\?/);
     const bilibiliMatch = url.match(/(?:www\.|\/\/)bilibili\.com\/video\/(\w+)/);
+    const tedMatch = url.match(/(?:www\.|\/\/)ted\.com\/talks\/(\w+)/);
 
     if (youtubeMatch && youtubeMatch[1].length === 11) {
         element.insertAdjacentHTML("afterend",
@@ -50,6 +51,10 @@ const iframeRender = (element: HTMLElement, url: string) => {
             `<iframe class="iframe__video"
  src="//player.bilibili.com/player.html?bvid=${bilibiliMatch[1]}"></iframe>`);
         element.remove();
+    } else if (tedMatch && tedMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video" src="//embed.ted.com/talks/${tedMatch[1]}"></iframe>`);
+        element.remove();
     }
 };
 

diff --git a/src/ts/markdown/mindmapRender.ts b/src/ts/markdown/mindmapRender.ts
@@ -11,14 +11,18 @@ export const mindmapRender = (element: (HTMLElement | Document) = document,
     if (mindmapElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             mindmapElements.forEach((e: HTMLDivElement) => {
+                const text = e.getAttribute("data-code");
+                if (!text) {
+                    return;
+                }
                 try {
                     if (e.getAttribute("data-processed") === "true") {
                         return;
                     }
                     const option = {
                         series: [
                             {
-                                data: [JSON.parse(decodeURIComponent(e.getAttribute("data-code")))],
+                                data: [JSON.parse(decodeURIComponent(text))],
                                 initialTreeDepth: -1,
                                 itemStyle: {
                                     borderWidth: 0,

diff --git a/src/ts/markdown/outlineRender.ts b/src/ts/markdown/outlineRender.ts
@@ -21,10 +21,13 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
     targetElement.innerHTML = tocHTML;
     targetElement.querySelectorAll(".vditor-outline__item").forEach((item) => {
         item.addEventListener("click", (event: Event & { target: HTMLElement }) => {
-            const id = item.getAttribute("data-id");
+            const idElement = document.getElementById(item.getAttribute("data-id"));
+            if (!idElement) {
+                return;
+            }
             if (vditor) {
                 if (vditor.options.height === "auto") {
-                    let windowScrollY = document.getElementById(id).offsetTop + vditor.element.offsetTop;
+                    let windowScrollY = idElement.offsetTop + vditor.element.offsetTop;
                     if (!vditor.options.toolbarConfig.pin) {
                         windowScrollY += vditor.toolbar.element.offsetHeight;
                     }
@@ -34,13 +37,13 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
                         window.scrollTo(window.scrollX, vditor.element.offsetTop);
                     }
                     if (vditor.preview.element.contains(contentElement)) {
-                        contentElement.parentElement.scrollTop = document.getElementById(id).offsetTop;
+                        contentElement.parentElement.scrollTop = idElement.offsetTop;
                     } else {
-                        contentElement.scrollTop = document.getElementById(id).offsetTop;
+                        contentElement.scrollTop = idElement.offsetTop;
                     }
                 }
             } else {
-                window.scrollTo(window.scrollX, document.getElementById(id).offsetTop);
+                window.scrollTo(window.scrollX, idElement.offsetTop);
             }
             targetElement.querySelectorAll(".vditor-outline__item").forEach((subItem) => {
                 subItem.classList.remove("vditor-outline__item--current");
-Original file line number
+Diff line change
@@ Expand Up @@
         }
         addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
-        if (!hljsOption.enable) {
+        if (hljsOption.enable === false) {
             return;
         }
@@ Expand Down @@