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 19:08:24 +08:00
parent 69253684bd
commit 960626b42d
3 changed files with 39 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,57 +120,25 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
color = fontStyles[1];
}
}
protyle.toolbar.setInlineMark(protyle, "text", "add", {type, color});
const range = protyle.toolbar.range;
const textElement = hasClosestByMatchTag(range.startContainer, "SPAN");
if (!textElement) {
return;
}
const nodeElement = hasClosestBlock(textElement);
if (!nodeElement) {
return;
}
textElement.insertAdjacentHTML("beforeend", "<wbr>");
const html = nodeElement.outerHTML;
if (type === "remove") {
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) {
wbrElement.remove();
}
range.setStart(textNode, 0);
range.setEnd(textNode, textNode.textContent.length);
focusByRange(range);
return;
}
switch (type) {
case "color":
textElement.style.color = color;
break;
case "backgroundColor":
textElement.style.backgroundColor = color;
break;
case "style2":
textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
textElement.style.webkitTextFillColor = "transparent";
break;
case "style4":
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;
}
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
const wbrElement = nodeElement.querySelector("wbr");
if (wbrElement) {
wbrElement.remove();
}
protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color});
};
export const setFontStyle = (textElement:HTMLElement, textOption:ITextOption) => {
if (textOption) {
switch (textOption.type) {
case "color":
textElement.style.color = textOption.color;
break;
case "backgroundColor":
textElement.style.backgroundColor = textOption.color;
break;
case "style2":
textElement.style.webkitTextStroke = "0.2px var(--b3-theme-on-background)";
textElement.style.webkitTextFillColor = "transparent";
break;
case "style4":
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;
}
}
}

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

@ -1,5 +1,5 @@
import {Divider} from "./Divider";
import {Font} from "./Font";
import {Font, setFontStyle} from "./Font";
import {ToolbarItem} from "./ToolbarItem";
import {
focusByRange,
@ -231,7 +231,7 @@ export class Toolbar {
});
}
private hasSameStyle(currentElement: HTMLElement, sideElement: HTMLElement, textObj?: { color?: string, type?: string }) {
private hasSameStyle(currentElement: HTMLElement, sideElement: HTMLElement, textObj: ITextOption) {
if (!textObj) {
return true;
}
@ -277,7 +277,7 @@ export class Toolbar {
}
}
public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: { color?: string, type?: string }) {
public setInlineMark(protyle: IProtyle, type: string, action: "remove" | "add" | "range" | "toolbar", textObj?: ITextOption) {
const nodeElement = hasClosestBlock(this.range.startContainer);
if (!nodeElement) {
return;
@ -334,7 +334,7 @@ export class Toolbar {
const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined;
const newNodes: Node[] = [];
if (action === "remove" || actionBtn?.classList.contains("protyle-toolbar__item--current") ||
(action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type))) {
(action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove"))) {
// 移除
if (actionBtn) {
actionBtn.classList.remove("protyle-toolbar__item--current");
@ -351,6 +351,13 @@ export class Toolbar {
if (types.length === 0) {
newNodes.push(document.createTextNode(item.textContent));
} else {
if (textObj && textObj.type === "remove") {
item.style.color = "";
item.style.webkitTextFillColor = "";
item.style.webkitTextStroke = "";
item.style.textShadow = "";
item.style.backgroundColor = "";
}
if (index === 0 && previousElement && previousElement.nodeType !== 3 &&
isArrayEqual(types, previousElement.getAttribute("data-type").split(" ")) &&
this.hasSameStyle(item, previousElement, textObj)) {
@ -391,6 +398,7 @@ export class Toolbar {
const inlineElement = document.createElement("span");
inlineElement.setAttribute("data-type", type);
inlineElement.textContent = item.textContent;
setFontStyle(inlineElement, textObj);
newNodes.push(inlineElement);
}
} else {
@ -409,6 +417,7 @@ export class Toolbar {
nextElement.innerHTML = item.innerHTML + nextElement.innerHTML;
} else {
item.setAttribute("data-type", types.join(" "));
setFontStyle(item, textObj);
newNodes.push(item);
}
}

5
app/src/types/index.d.ts vendored
View file

@ -30,6 +30,11 @@ interface Window {
goBack(): void
}
interface ITextOption {
color: string,
type: string
}
interface IInbox {
oId: string
shorthandContent: string