diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts index c7ab4ff91..e52823b25 100644 --- a/app/src/protyle/render/abcRender.ts +++ b/app/src/protyle/render/abcRender.ts @@ -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 = `${Constants.ZWSP}
`; - 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"); }); });