@wdprlib/render 1.0.1 → 1.2.0

package/dist/index.cjs

@@ -44,10 +44,15 @@ var __export = (target, all) => {
 var exports_src = {};
 __export(exports_src, {
   renderToHtml: () => renderToHtml,
+  createSettings: () => import_ast3.createSettings,
+  DEFAULT_SETTINGS: () => import_ast3.DEFAULT_SETTINGS,
   DEFAULT_EMBED_ALLOWLIST: () => DEFAULT_EMBED_ALLOWLIST
 });
 module.exports = __toCommonJS(exports_src);
 
+// packages/render/src/context.ts
+var import_ast = require("@wdprlib/ast");
+
 // packages/render/src/escape.ts
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -418,6 +423,8 @@ class RenderContext {
   _equationIndex = 0;
   _htmlBlockIndex = 0;
   _bibciteCounter = 0;
+  _idSuffix;
+  settings;
   options;
   footnotes;
   styles;
@@ -426,6 +433,8 @@ class RenderContext {
   bibliographyMap;
   bibliographyEntries;
   constructor(tree, options = {}) {
+    this.settings = options.settings ?? import_ast.DEFAULT_SETTINGS;
+    this._idSuffix = this.settings.useTrueIds ? null : Math.random().toString(16).slice(2, 8);
     this.options = options;
     this.footnotes = options.footnotes ?? tree.footnotes ?? [];
     this.styles = tree.styles ?? [];
@@ -479,6 +488,18 @@ class RenderContext {
   nextBibciteCounter() {
     return ++this._bibciteCounter;
   }
+  generateId(prefix, index) {
+    if (this._idSuffix === null) {
+      return `${prefix}${index}`;
+    }
+    return `${prefix}${index}-${this._idSuffix}`;
+  }
+  generateFixedId(name) {
+    if (this._idSuffix === null) {
+      return name;
+    }
+    return `${name}-${this._idSuffix}`;
+  }
   get page() {
     return this.options.page;
   }
@@ -488,15 +509,23 @@ class RenderContext {
       case "url": {
         const url = source.data;
         if (url.startsWith("/") && !url.startsWith("//")) {
+          if (!this.settings.allowLocalPaths)
+            return null;
           return `/local--files${url}`;
         }
         return url;
       }
       case "file1":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return pageName ? `/local--files/${pageName}/${source.data.file}` : `/local--files/${source.data.file}`;
       case "file2":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return `/local--files/${source.data.page}/${source.data.file}`;
       case "file3":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return `/local--files/${source.data.site}/${source.data.page}/${source.data.file}`;
     }
   }
@@ -548,28 +577,28 @@ class RenderContext {
 }
 
 // packages/render/src/elements/container.ts
-var import_ast = require("@wdprlib/ast");
+var import_ast2 = require("@wdprlib/ast");
 function renderContainer(ctx, data) {
   const { type, attributes, elements } = data;
-  if (import_ast.isHeaderType(type)) {
+  if (import_ast2.isHeaderType(type)) {
     renderHeader(ctx, type.header.level, type.header["has-toc"], attributes, elements);
     return;
   }
-  if (import_ast.isAlignType(type)) {
+  if (import_ast2.isAlignType(type)) {
     ctx.push(`<div style="text-align: ${type.align};">`);
     renderElements(ctx, elements);
     ctx.push("</div>");
     return;
   }
-  if (import_ast.isStringContainerType(type)) {
+  if (import_ast2.isStringContainerType(type)) {
     renderStringContainer(ctx, type, attributes, elements);
   }
 }
 function renderHeader(ctx, level, hasToc, attributes, elements) {
   const tag = `h${level}`;
   if (hasToc) {
-    const tocId = ctx.nextTocIndex();
-    ctx.push(`<${tag} id="toc${tocId}"${renderAttrs(attributes)}>`);
+    const tocId = ctx.generateId("toc", ctx.nextTocIndex());
+    ctx.push(`<${tag} id="${tocId}"${renderAttrs(attributes)}>`);
   } else {
     ctx.push(`<${tag}${renderAttrs(attributes)}>`);
   }
@@ -855,6 +884,8 @@ function renderAnchorName(ctx, name) {
 // packages/render/src/elements/image.ts
 function renderImage(ctx, data) {
   let src = ctx.resolveImageSource(data.source);
+  if (src === null)
+    return;
   if (isDangerousUrl(src)) {
     src = "#invalid-url";
   }
@@ -3939,7 +3970,7 @@ function fnv1aHash(input, hexLen) {
 function renderTabView(ctx, tabs) {
   const labelString = tabs.map((t) => t.label).join("");
   const hash = md5Hash(labelString);
-  const widgetId = `wiki-tabview-${hash}`;
+  const widgetId = ctx.generateFixedId(`wiki-tabview-${hash}`);
   ctx.push(`<div id="${widgetId}" class="yui-navset">`);
   ctx.push(`<ul class="yui-nav">`);
   for (let i = 0;i < tabs.length; i++) {
@@ -3954,7 +3985,8 @@ function renderTabView(ctx, tabs) {
   for (let i = 0;i < tabs.length; i++) {
     const tab = tabs[i];
     const displayStyle = i === 0 ? "" : ` style="display:none"`;
-    ctx.push(`<div id="wiki-tab-0-${i}"${displayStyle}>`);
+    const tabId = ctx.generateId("wiki-tab-0-", i);
+    ctx.push(`<div id="${tabId}"${displayStyle}>`);
     renderElements(ctx, tab.elements);
     ctx.push("</div>");
   }
@@ -3967,8 +3999,9 @@ function md5Hash(input) {
 
 // packages/render/src/elements/footnote.ts
 function renderFootnoteRef(ctx, index) {
+  const id = ctx.generateId("footnoteref-", index);
   ctx.push(`<sup class="footnoteref">`);
-  ctx.push(`<a id="footnoteref-${index}" href="javascript:;" class="footnoteref">${index}</a>`);
+  ctx.push(`<a id="${id}" href="javascript:;" class="footnoteref">${index}</a>`);
   ctx.push("</sup>");
 }
 function renderFootnoteBlock(ctx, data) {
@@ -3980,7 +4013,8 @@ function renderFootnoteBlock(ctx, data) {
   for (let i = 0;i < ctx.footnotes.length; i++) {
     const index = i + 1;
     const elements = ctx.footnotes[i] ?? [];
-    ctx.push(`<div class="footnote-footer" id="footnote-${index}">`);
+    const fnId = ctx.generateId("footnote-", index);
+    ctx.push(`<div class="footnote-footer" id="${fnId}">`);
     ctx.push(`<a href="javascript:;">${index}</a>. `);
     renderElements(ctx, elements);
     ctx.push("</div>");
@@ -4018,7 +4052,7 @@ function renderMath(ctx, data) {
   const index = ctx.nextEquationIndex() + 1;
   const latex = data["latex-source"];
   const mathml = renderLatexToMathML(latex, true);
-  const id = data.name ? `equation-${data.name}` : `equation-${index}`;
+  const id = data.name ? ctx.generateId("equation-", data.name) : ctx.generateId("equation-", index);
   const dataName = data.name ? ` data-name="${escapeAttr(data.name)}"` : "";
   ctx.push(`<div class="math-block" id="${escapeAttr(id)}"${dataName}>`);
   if (data.name) {
@@ -4057,7 +4091,7 @@ function renderMathInline(ctx, data) {
   ctx.push("</span>");
 }
 function renderEquationRef(ctx, name) {
-  const id = `equation-${name}`;
+  const id = ctx.generateId("equation-", name);
   ctx.push(`<span class="eref" data-target="${escapeAttr(id)}">`);
   ctx.push(`<a class="eref-link" href="#${escapeAttr(id)}">`);
   ctx.push(escapeHtml(name));
@@ -4260,7 +4294,7 @@ var SANITIZE_CONFIG = {
       "width"
     ]
   },
-  allowedSchemes: ["https"]
+  allowedSchemes: ["https", "http"]
 };
 function findIframes(html) {
   const doc = import_htmlparser2.parseDocument(html);
@@ -4308,7 +4342,7 @@ function matchesAllowlistEntry(url, entry) {
   }
   return true;
 }
-function validateAndSanitizeEmbed(content, allowlist) {
+function validateAndSanitizeEmbed(content, allowlist, baseUrl) {
   const sanitized = import_sanitize_html.default(content.trim(), SANITIZE_CONFIG);
   if (!sanitized.trim()) {
     return null;
@@ -4324,11 +4358,16 @@ function validateAndSanitizeEmbed(content, allowlist) {
   }
   let url;
   try {
-    url = new URL(src);
+    if (src.startsWith("//")) {
+      const base = baseUrl ?? "https://localhost";
+      url = new URL(src, base);
+    } else {
+      url = new URL(src);
+    }
   } catch {
     return null;
   }
-  if (url.protocol !== "https:") {
+  if (url.protocol !== "https:" && url.protocol !== "http:") {
     return null;
   }
   if (allowlist !== null) {
@@ -4351,7 +4390,7 @@ function normalizeBooleanAttributes(html) {
 }
 function renderEmbedBlock(ctx, data) {
   const allowlist = ctx.options.embedAllowlist !== undefined ? ctx.options.embedAllowlist : DEFAULT_EMBED_ALLOWLIST;
-  const sanitized = validateAndSanitizeEmbed(data.contents, allowlist);
+  const sanitized = validateAndSanitizeEmbed(data.contents, allowlist, ctx.options.baseUrl);
   if (sanitized === null) {
     ctx.push('<div class="error-block">Sorry, no match for the embedded content.</div>');
     return;
@@ -4412,8 +4451,9 @@ function renderBibliographyCite(ctx, data) {
     return;
   }
   const idSuffix = generateIdSuffix(data.label, counter);
-  const id = `bibcite-${number}-${idSuffix}`;
-  const onclick = `WIKIDOT.page.utils.scrollToReference('bibitem-${number}')`;
+  const id = ctx.generateId(`bibcite-${number}-`, idSuffix);
+  const bibitemId = ctx.generateId("bibitem-", number);
+  const onclick = `WIKIDOT.page.utils.scrollToReference('${bibitemId}')`;
   ctx.push(`<a href="javascript:;" class="bibcite" id="${id}" onclick="${escapeAttr(onclick)}">`);
   ctx.push(String(number));
   ctx.push("</a>");
@@ -4426,7 +4466,8 @@ function renderBibliographyBlock(ctx, data, renderElements2) {
   ctx.push(`<div class="title">${escapeHtml(title)}</div>`);
   let index = 1;
   for (const entry of data.entries) {
-    ctx.push(`<div class="bibitem" id="bibitem-${index}">`);
+    const itemId = ctx.generateId("bibitem-", index);
+    ctx.push(`<div class="bibitem" id="${itemId}">`);
     ctx.push(`${index}. `);
     renderElements2(ctx, entry.value);
     ctx.push("</div>");
@@ -4459,12 +4500,19 @@ function renderTocList(ctx, listData, depth) {
     renderTocItem(ctx, item, depth);
   }
 }
+function rewriteTocAnchor(ctx, href) {
+  const match = /^#toc(\d+)$/.exec(href);
+  if (!match)
+    return href;
+  return `#${ctx.generateId("toc", Number(match[1]))}`;
+}
 function renderTocItem(ctx, item, depth) {
   if (item["item-type"] === "elements") {
     for (const el of item.elements) {
       const link = extractLinkText(el);
       if (link) {
-        ctx.push(`<div style="margin-left: ${depth}em;"><a href="${escapeHtml(link.href)}">${escapeHtml(link.text)}</a></div>`);
+        const href = rewriteTocAnchor(ctx, link.href);
+        ctx.push(`<div style="margin-left: ${depth}em;"><a href="${escapeAttr(href)}">${escapeHtml(link.text)}</a></div>`);
       }
     }
   } else if (item["item-type"] === "sub-list") {
@@ -5029,7 +5077,7 @@ function formatNumber(n) {
 function renderToHtml(tree, options = {}) {
   const ctx = new RenderContext(tree, options);
   renderElements(ctx, tree.elements);
-  if (tree.styles?.length) {
+  if (ctx.settings.allowStyleElements && tree.styles?.length) {
     for (const style of tree.styles) {
       ctx.push(`<style>${escapeStyleContent(style)}</style>`);
     }
@@ -5173,3 +5221,6 @@ function renderElement(ctx, element) {
       break;
   }
 }
+
+// packages/render/src/index.ts
+var import_ast3 = require("@wdprlib/ast");

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { SyntaxTree as SyntaxTree2 } from "@wdprlib/ast";
-import { Element } from "@wdprlib/ast";
+import { Element, WikitextSettings } from "@wdprlib/ast";
 /**
 * Allowlist entry for embed content validation
 * Each entry specifies a host pattern and optional path prefix
@@ -70,6 +70,15 @@ interface RenderResolvers {
 * Options for HTML rendering
 */
 interface RenderOptions {
+	/**
+	* Base URL used to resolve protocol-relative URLs (e.g., "//example.com/path").
+	* The protocol of this URL is inherited by protocol-relative references.
+	* Example: "https://scp-wiki.wikidot.com" or "http://scp-jp.wikidot.com"
+	* If not provided, protocol-relative URLs default to HTTPS.
+	*/
+	baseUrl?: string;
+	/** Wikitext settings controlling rendering behavior */
+	settings?: WikitextSettings;
 	/** Page context for resolving file paths, links, etc. */
 	page?: PageContext;
 	/** Pre-collected footnote elements from SyntaxTree.footnotes */
@@ -100,4 +109,6 @@ interface RenderOptions {
 * Render a SyntaxTree to HTML string
 */
 declare function renderToHtml(tree: SyntaxTree2, options?: RenderOptions): string;
-export { renderToHtml, ResolvedUser, RenderResolvers, RenderOptions, PageContext, DEFAULT_EMBED_ALLOWLIST };
+import { WikitextMode, WikitextSettings as WikitextSettings3 } from "@wdprlib/ast";
+import { createSettings, DEFAULT_SETTINGS } from "@wdprlib/ast";
+export { renderToHtml, createSettings, WikitextSettings3 as WikitextSettings, WikitextMode, ResolvedUser, RenderResolvers, RenderOptions, PageContext, DEFAULT_SETTINGS, DEFAULT_EMBED_ALLOWLIST };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { SyntaxTree as SyntaxTree2 } from "@wdprlib/ast";
-import { Element } from "@wdprlib/ast";
+import { Element, WikitextSettings } from "@wdprlib/ast";
 /**
 * Allowlist entry for embed content validation
 * Each entry specifies a host pattern and optional path prefix
@@ -70,6 +70,15 @@ interface RenderResolvers {
 * Options for HTML rendering
 */
 interface RenderOptions {
+	/**
+	* Base URL used to resolve protocol-relative URLs (e.g., "//example.com/path").
+	* The protocol of this URL is inherited by protocol-relative references.
+	* Example: "https://scp-wiki.wikidot.com" or "http://scp-jp.wikidot.com"
+	* If not provided, protocol-relative URLs default to HTTPS.
+	*/
+	baseUrl?: string;
+	/** Wikitext settings controlling rendering behavior */
+	settings?: WikitextSettings;
 	/** Page context for resolving file paths, links, etc. */
 	page?: PageContext;
 	/** Pre-collected footnote elements from SyntaxTree.footnotes */
@@ -100,4 +109,6 @@ interface RenderOptions {
 * Render a SyntaxTree to HTML string
 */
 declare function renderToHtml(tree: SyntaxTree2, options?: RenderOptions): string;
-export { renderToHtml, ResolvedUser, RenderResolvers, RenderOptions, PageContext, DEFAULT_EMBED_ALLOWLIST };
+import { WikitextMode, WikitextSettings as WikitextSettings3 } from "@wdprlib/ast";
+import { createSettings, DEFAULT_SETTINGS } from "@wdprlib/ast";
+export { renderToHtml, createSettings, WikitextSettings3 as WikitextSettings, WikitextMode, ResolvedUser, RenderResolvers, RenderOptions, PageContext, DEFAULT_SETTINGS, DEFAULT_EMBED_ALLOWLIST };

package/dist/index.js

@@ -1,3 +1,6 @@
+// packages/render/src/context.ts
+import { DEFAULT_SETTINGS } from "@wdprlib/ast";
+
 // packages/render/src/escape.ts
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -368,6 +371,8 @@ class RenderContext {
   _equationIndex = 0;
   _htmlBlockIndex = 0;
   _bibciteCounter = 0;
+  _idSuffix;
+  settings;
   options;
   footnotes;
   styles;
@@ -376,6 +381,8 @@ class RenderContext {
   bibliographyMap;
   bibliographyEntries;
   constructor(tree, options = {}) {
+    this.settings = options.settings ?? DEFAULT_SETTINGS;
+    this._idSuffix = this.settings.useTrueIds ? null : Math.random().toString(16).slice(2, 8);
     this.options = options;
     this.footnotes = options.footnotes ?? tree.footnotes ?? [];
     this.styles = tree.styles ?? [];
@@ -429,6 +436,18 @@ class RenderContext {
   nextBibciteCounter() {
     return ++this._bibciteCounter;
   }
+  generateId(prefix, index) {
+    if (this._idSuffix === null) {
+      return `${prefix}${index}`;
+    }
+    return `${prefix}${index}-${this._idSuffix}`;
+  }
+  generateFixedId(name) {
+    if (this._idSuffix === null) {
+      return name;
+    }
+    return `${name}-${this._idSuffix}`;
+  }
   get page() {
     return this.options.page;
   }
@@ -438,15 +457,23 @@ class RenderContext {
       case "url": {
         const url = source.data;
         if (url.startsWith("/") && !url.startsWith("//")) {
+          if (!this.settings.allowLocalPaths)
+            return null;
           return `/local--files${url}`;
         }
         return url;
       }
       case "file1":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return pageName ? `/local--files/${pageName}/${source.data.file}` : `/local--files/${source.data.file}`;
       case "file2":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return `/local--files/${source.data.page}/${source.data.file}`;
       case "file3":
+        if (!this.settings.allowLocalPaths)
+          return null;
         return `/local--files/${source.data.site}/${source.data.page}/${source.data.file}`;
     }
   }
@@ -518,8 +545,8 @@ function renderContainer(ctx, data) {
 function renderHeader(ctx, level, hasToc, attributes, elements) {
   const tag = `h${level}`;
   if (hasToc) {
-    const tocId = ctx.nextTocIndex();
-    ctx.push(`<${tag} id="toc${tocId}"${renderAttrs(attributes)}>`);
+    const tocId = ctx.generateId("toc", ctx.nextTocIndex());
+    ctx.push(`<${tag} id="${tocId}"${renderAttrs(attributes)}>`);
   } else {
     ctx.push(`<${tag}${renderAttrs(attributes)}>`);
   }
@@ -805,6 +832,8 @@ function renderAnchorName(ctx, name) {
 // packages/render/src/elements/image.ts
 function renderImage(ctx, data) {
   let src = ctx.resolveImageSource(data.source);
+  if (src === null)
+    return;
   if (isDangerousUrl(src)) {
     src = "#invalid-url";
   }
@@ -3889,7 +3918,7 @@ function fnv1aHash(input, hexLen) {
 function renderTabView(ctx, tabs) {
   const labelString = tabs.map((t) => t.label).join("");
   const hash = md5Hash(labelString);
-  const widgetId = `wiki-tabview-${hash}`;
+  const widgetId = ctx.generateFixedId(`wiki-tabview-${hash}`);
   ctx.push(`<div id="${widgetId}" class="yui-navset">`);
   ctx.push(`<ul class="yui-nav">`);
   for (let i = 0;i < tabs.length; i++) {
@@ -3904,7 +3933,8 @@ function renderTabView(ctx, tabs) {
   for (let i = 0;i < tabs.length; i++) {
     const tab = tabs[i];
     const displayStyle = i === 0 ? "" : ` style="display:none"`;
-    ctx.push(`<div id="wiki-tab-0-${i}"${displayStyle}>`);
+    const tabId = ctx.generateId("wiki-tab-0-", i);
+    ctx.push(`<div id="${tabId}"${displayStyle}>`);
     renderElements(ctx, tab.elements);
     ctx.push("</div>");
   }
@@ -3917,8 +3947,9 @@ function md5Hash(input) {
 
 // packages/render/src/elements/footnote.ts
 function renderFootnoteRef(ctx, index) {
+  const id = ctx.generateId("footnoteref-", index);
   ctx.push(`<sup class="footnoteref">`);
-  ctx.push(`<a id="footnoteref-${index}" href="javascript:;" class="footnoteref">${index}</a>`);
+  ctx.push(`<a id="${id}" href="javascript:;" class="footnoteref">${index}</a>`);
   ctx.push("</sup>");
 }
 function renderFootnoteBlock(ctx, data) {
@@ -3930,7 +3961,8 @@ function renderFootnoteBlock(ctx, data) {
   for (let i = 0;i < ctx.footnotes.length; i++) {
     const index = i + 1;
     const elements = ctx.footnotes[i] ?? [];
-    ctx.push(`<div class="footnote-footer" id="footnote-${index}">`);
+    const fnId = ctx.generateId("footnote-", index);
+    ctx.push(`<div class="footnote-footer" id="${fnId}">`);
     ctx.push(`<a href="javascript:;">${index}</a>. `);
     renderElements(ctx, elements);
     ctx.push("</div>");
@@ -3968,7 +4000,7 @@ function renderMath(ctx, data) {
   const index = ctx.nextEquationIndex() + 1;
   const latex = data["latex-source"];
   const mathml = renderLatexToMathML(latex, true);
-  const id = data.name ? `equation-${data.name}` : `equation-${index}`;
+  const id = data.name ? ctx.generateId("equation-", data.name) : ctx.generateId("equation-", index);
   const dataName = data.name ? ` data-name="${escapeAttr(data.name)}"` : "";
   ctx.push(`<div class="math-block" id="${escapeAttr(id)}"${dataName}>`);
   if (data.name) {
@@ -4007,7 +4039,7 @@ function renderMathInline(ctx, data) {
   ctx.push("</span>");
 }
 function renderEquationRef(ctx, name) {
-  const id = `equation-${name}`;
+  const id = ctx.generateId("equation-", name);
   ctx.push(`<span class="eref" data-target="${escapeAttr(id)}">`);
   ctx.push(`<a class="eref-link" href="#${escapeAttr(id)}">`);
   ctx.push(escapeHtml(name));
@@ -4210,7 +4242,7 @@ var SANITIZE_CONFIG = {
       "width"
     ]
   },
-  allowedSchemes: ["https"]
+  allowedSchemes: ["https", "http"]
 };
 function findIframes(html) {
   const doc = parseDocument(html);
@@ -4258,7 +4290,7 @@ function matchesAllowlistEntry(url, entry) {
   }
   return true;
 }
-function validateAndSanitizeEmbed(content, allowlist) {
+function validateAndSanitizeEmbed(content, allowlist, baseUrl) {
   const sanitized = sanitizeHtml(content.trim(), SANITIZE_CONFIG);
   if (!sanitized.trim()) {
     return null;
@@ -4274,11 +4306,16 @@ function validateAndSanitizeEmbed(content, allowlist) {
   }
   let url;
   try {
-    url = new URL(src);
+    if (src.startsWith("//")) {
+      const base = baseUrl ?? "https://localhost";
+      url = new URL(src, base);
+    } else {
+      url = new URL(src);
+    }
   } catch {
     return null;
   }
-  if (url.protocol !== "https:") {
+  if (url.protocol !== "https:" && url.protocol !== "http:") {
     return null;
   }
   if (allowlist !== null) {
@@ -4301,7 +4338,7 @@ function normalizeBooleanAttributes(html) {
 }
 function renderEmbedBlock(ctx, data) {
   const allowlist = ctx.options.embedAllowlist !== undefined ? ctx.options.embedAllowlist : DEFAULT_EMBED_ALLOWLIST;
-  const sanitized = validateAndSanitizeEmbed(data.contents, allowlist);
+  const sanitized = validateAndSanitizeEmbed(data.contents, allowlist, ctx.options.baseUrl);
   if (sanitized === null) {
     ctx.push('<div class="error-block">Sorry, no match for the embedded content.</div>');
     return;
@@ -4362,8 +4399,9 @@ function renderBibliographyCite(ctx, data) {
     return;
   }
   const idSuffix = generateIdSuffix(data.label, counter);
-  const id = `bibcite-${number}-${idSuffix}`;
-  const onclick = `WIKIDOT.page.utils.scrollToReference('bibitem-${number}')`;
+  const id = ctx.generateId(`bibcite-${number}-`, idSuffix);
+  const bibitemId = ctx.generateId("bibitem-", number);
+  const onclick = `WIKIDOT.page.utils.scrollToReference('${bibitemId}')`;
   ctx.push(`<a href="javascript:;" class="bibcite" id="${id}" onclick="${escapeAttr(onclick)}">`);
   ctx.push(String(number));
   ctx.push("</a>");
@@ -4376,7 +4414,8 @@ function renderBibliographyBlock(ctx, data, renderElements2) {
   ctx.push(`<div class="title">${escapeHtml(title)}</div>`);
   let index = 1;
   for (const entry of data.entries) {
-    ctx.push(`<div class="bibitem" id="bibitem-${index}">`);
+    const itemId = ctx.generateId("bibitem-", index);
+    ctx.push(`<div class="bibitem" id="${itemId}">`);
     ctx.push(`${index}. `);
     renderElements2(ctx, entry.value);
     ctx.push("</div>");
@@ -4409,12 +4448,19 @@ function renderTocList(ctx, listData, depth) {
     renderTocItem(ctx, item, depth);
   }
 }
+function rewriteTocAnchor(ctx, href) {
+  const match = /^#toc(\d+)$/.exec(href);
+  if (!match)
+    return href;
+  return `#${ctx.generateId("toc", Number(match[1]))}`;
+}
 function renderTocItem(ctx, item, depth) {
   if (item["item-type"] === "elements") {
     for (const el of item.elements) {
       const link = extractLinkText(el);
       if (link) {
-        ctx.push(`<div style="margin-left: ${depth}em;"><a href="${escapeHtml(link.href)}">${escapeHtml(link.text)}</a></div>`);
+        const href = rewriteTocAnchor(ctx, link.href);
+        ctx.push(`<div style="margin-left: ${depth}em;"><a href="${escapeAttr(href)}">${escapeHtml(link.text)}</a></div>`);
       }
     }
   } else if (item["item-type"] === "sub-list") {
@@ -4979,7 +5025,7 @@ function formatNumber(n) {
 function renderToHtml(tree, options = {}) {
   const ctx = new RenderContext(tree, options);
   renderElements(ctx, tree.elements);
-  if (tree.styles?.length) {
+  if (ctx.settings.allowStyleElements && tree.styles?.length) {
     for (const style of tree.styles) {
       ctx.push(`<style>${escapeStyleContent(style)}</style>`);
     }
@@ -5123,7 +5169,12 @@ function renderElement(ctx, element) {
       break;
   }
 }
+
+// packages/render/src/index.ts
+import { createSettings, DEFAULT_SETTINGS as DEFAULT_SETTINGS2 } from "@wdprlib/ast";
 export {
   renderToHtml,
+  createSettings,
+  DEFAULT_SETTINGS2 as DEFAULT_SETTINGS,
   DEFAULT_EMBED_ALLOWLIST
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdprlib/render",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "HTML renderer for Wikidot markup",
   "keywords": [
     "html",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@wdprlib/ast": "1.0.0",
+    "@wdprlib/ast": "1.1.0",
     "domhandler": "^5.0.3",
     "htmlparser2": "^10.0.0",
     "sanitize-html": "^2.14.0",