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

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

Browse source
This commit is contained in:
Vanessa 2024-02-25 22:27:59 +08:00
parent 15e5840a88
commit 5b3499101e
13 changed files with 65 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -259,7 +259,7 @@
display: inline-block !important;
position: absolute !important;
width: 1px !important;
right: 0 !important;
right: 6px !important;
outline: 0 !important;
background: 0 0 !important;
text-decoration: initial !important;
@ -487,6 +487,10 @@
right: 4px;
top: 4px;
display: flex;
&--show {
opacity: .86;
}
}
&-icon {

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

@ -243,6 +243,10 @@
&.render-node {
min-height: 32px;
&:hover > .protyle-icons {
opacity: .86;
}
&[data-type="NodeBlockQueryEmbed"] {
background-color: var(--b3-theme-surface);
border-left: 1px dashed var(--b3-theme-surface-lighter);
@ -616,23 +620,19 @@
}
}
.img:hover .protyle-icons,
.render-node:hover > .protyle-icons,
.protyle-icons--show {
.img:hover .protyle-icons {
opacity: .86;
}
.render-node .img:hover .protyle-icons,
.render-node .render-node:hover > .protyle-icons {
opacity: 0;
}
}
// https://ld246.com/article/1708826665603
.protyle-wysiwyg[contenteditable="false"] {
.img:hover .protyle-icons,
.render-node:hover > .protyle-icons,
.protyle-icons--show {
display: none;
}
}
.protyle-wysiwyg:not([custom-sy-readonly]),
.protyle-wysiwyg[custom-sy-readonly="true"] {
.img:hover .protyle-icons {
display: none;
}
}

4
app/src/boot/globalEvent/event.ts
View file

@ -8,7 +8,7 @@ import {Constants} from "../../constants";
import {isIPad} from "../../protyle/util/compatibility";
import {globalTouchEnd, globalTouchStart} from "./touch";
import {initDockMenu} from "../../menus/dock";
import {hasClosestByAttribute, hasClosestByClassName} from "../../protyle/util/hasClosest";
import {hasClosestByAttribute, hasClosestByClassName, hasTopClosestByAttribute} from "../../protyle/util/hasClosest";
import {initTabMenu} from "../../menus/tab";
import {getInstanceById} from "../../layout/util";
import {Tab} from "../../layout/Tab";
@ -85,7 +85,7 @@ export const initWindowEvent = (app: App) => {
}
return;
}
const embedBlockElement = hasClosestByAttribute(target, "data-type", "NodeBlockQueryEmbed");
const embedBlockElement = hasTopClosestByAttribute(target, "data-type", "NodeBlockQueryEmbed");
if (embedBlockElement) {
embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show");
return;

6
app/src/protyle/render/abcRender.ts
View file

@ -1,6 +1,7 @@
import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
import {hasClosestByClassName} from "../util/hasClosest";
export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let abcElements: Element[] = [];
@ -15,12 +16,13 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
}
if (abcElements.length > 0) {
addScript(`${cdn}/js/abcjs/abcjs-basic-min.js?v=6.2.2`, "protyleAbcjsScript").then(() => {
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true)
abcElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if(!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML());
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"></div>`;

1
app/src/protyle/render/av/rollup.ts
View file

@ -72,7 +72,6 @@ const genSearchList = (element: Element, keyword: string, avId: string, isRelati
response.data.keys.forEach((item: IAVColumn, index: number) => {
html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}" data-col-id="${item.id}" ${isRelation ? `data-target-av-id="${item.relation.avID}"` : `data-col-type="${item.type}"`}>
${item.icon ? unicode2Emoji(item.icon, "b3-list-item__graphic", true) : `<svg class="b3-list-item__graphic"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
${genIconHTML()}
<span class="b3-list-item__text">${escapeHtml(item.name || window.siyuan.languages.title)}</span>
</div>`;
});

3
app/src/protyle/render/chartRender.ts
View file

@ -30,12 +30,13 @@ export const chartRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
});
}
}
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true)
echartsElements.forEach(async (e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML());
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

5
app/src/protyle/render/flowchartRender.ts
View file

@ -1,6 +1,6 @@
import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {hasClosestByAttribute} from "../util/hasClosest";
import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
import {genIconHTML} from "./util";
declare const flowchart: {
@ -36,12 +36,13 @@ export const flowchartRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
};
const initFlowchart = (flowchartElements: Element[]) => {
const wysiswgElement = hasClosestByClassName(flowchartElements[0], "protyle-wysiwyg", true)
flowchartElements.forEach((item: HTMLElement) => {
if (item.getAttribute("data-render") === "true") {
return;
}
if (!item.firstElementChild.classList.contains("protyle-icons")) {
item.insertAdjacentHTML("afterbegin", genIconHTML());
item.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = item.firstElementChild.nextElementSibling;
renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" contenteditable="false"></div>`;

4
app/src/protyle/render/graphvizRender.ts
View file

@ -1,6 +1,7 @@
import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
import {hasClosestByClassName} from "../util/hasClosest";
export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let graphvizElements: Element[] = [];
@ -14,12 +15,13 @@ export const graphvizRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
return;
}
addScript(`${cdn}/js/graphviz/viz.js?v=0.0.0`, "protyleGraphVizScript").then(() => {
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true)
graphvizElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML());
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

9
app/src/protyle/render/mermaidRender.ts
View file

@ -1,6 +1,7 @@
import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {hasClosestByAttribute} from "../util/hasClosest";
import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
import {genIconHTML} from "./util";
export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let mermaidElements: Element[] = [];
@ -56,15 +57,13 @@ export const mermaidRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
};
const initMermaid = (mermaidElements: Element[]) => {
const wysiswgElement = hasClosestByClassName(mermaidElements[0], "protyle-wysiwyg", true)
mermaidElements.forEach(async (item: HTMLElement) => {
if (item.getAttribute("data-render") === "true") {
return;
}
if (!item.firstElementChild.classList.contains("protyle-icons")) {
item.insertAdjacentHTML("afterbegin", `<div class="protyle-icons">
<span aria-label="${window.siyuan.languages.edit}" class="b3-tooltips__sw b3-tooltips protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__sw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>`);
item.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = item.firstElementChild.nextElementSibling as HTMLElement;
const id = "mermaid" + Lute.NewNodeID();

3
app/src/protyle/render/mindmapRender.ts
View file

@ -27,12 +27,13 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
});
}
}
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true)
mindmapElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML());
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

4
app/src/protyle/render/plantumlRender.ts
View file

@ -1,6 +1,7 @@
import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
import {hasClosestByClassName} from "../util/hasClosest";
export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let plantumlElements: Element[] = [];
@ -14,12 +15,13 @@ export const plantumlRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
return;
}
addScript(`${cdn}/js/plantuml/plantuml-encoder.min.js?v=0.0.0`, "protylePlantumlScript").then(() => {
const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true)
plantumlElements.forEach((e: HTMLDivElement) => {
if (e.getAttribute("data-render") === "true") {
return;
}
if (!e.firstElementChild.classList.contains("protyle-icons")) {
e.insertAdjacentHTML("afterbegin", genIconHTML());
e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
}
const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
try {

15
app/src/protyle/render/util.ts
View file

@ -1,6 +1,15 @@
export const genIconHTML = () => {
export const genIconHTML = (element?: false|HTMLElement) => {
let enable = true;
if (element) {
const readonly = element.getAttribute("custom-sy-readonly");
if (typeof readonly === "string") {
enable = element.getAttribute("custom-sy-readonly") === "false";
} else {
return '<div class="protyle-icons"></div>';
}
}
return `<div class="protyle-icons">
<span aria-label="${window.siyuan.languages.edit}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
<span aria-label="${window.siyuan.languages.edit}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--first protyle-action__edit${enable ? "" : " fn__none"}"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last${enable ? "" : " protyle-icon--first"}"><svg><use xlink:href="#iconMore"></use></svg></span>
</div>`;
};

13
app/src/protyle/util/onGet.ts
View file

@ -296,6 +296,12 @@ export const disabledProtyle = (protyle: IProtyle) => {
protyle.wysiwyg.element.querySelectorAll(".protyle-icons--show").forEach(item => {
item.classList.remove("protyle-icons--show");
});
protyle.wysiwyg.element.querySelectorAll(".render-node .protyle-action__edit").forEach(item => {
item.classList.add("fn__none");
if (item.classList.contains("protyle-icon--first")) {
item.nextElementSibling?.classList.add("protyle-icon--first")
}
});
protyle.wysiwyg.element.style.userSelect = "text";
protyle.wysiwyg.element.setAttribute("contenteditable", "false");
protyle.wysiwyg.element.querySelectorAll('[contenteditable="true"][spellcheck]').forEach(item => {
@ -347,6 +353,13 @@ export const enableProtyle = (protyle: IProtyle) => {
if (protyle.background) {
protyle.background.element.classList.add("protyle-background--enable");
}
protyle.wysiwyg.element.querySelectorAll(".render-node .protyle-action__edit").forEach(item => {
item.classList.remove("fn__none");
if (item.classList.contains("protyle-icon--first")) {
item.nextElementSibling?.classList.remove("protyle-icon--first")
}
});
protyle.wysiwyg.element.querySelectorAll('[contenteditable="false"][spellcheck]').forEach(item => {
if (!hasClosestByClassName(item, "protyle-wysiwyg__embed")) {
item.setAttribute("contenteditable", "true");