Skip to content

Commit

Permalink
🎨 Vanessa219#27 list
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 ca2478b commit 894743d
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 89 deletions.
12 changes: 11 additions & 1 deletion src/ts/ir/highlightToolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const highlightToolbar = (vditor: IVditor) => {
const codeElement = hasClosestByAttribute(typeElement, "data-type", "code");
if (codeElement) {
disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
"list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
"list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
}
const codeBlockElement = hasClosestByAttribute(typeElement, "data-type", "code-block");
Expand All @@ -67,6 +67,16 @@ export const highlightToolbar = (vditor: IVditor) => {
if (tableElement) {
disableToolbar(vditor.toolbar.elements, ["table"]);
}
const liElement = hasClosestByMatchTag(typeElement, "LI");
if (liElement) {
if (liElement.classList.contains("vditor-task")) {
setCurrentToolbar(vditor.toolbar.elements, ["check"]);
} else if (liElement.parentElement.tagName === "OL") {
setCurrentToolbar(vditor.toolbar.elements, ["ordered-list"]);
} else if (liElement.parentElement.tagName === "UL") {
setCurrentToolbar(vditor.toolbar.elements, ["list"]);
}
}

}, 200);
};
7 changes: 3 additions & 4 deletions src/ts/ir/input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export const input = (vditor: IVditor, range: Range) => {

let blockElement = hasClosestBlock(range.startContainer);

if (blockElement) {
// 前后可以输入空格，但是 insert html 中有换行需忽略（使用 wbr 标识）
if (blockElement && !blockElement.querySelector("wbr")) {
// 前后空格处理
const startOffset = getSelectPosition(blockElement, range).start;

Expand Down Expand Up @@ -41,9 +42,7 @@ export const input = (vditor: IVditor, range: Range) => {
}
}

if ((startSpace || endSpace || isHrMD(blockElement.innerHTML) || isHeadingMD(blockElement.innerHTML))
// insert table
&& !blockElement.querySelector("wbr")) {
if ((startSpace || endSpace || isHrMD(blockElement.innerHTML) || isHeadingMD(blockElement.innerHTML))) {
blockElement.classList.add("vditor-ir__node--expand");
return;
}
Expand Down
5 changes: 5 additions & 0 deletions src/ts/ir/process.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {getMarkdown} from "../util/getMarkdown";
import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
import {getEditorRange, setRangeByWbr} from "../util/selection";
import {highlightToolbar} from "./highlightToolbar";
import {listToggle} from "../util/fixBrowserBehavior";

export const processAfterRender = (vditor: IVditor, options = {
enableAddUndoStack: true,
Expand Down Expand Up @@ -153,6 +154,8 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
removeInline(range, vditor, "s");
} else if (commandName === "inline-code") {
removeInline(range, vditor, "code");
}else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
listToggle(vditor, range, commandName);
}
} else {
// 添加
Expand Down Expand Up @@ -189,6 +192,8 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
html = "\n" + html + "\n";
}
document.execCommand("insertHTML", false, html);
} else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
listToggle(vditor, range, commandName, false);
}
}
setRangeByWbr(vditor.ir.element, range);
Expand Down
4 changes: 1 addition & 3 deletions src/ts/toolbar/EditMode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,8 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
enableToolbar(vditor.toolbar.elements, allToolbar);
removeCurrentToolbar(vditor.toolbar.elements, allToolbar);

