feat(core/inlines): add new syntax for inline <var>

src/core/inlines.js

@@ -86,6 +86,18 @@ function inlineAbbrMatches(matched, txt, abbrMap) {
     : hyperHTML`<abbr title="${abbrMap.get(matched)}">${matched}</abbr>`;
 }
 
+/**
+ * @example |varName: type| => <var data-type="type">varName</var>
+ * @example |varName| => <var>varName</var>
+ * @param {string} matched
+ */
+function inlineVariableMatches(matched) {
+  // remove "|" at the beginning and at the end, then split at an optional `:`
+  const matches = matched.slice(1, -1).split(":", 2);
+  const [varName, type] = matches.map(s => s.trim());
+  return hyperHTML`<var data-type="${type}">${varName}</var>`;
+}
+
 export function run(conf) {
   document.normalize();
   if (!document.querySelector("section#conformance")) {
@@ -118,6 +130,7 @@ export function run(conf) {
       "\\b(?:NOT\\s+)?RECOMMENDED\\b",
       "\\bOPTIONAL\\b",
       "(?:{{3}\\s*.*\\s*}{3})", // inline IDL references,
+      "\\B\\|\\w+(?:\\s*\\w+)*(?:\\:\\s*\\w+)?\\|\\B", // inline variable regex
       "(?:\\[\\[(?:!|\\\\|\\?)?[A-Za-z0-9\\.-]+\\]\\])",
       ...(abbrRx ? [abbrRx] : []),
     ].join("|")})`
@@ -138,6 +151,9 @@ export function run(conf) {
       } else if (t.startsWith("[[")) {
         const nodes = inlineBibrefMatches(t, txt, conf);
         df.append(...nodes);
+      } else if (t.startsWith("|") && t.endsWith("|")) {
+        const node = inlineVariableMatches(t);
+        df.appendChild(node);
       } else if (abbrMap.has(t)) {
         const node = inlineAbbrMatches(t, txt, abbrMap);
         df.appendChild(node);

tests/spec/core/inlines-spec.js

@@ -72,4 +72,32 @@ describe("Core - Inlines", () => {
     expect(rfc2119[0].textContent).toBe("MUST");
     expect(rfc2119[1].textContent).toBe("NOT RECOMMENDED");
   });
+
+  it("processes inline variable syntax", async () => {
+    const body = `
+      <section>
+        <p id="a1">TEXT |variable: Type| TEXT</p>
+        <p id="a2">TEXT |variable with spaces:Type| TEXT</p>
+        <p id="b">TEXT |variable| TEXT</p>
+        <p id="c">TEXT | ignored | TEXT</p>
+        <p id="d">TEXT|ignore: Ignore|TEXT</p>
+      </section>
+    `;
+    const doc = await makeRSDoc(makeStandardOps(null, body));
+
+    const a1 = doc.querySelector("#a1 var");
+    expect(a1.textContent).toEqual("variable");
+    expect(a1.dataset.type).toEqual("Type");
+
+    const a2 = doc.querySelector("#a2 var");
+    expect(a2.textContent).toEqual("variable with spaces");
+    expect(a2.dataset.type).toEqual("Type");
+
+    const b = doc.querySelector("#b var");
+    expect(b.textContent).toEqual("variable");
+    expect(b.dataset.type).toBeUndefined();
+
+    expect(doc.querySelector("#c var")).toBeFalsy();
+    expect(doc.querySelector("#d var")).toBeFalsy();
+  });
 });