0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/2911 复制行内元素的一部分时带其样式

Browse source
This commit is contained in:
Vanessa 2022-09-16 11:54:27 +08:00
parent c4c3f01932
commit f3efe1d833
2 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/src/protyle/toolbar/index.ts
View file

@ -438,20 +438,35 @@ export class Toolbar {
// 切割元素
const startContainer = this.range.startContainer as HTMLElement;
const afterElement = document.createElement("span");
const dataset = startContainer.dataset;
Object.keys(dataset).forEach(key => {
afterElement.setAttribute("data-" + key, dataset[key]);
});
const attributes = startContainer.attributes;
for (let i = 0; i < attributes.length; i++) {
afterElement.setAttribute(attributes[i].name, attributes[i].value);
}
this.range.setEnd(startContainer.lastChild, startContainer.lastChild.textContent.length);
afterElement.append(this.range.extractContents());
startContainer.after(afterElement);
this.range.setStartBefore(afterElement);
this.range.collapse(true);
}
newNodes.forEach((item) => {
this.range.insertNode(item);
this.range.collapse(false);
});
for (let i = 0; i < newNodes.length; i++) {
const currentNewNode = newNodes[i] as HTMLElement
const nextNewNode = newNodes[i + 1] as HTMLElement
if (currentNewNode.nodeType !== 3 && nextNewNode && nextNewNode.nodeType !== 3 &&
isArrayEqual(nextNewNode.getAttribute("data-type").split(" "), currentNewNode.getAttribute("data-type").split(" ")) &&
currentNewNode.style.color === nextNewNode.style.color &&
currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&
currentNewNode.style.textShadow === nextNewNode.style.textShadow &&
currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) {
// 合并相同的 node
nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML;
newNodes.splice(i, 1);
i--;
} else {
this.range.insertNode(newNodes[i]);
this.range.collapse(false);
}
}
if (previousElement) {
this.mergeNode(previousElement.childNodes);
}

10
app/src/protyle/wysiwyg/index.ts
View file

@ -236,6 +236,16 @@ export class WYSIWYG {
html = tempElement.innerHTML;
} else if (selectImgElement) {
html = selectImgElement.outerHTML;
} else if (selectTypes.length > 0 && range.startContainer.nodeType === 3 && range.startContainer.parentElement.tagName === "SPAN" &&
range.startContainer.parentElement.isSameNode(range.endContainer.parentElement)) {
// 复制粗体等字体中的一部分
const attributes = range.startContainer.parentElement.attributes
const spanElement = document.createElement("span");
for (let i = 0; i < attributes.length; i++) {
spanElement.setAttribute(attributes[i].name, attributes[i].value);
}
spanElement.textContent = range.toString()
html = spanElement.outerHTML;
} else {
tempElement.append(range.cloneContents());
const inlineMathElement = hasClosestByAttribute(range.commonAncestorContainer, "data-type", "inline-math");