const irUnUsedToolbar = ["list", "ordered-list", "check"];
showToolbar(vditor.toolbar.elements, irUnUsedToolbar);
if (type === "ir") {
hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"].concat(irUnUsedToolbar));
hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
vditor.irUndo.resetIcon(vditor);
vditor.sv.element.style.display = "none";
vditor.preview.element.style.display = "none";
Expand Down
71 changes: 70 additions & 1 deletion src/ts/util/fixBrowserBehavior.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {highlightToolbar} from "../wysiwyg/highlightToolbar";
import {processCodeRender} from "../wysiwyg/processCodeRender";
import {isCtrl} from "./compatibility";
import {scrollCenter} from "./editorCommenEvent";
import {getTopList, hasClosestBlock, hasClosestByMatchTag} from "./hasClosest";
import {getTopList, hasClosestBlock, hasClosestByAttribute, hasClosestByMatchTag} from "./hasClosest";
import {getLastNode} from "./hasClosest";
import {matchHotKey} from "./hotKey";
import {getSelectPosition, setRangeByWbr} from "./selection";
Expand All @@ -32,6 +32,75 @@ const goPreviousCell = (cellElement: HTMLElement, range: Range, isSelected = tru
}
};

export const listToggle = (vditor: IVditor, range: Range, type: string, cancel = true) => {
const itemElement = hasClosestByMatchTag(range.startContainer, "LI");
vditor[vditor.currentMode].element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));

if (cancel && itemElement) {
// 取消
let pHTML = "";
for (let i = 0; i < itemElement.parentElement.childElementCount; i++) {
const inputElement = itemElement.parentElement.children[i].querySelector("input");
if (inputElement) {
inputElement.remove();
}
pHTML += `<p data-block="0">${itemElement.parentElement.children[i].innerHTML.trimLeft()}</p>`;
}
itemElement.parentElement.insertAdjacentHTML("beforebegin", pHTML);
itemElement.parentElement.remove();
} else {
if (!itemElement) {
// 添加
let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
if (!blockElement) {
vditor[vditor.currentMode].element.querySelector("wbr").remove();
blockElement = vditor[vditor.currentMode].element.querySelector("p");
blockElement.innerHTML = "<wbr>";
}
if (type === "check") {
blockElement.insertAdjacentHTML("beforebegin",
`<ul data-block="0"><li class="vditor-task"><input type="checkbox" /> ${blockElement.innerHTML}</li></ul>`);
blockElement.remove();
} else if (type === "list") {
blockElement.insertAdjacentHTML("beforebegin",
`<ul data-block="0"><li>${blockElement.innerHTML}</li></ul>`);
blockElement.remove();
} else if (type === "ordered-list") {
blockElement.insertAdjacentHTML("beforebegin",
`<ol data-block="0"><li>${blockElement.innerHTML}</li></ol>`);
blockElement.remove();
}
} else {
// 切换
if (type === "check") {
itemElement.parentElement.querySelectorAll("li").forEach((item) => {
item.insertAdjacentHTML("afterbegin",
`<input type="checkbox" />${item.textContent.indexOf(" ") === 0 ? '' : ' '}`);
item.classList.add("vditor-task");
});
} else {
if (itemElement.querySelector("input")) {
itemElement.parentElement.querySelectorAll("li").forEach((item) => {
item.querySelector("input").remove();
item.classList.remove("vditor-task");
});
}
let element;
if (type === "list") {
element = document.createElement("ul");
} else {
element = document.createElement("ol");
}
element.innerHTML = itemElement.parentElement.innerHTML;
itemElement.parentElement.parentNode.replaceChild(element, itemElement.parentElement);
}
}
}
};

