Skip to content

Commit

Permalink
🎨 #27 indent and outdent
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Mar 26, 2020
1 parent 0839187 commit b3b1025
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 111 deletions.
24 changes: 11 additions & 13 deletions src/ts/ir/processKeydown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,17 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
}

const pElement = hasClosestByMatchTag(startContainer, "P");
if (pElement) {
// md 处理
if (fixMarkdown(event, vditor, pElement, range)) {
return true;
}
// li
if (fixList(range, vditor, pElement, event)) {
return true;
}
// blockquote
if (fixBlockquote(vditor, range, event, pElement)) {
return true;
}
// md 处理
if (fixMarkdown(event, vditor, pElement, range)) {
return true;
}
// li
if (fixList(range, vditor, pElement, event)) {
return true;
}
// blockquote
if (fixBlockquote(vditor, range, event, pElement)) {
return true;
}

// 代码块
Expand Down
100 changes: 93 additions & 7 deletions src/ts/util/fixBrowserBehavior.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import {Constants} from "../constants";
import {processAfterRender} from "../ir/process";
import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
import {highlightToolbar} from "../wysiwyg/highlightToolbar";
import {processCodeRender} from "../wysiwyg/processCodeRender";
import {isCtrl} from "./compatibility";
import {scrollCenter} from "./editorCommenEvent";
import {hasClosestBlock, hasClosestByMatchTag} from "./hasClosest";
import {getTopList, hasClosestBlock, hasClosestByMatchTag} from "./hasClosest";
import {getLastNode} from "./hasClosest";
import {matchHotKey} from "./hotKey";
import {getSelectPosition, setRangeByWbr} from "./selection";
Expand All @@ -30,6 +32,88 @@ const goPreviousCell = (cellElement: HTMLElement, range: Range, isSelected = tru
}
};

export const listIndent = (vditor: IVditor, liElement: HTMLElement, range: Range, topListElement: HTMLElement) => {
if (liElement && liElement.previousElementSibling) {
vditor[vditor.currentMode].element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));
const parentTagName = liElement.parentElement.tagName;
let marker = liElement.getAttribute("data-marker");
if (marker.length !== 1) {
marker = `1${marker.slice(-1)}`;
}
liElement.previousElementSibling.insertAdjacentHTML("beforeend",
`<${parentTagName} data-block="0"><li data-marker="${marker}">${liElement.innerHTML}</li></${parentTagName}>`);
liElement.remove();

topListElement.outerHTML = vditor.lute.SpinVditorDOM(topListElement.outerHTML);

setRangeByWbr(vditor[vditor.currentMode].element, range);
const tempTopListElement = getTopList(range.startContainer);
if (tempTopListElement && vditor.currentMode === "wysiwyg") {
tempTopListElement.querySelectorAll(".vditor-wysiwyg__block")
.forEach((blockElement: HTMLElement) => {
processCodeRender(blockElement, vditor);
blockElement.firstElementChild.setAttribute("style", "display:none");
});
}
execAfterRender(vditor);
if (vditor.currentMode === "wysiwyg") {
highlightToolbar(vditor);
}
} else {
vditor[vditor.currentMode].element.focus();
}
};

export const listOutdent = (vditor: IVditor, liElement: HTMLElement, range: Range, topListElement: HTMLElement) => {
const liParentLiElement = hasClosestByMatchTag(liElement.parentElement, "LI");
if (liParentLiElement) {
vditor[vditor.currentMode].element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));

const liParentElement = liElement.parentElement;
const liParentAfterElement = liParentElement.cloneNode() as HTMLElement;

let isMatch = false;
let afterHTML = "";
liParentElement.querySelectorAll("li").forEach((item) => {
if (isMatch) {
afterHTML += item.outerHTML;
item.remove();
}
if (item.isEqualNode(liElement)) {
isMatch = true;
}
});
liParentAfterElement.innerHTML = afterHTML;

liParentLiElement.insertAdjacentElement("afterend", liElement);
liElement.insertAdjacentElement("beforeend", liParentAfterElement);

topListElement.outerHTML = vditor.lute.SpinVditorDOM(topListElement.outerHTML);

