Skip to content

Commit 274dac2

Browse files
TCOTCElroy Wang
TCOTC
authored and
Elroy Wang
committed
✨ Add plugin event bus code-languages-prepare and code-languages-change (siyuan-note#15610)
1 parent 42564fc commit 274dac2

2 files changed

Lines changed: 75 additions & 35 deletions

File tree

‎app/src/protyle/toolbar/index.ts‎

Lines changed: 73 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1226,15 +1226,24 @@ export class Toolbar {
12261226
hideElements(["hint"], protyle);
12271227
window.siyuan.menus.menu.remove();
12281228
this.range = getEditorRange(nodeElement);
1229-
let html = `<div class="b3-list-item">${window.siyuan.languages.clear}</div>`;
1230-
const hljsLanguages = Constants.ALIAS_CODE_LANGUAGES.concat(window.hljs?.listLanguages() ?? []).sort();
1229+
let html = `<div data-id="clear" class="b3-list-item">${window.siyuan.languages.clear}</div>`;
1230+
let hljsLanguages = Constants.ALIAS_CODE_LANGUAGES.concat(window.hljs?.listLanguages() ?? []).sort();
1231+
1232+
const eventDetail = { languages: hljsLanguages };
1233+
if (protyle.app && protyle.app.plugins) {
1234+
protyle.app.plugins.forEach((plugin: any) => {
1235+
plugin.eventBus.emit("code-languages-prepare", eventDetail);
1236+
});
1237+
}
1238+
1239+
hljsLanguages = eventDetail.languages;
12311240
hljsLanguages.forEach((item, index) => {
1232-
html += `<div class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
1241+
html += `<div data-id="${item}" class="b3-list-item">${item}</div>`;
12331242
});
12341243

12351244
this.subElement.style.width = "";
12361245
this.subElement.style.padding = "";
1237-
this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh">
1246+
this.subElement.innerHTML = `<div data-id="codeLanguage" class="fn__flex-column" style="max-height:50vh">
12381247
<input placeholder="${window.siyuan.languages.search}" style="margin: 0 8px 4px 8px" class="b3-text-field"/>
12391248
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
12401249
</div>`;
@@ -1260,41 +1269,47 @@ export class Toolbar {
12601269
});
12611270
inputElement.addEventListener("input", (event) => {
12621271
const lowerCaseValue = inputElement.value.toLowerCase();
1263-
const matchLanguages = hljsLanguages.filter(item => item.includes(lowerCaseValue));
1264-
let html = "";
1265-
// sort
1272+
let html = `<div data-id="clear" class="b3-list-item">${window.siyuan.languages.clear}</div>`;
12661273
let matchInput = false;
1267-
matchLanguages.sort((a, b) => {
1268-
if (a.startsWith(lowerCaseValue) && b.startsWith(lowerCaseValue)) {
1269-
if (a.length < b.length) {
1274+
if (inputElement.value.trim()) {
1275+
const matchLanguages = hljsLanguages.filter(item => item.includes(lowerCaseValue));
1276+
// sort
1277+
matchLanguages.sort((a, b) => {
1278+
if (a.startsWith(lowerCaseValue) && b.startsWith(lowerCaseValue)) {
1279+
if (a.length < b.length) {
1280+
return -1;
1281+
} else if (a.length === b.length) {
1282+
return 0;
1283+
} else {
1284+
return 1;
1285+
}
1286+
} else if (a.startsWith(lowerCaseValue)) {
12701287
return -1;
1271-
} else if (a.length === b.length) {
1272-
return 0;
1273-
} else {
1288+
} else if (b.startsWith(lowerCaseValue)) {
12741289
return 1;
1290+
} else {
1291+
return 0;
12751292
}
1276-
} else if (a.startsWith(lowerCaseValue)) {
1277-
return -1;
1278-
} else if (b.startsWith(lowerCaseValue)) {
1279-
return 1;
1280-
} else {
1281-
return 0;
1282-
}
1283-
}).forEach((item) => {
1284-
if (inputElement.value === item) {
1285-
matchInput = true;
1293+
}).forEach((item) => {
1294+
if (inputElement.value === item) {
1295+
matchInput = true;
1296+
}
1297+
html += `<div data-id="${item}" data-type="match" class="b3-list-item">${item.replace(lowerCaseValue, "<b>" + lowerCaseValue + "</b>")}</div>`;
1298+
});
1299+
if (!matchInput) {
1300+
html += `<div data-id="custom" data-type="match" class="b3-list-item"><b>${escapeHtml(inputElement.value.replace(/`| /g, "_"))}</b></div>`;
12861301
}
1287-
html += `<div class="b3-list-item">${item.replace(lowerCaseValue, "<b>" + lowerCaseValue + "</b>")}</div>`;
1288-
});
1289-
if (inputElement.value.trim() && !matchInput) {
1290-
html = `<div class="b3-list-item"><b>${escapeHtml(inputElement.value.replace(/`| /g, "_"))}</b></div>${html}`;
1302+
} else {
1303+
hljsLanguages.forEach((item, index) => {
1304+
html += `<div data-id="${item}" class="b3-list-item">${item}</div>`;
1305+
});
12911306
}
1292-
html = `<div class="b3-list-item">${window.siyuan.languages.clear}</div>` + html;
12931307
listElement.innerHTML = html;
1294-
if (listElement.childElementCount > 2 && !matchInput && inputElement.value.trim()) {
1295-
listElement.firstElementChild.nextElementSibling.nextElementSibling.classList.add("b3-list-item--focus");
1296-
} else {
1297-
listElement.firstElementChild.nextElementSibling.classList.add("b3-list-item--focus");
1308+
for (const item of listElement.children) {
1309+
if (item.getAttribute("data-id") !== "clear" && item.getBoundingClientRect().height !== 0) {
1310+
item.classList.add("b3-list-item--focus");
1311+
break;
1312+
}
12981313
}
12991314
event.stopPropagation();
13001315
});
@@ -1315,6 +1330,12 @@ export class Toolbar {
13151330
/// #else
13161331
setPosition(this.subElement, 0, 0);
13171332
/// #endif
1333+
for (const item of listElement.children) {
1334+
if (item.getBoundingClientRect().height !== 0) {
1335+
item.classList.add("b3-list-item--focus");
1336+
break;
1337+
}
1338+
}
13181339
this.element.classList.add("fn__none");
13191340
inputElement.select();
13201341
}
@@ -1744,15 +1765,33 @@ ${item.name}
17441765
}
17451766
}
17461767

1747-
private updateLanguage(languageElement: HTMLElement[], protyle: IProtyle, selectedLang: string) {
1768+
private updateLanguage(languageElements: HTMLElement[], protyle: IProtyle, selectedLang: string) {
17481769
const currentLang = selectedLang === window.siyuan.languages.clear ? "" : selectedLang;
1770+
1771+
if (protyle.app && protyle.app.plugins) {
1772+
const languageChanges = languageElements.map(element => {
1773+
return {
1774+
oldLanguage: element.textContent || "",
1775+
languageElement: element
1776+
};
1777+
});
1778+
const eventDetail = {
1779+
language: currentLang,
1780+
languageChanges: languageChanges,
1781+
protyle: protyle
1782+
};
1783+
protyle.app.plugins.forEach((plugin: any) => {
1784+
plugin.eventBus.emit("code-languages-change", eventDetail);
1785+
});
1786+
}
1787+
17491788
if (!Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(currentLang)) {
17501789
window.siyuan.storage[Constants.LOCAL_CODELANG] = currentLang;
17511790
setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
17521791
}
17531792
const doOperations: IOperation[] = [];
17541793
const undoOperations: IOperation[] = [];
1755-
languageElement.forEach(item => {
1794+
languageElements.forEach(item => {
17561795
const nodeElement = hasClosestBlock(item);
17571796
if (nodeElement) {
17581797
const id = nodeElement.getAttribute("data-node-id");

‎app/src/types/index.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@ type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |
8585
"switch-protyle" | "switch-protyle-mode" |
8686
"destroy-protyle" |
8787
"lock-screen" |
88-
"mobile-keyboard-show" | "mobile-keyboard-hide"
88+
"mobile-keyboard-show" | "mobile-keyboard-hide" |
89+
"code-languages-prepare" | "code-languages-change"
8990
type TAVView = "table" | "gallery"
9091
type TAVCol =
9192
"text"

0 commit comments

Comments
 (0)