Skip to content

Commit

Permalink
✨ #3565 transaction insert
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Oct 3, 2022
1 parent 44a23b8 commit ead6bc5
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 51 deletions.
4 changes: 4 additions & 0 deletions app/src/assets/scss/_wysiwyg.scss
View file
Expand Up @@ -4,6 +4,10 @@
transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
box-sizing: border-box;

.protyle-breadcrumb__bar {
font-size: 14px;
}

&:focus {
outline: none;
}
Expand Down
18 changes: 12 additions & 6 deletions app/src/protyle/util/insertHTML.ts
View file
Expand Up @@ -107,16 +107,22 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false, spl
}
const spinHTML = protyle.lute.SpinBlockDOM(removeEmbed(blockElement));
const scrollLeft = blockElement.firstElementChild.scrollLeft;
const blockPreviousElement = blockElement.previousElementSibling
blockElement.outerHTML = spinHTML;
render = true;
// spin 后变成多个块需后续处理 https://github.com/siyuan-note/insider/issues/451
tempElement.innerHTML = spinHTML;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find((item) => {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) {
blockElement = item;
return true;
}
});
if (protyle.options.backlinkData) {
// 反链面板
blockElement = blockPreviousElement.nextElementSibling;
} else {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find((item) => {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) {
blockElement = item;
return true;
}
});
}
if (tempElement.content.childElementCount === 1) {
if (blockElement.classList.contains("table") && scrollLeft > 0) {
blockElement.firstElementChild.scrollLeft = scrollLeft;
Expand Down
124 changes: 79 additions & 45 deletions app/src/protyle/wysiwyg/transaction.ts
View file
Expand Up @@ -216,6 +216,47 @@ const promiseTransaction = () => {
}
if (operation.action === "insert") {
// insert
if (protyle.options.backlinkData) {
const cursorElements: Element[] = []
if (operation.previousID) {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.previousID}"]`)).forEach(item => {
if (item.nextElementSibling?.getAttribute("data-node-id") !== operation.id &&
(item.getAttribute("data-type") === "NodeBlockQueryEmbed" || !hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed"))) {
item.insertAdjacentHTML("afterend", operation.data);
cursorElements.push(item.nextElementSibling)
}
});
} else {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.parentID}"]`)).forEach(item => {
if (item.getAttribute("data-type") === "NodeBlockQueryEmbed" || !hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed")) {
// 列表特殊处理
if (item.firstElementChild && item.firstElementChild.classList.contains("protyle-action") &&
item.firstElementChild.nextElementSibling.getAttribute("data-node-id") !== operation.id) {
item.firstElementChild.insertAdjacentHTML("afterend", operation.data);
cursorElements.push(item.firstElementChild.nextElementSibling)
} else if (item.firstElementChild && item.firstElementChild.getAttribute("data-node-id") !== operation.id) {
item.insertAdjacentHTML("afterbegin", operation.data);
cursorElements.push(item.firstElementChild)
}
}
});
}
// https://github.com/siyuan-note/siyuan/issues/4420
protyle.wysiwyg.element.querySelectorAll('[data-type="NodeHeading"]').forEach(item => {
if (item.lastElementChild.getAttribute("spin") === "1") {
item.lastElementChild.remove();
}
});
cursorElements.forEach(item => {
processRender(item);
highlightRender(item);
blockRender(protyle, item);
const wbrElement = item.querySelector("wbr");
if (wbrElement) {
wbrElement.remove();
}
});
}
// 不更新嵌入块：在快速删除时重新渲染嵌入块会导致滚动条产生滚动从而触发 getDoc 请求，此时删除的块还没有写库，会把已删除的块 append 到文档底部，最终导致查询块失败、光标丢失
// protyle.wysiwyg.element.querySelectorAll('[data-type="NodeBlockQueryEmbed"]').forEach((item) => {
// if (item.getAttribute("data-node-id") === operation.id) {
Expand Down Expand Up @@ -490,71 +531,64 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
return;
}
if (operation.action === "insert") {
let cursorElement;
const cursorElements = [];
if (operation.previousID) {
let beforeElement: Element;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.previousID}"]`)).find(item => {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.previousID}"]`)).forEach(item => {
const embedElement = hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed");
if (embedElement) {
// https://github.com/siyuan-note/siyuan/issues/5524
embedElement.removeAttribute("data-render");
blockRender(protyle, embedElement);
} else {
beforeElement = item;
return true;
item.insertAdjacentHTML("afterend", operation.data);
cursorElements.push(item.nextElementSibling)
}
});
if (beforeElement) {
beforeElement.insertAdjacentHTML("afterend", operation.data);
cursorElement = beforeElement.nextElementSibling as HTMLElement;
}
} else {
let parentElement: Element;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.parentID}"]`)).find(item => {
if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed")) {
parentElement = item;
return true;
}
});
if (parentElement) {
// 列表特殊处理
if (parentElement.firstElementChild?.classList.contains("protyle-action")) {
parentElement.firstElementChild.insertAdjacentHTML("afterend", operation.data);
cursorElement = parentElement.firstElementChild.nextElementSibling as HTMLElement;
} else {
parentElement.insertAdjacentHTML("afterbegin", operation.data);
cursorElement = parentElement.firstElementChild as HTMLElement;
}
} else if (operation.parentID === protyle.block.parentID) {
if (!protyle.options.backlinkData && operation.parentID === protyle.block.parentID) {
protyle.wysiwyg.element.insertAdjacentHTML("afterbegin", operation.data);
cursorElement = protyle.wysiwyg.element.firstElementChild as HTMLElement;
cursorElements.push(protyle.wysiwyg.element.firstElementChild)
} else {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.parentID}"]`)).forEach(item => {
if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed")) {
// 列表特殊处理
if (item.firstElementChild?.classList.contains("protyle-action")) {
item.firstElementChild.insertAdjacentHTML("afterend", operation.data);
cursorElements.push(item.firstElementChild.nextElementSibling)
} else {
item.insertAdjacentHTML("afterbegin", operation.data);
cursorElements.push(item.firstElementChild)
}
}
});
}
}
if (!cursorElement) {
return;
}
processRender(cursorElement);
highlightRender(cursorElement);
blockRender(protyle, cursorElement);

// https://github.com/siyuan-note/siyuan/issues/4420
protyle.wysiwyg.element.querySelectorAll('[data-type="NodeHeading"]').forEach(item => {
if (item.lastElementChild.getAttribute("spin") === "1") {
item.lastElementChild.remove();
}
});

const wbrElement = cursorElement.querySelector("wbr");
if (focus) {
const range = getEditorRange(cursorElement);
if (wbrElement) {
focusByWbr(cursorElement, range);
} else {
focusBlock(cursorElement);
}
} else if (wbrElement) {
wbrElement.remove();
if (cursorElements.length === 0) {
return;
}
cursorElements.forEach(item => {
processRender(item);
highlightRender(item);
blockRender(protyle, item);
const wbrElement = item.querySelector("wbr");
if (focus) {
const range = getEditorRange(item);
if (wbrElement) {
focusByWbr(item, range);
} else {
focusBlock(item);
}
} else if (wbrElement) {
wbrElement.remove();
}
});

// 更新 ws 嵌入块
protyle.wysiwyg.element.querySelectorAll(`[data-type="NodeBlockQueryEmbed"][data-node-id="${operation.id}"]`).forEach((item) => {
item.removeAttribute("data-render");
Expand Down

0 comments on commit ead6bc5

Please sign in to comment.