Skip to content

Commit

Permalink
🎨 fix #684
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Aug 7, 2020
1 parent bc183e1 commit 1504464
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 61 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `修复缺陷`
Expand Down
2 changes: 1 addition & 1 deletion demo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/ts/i18n/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -136,6 +137,7 @@ export const i18n: II18n = {
"strike": "取り消し線",
"table": "表 挿入",
"textIsNotEmpty": "テキスト(no empty)",
"title": "題名",
"tooltipText": "ツールチップ",
"undo": "取り消す",
"up": "戻る",
Expand Down Expand Up @@ -209,6 +211,7 @@ export const i18n: II18n = {
"strike": "취소선",
"table": "표삽입",
"textIsNotEmpty": "텍스트(no empty)",
"title": "표제",
"tooltipText": "툴팁",
"undo": "취소하기",
"up": "위로",
Expand Down Expand Up @@ -282,6 +285,7 @@ export const i18n: II18n = {
"strike": "删除线",
"table": "表格",
"textIsNotEmpty": "文本（不能为空）",
"title": "标题",
"tooltipText": "提示文本",
"undo": "撤销",
"up": "上",
Expand Down
118 changes: 63 additions & 55 deletions src/ts/wysiwyg/highlightToolbarWYSIWYG.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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")) {
Expand Down Expand Up @@ -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();
Expand Down
12 changes: 8 additions & 4 deletions src/ts/wysiwyg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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");
Expand Down Expand Up @@ -151,7 +151,7 @@ class WYSIWYG {
});

// 中文处理
this.element.addEventListener("compositionstart", (event: InputEvent) => {
this.element.addEventListener("compositionstart", () => {
this.composingLock = true;
});

Expand Down Expand Up @@ -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;
}

Expand Down

0 comments on commit 1504464

Please sign in to comment.