Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-25 01:36:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ fix https://github.com/siyuan-note/insider/issues/1045

Browse source
This commit is contained in:
Vanessa 2022-09-21 11:03:32 +08:00
parent 78f79af636
commit d3878e947c
11 changed files with 77 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/constants.ts
View file

@ -182,6 +182,7 @@ export abstract class Constants {
check: {default: "⌘L", custom: "⌘L"},
table: {default: "⌘O", custom: "⌘O"},
code: {default: "⇧⌘K", custom: "⇧⌘K"},
clearFontStyle: {default: "⌘\\", custom: "⌘\\"},
},
heading: {
paragraph: {default: "⌥⌘0", custom: "⌥⌘0"},

5
app/src/protyle/gutter/index.ts
View file

@ -1358,17 +1358,16 @@ export class Gutter {
</div>`,
click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
e.style.textShadow = "";
e.style.color = "";
e.style.webkitBackgroundClip = "";
e.style.backgroundImage = "";
e.style.webkitTextFillColor = "";
e.style.webkitTextStroke = "";
e.style.textShadow = "";
e.style.backgroundColor = "";
e.style.fontSize = "";
});
}
});
// TODO 字体大小
return styles;
}

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

@ -122,12 +122,15 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
protyle.toolbar.setInlineMark(protyle, "text", "range", {type, color});
};
export const setFontStyle = (textElement:HTMLElement, textOption:ITextOption) => {
export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => {
if (textOption) {
switch (textOption.type) {
case "color":
textElement.style.color = textOption.color;
break;
case "fontSize":
textElement.style.fontSize = textOption.color;
break;
case "backgroundColor":
textElement.style.backgroundColor = textOption.color;
break;
@ -151,18 +154,21 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
let webkitTextStroke = "";
let textShadow = "";
let backgroundColor = "";
let fontSize = "";
if (currentElement.nodeType !== 3) {
color = currentElement.style.color;
webkitTextFillColor = currentElement.style.webkitTextFillColor;
webkitTextStroke = currentElement.style.webkitTextStroke;
textShadow = currentElement.style.textShadow;
backgroundColor = currentElement.style.backgroundColor;
fontSize = currentElement.style.fontSize;
}
if (textObj.type === "color") {
return textObj.color === sideElement.style.color &&
webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke &&
textShadow === sideElement.style.textShadow &&
fontSize === sideElement.style.fontSize &&
backgroundColor === sideElement.style.backgroundColor;
}
if (textObj.type === "backgroundColor") {
@ -170,6 +176,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke &&
textShadow === sideElement.style.textShadow &&
fontSize === sideElement.style.fontSize &&
textObj.color === sideElement.style.backgroundColor;
}
if (textObj.type === "style2") {
@ -177,13 +184,23 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
"transparent" === sideElement.style.webkitTextFillColor &&
"0.2px var(--b3-theme-on-background)" === sideElement.style.webkitTextStroke &&
textShadow === sideElement.style.textShadow &&
fontSize === sideElement.style.fontSize &&
backgroundColor === sideElement.style.backgroundColor;
}
if (textObj.type === "style4") {
return color === sideElement.style.color &&
webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke &&
fontSize === sideElement.style.fontSize &&
"1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" === sideElement.style.textShadow &&
backgroundColor === sideElement.style.backgroundColor;
}
if (textObj.type === "fontSize") {
return color === sideElement.style.color &&
webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke &&
textShadow === sideElement.style.textShadow &&
textObj.color === sideElement.style.fontSize &&
backgroundColor === sideElement.style.backgroundColor;
}
};

1
app/src/protyle/toolbar/InlineMemo.ts
View file

@ -66,6 +66,7 @@ export class InlineMemo extends ToolbarItem {
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.fontSize === nextNewNode.style.fontSize &&
currentNewNode.style.color === nextNewNode.style.color &&
currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&

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

@ -184,6 +184,7 @@ export class Toolbar {
case "tag":
case "u":
case "sup":
case "clear":
case "sub":
case "kbd":
menuItemObj = new ToolbarItem(protyle, menuItem);
@ -294,11 +295,15 @@ export class Toolbar {
const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined;
const newNodes: Node[] = [];
if (actionBtn?.classList.contains("protyle-toolbar__item--current") || (
action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove")
if (type === "clear" || actionBtn?.classList.contains("protyle-toolbar__item--current") || (
action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && !textObj
)) {
// 移除
if (actionBtn) {
if (type === "clear") {
this.element.querySelectorAll('[data-type="em"],[data-type="u"],[data-type="s"],[data-type="mark"],[data-type="sup"],[data-type="sub"],[data-type="strong"]').forEach(item => {
item.classList.remove("protyle-toolbar__item--current");
});
} else if (actionBtn) {
actionBtn.classList.remove("protyle-toolbar__item--current");
}
if (contents.childNodes.length === 0) {
@ -320,24 +325,34 @@ export class Toolbar {
contents.childNodes.forEach((item: HTMLElement, index) => {
if (item.nodeType !== 3 && item.tagName !== "BR") {
const types = item.getAttribute("data-type").split(" ");
types.find((itemType, index) => {
if (type === itemType) {
types.splice(index, 1);
return true;
if (type === "clear") {
for (let i = 0; i < types.length; i++) {
if (["strong", "em", "u", "s", "mark", "sup", "sub"].includes(types[i])) {
types.splice(i, 1);
i--;
}
}
});
} else {
types.find((itemType, typeIndex) => {
if (type === itemType) {
types.splice(typeIndex, 1);
return true;
}
});
}
if (types.length === 0) {
if (item.textContent === "") {
item.textContent = Constants.ZWSP;
}
newNodes.push(document.createTextNode(item.textContent));
} else {
if (textObj && textObj.type === "remove") {
if (type === "clear") {
item.style.color = "";
item.style.webkitTextFillColor = "";
item.style.webkitTextStroke = "";
item.style.textShadow = "";
item.style.backgroundColor = "";
item.style.fontSize = "";
}
if (index === 0 && previousElement && previousElement.nodeType !== 3 &&
isArrayEqual(types, previousElement.getAttribute("data-type").split(" ")) &&
@ -350,17 +365,11 @@ export class Toolbar {
nextIndex = item.textContent.length;
nextElement.innerHTML = item.innerHTML + nextElement.innerHTML;
} else {
if (item.textContent === "") {
item.textContent = Constants.ZWSP;
}
item.setAttribute("data-type", types.join(" "));
newNodes.push(item);
}
}
} else {
if (item.textContent === "") {
item.textContent = Constants.ZWSP;
}
newNodes.push(item);
}
});
@ -466,6 +475,7 @@ export class Toolbar {
currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&
currentNewNode.style.textShadow === nextNewNode.style.textShadow &&
currentNewNode.style.fontSize === nextNewNode.style.fontSize &&
currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) {
// 合并相同的 node
nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML;

26
app/src/protyle/util/Options.ts
View file

@ -80,39 +80,37 @@ export class Options {
toolbar: isMobile() ? [
"block-ref",
"a",
"text",
"|",
"strong",
"em",
"u",
"s",
"mark",
"|",
"tag",
"code",
"tag",
"inline-memo",
"inline-math",
"|",
"inline-memo",
"text",
"clear",
] : [
"block-ref",
"a",
"text",
"|",
"strong",
"em",
"u",
"s",
"mark",
"|",
"sup",
"sub",
"kbd",
"|",
"tag",
"code",
"kbd",
"tag",
"inline-memo",
"inline-math",
"|",
"inline-memo",
"text",
"clear"
],
typewriterMode: false,
upload: {
@ -236,6 +234,12 @@ export class Options {
hotkey: window.siyuan.config.keymap.editor.insert.font.custom,
icon: "iconFont",
tipPosition: "n",
}, {
name: "clear",
lang: "clearFontStyle",
hotkey: window.siyuan.config.keymap.editor.insert.clearFontStyle.custom,
icon: "iconClear",
tipPosition: "n",
}, {
name: "|",
}];