Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-17 07:00:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ Add plugin event bus code-languages-prepare and code-languages-change (#15610)

Browse source
This commit is contained in:
Jeffrey Chen 2025-08-28 16:37:54 +08:00 • committed by GitHub
parent ff4d215f78
commit f0f15673f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 76 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1226,15 +1226,24 @@ export class Toolbar {
hideElements(["hint"], protyle); hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
this.range = getEditorRange(nodeElement); this.range = getEditorRange(nodeElement);
let html = `<div class="b3-list-item">${window.siyuan.languages.clear}</div>`; let html = `<div data-id="clear" class="b3-list-item">${window.siyuan.languages.clear}</div>`;
const hljsLanguages = Constants.ALIAS_CODE_LANGUAGES.concat(window.hljs?.listLanguages() ?? []).sort(); let hljsLanguages = Constants.ALIAS_CODE_LANGUAGES.concat(window.hljs?.listLanguages() ?? []).sort();
const eventDetail = { languages: hljsLanguages };
if (protyle.app && protyle.app.plugins) {
protyle.app.plugins.forEach((plugin: any) => {
plugin.eventBus.emit("code-languages-prepare", eventDetail);
});
}
hljsLanguages = eventDetail.languages;
hljsLanguages.forEach((item, index) => { hljsLanguages.forEach((item, index) => {
html += `<div class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`; html += `<div data-id="${item}" class="b3-list-item">${item}</div>`;
}); });
this.subElement.style.width = ""; this.subElement.style.width = "";
this.subElement.style.padding = ""; this.subElement.style.padding = "";
this.subElement.innerHTML = `<div class="fn__flex-column" style="max-height:50vh"> this.subElement.innerHTML = `<div data-id="codeLanguage" class="fn__flex-column" style="max-height:50vh">
<input placeholder="${window.siyuan.languages.search}" style="margin: 0 8px 4px 8px" class="b3-text-field"/> <input placeholder="${window.siyuan.languages.search}" style="margin: 0 8px 4px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div> <div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
</div>`; </div>`;
@ -1260,10 +1269,11 @@ export class Toolbar {
}); });
inputElement.addEventListener("input", (event) => { inputElement.addEventListener("input", (event) => {
const lowerCaseValue = inputElement.value.toLowerCase(); const lowerCaseValue = inputElement.value.toLowerCase();
const matchLanguages = hljsLanguages.filter(item => item.includes(lowerCaseValue)); let html = `<div data-id="clear" class="b3-list-item">${window.siyuan.languages.clear}</div>`;
let html = "";
// sort
let matchInput = false; let matchInput = false;
if (inputElement.value.trim()) {
const matchLanguages = hljsLanguages.filter(item => item.includes(lowerCaseValue));
// sort
matchLanguages.sort((a, b) => { matchLanguages.sort((a, b) => {
if (a.startsWith(lowerCaseValue) && b.startsWith(lowerCaseValue)) { if (a.startsWith(lowerCaseValue) && b.startsWith(lowerCaseValue)) {
if (a.length < b.length) { if (a.length < b.length) {
@ -1284,17 +1294,22 @@ export class Toolbar {
if (inputElement.value === item) { if (inputElement.value === item) {
matchInput = true; matchInput = true;
} }
html += `<div class="b3-list-item">${item.replace(lowerCaseValue, "<b>" + lowerCaseValue + "</b>")}</div>`; html += `<div data-id="${item}" data-type="match" class="b3-list-item">${item.replace(lowerCaseValue, "<b>" + lowerCaseValue + "</b>")}</div>`;
}); });
if (inputElement.value.trim() && !matchInput) { if (!matchInput) {
html = `<div class="b3-list-item"><b>${escapeHtml(inputElement.value.replace(/`| /g, "_"))}</b></div>${html}`; html += `<div data-id="custom" data-type="match" class="b3-list-item"><b>${escapeHtml(inputElement.value.replace(/`| /g, "_"))}</b></div>`;
} }
html = `<div class="b3-list-item">${window.siyuan.languages.clear}</div>` + html;
listElement.innerHTML = html;
if (listElement.childElementCount > 2 && !matchInput && inputElement.value.trim()) {
listElement.firstElementChild.nextElementSibling.nextElementSibling.classList.add("b3-list-item--focus");
} else { } else {
listElement.firstElementChild.nextElementSibling.classList.add("b3-list-item--focus"); hljsLanguages.forEach((item, index) => {
html += `<div data-id="${item}" class="b3-list-item">${item}</div>`;
});
}
listElement.innerHTML = html;
for (const item of listElement.children) {
if (item.getAttribute("data-id") !== "clear" && item.getBoundingClientRect().height !== 0) {
item.classList.add("b3-list-item--focus");
break;
}
} }
event.stopPropagation(); event.stopPropagation();
}); });
@ -1315,6 +1330,12 @@ export class Toolbar {
/// #else /// #else
setPosition(this.subElement, 0, 0); setPosition(this.subElement, 0, 0);
/// #endif /// #endif
for (const item of listElement.children) {
if (item.getBoundingClientRect().height !== 0) {
item.classList.add("b3-list-item--focus");
break;
}
}
this.element.classList.add("fn__none"); this.element.classList.add("fn__none");
inputElement.select(); inputElement.select();
} }
@ -1744,15 +1765,33 @@ ${item.name}
} }
} }
private updateLanguage(languageElement: HTMLElement[], protyle: IProtyle, selectedLang: string) { private updateLanguage(languageElements: HTMLElement[], protyle: IProtyle, selectedLang: string) {
const currentLang = selectedLang === window.siyuan.languages.clear ? "" : selectedLang; const currentLang = selectedLang === window.siyuan.languages.clear ? "" : selectedLang;
if (protyle.app && protyle.app.plugins) {
const languageChanges = languageElements.map(element => {
return {
oldLanguage: element.textContent || "",
languageElement: element
};
});
const eventDetail = {
language: currentLang,
languageChanges: languageChanges,
protyle: protyle
};
protyle.app.plugins.forEach((plugin: any) => {
plugin.eventBus.emit("code-languages-change", eventDetail);
});
}
if (!Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(currentLang)) { if (!Constants.SIYUAN_RENDER_CODE_LANGUAGES.includes(currentLang)) {
window.siyuan.storage[Constants.LOCAL_CODELANG] = currentLang; window.siyuan.storage[Constants.LOCAL_CODELANG] = currentLang;
setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]); setStorageVal(Constants.LOCAL_CODELANG, window.siyuan.storage[Constants.LOCAL_CODELANG]);
} }
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
languageElement.forEach(item => { languageElements.forEach(item => {
const nodeElement = hasClosestBlock(item); const nodeElement = hasClosestBlock(item);
if (nodeElement) { if (nodeElement) {
const id = nodeElement.getAttribute("data-node-id"); const id = nodeElement.getAttribute("data-node-id");

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

@ -85,7 +85,8 @@ type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |
"switch-protyle" | "switch-protyle-mode" | "switch-protyle" | "switch-protyle-mode" |
"destroy-protyle" | "destroy-protyle" |
"lock-screen" | "lock-screen" |
"mobile-keyboard-show" | "mobile-keyboard-hide" "mobile-keyboard-show" | "mobile-keyboard-hide" |
"code-languages-prepare" | "code-languages-change"
type TAVView = "table" | "gallery" type TAVView = "table" | "gallery"
type TAVCol = type TAVCol =
"text" "text"