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

🎨 https://github.com/siyuan-note/siyuan/issues/16051

Browse source
This commit is contained in:
Vanessa 2025-12-08 10:49:03 +08:00
parent cb58c643fc
commit b1585ed4f3
4 changed files with 109 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/src/assets/scss/component/_typography.scss
View file

@ -161,20 +161,20 @@
display: flex;
flex-direction: column;
&[data-subtype="NOTE"] {
&::before {
background-color: var(--b3-theme-primary);
}
// NOTE
&::before {
background-color: var(--b3-theme-primary);
}
.callout-info {
color: var(--b3-theme-primary);
}
.callout-info {
color: var(--b3-theme-primary);
}
&[data-subtype="WARNING"] {
&::before {
background-color: var(--b3-callout-warning);
}
.callout-info {
color: var(--b3-callout-warning);
}
@ -184,6 +184,7 @@
&::before {
background-color: var(--b3-theme-success);
}
.callout-info {
color: var(--b3-theme-success);
}
@ -193,6 +194,7 @@
&::before {
background-color: var(--b3-callout-important);
}
.callout-info {
color: var(--b3-callout-important);
}
@ -202,6 +204,7 @@
&::before {
background-color: var(--b3-theme-error);
}
.callout-info {
color: var(--b3-theme-error);
}
@ -229,6 +232,8 @@
margin-left: 8px;
font-weight: 500;
font-size: 114%;
opacity: .86;
transition: var(--b3-color-transition);
}
}

8
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -793,6 +793,14 @@
background-color: var(--b3-list-hover);
}
}
.callout-title {
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
.protyle-wysiwyg:not([contenteditable]),

80
app/src/protyle/wysiwyg/callout.ts Normal file
View file

@ -0,0 +1,80 @@
import {hasClosestBlock} from "../util/hasClosest";
import {updateTransaction} from "./transaction";
import {focusBlock} from "../util/selection";
import {Dialog} from "../../dialog";
import {escapeHtml} from "../../util/escape";
import {Menu} from "../../plugin/Menu";
export const updateCalloutType = (titleElement: HTMLElement, protyle: IProtyle) => {
const blockElement = hasClosestBlock(titleElement);
if (!blockElement) {
return;
}
const dialog = new Dialog({
title: window.siyuan.languages.callout,
content: `<div class="b3-dialog__content">
<label class="fn__flex">
<div class="fn__flex-center">
${window.siyuan.languages.type}
</div>
<span class="fn__space"></span>
<div class="b3-form__icona fn__flex-1">
<input value="${blockElement.getAttribute("data-subtype")}" type="text" class="b3-text-field fn__block b3-form__icona-input">
<svg class="b3-form__icona-icon"><use xlink:href="#iconDown"></use></svg>
</div>
</label>
<div class="fn__hr"></div>
<label class="fn__flex">
<div class="fn__flex-center">
${window.siyuan.languages.title}
</div>
<span class="fn__space"></span>
<input class="b3-text-field fn__flex-1" value="${titleElement.textContent}" type="text">
</label>
</div>`,
width: "520px",
destroyCallback() {
const oldHTML = blockElement.outerHTML;
blockElement.setAttribute("data-subtype", textElements[0].value.trim());
titleElement.textContent = escapeHtml(textElements[1].value);
if (updateIcon) {
blockElement.querySelector(".callout-icon").textContent = updateIcon;
}
updateTransaction(protyle, blockElement.getAttribute("data-node-id"), blockElement.outerHTML, oldHTML);
focusBlock(blockElement);
}
});
const textElements: NodeListOf<HTMLInputElement> = dialog.element.querySelectorAll(".b3-text-field");
let updateIcon = "";
dialog.element.querySelector(".b3-form__icona-icon").addEventListener("click", (event) => {
const menu = new Menu();
[{
icon: "✏️", type: "NOTE"
}, {
icon: "💡", type: "TIP"
}, {
icon: "❗", type: "IMPORTANT"
}, {
icon: "⚠️", type: "WARNING"
}, {
icon: "🚨", type: "CAUTION"
}].forEach(item => {
menu.addItem({
iconHTML: `<span class="b3-menu__icon">${item.icon}</span>`,
label: item.type,
click() {
textElements[0].value = item.type;
textElements[1].value = item.type;
updateIcon = item.icon;
}
});
});
const inputRect = textElements[0].getBoundingClientRect();
menu.open({
x: inputRect.left,
y: inputRect.bottom
});
event.stopPropagation();
event.preventDefault();
});
};

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

@ -101,6 +101,7 @@ import {hideTooltip} from "../../dialog/tooltip";
import {openGalleryItemMenu} from "../render/av/gallery/util";
import {clearSelect} from "../util/clear";
import {chartRender} from "../render/chartRender";
import {updateCalloutType} from "./callout";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
@ -3036,6 +3037,13 @@ export class WYSIWYG {
return;
}
const calloutTitleElement = hasTopClosestByClassName(event.target, "callout-title");
if (!protyle.disabled && !event.shiftKey && !ctrlIsPressed && calloutTitleElement) {
updateCalloutType(calloutTitleElement, protyle);
event.preventDefault();
event.stopPropagation();
return;
}
const calloutIconElement = hasTopClosestByClassName(event.target, "callout-icon");
if (!protyle.disabled && !event.shiftKey && !ctrlIsPressed && calloutIconElement) {
const nodeElement = hasClosestBlock(calloutIconElement);
@ -3059,7 +3067,7 @@ export class WYSIWYG {
calloutIconElement.innerHTML = emojiHTML;
hideElements(["dialog"]);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML);
focusByWbr(nodeElement, range);
focusBlock(nodeElement);
}, calloutIconElement.querySelector("img"));
}
event.preventDefault();