Skip to content

Commit

Permalink
🎨 Vanessa219#55
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219 @stevapple
Vanessa219 authored and stevapple committed Apr 8, 2020
1 parent 090c140 commit f91bc1e
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 121 deletions.
114 changes: 57 additions & 57 deletions src/ts/i18n/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,63 +56,6 @@ export const i18n: II18n = {
"uploading": "uploading...",
"wysiwyg": "WYSIWYG",
},
zh_CN: {
"alignCenter": "居中",
"alignLeft": "居左",
"alignRight": "居右",
"alternateText": "替代文本",
"bold": "粗体",
"both": "编辑 & 预览",
"check": "任务列表",
"code": "代码块",
"column": "列",
"confirm": "确定",
"copied": "已复制",
"copy": "复制",
"devtools": "开发者工具",
"edit": "编辑",
"emoji": "表情",
"fileTypeError": "文件类型不允许上传",
"format": "格式化",
"fullscreen": "全屏",
"headings": "标题",
"help": "帮助",
"imageURL": "图片地址",
"indent": "增加缩进",
"info": "关于",
"inline-code": "行内代码",
"insertAfter": "末尾插入行",
"insertBefore": "起始插入行",
"italic": "斜体",
"language": "语言",
"line": "分隔线",
"link": "链接",
"linkRef": "引用标识",
"list": "无序列表",
"nameEmpty": "文件名不能为空",
"ordered-list": "有序列表",
"over": "超过",
"performanceTip": "实时预览需 ${x}ms，可点击编辑 & 预览按钮进行关闭",
"preview": "预览",
"quote": "引用",
"record": "开始录音/结束录音",
"record-tip": "该设备不支持录音功能",
"recording": "录音中...",
"redo": "重做",
"remove": "删除",
"row": "行",
"strike": "删除线",
"table": "表格",
"textIsNotEmpty": "文本（不能为空）",
"tooltipText": "提示文本",
"undo": "撤销",
"unindent": "减少缩进",
"update": "更新",
"upload": "上传图片或文件",
"uploadError": "上传错误",
"uploading": "上传中...",
"wysiwyg": "所见即所得",
},
ko_KR: {
"alignCenter": "가운데",
"alignLeft": "왼쪽",
Expand Down Expand Up @@ -170,4 +113,61 @@ export const i18n: II18n = {
"uploading": "업로드중...",
"wysiwyg": "위지위그",
},
zh_CN: {
"alignCenter": "居中",
"alignLeft": "居左",
"alignRight": "居右",
"alternateText": "替代文本",
"bold": "粗体",
"both": "编辑 & 预览",
"check": "任务列表",
"code": "代码块",
"column": "列",
"confirm": "确定",
"copied": "已复制",
"copy": "复制",
"devtools": "开发者工具",
"edit": "编辑",
"emoji": "表情",
"fileTypeError": "文件类型不允许上传",
"format": "格式化",
"fullscreen": "全屏",
"headings": "标题",
"help": "帮助",
"imageURL": "图片地址",
"indent": "增加缩进",
"info": "关于",
"inline-code": "行内代码",
"insertAfter": "末尾插入行",
"insertBefore": "起始插入行",
"italic": "斜体",
"language": "语言",
"line": "分隔线",
"link": "链接",
"linkRef": "引用标识",
"list": "无序列表",
"nameEmpty": "文件名不能为空",
"ordered-list": "有序列表",
"over": "超过",
"performanceTip": "实时预览需 ${x}ms，可点击编辑 & 预览按钮进行关闭",
"preview": "预览",
"quote": "引用",
"record": "开始录音/结束录音",
"record-tip": "该设备不支持录音功能",
"recording": "录音中...",
"redo": "重做",
"remove": "删除",
"row": "行",
"strike": "删除线",
"table": "表格",
"textIsNotEmpty": "文本（不能为空）",
"tooltipText": "提示文本",
"undo": "撤销",
"unindent": "减少缩进",
"update": "更新",
"upload": "上传图片或文件",
"uploadError": "上传错误",
"uploading": "上传中...",
"wysiwyg": "所见即所得",
},
};
16 changes: 8 additions & 8 deletions src/ts/markdown/md2html.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import {VDITOR_VERSION} from "../constants";
import {addScript} from "../util/addScript";