setRangeByWbr(vditor[vditor.currentMode].element, range);
const tempTopListElement = getTopList(range.startContainer);
if (tempTopListElement) {
tempTopListElement.querySelectorAll(".vditor-wysiwyg__block")
.forEach((blockElement: HTMLElement) => {
processCodeRender(blockElement, vditor);
blockElement.firstElementChild.setAttribute("style", "display:none");
});
}
execAfterRender(vditor);
if (vditor.currentMode === "wysiwyg") {
highlightToolbar(vditor);
}
} else {
vditor[vditor.currentMode].element.focus();
}
};

export const setTableAlign = (tableElement: HTMLTableElement, type: string) => {
const cell = getSelection().getRangeAt(0).startContainer.parentElement;

Expand Down Expand Up @@ -123,7 +207,7 @@ export const execAfterRender = (vditor: IVditor) => {
}
};

export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement, event: KeyboardEvent) => {
export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | false, event: KeyboardEvent) => {
const startContainer = range.startContainer;
const liElement = hasClosestByMatchTag(startContainer, "LI");
if (liElement) {
Expand Down Expand Up @@ -173,12 +257,11 @@ export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement, ev
isFirst = true;
}

// TODO
if (isFirst) {
if (event.shiftKey) {
vditor.wysiwyg.popover.querySelector('button[data-type="outdent"]').dispatchEvent(new CustomEvent("click"));
listOutdent(vditor, liElement, range, liElement.parentElement);
} else {
vditor.wysiwyg.popover.querySelector('button[data-type="indent"]').dispatchEvent(new CustomEvent("click"));
listIndent(vditor, liElement, range, liElement.parentElement);
}
event.preventDefault();
return true;
Expand Down Expand Up @@ -209,7 +292,10 @@ export const fixTab = (vditor: IVditor, range: Range, event: KeyboardEvent) => {
}
};

export const fixMarkdown = (event: KeyboardEvent, vditor: IVditor, pElement: HTMLElement, range: Range) => {
export const fixMarkdown = (event: KeyboardEvent, vditor: IVditor, pElement: HTMLElement | false, range: Range) => {
if (!pElement) {
return;
}
if (!isCtrl(event) && !event.altKey && event.key === "Enter") {
const pText = String.raw`${pElement.textContent}`.replace(/\\\|/g, "").trim();
const pTextList = pText.split("|");
Expand Down Expand Up @@ -528,7 +614,7 @@ export const fixCodeBlock = (vditor: IVditor, event: KeyboardEvent, codeRenderEl
return false;
};

export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEvent, pElement: HTMLElement) => {
export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEvent, pElement: HTMLElement | false) => {
const startContainer = range.startContainer;
const blockquoteElement = hasClosestByMatchTag(startContainer, "BLOCKQUOTE");
if (blockquoteElement && range.toString() === "") {
Expand Down
80 changes: 4 additions & 76 deletions src/ts/wysiwyg/highlightToolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ import {enableToolbar} from "../toolbar/setToolbar";
import {removeCurrentToolbar} from "../toolbar/setToolbar";
import {setCurrentToolbar} from "../toolbar/setToolbar";
import {isCtrl, updateHotkeyTip} from "../util/compatibility";
import {setTableAlign} from "../util/fixBrowserBehavior";
import {listIndent, listOutdent, setTableAlign} from "../util/fixBrowserBehavior";
import {
getTopList,
hasClosestByAttribute,
hasClosestByClassName,
hasClosestByMatchTag,
Expand Down Expand Up @@ -173,36 +172,10 @@ export const highlightToolbar = (vditor: IVditor) => {
"<" + updateHotkeyTip("⌘-⇧-I") + ">");
indent.className = "vditor-icon vditor-tooltipped vditor-tooltipped__n";
indent.onclick = () => {
if (liElement && liElement.previousElementSibling) {
vditor.wysiwyg.element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));
const parentTagName = liElement.parentElement.tagName;
let marker = liElement.getAttribute("data-marker");
if (marker.length !== 1) {
marker = `1${marker.slice(-1)}`;
}
liElement.previousElementSibling.insertAdjacentHTML("beforeend",
`<${parentTagName} data-block="0"><li data-marker="${marker}">${liElement.innerHTML}</li></${parentTagName}>`);
liElement.remove();

topListElement.outerHTML = vditor.lute.SpinVditorDOM(topListElement.outerHTML);

setRangeByWbr(vditor.wysiwyg.element, range);
const tempTopListElement = getTopList(range.startContainer);
if (tempTopListElement) {
tempTopListElement.querySelectorAll(".vditor-wysiwyg__block")
.forEach((blockElement: HTMLElement) => {
processCodeRender(blockElement, vditor);
blockElement.firstElementChild.setAttribute("style", "display:none");
});
}
afterRenderEvent(vditor);
highlightToolbar(vditor);
} else {
vditor.wysiwyg.element.focus();
if (!liElement) {
return;
}
listIndent(vditor, liElement, range, topListElement);
};

genClose(vditor.wysiwyg.popover, topListElement, vditor);
Expand Down Expand Up @@ -839,48 +812,3 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input2Wrap);
setPopoverPosition(vditor, aElement);
};

export const listOutdent = (vditor: IVditor, liElement: HTMLElement, range: Range, topListElement: HTMLElement) => {
const liParentLiElement = hasClosestByMatchTag(liElement.parentElement, "LI");
if (liParentLiElement) {
vditor.wysiwyg.element.querySelectorAll("wbr").forEach((wbr) => {
wbr.remove();
});
range.insertNode(document.createElement("wbr"));

const liParentElement = liElement.parentElement;
const liParentAfterElement = liParentElement.cloneNode() as HTMLElement;

let isMatch = false;
let afterHTML = "";
liParentElement.querySelectorAll("li").forEach((item) => {
if (isMatch) {
afterHTML += item.outerHTML;
item.remove();
}
if (item.isEqualNode(liElement)) {
isMatch = true;
}
});
liParentAfterElement.innerHTML = afterHTML;

liParentLiElement.insertAdjacentElement("afterend", liElement);
liElement.insertAdjacentElement("beforeend", liParentAfterElement);

topListElement.outerHTML = vditor.lute.SpinVditorDOM(topListElement.outerHTML);

setRangeByWbr(vditor.wysiwyg.element, range);
const tempTopListElement = getTopList(range.startContainer);
if (tempTopListElement) {
tempTopListElement.querySelectorAll(".vditor-wysiwyg__block")
.forEach((blockElement: HTMLElement) => {
processCodeRender(blockElement, vditor);
blockElement.firstElementChild.setAttribute("style", "display:none");
});
}
afterRenderEvent(vditor);
highlightToolbar(vditor);
} else {
vditor.wysiwyg.element.focus();
}
};
37 changes: 22 additions & 15 deletions src/ts/wysiwyg/processKeydown.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import {Constants} from "../constants";
import {isCtrl} from "../util/compatibility";
import {scrollCenter} from "../util/editorCommenEvent";
import {fixBlockquote, fixCodeBlock, fixList, fixMarkdown, fixTab, fixTable} from "../util/fixBrowserBehavior";
import {
fixBlockquote,
fixCodeBlock,
fixList,
fixMarkdown,
fixTab,
fixTable,
listOutdent,
} from "../util/fixBrowserBehavior";
import {
getLastNode,
getTopList, hasClosestBlock, hasClosestByAttribute,
Expand All @@ -12,7 +20,6 @@ import {
import {matchHotKey} from "../util/hotKey";
import {getSelectPosition, setRangeByWbr, setSelectionFocus} from "../util/selection";
import {afterRenderEvent} from "./afterRenderEvent";
import {listOutdent} from "./highlightToolbar";
import {nextIsCode} from "./inlineTag";
import {showCode} from "./processCodeRender";
import {removeHeading, setHeading} from "./setHeading";
Expand Down Expand Up @@ -41,19 +48,14 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
const blockElement = hasClosestBlock(startContainer);
const pElement = hasClosestByMatchTag(startContainer, "P");

if (pElement) {
// md 处理
if (fixMarkdown(event, vditor, pElement, range)) {
return true;
}
// li
if (fixList(range, vditor, pElement, event)) {
return true;
}
// blockquote
if (fixBlockquote(vditor, range, event, pElement)) {
return true;
}
// md 处理
if (fixMarkdown(event, vditor, pElement, range)) {
return true;
}

// li
if (fixList(range, vditor, pElement, event)) {
return true;
}

// table
Expand Down Expand Up @@ -89,6 +91,11 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
}
}

// blockquote
if (fixBlockquote(vditor, range, event, pElement)) {
return true;
}

// 顶层 blockquote
const topBQElement = hasTopClosestByTag(startContainer, "BLOCKQUOTE");
if (topBQElement) {
Expand Down

0 comments on commit b3b1025

Please sign in to comment.