From f4e976f3e1a890bfefffc3443d27470db23978a2 Mon Sep 17 00:00:00 2001 From: Van Date: Tue, 10 Mar 2020 16:37:33 +0800 Subject: [PATCH] :art: #214 --- CHANGELOG.md | 1 + src/ts/i18n/index.ts | 2 +- src/ts/wysiwyg/highlightToolbar.ts | 55 ++++++++++++++++++++++++++---- src/ts/wysiwyg/processKeydown.ts | 6 ++-- 4 files changed, 53 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15d0e1cc6..fbf9b2881 100644 --- a/CHANGELOG.md +++ b/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] `引入特性` diff --git a/src/ts/i18n/index.ts b/src/ts/i18n/index.ts index 6123d3c7b..ea53820dd 100644 --- a/src/ts/i18n/index.ts +++ b/src/ts/i18n/index.ts @@ -132,7 +132,7 @@ export const i18n: II18n = { "edit": "编辑", "emoji": "表情", "fileTypeError": "文件类型不允许上传", - "footnoteRef": "脚注标示", + "footnoteRef": "脚注标识", "format": "格式化", "fullscreen": "全屏", "headings": "标题", diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts index 184b7e15a..7a4232dc0 100644 --- a/src/ts/wysiwyg/highlightToolbar.ts +++ b/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); diff --git a/src/ts/wysiwyg/processKeydown.ts b/src/ts/wysiwyg/processKeydown.ts index 6ab058e3b..8c8827e7b 100644 --- a/src/ts/wysiwyg/processKeydown.ts +++ b/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();