From 150446478152cf798e64c5dbb10a0411757bdb25 Mon Sep 17 00:00:00 2001 From: Liyuan Li Date: Fri, 7 Aug 2020 17:18:53 +0800 Subject: [PATCH] :art: fix #684 --- CHANGELOG.md | 2 +- demo/index.js | 2 +- src/ts/i18n/index.ts | 4 + src/ts/wysiwyg/highlightToolbarWYSIWYG.ts | 118 ++++++++++++---------- src/ts/wysiwyg/index.ts | 12 ++- 5 files changed, 77 insertions(+), 61 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7431172f..ca6a75fb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -76,10 +76,10 @@ * [open issues](https://github.com/Vanessa219/vditor/issues) * [346](https://github.com/Vanessa219/vditor/issues/346) 内容主题推荐（长期有效） `改进功能` -* [684](https://github.com/Vanessa219/vditor/issues/684) 图片使用引用风格时的解析问题 `修复缺陷` ### v3.4.5 / 2020-08-xx +* [684](https://github.com/Vanessa219/vditor/issues/684) 图片使用引用风格时的解析问题 `修复缺陷` * [698](https://github.com/Vanessa219/vditor/issues/698) 图片上传解析问题 `修复缺陷` * [696](https://github.com/Vanessa219/vditor/issues/696) 图片参考式解析问题 `修复缺陷` * [694](https://github.com/Vanessa219/vditor/pull/694) Fix expandmarker for node element `修复缺陷` diff --git a/demo/index.js b/demo/index.js index 6b521d18e..274c887ca 100644 --- a/demo/index.js +++ b/demo/index.js @@ -53,7 +53,7 @@ window.vditor = new Vditor('vditor', { _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`, // _lutePath: 'src/js/lute/lute.min.js', toolbar, - mode: 'ir', + mode: 'wysiwyg', height: window.innerHeight + 100, outline: true, debugger: true, diff --git a/src/ts/i18n/index.ts b/src/ts/i18n/index.ts index 8ff69cdb6..965c17d51 100644 --- a/src/ts/i18n/index.ts +++ b/src/ts/i18n/index.ts @@ -63,6 +63,7 @@ export const i18n: II18n = { "strike": "Strike", "table": "Table", "textIsNotEmpty": "text(no empty)", + "title": "Title", "tooltipText": "Tooltip text", "undo": "Undo", "up": "Up", @@ -136,6 +137,7 @@ export const i18n: II18n = { "strike": "取り消し線", "table": "表 挿入", "textIsNotEmpty": "テキスト(no empty)", + "title": "題名", "tooltipText": "ツールチップ", "undo": "取り消す", "up": "戻る", @@ -209,6 +211,7 @@ export const i18n: II18n = { "strike": "취소선", "table": "표삽입", "textIsNotEmpty": "텍스트(no empty)", + "title": "표제", "tooltipText": "툴팁", "undo": "취소하기", "up": "위로", @@ -282,6 +285,7 @@ export const i18n: II18n = { "strike": "删除线", "table": "表格", "textIsNotEmpty": "文本（不能为空）", + "title": "标题", "tooltipText": "提示文本", "undo": "撤销", "up": "上", diff --git a/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts b/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts index 59b283128..ba288db7c 100644 --- a/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts +++ b/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts @@ -399,59 +399,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => { // link ref popover const linkRefElement = hasClosestByAttribute(typeElement, "data-type", "link-ref"); if (linkRefElement) { - vditor.wysiwyg.popover.innerHTML = ""; - - const updateLinkRef = () => { - if (input.value.trim() !== "") { - linkRefElement.textContent = input.value; - } - // data-link-label - if (input1.value.trim() !== "") { - linkRefElement.setAttribute("data-link-label", input1.value); - } - }; - - const inputWrap = document.createElement("span"); - inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].textIsNotEmpty); - 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].textIsNotEmpty); - input.style.width = "120px"; - input.value = linkRefElement.textContent; - input.oninput = () => { - updateLinkRef(); - }; - input.onkeydown = (event) => { - if (removeBlockElement(vditor, event)) { - return; - } - linkHotkey(vditor.wysiwyg.element, linkRefElement, event, input1); - }; - - const input1Wrap = document.createElement("span"); - input1Wrap.setAttribute("aria-label", i18n[vditor.options.lang].linkRef); - input1Wrap.className = "vditor-tooltipped vditor-tooltipped__n"; - const input1 = document.createElement("input"); - input1Wrap.appendChild(input1); - input1.className = "vditor-input"; - input1.setAttribute("placeholder", i18n[vditor.options.lang].linkRef); - input1.value = linkRefElement.getAttribute("data-link-label"); - input1.oninput = () => { - updateLinkRef(); - }; - input1.onkeydown = (event) => { - if (removeBlockElement(vditor, event)) { - return; - } - linkHotkey(vditor.wysiwyg.element, linkRefElement, event, input); - }; - - genClose(linkRefElement, vditor); - vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap); - vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap); - setPopoverPosition(vditor, linkRefElement); + genLinkRefPopover(vditor, linkRefElement); } // footnote popover @@ -661,6 +609,66 @@ const setPopoverPosition = (vditor: IVditor, element: HTMLElement) => { }; +export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement) => { + vditor.wysiwyg.popover.innerHTML = ""; + + const updateLinkRef = () => { + if (input.value.trim() !== "") { + if (linkRefElement.tagName === "IMG") { + linkRefElement.setAttribute("alt", input.value); + } else { + linkRefElement.textContent = input.value; + } + } + // data-link-label + if (input1.value.trim() !== "") { + linkRefElement.setAttribute("data-link-label", input1.value); + } + }; + + const inputWrap = document.createElement("span"); + inputWrap.setAttribute("aria-label", i18n[vditor.options.lang].textIsNotEmpty); + 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].textIsNotEmpty); + input.style.width = "120px"; + input.value = linkRefElement.getAttribute("alt") || linkRefElement.textContent; + input.oninput = () => { + updateLinkRef(); + }; + input.onkeydown = (event) => { + if (removeBlockElement(vditor, event)) { + return; + } + linkHotkey(vditor.wysiwyg.element, linkRefElement, event, input1); + }; + + const input1Wrap = document.createElement("span"); + input1Wrap.setAttribute("aria-label", i18n[vditor.options.lang].linkRef); + input1Wrap.className = "vditor-tooltipped vditor-tooltipped__n"; + const input1 = document.createElement("input"); + input1Wrap.appendChild(input1); + input1.className = "vditor-input"; + input1.setAttribute("placeholder", i18n[vditor.options.lang].linkRef); + input1.value = linkRefElement.getAttribute("data-link-label"); + input1.oninput = () => { + updateLinkRef(); + }; + input1.onkeydown = (event) => { + if (removeBlockElement(vditor, event)) { + return; + } + linkHotkey(vditor.wysiwyg.element, linkRefElement, event, input); + }; + + genClose(linkRefElement, vditor); + vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap); + vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap); + setPopoverPosition(vditor, linkRefElement); +}; + const genUp = (range: Range, element: HTMLElement, vditor: IVditor) => { const previousElement = element.previousElementSibling; if (!previousElement || (!element.parentElement.isEqualNode(vditor.wysiwyg.element) && element.tagName !== "LI")) { @@ -866,12 +874,12 @@ export const genImagePopover = (event: Event, vditor: IVditor) => { }; const titleWrap = document.createElement("span"); - titleWrap.setAttribute("aria-label", "Title"); + titleWrap.setAttribute("aria-label", i18n[vditor.options.lang].title); titleWrap.className = "vditor-tooltipped vditor-tooltipped__n"; const title = document.createElement("input"); titleWrap.appendChild(title); title.className = "vditor-input"; - title.setAttribute("placeholder", "Title"); + title.setAttribute("placeholder", i18n[vditor.options.lang].title); title.value = imgElement.getAttribute("title") || ""; title.oninput = () => { updateImg(); diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts index f4c9394a5..28a2225ac 100644 --- a/src/ts/wysiwyg/index.ts +++ b/src/ts/wysiwyg/index.ts @@ -22,7 +22,7 @@ import { setRangeByWbr, } from "../util/selection"; import {afterRenderEvent} from "./afterRenderEvent"; -import {genImagePopover, highlightToolbarWYSIWYG} from "./highlightToolbarWYSIWYG"; +import {genImagePopover, genLinkRefPopover, highlightToolbarWYSIWYG} from "./highlightToolbarWYSIWYG"; import {getRenderElementNextNode, modifyPre} from "./inlineTag"; import {input} from "./input"; import {showCode} from "./showCode"; @@ -33,7 +33,7 @@ class WYSIWYG { public afterRenderTimeoutId: number; public hlToolbarTimeoutId: number; public preventInput: boolean; - public composingLock: boolean = false; + public composingLock = false; constructor(vditor: IVditor) { const divElement = document.createElement("div"); @@ -151,7 +151,7 @@ class WYSIWYG { }); // 中文处理 - this.element.addEventListener("compositionstart", (event: InputEvent) => { + this.element.addEventListener("compositionstart", () => { this.composingLock = true; }); @@ -243,7 +243,11 @@ class WYSIWYG { } if (event.target.tagName === "IMG") { - genImagePopover(event, vditor); + if (event.target.getAttribute("data-type") === "link-ref") { + genLinkRefPopover(vditor, event.target); + } else { + genImagePopover(event, vditor); + } return; }