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

Allow users to specify abcjsParams (#11162)

Browse source 
* Allow users to specify abcjsParams

* Use looseJsonParse and %%params
This commit is contained in:
Clegs 2024-04-27 01:20:51 -07:00 • committed by GitHub
parent 28a5712513
commit d9dedb5786
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,31 @@ import {addScript} from "../util/addScript";
import {Constants} from "../../constants";
import {genIconHTML} from "./util";
import {hasClosestByClassName} from "../util/hasClosest";
import {looseJsonParse} from "../../util/functions";
const ABCJS_PARAMS_KEY = "%%params:";
// Read the abcjsParams from the content if it exists.
// The params *must* be the first line of the content in the form:
// %%abcjsParams: {JSON}
const getAbcParams = (abcString: string): any => {
let params = {
responsive: 'resize',
};
const firstLine = abcString.substring(0, abcString.indexOf("\n"));
if (firstLine.startsWith(ABCJS_PARAMS_KEY)) {
try {
const jsonString = firstLine.substring(ABCJS_PARAMS_KEY.length);
params = { ...params, ...looseJsonParse(jsonString) };
} catch (e) {
console.error(`Failed to parse ABCJS params: ${e}`);
}
}
return params;
};
export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
let abcElements: Element[] = [];
@ -26,9 +51,9 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
}
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>`;
window.ABCJS.renderAbc(renderElement.lastElementChild, Lute.UnEscapeHTMLStr(e.getAttribute("data-content")), {
responsive: "resize"
});
const abcString = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
const abcjsParams = getAbcParams(abcString)
window.ABCJS.renderAbc(renderElement.lastElementChild, abcString, abcjsParams);
e.setAttribute("data-render", "true");
});
});