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-14 11:17:41 +08:00
parent 1312c0a597
commit 97dddca56d
3 changed files with 30 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/src/protyle/toolbar/Font.ts
View file

@ -120,26 +120,28 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
color = fontStyles[1];
}
}
protyle.toolbar.setInlineMark(protyle, "text", "add", true);
protyle.toolbar.setInlineMark(protyle, "text", "add", {type, color});
const range = protyle.toolbar.range;
const fontElement = hasClosestByMatchTag(range.startContainer, "STRONG");
if (!fontElement) {
const textElement = hasClosestByMatchTag(range.startContainer, "SPAN");
if (!textElement) {
return;
}
const nodeElement = hasClosestBlock(fontElement);
const nodeElement = hasClosestBlock(textElement);
if (!nodeElement) {
return;
}
fontElement.insertAdjacentHTML("beforeend", "<wbr>");
textElement.insertAdjacentHTML("beforeend", "<wbr>");
const html = nodeElement.outerHTML;
if (type === "remove") {
fontElement.style.color = "";
fontElement.style.webkitTextFillColor = "";
fontElement.style.webkitTextStroke = "";
fontElement.style.textShadow = "";
fontElement.style.backgroundColor = "";
const textNode = document.createTextNode(fontElement.textContent);
fontElement.parentElement.replaceChild(textNode, fontElement);
textElement.style.color = "";
textElement.style.webkitTextFillColor = "";
textElement.style.webkitTextStroke = "";
textElement.style.textShadow = "";
textElement.style.backgroundColor = "";
const textNode = document.createTextNode(textElement.textContent);
textElement.parentElement.replaceChild(textNode, textElement);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
const wbrElement = nodeElement.querySelector("wbr");
if (wbrElement) {
@ -153,20 +155,20 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
switch (type) {
case "color":
fontElement.style.color = color;
textElement.style.color = color;
break;
case "backgroundColor":
fontElement.style.backgroundColor = color;
textElement.style.backgroundColor = color;
break;
case "style2":
fontElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
fontElement.style.webkitTextFillColor = "transparent";
textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
textElement.style.webkitTextFillColor = "transparent";
break;
case "style4":
fontElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
break;
}
fontElement.setAttribute("style", fontElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip"));
textElement.setAttribute("style", textElement.getAttribute("style").replace(" background-clip", " -webkit-background-clip"));
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
const wbrElement = nodeElement.querySelector("wbr");
if (wbrElement) {

2
app/src/protyle/toolbar/ToolbarItem.ts
View file

@ -12,7 +12,7 @@ export class ToolbarItem {
this.element.setAttribute("data-type", menuItem.name);
this.element.setAttribute("aria-label", tip + hotkey);
this.element.innerHTML = `<svg><use xlink:href="#${menuItem.icon}"></use></svg>`;
if (menuItem.name === "font" || menuItem.name === "blockRef" || menuItem.name === "link") {
if (menuItem.name === "text" || menuItem.name === "block-ref" || menuItem.name === "a") {
return;
}
this.element.addEventListener(getEventName(), (event) => {

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

@ -231,7 +231,7 @@ export class Toolbar {
});
}
public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", focusAdd = false) {
public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: {color?: string, type?:string}) {
const nodeElement = hasClosestBlock(this.range.startContainer);
if (!nodeElement) {
return;
@ -292,11 +292,7 @@ export class Toolbar {
if (actionBtn) {
actionBtn.classList.remove("protyle-toolbar__item--current");
}
let removeIndex = 0
contents.childNodes.forEach((item: HTMLElement, index) => {
if (item.tagName === "WBR") {
return;
}
if (item.nodeType !== 3) {
const types = item.getAttribute("data-type").split(" ");
types.find((itemType, index) => {
@ -305,11 +301,10 @@ export class Toolbar {
return true
}
})
if (types.length === 0) {
newNodes.push(document.createTextNode(item.textContent));
} else {
if (removeIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
previousIndex = previousElement.textContent.length;
previousElement.innerHTML = previousElement.innerHTML + item.innerHTML;
} else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) {
@ -323,16 +318,14 @@ export class Toolbar {
} else {
newNodes.push(item);
}
removeIndex++
});
} else {
if (!this.element.classList.contains("fn__none")) {
if (!this.element.classList.contains("fn__none") && type !== "text") {
this.element.querySelector(`[data-type="${type}"]`).classList.add("protyle-toolbar__item--current");
}
let addIndex = 0
contents.childNodes.forEach((item: HTMLElement, index) => {
if (item.nodeType === 3) {
if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) {
if (index === 0 && previousElement && previousElement.nodeType !== 3 && type === previousElement.getAttribute("data-type")) {
previousIndex = previousElement.textContent.length;
previousElement.innerHTML = previousElement.innerHTML + item.textContent;
} else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && type === nextElement.getAttribute("data-type")) {
@ -344,12 +337,11 @@ export class Toolbar {
inlineElement.textContent = item.textContent;
newNodes.push(inlineElement);
}
addIndex++;
} else {
let types = (item.getAttribute("data-type") || "").split(" ");
types.push(type);
types = [...new Set(types)]
if (addIndex === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
if (index === 0 && previousElement && previousElement.nodeType !== 3 && isArrayEqual(types, previousElement.getAttribute("data-type").split(" "))) {
previousIndex = previousElement.textContent.length;
previousElement.innerHTML = previousElement.innerHTML + item.innerHTML;
} else if (index === contents.childNodes.length - 1 && nextElement && nextElement.nodeType !== 3 && isArrayEqual(types, nextElement.getAttribute("data-type").split(" "))) {
@ -359,7 +351,6 @@ export class Toolbar {
item.setAttribute("data-type", types.join(" "));
newNodes.push(item);
}
addIndex++;
}
});
}
@ -411,10 +402,10 @@ export class Toolbar {
return;
}
// 对已有字体样式的文字再次添加字体样式
if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 &&
this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) {
return;
}
// if (focusAdd && action === "add" && types.includes("text") && this.range.startContainer.nodeType === 3 &&
// this.range.startContainer.parentNode.isSameNode(this.range.endContainer.parentNode)) {
// return;
// }
let startElement = this.range.startContainer as Element;
if (this.range.startContainer.nodeType === 3) {
startElement = this.range.startContainer.parentElement;