Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 16:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ https://github.com/siyuan-note/siyuan/issues/3565 transaction insert

Browse source
This commit is contained in:
Vanessa 2022-10-03 11:28:22 +08:00
parent 44a23b87cf
commit ead6bc5fa2
3 changed files with 95 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/scss/_wysiwyg.scss
View file

@ -4,6 +4,10 @@
transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
box-sizing: border-box; box-sizing: border-box;
.protyle-breadcrumb__bar {
font-size: 14px;
}
&:focus { &:focus {
outline: none; outline: none;
} }

18
app/src/protyle/util/insertHTML.ts
View file

@ -107,16 +107,22 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false, spl
} }
const spinHTML = protyle.lute.SpinBlockDOM(removeEmbed(blockElement)); const spinHTML = protyle.lute.SpinBlockDOM(removeEmbed(blockElement));
const scrollLeft = blockElement.firstElementChild.scrollLeft; const scrollLeft = blockElement.firstElementChild.scrollLeft;
const blockPreviousElement = blockElement.previousElementSibling
blockElement.outerHTML = spinHTML; blockElement.outerHTML = spinHTML;
render = true; render = true;
// spin 后变成多个块需后续处理 https://github.com/siyuan-note/insider/issues/451 // spin 后变成多个块需后续处理 https://github.com/siyuan-note/insider/issues/451
tempElement.innerHTML = spinHTML; tempElement.innerHTML = spinHTML;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find((item) => { if (protyle.options.backlinkData) {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) { // 反链面板
blockElement = item; blockElement = blockPreviousElement.nextElementSibling;
return true; } 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 (tempElement.content.childElementCount === 1) {
if (blockElement.classList.contains("table") && scrollLeft > 0) { if (blockElement.classList.contains("table") && scrollLeft > 0) {
blockElement.firstElementChild.scrollLeft = scrollLeft; blockElement.firstElementChild.scrollLeft = scrollLeft;

124
app/src/protyle/wysiwyg/transaction.ts
View file

@ -216,6 +216,47 @@ const promiseTransaction = () => {
} }
if (operation.action === "insert") { if (operation.action === "insert") {
// 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 到文档底部，最终导致查询块失败、光标丢失 // 不更新嵌入块：在快速删除时重新渲染嵌入块会导致滚动条产生滚动从而触发 getDoc 请求，此时删除的块还没有写库，会把已删除的块 append 到文档底部，最终导致查询块失败、光标丢失
// protyle.wysiwyg.element.querySelectorAll('[data-type="NodeBlockQueryEmbed"]').forEach((item) => { // protyle.wysiwyg.element.querySelectorAll('[data-type="NodeBlockQueryEmbed"]').forEach((item) => {
// if (item.getAttribute("data-node-id") === operation.id) { // if (item.getAttribute("data-node-id") === operation.id) {
@ -490,71 +531,64 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
return; return;
} }
if (operation.action === "insert") { if (operation.action === "insert") {
let cursorElement; const cursorElements = [];
if (operation.previousID) { if (operation.previousID) {
let beforeElement: Element; Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.previousID}"]`)).forEach(item => {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${operation.previousID}"]`)).find(item => {
const embedElement = hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed"); const embedElement = hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed");
if (embedElement) { if (embedElement) {
// https://github.com/siyuan-note/siyuan/issues/5524 // https://github.com/siyuan-note/siyuan/issues/5524
embedElement.removeAttribute("data-render"); embedElement.removeAttribute("data-render");
blockRender(protyle, embedElement); blockRender(protyle, embedElement);
} else { } else {
beforeElement = item; item.insertAdjacentHTML("afterend", operation.data);
return true; cursorElements.push(item.nextElementSibling)
} }
}); });
if (beforeElement) {
beforeElement.insertAdjacentHTML("afterend", operation.data);
cursorElement = beforeElement.nextElementSibling as HTMLElement;
}
} else { } else {
let parentElement: Element; if (!protyle.options.backlinkData && operation.parentID === protyle.block.parentID) {
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) {
protyle.wysiwyg.element.insertAdjacentHTML("afterbegin", operation.data); 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 // https://github.com/siyuan-note/siyuan/issues/4420
protyle.wysiwyg.element.querySelectorAll('[data-type="NodeHeading"]').forEach(item => { protyle.wysiwyg.element.querySelectorAll('[data-type="NodeHeading"]').forEach(item => {
if (item.lastElementChild.getAttribute("spin") === "1") { if (item.lastElementChild.getAttribute("spin") === "1") {
item.lastElementChild.remove(); item.lastElementChild.remove();
} }
}); });
if (cursorElements.length === 0) {
const wbrElement = cursorElement.querySelector("wbr"); return;
if (focus) {
const range = getEditorRange(cursorElement);
if (wbrElement) {
focusByWbr(cursorElement, range);
} else {
focusBlock(cursorElement);
}
} else if (wbrElement) {
wbrElement.remove();
} }
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 嵌入块 // 更新 ws 嵌入块
protyle.wysiwyg.element.querySelectorAll(`[data-type="NodeBlockQueryEmbed"][data-node-id="${operation.id}"]`).forEach((item) => { protyle.wysiwyg.element.querySelectorAll(`[data-type="NodeBlockQueryEmbed"][data-node-id="${operation.id}"]`).forEach((item) => {
item.removeAttribute("data-render"); item.removeAttribute("data-render");