:art: #214

CHANGELOG.md

@@ -44,6 +44,7 @@
 
 ### v2.2.19 / 未发布
 
+* [214](https://github.com/Vanessa219/vditor/issues/214) wysiwyg heading id `引入特性`
 * [206](https://github.com/Vanessa219/vditor/issues/206) combined blockquote and lists (windows firefox) `修复缺陷`
 * [151](https://github.com/Vanessa219/vditor/issues/151) 支持隐藏编辑器工具栏 `引入特性`
 * [121](https://github.com/Vanessa219/vditor/issues/121) 所见即所得模式支持 [ToC] `引入特性`

src/ts/i18n/index.ts

@@ -132,7 +132,7 @@ export const i18n: II18n = {
         "edit": "编辑",
         "emoji": "表情",
         "fileTypeError": "文件类型不允许上传",
-        "footnoteRef": "脚注标示",
+        "footnoteRef": "脚注标识",
         "format": "格式化",
         "fullscreen": "全屏",
         "headings": "标题",

src/ts/wysiwyg/highlightToolbar.ts

@@ -444,7 +444,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                     event.preventDefault();
                     return;
                 }
-                if (event.altKey && event.key === "Enter") {
+                if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
                     range.selectNodeContents(linkRefElement);
                     range.collapse(false);
                     setSelectionFocus(range);
@@ -496,12 +496,13 @@ export const highlightToolbar = (vditor: IVditor) => {
             vditor.wysiwyg.popover.innerHTML = "";
 
             const inputWrap = document.createElement("span");
-            inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].footnoteRef);
+            inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].footnoteRef +
+                "<" + updateHotkeyTip("⌥-Enter") + ">");
             inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
             const input = document.createElement("input");
             inputWrap.appendChild(input);
             input.className = "vditor-input";
-            input.setAttribute("placeholder", i18n[vditor.options.lang].footnoteRef);
+            input.setAttribute("placeholder", i18n[vditor.options.lang].footnoteRef + "<" + updateHotkeyTip("⌥-Enter") + ">");
             input.style.width = "120px";
             input.value = footnotesRefElement.getAttribute("data-footnotes-label");
             input.oninput = () => {
@@ -513,7 +514,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                 if (event.isComposing) {
                     return;
                 }
-                if (event.altKey && event.key === "Enter") {
+                if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
                     range.selectNodeContents(footnotesRefElement);
                     range.collapse(false);
                     setSelectionFocus(range);
@@ -628,7 +629,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                         codeElement.className = `language-${language.value}`;
                     };
                     language.className = "vditor-input";
-                    language.setAttribute("placeholder", i18n[vditor.options.lang].language);
+                    language.setAttribute("placeholder", i18n[vditor.options.lang].language + "<" + updateHotkeyTip("⌥-Enter") + ">");
                     language.value = codeElement.className.indexOf("language-") > -1 ?
                         codeElement.className.split("-")[1].split(" ")[0] : "";
                     language.oninput = () => {
@@ -656,8 +657,48 @@ export const highlightToolbar = (vditor: IVditor) => {
             });
         }
 
+        let headingElement = hasClosestByTag(typeElement, "H") as HTMLElement;
+        if (headingElement && headingElement.tagName.length === 2) {
+            vditor.wysiwyg.popover.innerHTML = "";
+
+            const inputWrap = document.createElement("span");
+            inputWrap.setAttribute("aria-label", "ID" + "<" + updateHotkeyTip("⌥-Enter") + ">");
+            inputWrap.className = "vditor-tooltipped vditor-tooltipped__n";
+            const input = document.createElement("input");
+            inputWrap.appendChild(input);
+            input.className = "vditor-input";
+            input.setAttribute("placeholder", "ID" + "<" + updateHotkeyTip("⌥-Enter") + ">");
+            input.style.width = "120px";
+            input.value = headingElement.getAttribute("id");
+            input.oninput = () => {
+                if (input.value.trim() !== "") {
+                    headingElement.id = input.value;
+                } else {
+                    headingElement.removeAttribute("id");
+                }
+            };
+            input.onkeydown = (event) => {
+                if (event.isComposing) {
+                    return;
+                }
+                if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
+                    range.selectNodeContents(headingElement);
+                    range.collapse(false);
+                    setSelectionFocus(range);
+                    event.preventDefault();
+                }
+            };
+
+            const close = genClose(vditor.wysiwyg.popover, headingElement, vditor);
+            vditor.wysiwyg.popover.insertAdjacentElement("beforeend", close);
+            vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
+            setPopoverPosition(vditor, headingElement);
+        } else {
+            headingElement = undefined;
+        }
+
         if (!blockquoteElement && !imgElement && !topListElement && !tableElement && !blockRenderElement && !aElement
-            && !linkRefElement && !footnotesRefElement) {
+            && !linkRefElement && !footnotesRefElement && !headingElement) {
             vditor.wysiwyg.popover.style.display = "none";
         }
 
@@ -756,7 +797,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
             event.preventDefault();
             return;
         }
-        if (event.altKey && event.key === "Enter") {
+        if (!isCtrl(event) && !event.shiftKey && event.altKey && event.key === "Enter") {
             const range = vditor.wysiwyg.element.ownerDocument.createRange();
             // firefox 不会打断 link https://github.com/Vanessa219/vditor/issues/193
             aElement.insertAdjacentHTML("afterend", Constants.ZWSP);

src/ts/wysiwyg/processKeydown.ts

@@ -437,7 +437,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
 
     // h1-h6
     const headingElement = hasClosestByTag(startContainer, "H");
-    if (headingElement) {
+    if (headingElement && headingElement.tagName.length === 2) {
         if (headingElement.tagName === "H6" && startContainer.textContent.length === range.startOffset &&
             !isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter") {
             // enter: H6 回车解析问题 https://github.com/Vanessa219/vditor/issues/48
@@ -659,10 +659,10 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     // alt+enter
     if (event.altKey && event.key === "Enter" && !isCtrl(event) && !event.shiftKey) {
         // 切换到链接、链接引用、脚注引用弹出的输入框中
-        const aElement = hasClosestByTag(startContainer, "A");
+        const aElement = hasClosestByMatchTag(startContainer, "A");
         const linRefElement = hasClosestByAttribute(startContainer, "data-type", "link-ref");
         const footnoteRefElement = hasClosestByAttribute(startContainer, "data-type", "footnotes-ref");
-        if (aElement || linRefElement || footnoteRefElement) {
+        if (aElement || linRefElement || footnoteRefElement || (headingElement && headingElement.tagName.length === 2)) {
             const inputElement = vditor.wysiwyg.popover.querySelector("input");
             inputElement.focus();
             inputElement.select();