diff --git a/app/src/protyle/render/abcRender.ts b/app/src/protyle/render/abcRender.ts index e52823b25..257c5dd9d 100644 --- a/app/src/protyle/render/abcRender.ts +++ b/app/src/protyle/render/abcRender.ts @@ -4,27 +4,23 @@ import {genIconHTML} from "./util"; import {hasClosestByClassName} from "../util/hasClosest"; import {looseJsonParse} from "../../util/functions"; -const ABCJS_PARAMS_KEY = "%%params:"; +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} +// %%params JSON const getAbcParams = (abcString: string): any => { let params = { - responsive: 'resize', + 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) }; + params = looseJsonParse(firstLine.substring(ABCJS_PARAMS_KEY.length)); } catch (e) { console.error(`Failed to parse ABCJS params: ${e}`); } } - return params; }; @@ -52,8 +48,7 @@ export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => { const renderElement = e.firstElementChild.nextElementSibling as HTMLElement; renderElement.innerHTML = `${Constants.ZWSP}
`; const abcString = Lute.UnEscapeHTMLStr(e.getAttribute("data-content")); - const abcjsParams = getAbcParams(abcString) - window.ABCJS.renderAbc(renderElement.lastElementChild, abcString, abcjsParams); + window.ABCJS.renderAbc(renderElement.lastElementChild, abcString, getAbcParams(abcString)); e.setAttribute("data-render", "true"); }); });