export const listIndent = (vditor: IVditor, liElement: HTMLElement, range: Range, topListElement: HTMLElement) => {
if (liElement && liElement.previousElementSibling) {
vditor[vditor.currentMode].element.querySelectorAll("wbr").forEach((wbr) => {
Expand Down
11 changes: 5 additions & 6 deletions src/ts/wysiwyg/highlightToolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,12 @@ export const highlightToolbar = (vditor: IVditor) => {

// 工具栏高亮和禁用
const liElement = hasClosestByMatchTag(typeElement, "LI");
if (hasClosestByClassName(typeElement, "vditor-task")) {
setCurrentToolbar(vditor.toolbar.elements, ["check"]);
} else {
if (liElement && liElement.parentElement.tagName === "OL") {
if (liElement) {
if (liElement.classList.contains("vditor-task")) {
setCurrentToolbar(vditor.toolbar.elements, ["check"]);
} else if (liElement.parentElement.tagName === "OL") {
setCurrentToolbar(vditor.toolbar.elements, ["ordered-list"]);
}
if (liElement && liElement.parentElement.tagName === "UL") {
} else if (liElement.parentElement.tagName === "UL") {
setCurrentToolbar(vditor.toolbar.elements, ["list"]);
}
}
Expand Down
77 changes: 3 additions & 74 deletions src/ts/wysiwyg/toolbarEvent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,80 +6,7 @@ import {afterRenderEvent} from "./afterRenderEvent";
import {genAPopover, highlightToolbar} from "./highlightToolbar";
import {getNextHTML, getPreviousHTML, splitElement} from "./inlineTag";
import {processCodeRender} from "./processCodeRender";

const listToggle = (vditor: IVditor, range: Range, type: string, cancel = true) => {
const itemElement = hasClosestByMatchTag(range.startContainer, "LI");
vditor.wysiwyg.element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));

if (cancel && itemElement) {
// 取消
list2p(itemElement.parentElement);
} else {
if (!itemElement) {
// 添加
let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
if (!blockElement) {
vditor.wysiwyg.element.querySelector("wbr").remove();
blockElement = vditor.wysiwyg.element.querySelector("p");
blockElement.innerHTML = "<wbr>";
}
if (type === "check") {
blockElement.insertAdjacentHTML("beforebegin",
`<ul data-block="0"><li class="vditor-task"><input type="checkbox" /> ${blockElement.innerHTML}</li></ul>`);
blockElement.remove();
} else if (type === "list") {
blockElement.insertAdjacentHTML("beforebegin",
`<ul data-block="0"><li>${blockElement.innerHTML}</li></ul>`);
blockElement.remove();
} else if (type === "ordered-list") {
blockElement.insertAdjacentHTML("beforebegin",
`<ol data-block="0"><li>${blockElement.innerHTML}</li></ol>`);
blockElement.remove();
}
} else {
// 切换
if (type === "check") {
itemElement.parentElement.querySelectorAll("li").forEach((item) => {
item.insertAdjacentHTML("afterbegin", '<input type="checkbox" />');
item.classList.add("vditor-task");
});
} else {
if (itemElement.querySelector("input")) {
itemElement.parentElement.querySelectorAll("li").forEach((item) => {
item.querySelector("input").remove();
item.classList.remove("vditor-task");
});
}
let element;
if (type === "list") {
element = document.createElement("ul");
} else {
element = document.createElement("ol");
}
element.innerHTML = itemElement.parentElement.innerHTML;
itemElement.parentElement.parentNode.replaceChild(element, itemElement.parentElement);
}
}
}
setRangeByWbr(vditor.wysiwyg.element, range);
};

const list2p = (listElement: HTMLElement) => {
let pHTML = "";
for (let i = 0; i < listElement.childElementCount; i++) {
const inputElement = listElement.children[i].querySelector("input");
if (inputElement) {
inputElement.remove();
}
pHTML += `<p data-block="0">${listElement.children[i].innerHTML.trimLeft()}</p>`;
}
listElement.insertAdjacentHTML("beforebegin", pHTML);
listElement.remove();
};

import {listToggle} from "../util/fixBrowserBehavior";
const cancelBES = (range: Range, vditor: IVditor, commandName: string) => {
let element = range.startContainer.parentElement;
let jump = false;
Expand Down Expand Up @@ -195,6 +122,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
}
} else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
listToggle(vditor, range, commandName);
setRangeByWbr(vditor.wysiwyg.element, range);
useHighlight = false;
actionBtn.classList.remove("vditor-menu--current");
} else {
Expand Down Expand Up @@ -236,6 +164,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
}
} else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
listToggle(vditor, range, commandName, false);
setRangeByWbr(vditor.wysiwyg.element, range);
useHighlight = false;
actionBtn.classList.add("vditor-menu--current");
} else if (commandName === "inline-code") {
Expand Down

0 comments on commit 894743d

Please sign in to comment.