Merge pull request #1650 from TephrocactusMYC/dev

feat(score tag): support RenderAbc options

layout/includes/third-party/abcjs/abcjs.pug

@@ -1,17 +1,46 @@
 script.
-  (() => {
-    const abcjsInit = () => {
-      const abcjsFn = () => setTimeout(() => {
-        document.querySelectorAll(".abc-music-sheet").forEach(ele => {
-          if (ele.children.length > 0) return
-          ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
-        })
-      }, 100)
+  (function() {
+    const abcjsInit = function() {
+      const abcjsFn = function() {
+        setTimeout(function() {
+          const sheets = document.querySelectorAll(".abc-music-sheet")
+          for (let i = 0; i < sheets.length; i++) {
+            const ele = sheets[i]
+            if (ele.children.length > 0) continue
 
-      typeof ABCJS === 'object' ? abcjsFn()
-        : btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
+            // Parse parameters from data-params attribute
+            let params = {}
+            const dp = ele.getAttribute("data-params")
+            if (dp) {
+              try {
+                params = JSON.parse(dp)
+              } catch (e) {
+                console.error("Failed to parse data-params:", e)
+              }
             }
 
-    window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
-    btf.addGlobalFn('encrypt', abcjsInit, 'abcjs')
+            // Merge parsed parameters with the responsive option
+            // Ensures params content appears before responsive
+            const options = { ...params, responsive: "resize" }
+
+            // Render the music score using ABCJS.renderAbc
+            ABCJS.renderAbc(ele, ele.innerHTML, options)
+          }
+        }, 100)
+      }
+
+      if (typeof ABCJS === "object") {
+        abcjsFn()
+      } else {
+        btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn)
+      }
+    }
+
+    if (window.pjax) {
+      abcjsInit()
+    } else {
+      window.addEventListener("load", abcjsInit)
+    }
+
+    btf.addGlobalFn("encrypt", abcjsInit, "abcjs")
   })()

scripts/tag/score.js

@@ -6,17 +6,45 @@
 'use strict'
 
 const score = (args, content) => {
+  // Escape HTML tags and some special characters, including curly braces
   const escapeHtmlTags = s => {
     const lookup = {
       '&': '&',
       '"': '"',
-      '\'': ''',
+      "'": ''',
       '<': '&lt;',
-      '>': '&gt;'
+      '>': '&gt;',
+      '{': '&#123;',
+      '}': '&#125;'
     }
-    return s.replace(/[&"'<>]/g, c => lookup[c])
-  }
-  return `<div class="abc-music-sheet">${escapeHtmlTags(content)}</div>`
+    return s.replace(/[&"'<>{}]/g, c => lookup[c])
   }
 
-hexo.extend.tag.register('score', score, { ends: true })
+  const trimmed = content.trim()
+  // Split content using six dashes as a delimiter
+  const parts = trimmed.split('------')
+
+  if (parts.length < 2) {
+    // If no delimiter is found, treat the entire content as the score
+    return `<div class="abc-music-sheet">${escapeHtmlTags(trimmed)}</div>`
+  }
+
+  // First part is parameters (JSON string), the rest is the score content
+  const paramPart = parts[0].trim()
+  const scorePart = parts.slice(1).join('------').trim()
+
+  let paramsObj = {}
+  try {
+    paramsObj = JSON.parse(paramPart)
+  } catch (e) {
+    console.error("Failed to parse JSON in score tag:", e)
+  }
+
+  // Use double quotes for data-params attribute value,
+  // ensuring JSON internal double quotes are escaped
+  return `<div class="abc-music-sheet" data-params="${escapeHtmlTags(JSON.stringify(paramsObj))}">
+    ${escapeHtmlTags(scorePart)}
+  </div>`
+}
+
+hexo.extend.tag.register("score", score, { ends: true })