onedeuxtriseigo.nullpo.dev
A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang. (PERSONAL FORK)
1import {addScript} from "../util/addScript";
2import {Constants} from "../../constants";
3import {genIconHTML} from "./util";
4import {hasClosestByClassName} from "../util/hasClosest";
5import {looseJsonParse} from "../../util/functions";
6
7const ABCJS_PARAMS_KEY = "%%params";
8
9// Read the abcjsParams from the content if it exists.
10// The params *must* be the first line of the content in the form:
11// %%params JSON
12const getAbcParams = (abcString: string): any => {
13 let params = {
14 responsive: "resize",
15 };
16 const firstLine = abcString.substring(0, abcString.indexOf("\n"));
17 if (firstLine.startsWith(ABCJS_PARAMS_KEY)) {
18 try {
19 params = looseJsonParse(firstLine.substring(ABCJS_PARAMS_KEY.length));
20 } catch (e) {
21 console.error(`Failed to parse ABCJS params: ${e}`);
22 }
23 }
24 return params;
25};
26
27export const abcRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
28 let abcElements: Element[] = [];
29 if (element.getAttribute("data-subtype") === "abc") {
30 // 编辑器内代码块编辑渲染
31 abcElements = [element];
32 } else {
33 abcElements = Array.from(element.querySelectorAll('[data-subtype="abc"]'));
34 }
35 if (abcElements.length === 0) {
36 return;
37 }
38 if (abcElements.length > 0) {
39 addScript(`${cdn}/js/abcjs/abcjs-basic-min.js?v=6.5.0`, "protyleAbcjsScript").then(() => {
40 const wysiwygElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
41 abcElements.forEach((e: HTMLDivElement) => {
42 if (e.getAttribute("data-render") === "true") {
43 return;
44 }
45 if (!e.firstElementChild.classList.contains("protyle-icons")) {
46 e.insertAdjacentHTML("afterbegin", genIconHTML(wysiwygElement));
47 }
48 const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
49 renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div contenteditable="false"></div>`;
50 const abcString = Lute.UnEscapeHTMLStr(e.getAttribute("data-content"));
51 window.ABCJS.renderAbc(renderElement.lastElementChild, abcString, getAbcParams(abcString));
52 e.setAttribute("data-render", "true");
53 });
54 });
55 }
56};