export const loadLuteJs = (vditor: IVditor | string) => {
let cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
if (typeof vditor === "string" && vditor) {
cdn = vditor;
} else if (typeof vditor === "object" && vditor.options.cdn) {
cdn = vditor.options.cdn;
}
addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
// let cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
// if (typeof vditor === "string" && vditor) {
// cdn = vditor;
// } else if (typeof vditor === "object" && vditor.options.cdn) {
// cdn = vditor.options.cdn;
// }
// addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
// addScript(`/src/js/lute/lute.min.js`, "vditorLuteScript");
// addScript(`http://192.168.80.35:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
addScript(`http://192.168.80.35:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");

if (vditor && typeof vditor === "object" && !vditor.lute) {
vditor.lute = Lute.New();
Expand Down
1 change: 1 addition & 0 deletions src/ts/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,5 +321,6 @@ interface IVditor {
hlToolbarTimeoutId: number,
preventInput: boolean,
composingLock: boolean,
spinVditorDOM(vditor: IVditor, element: HTMLElement): void,
};
}
13 changes: 6 additions & 7 deletions src/ts/wysiwyg/highlightToolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,10 +411,8 @@ export const highlightToolbar = (vditor: IVditor) => {
vditor.wysiwyg.popover.innerHTML = "";

const updateLinkRef = () => {
// data-link-text
if (input.value.trim() !== "") {
linkRefElement.setAttribute("data-link-text", input.value);
linkRefElement.innerHTML = input.value;
linkRefElement.textContent = input.value;
}
// data-link-label
if (input1.value.trim() !== "") {
Expand All @@ -433,7 +431,7 @@ export const highlightToolbar = (vditor: IVditor) => {
return;
}
if (event.altKey && event.key === "Enter") {
range.selectNodeContents(linkRefElement)
range.selectNodeContents(linkRefElement);
range.collapse(false);
setSelectionFocus(range);
event.preventDefault();
Expand All @@ -448,7 +446,7 @@ export const highlightToolbar = (vditor: IVditor) => {
input.className = "vditor-input";
input.setAttribute("placeholder", i18n[vditor.options.lang].textIsNotEmpty);
input.style.width = "120px";
input.value = linkRefElement.getAttribute("data-link-text");
input.value = linkRefElement.textContent;
input.oninput = () => {
updateLinkRef();
};
Expand Down Expand Up @@ -607,7 +605,8 @@ export const highlightToolbar = (vditor: IVditor) => {
});
}

if (!blockquoteElement && !imgElement && !topListElement && !tableElement && !blockRenderElement && !aElement && !linkRefElement) {
if (!blockquoteElement && !imgElement && !topListElement && !tableElement && !blockRenderElement && !aElement
&& !linkRefElement) {
vditor.wysiwyg.popover.style.display = "none";
}

Expand All @@ -625,7 +624,7 @@ export const highlightToolbar = (vditor: IVditor) => {

const setPopoverPosition = (vditor: IVditor, element: HTMLElement) => {
let targetElement = element;
const tableElement = hasClosestByMatchTag(element, "TABLE")
const tableElement = hasClosestByMatchTag(element, "TABLE");
if (tableElement) {
targetElement = tableElement;
}
Expand Down
64 changes: 63 additions & 1 deletion src/ts/wysiwyg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
hasClosestBlock, hasClosestByAttribute,
hasClosestByClassName, hasClosestByMatchTag,
} from "../util/hasClosest";
import {log} from "../util/log";
import {processPasteCode} from "../util/processPasteCode";
import {addP2Li} from "./addP2Li";
import {afterRenderEvent} from "./afterRenderEvent";
Expand Down Expand Up @@ -51,6 +52,67 @@ class WYSIWYG {
selectEvent(vditor, this.element);
}

public spinVditorDOM(vditor: IVditor, element: HTMLElement, extHTML?: string) {
let html = "";
if (element.getAttribute("data-type") === "link-ref-defs") {
element = this.element;
}

addP2Li(vditor.wysiwyg.element);

const isWYSIWYGElement = element.isEqualNode(this.element);

if (!isWYSIWYGElement) {
html = element.outerHTML;

if (element.tagName === "UL" || element.tagName === "OL") {
// 如果为列表的话，需要把上下的列表都重绘
const listPrevElement = element.previousElementSibling;
const listNextElement = element.nextElementSibling;
if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) {
html = listPrevElement.outerHTML + html;
listPrevElement.remove();
}
if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) {
html = html + listNextElement.outerHTML;
listNextElement.remove();
}
// firefox 列表回车不会产生新的 list item https://github.com/Vanessa219/vditor/issues/194
html = html.replace("<div><wbr><br></div>", "<li><p><wbr><br></p></li>");
}

// 添加链接引用
const allLinkRefDefsElement = this.element.querySelector("[data-type='link-ref-defs']");
if (allLinkRefDefsElement) {
html += allLinkRefDefsElement.outerHTML;
allLinkRefDefsElement.remove();
}
} else {
html = element.innerHTML;
}

// 合并多个 em， strong，s。以防止多个相同元素在一起时不满足 commonmark 规范，出现标记符
html = html.replace(/<\/(strong|b)><strong data-marker="\W{2}">/g, "")
.replace(/<\/(em|i)><em data-marker="\W{1}">/g, "")
.replace(/<\/(s|strike)><s data-marker="~{1,2}">/g, "");

log("SpinVditorDOM", html, "argument", vditor.options.debugger);

html = vditor.lute.SpinVditorDOM(html);

log("SpinVditorDOM", html, "result", vditor.options.debugger);

if (isWYSIWYGElement) {
element.innerHTML = html;
} else {
element.outerHTML = html;
const allLinkRefDefsElement = this.element.querySelector("[data-type='link-ref-defs']");
if (allLinkRefDefsElement && !this.element.lastElementChild.isEqualNode(allLinkRefDefsElement)) {
this.element.insertAdjacentElement("beforeend", allLinkRefDefsElement);
}
}
}

private bindEvent(vditor: IVditor) {
if (vditor.options.upload.url || vditor.options.upload.handler) {
this.element.addEventListener("drop",
Expand Down Expand Up @@ -140,7 +202,7 @@ class WYSIWYG {
// process code
const code = processPasteCode(textHTML, textPlain, "wysiwyg");
const range = getSelection().getRangeAt(0);
const codeElement = hasClosestByMatchTag(event.target, "CODE")
const codeElement = hasClosestByMatchTag(event.target, "CODE");
if (codeElement) {
// 粘贴在代码位置
const position = getSelectPosition(event.target);
Expand Down
47 changes: 1 addition & 46 deletions src/ts/wysiwyg/input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import {
getTopList,
hasClosestBlock, hasClosestByAttribute,
hasClosestByClassName,
hasClosestByMatchTag,
hasClosestByTag,
} from "../util/hasClosest";
import {log} from "../util/log";
import {addP2Li} from "./addP2Li";
import {afterRenderEvent} from "./afterRenderEvent";
import {previoueIsEmptyA} from "./inlineTag";
import {processCodeRender} from "./processCodeRender";
Expand Down Expand Up @@ -67,53 +64,11 @@ export const input = (vditor: IVditor, range: Range, event: IHTMLInputEvent) =>
// li 中有 blockquote 就只渲染 blockquote
blockElement = hasClosestBlock(range.startContainer) || blockElement;
} else {
addP2Li(topListElement);
blockElement = topListElement;
}
}

let vditorHTML;
if (blockElement.isEqualNode(vditor.wysiwyg.element)) {
vditorHTML = blockElement.innerHTML;
} else {
vditorHTML = blockElement.outerHTML;
let listElement = hasClosestByMatchTag(topListElement || range.startContainer, "UL");
if (!listElement) {
listElement = hasClosestByMatchTag(topListElement || range.startContainer, "OL");
}
if (listElement) {
const listPrevElement = listElement.previousElementSibling;
const listNextElement = listElement.nextElementSibling;
if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) {
addP2Li(listPrevElement);
vditorHTML = listPrevElement.outerHTML + vditorHTML;
listPrevElement.remove();
}
if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) {
addP2Li(listNextElement);
vditorHTML = vditorHTML + listNextElement.outerHTML;
listNextElement.remove();
}
// firefox 列表回车不会产生新的 list item https://github.com/Vanessa219/vditor/issues/194
vditorHTML = vditorHTML.replace("<div><wbr><br></div>", "<li><p><wbr><br></p></li>");
}
}

// 合并多个 em， strong，s。以防止多个相同元素在一起时不满足 commonmark 规范，出现标记符
vditorHTML = vditorHTML.replace(/<\/(strong|b)><strong data-marker="\W{2}">/g, "")
.replace(/<\/(em|i)><em data-marker="\W{1}">/g, "")
.replace(/<\/(s|strike)><s data-marker="~{1,2}">/g, "");
log("SpinVditorDOM", vditorHTML, "argument", vditor.options.debugger);
vditorHTML = vditor.lute.SpinVditorDOM(vditorHTML);
if (vditorHTML === '<hr data-block="0" />') {
vditorHTML = '<hr data-block="0" /><p data-block="0">\n<wbr></p>';
}
log("SpinVditorDOM", vditorHTML, "result", vditor.options.debugger);
if (blockElement.isEqualNode(vditor.wysiwyg.element)) {
blockElement.innerHTML = vditorHTML;
} else {
blockElement.outerHTML = vditorHTML;
}
vditor.wysiwyg.spinVditorDOM(vditor, blockElement);

// 设置光标
setRangeByWbr(vditor.wysiwyg.element, range);
Expand Down
13 changes: 11 additions & 2 deletions src/ts/wysiwyg/processKeydown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {setSelectionFocus} from "../editor/setSelection";
import {isCtrl} from "../util/compatibility";
import {scrollCenter} from "../util/editorCommenEvent";
import {
getTopList, hasClosestBlock,
getTopList, hasClosestBlock, hasClosestByAttribute,
hasClosestByClassName,
hasClosestByMatchTag, hasClosestByTag,
hasTopClosestByTag,
Expand Down Expand Up @@ -651,14 +651,23 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
}
}

// alt+enter a popover 中 input 和 a 切换
// alt+enter
if (event.altKey && event.key === "Enter" && !isCtrl(event) && !event.shiftKey) {
// a popover 中 input 和 a 切换
const aElement = hasClosestByTag(startContainer, "A");
if (aElement) {
const inputElement = vditor.wysiwyg.popover.querySelector("input");
inputElement.focus();
inputElement.select();
}

// 链接引用 popover 中 input 和元素切换
const linRefElement = hasClosestByAttribute(startContainer, "data-type", "link-ref");
if (linRefElement) {
const inputElement = vditor.wysiwyg.popover.querySelector("input");
inputElement.focus();
inputElement.select();
}
}

// 删除有子工具栏的块
Expand Down

0 comments on commit f91bc1e

Please sign in to comment.