@jjlmoya/utils-games-development 1.53.0 → 1.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-games-development",
-    "version": "1.53.0",
+    "version": "1.54.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -3,10 +3,11 @@ import { steamCapsuleGenerator } from '../tool/steamCapsuleGenerator/entry';
 import { spriteSheetPacker } from '../tool/spriteSheetPacker/entry';
 import { audioLoopPointFinder } from '../tool/audioLoopPointFinder/entry';
 import { saveFileEditor } from '../tool/saveFileEditor/entry';
+import { steamBbcodeTranslator } from '../tool/steamBbcodeTranslator/entry';
 
 export const gamesCategory: GamesCategoryEntry = {
   icon: 'mdi:gamepad-variant',
-  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder, saveFileEditor],
+  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, steamBbcodeTranslator],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -10,6 +10,8 @@ export { saveFileEditor } from './tool/saveFileEditor/entry';
 export type { SaveFileEditorUI, SaveFileEditorLocaleContent } from './tool/saveFileEditor/entry';
 export { localizationSanitizer } from './tool/localizationSanitizer/entry';
 export type { LocalizationSanitizerUI, LocalizationSanitizerLocaleContent } from './tool/localizationSanitizer/entry';
+export { steamBbcodeTranslator } from './tool/steamBbcodeTranslator/entry';
+export type { SteamBbcodeTranslatorUI, SteamBbcodeTranslatorLocaleContent } from './tool/steamBbcodeTranslator/entry';
 export { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 import { itchioGameTester } from './tool/itchioGameTester/entry';

package/src/index.ts

@@ -17,5 +17,6 @@ export type {
 
 export { ALL_ENTRIES, ALL_TOOLS } from './tools';
 export { STEAM_CAPSULE_GENERATOR_TOOL, steamCapsuleGenerator } from './tool/steamCapsuleGenerator';
+export { STEAM_BBCODE_TRANSLATOR_TOOL, steamBbcodeTranslator } from './tool/steamBbcodeTranslator';
 
 export type { ToolLocaleContent as GamesToolLocaleContent } from './types';

package/src/tests/locale_completeness.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
-  it('five tools are registered', () => {
-    expect(ALL_TOOLS.length).toBe(6);
+  it('seven tools are registered', () => {
+    expect(ALL_TOOLS.length).toBe(7);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { gamesCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 5 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(6);
+    it('should have 7 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(7);
     });
 
     it('gamesCategory should be defined', () => {

package/src/tool/steamBbcodeTranslator/app-client.ts

@@ -0,0 +1,125 @@
+import type { AutoTranslationResult, MarkupSyntax, TranslationResult } from './types';
+import { clearSourceFromStorage, loadSourceFromStorage, saveSourceToStorage } from './storage';
+import { detectSyntax, getAutoPreviewHtml, translateToAll } from './logic';
+
+interface AppElements {
+  root: HTMLElement;
+  source: HTMLTextAreaElement;
+  detected: HTMLElement;
+  outputGrid: HTMLElement;
+  preview: HTMLElement;
+  characterCount: HTMLElement;
+  blockCount: HTMLElement;
+}
+
+function getElements(root: HTMLElement): AppElements | null {
+  const source = root.querySelector('#bbcode-source') as HTMLTextAreaElement | null;
+  const detected = root.querySelector('#bbcode-detected') as HTMLElement | null;
+  const outputGrid = root.querySelector('#bbcode-output-grid') as HTMLElement | null;
+  const preview = root.querySelector('#bbcode-preview') as HTMLElement | null;
+  const characterCount = root.querySelector('#bbcode-character-count') as HTMLElement | null;
+  const blockCount = root.querySelector('#bbcode-block-count') as HTMLElement | null;
+
+  if (!source || !detected || !outputGrid || !preview || !characterCount || !blockCount) {
+    return null;
+  }
+
+  return { root, source, detected, outputGrid, preview, characterCount, blockCount };
+}
+
+async function copyText(value: string, button: HTMLButtonElement, copiedText: string): Promise<void> {
+  await navigator.clipboard?.writeText(value);
+  const original = button.textContent;
+  button.textContent = copiedText;
+  window.setTimeout(() => {
+    button.textContent = original;
+  }, 1200);
+}
+
+function createCard(target: MarkupSyntax, translation: TranslationResult, names: Record<MarkupSyntax, string>, dataset: DOMStringMap): HTMLElement {
+  const card = document.createElement('article');
+  card.className = 'bbcode-output-card';
+
+  const heading = document.createElement('div');
+  heading.className = 'bbcode-output-card-head';
+
+  const label = document.createElement('h3');
+  label.textContent = names[target];
+
+  const actions = document.createElement('div');
+  actions.className = 'bbcode-output-actions';
+
+  const copyButton = document.createElement('button');
+  copyButton.type = 'button';
+  copyButton.className = 'bbcode-icon-button';
+  copyButton.textContent = dataset.copy ?? 'Copy';
+  copyButton.addEventListener('click', () => copyText(translation.output, copyButton, dataset.copied ?? 'Copied'));
+
+  actions.append(copyButton);
+  heading.append(label, actions);
+
+  const pre = document.createElement('pre');
+  pre.textContent = translation.output;
+  card.append(heading, pre);
+
+  return card;
+}
+
+function updateMeta(elements: AppElements, names: Record<MarkupSyntax, string>, result: AutoTranslationResult): void {
+  const { root, source, detected, characterCount, blockCount } = elements;
+  const syntax = detectSyntax(source.value);
+  detected.textContent = source.value.trim()
+    ? `${root.dataset.detectedLabel ?? 'Detected'}: ${names[syntax]}`
+    : root.dataset.detectedEmpty ?? '';
+
+  characterCount.textContent = String(source.value.length);
+  const firstOutputKey = Object.keys(result.outputs)[0] as MarkupSyntax | undefined;
+  const firstBlockCount = firstOutputKey ? result.outputs[firstOutputKey]?.stats.blocks ?? 0 : 0;
+  blockCount.textContent = String(firstBlockCount);
+}
+
+function renderOutputCards(elements: AppElements, names: Record<MarkupSyntax, string>, result: AutoTranslationResult): void {
+  elements.outputGrid.innerHTML = '';
+  Object.entries(result.outputs).forEach(([target, translation]) => {
+    if (!translation) return;
+    const card = createCard(target as MarkupSyntax, translation, names, elements.root.dataset);
+    elements.outputGrid.append(card);
+  });
+}
+
+function renderApp(elements: AppElements, names: Record<MarkupSyntax, string>): void {
+  const result = translateToAll(elements.source.value);
+  updateMeta(elements, names, result);
+  renderOutputCards(elements, names, result);
+  elements.preview.innerHTML = getAutoPreviewHtml(elements.source.value) || `<p>${elements.root.dataset.previewEmpty ?? ''}</p>`;
+}
+
+export function initSteamBbcodeTranslatorApp(): void {
+  const root = document.getElementById('steam-bbcode-translator');
+  if (!root) return;
+  const elements = getElements(root);
+  if (!elements) return;
+
+  const names: Record<MarkupSyntax, string> = {
+    bbcode: root.dataset.bbcode ?? 'Steam BBCode',
+    markdown: root.dataset.markdown ?? 'Markdown',
+    html: root.dataset.html ?? 'HTML'
+  };
+
+  const stored = loadSourceFromStorage();
+  if (stored) elements.source.value = stored;
+
+  elements.source.addEventListener('input', () => {
+    saveSourceToStorage(elements.source.value);
+    renderApp(elements, names);
+  });
+
+  root.querySelector('#bbcode-clear')?.addEventListener('click', () => {
+    elements.source.value = '';
+    clearSourceFromStorage();
+    renderApp(elements, names);
+    elements.source.focus();
+  });
+
+  renderApp(elements, names);
+}

package/src/tool/steamBbcodeTranslator/bbcode-parser.ts

@@ -0,0 +1,110 @@
+import type { Node, TagNode, TextNode } from './types';
+
+const BB_TAG_PATTERN = /\[(\/)?([a-z][a-z0-9]*|\*)(?:=([^\]]*))?\]/gi;
+const SUPPORTED_TAGS = new Set(['h1', 'h2', 'h3', 'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'url', 'code', 'quote', 'spoiler', 'list', 'olist', '*']);
+
+export function text(value: string): TextNode {
+  return { kind: 'text', value };
+}
+
+export function tag(name: string, value: string | undefined, children: Node[] = []): TagNode {
+  return { kind: 'tag', name, value, children };
+}
+
+interface ParseStackEntry {
+  node: TagNode;
+  parent: Node[];
+}
+
+interface ParseContext {
+  stack: ParseStackEntry[];
+  root: Node[];
+  warnings: string[];
+  append: (n: Node) => void;
+}
+
+function handleAsteriskTag(ctx: ParseContext, full: string): void {
+  const inList = ctx.stack.some((entry) => entry.node.name === 'list' || entry.node.name === 'olist');
+  if (!inList) {
+    ctx.warnings.push('A list item marker was found outside a list.');
+    ctx.append(text(full));
+    return;
+  }
+  while (ctx.stack.length) {
+    const top = ctx.stack[ctx.stack.length - 1];
+    if (top && top.node.name === '*') ctx.stack.pop();
+    else break;
+  }
+  const listParent = ctx.stack[ctx.stack.length - 1];
+  if (listParent && (listParent.node.name === 'list' || listParent.node.name === 'olist')) {
+    const item = tag('*', undefined);
+    listParent.node.children.push(item);
+    ctx.stack.push({ node: item, parent: listParent.node.children });
+  }
+}
+
+function handleClosingTag(ctx: ParseContext, name: string, full: string): void {
+  const matchingIndex = [...ctx.stack].reverse().findIndex((entry) => entry.node.name === name);
+  if (matchingIndex === -1) {
+    ctx.warnings.push(`Closing tag [/${name}] has no matching opening tag.`);
+    ctx.append(text(full));
+    return;
+  }
+  for (let i = 0; i <= matchingIndex; i += 1) ctx.stack.pop();
+}
+
+function handleOpeningTag(ctx: ParseContext, name: string, value?: string): void {
+  const node = tag(name, value);
+  ctx.append(node);
+  if (name !== 'br') {
+    const top = ctx.stack[ctx.stack.length - 1];
+    ctx.stack.push({ node, parent: top ? top.node.children : ctx.root });
+  }
+}
+
+function processMatch(ctx: ParseContext, match: RegExpExecArray, full: string, rawName: string): void {
+  const closing = Boolean(match[1]);
+  const name = rawName.toLowerCase();
+  const value = match[3]?.trim();
+
+  if (!SUPPORTED_TAGS.has(name)) {
+    ctx.warnings.push(`Unsupported tag [${name}] was kept as text.`);
+    ctx.append(text(full));
+  } else if (name === '*') {
+    handleAsteriskTag(ctx, full);
+  } else if (closing) {
+    handleClosingTag(ctx, name, full);
+  } else {
+    handleOpeningTag(ctx, name, value);
+  }
+}
+
+export function parseBbcode(source: string): { nodes: Node[]; warnings: string[]; tagCount: number } {
+  const root: Node[] = [];
+  const stack: ParseStackEntry[] = [];
+  let cursor = 0;
+  let tagCount = 0;
+  const warnings: string[] = [];
+
+  const append = (nodeToAppend: Node) => {
+    const top = stack[stack.length - 1];
+    const target = top ? top.node.children : root;
+    target.push(nodeToAppend);
+  };
+  const ctx: ParseContext = { stack, root, warnings, append };
+
+  for (const match of source.matchAll(BB_TAG_PATTERN)) {
+    const full = match[0];
+    const index = match.index ?? 0;
+    if (index > cursor) append(text(source.slice(cursor, index)));
+    cursor = index + full.length;
+    if (!match[2]) continue;
+    tagCount += 1;
+    processMatch(ctx, match, full, match[2]);
+  }
+
+  if (cursor < source.length) append(text(source.slice(cursor)));
+  const top = stack[stack.length - 1];
+  if (top) warnings.push(`Unclosed tag [${top.node.name}] was closed automatically.`);
+  return { nodes: root, warnings: [...new Set(warnings)], tagCount };
+}

package/src/tool/steamBbcodeTranslator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/steamBbcodeTranslator/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliographyEntries: { name: string; url: string }[] = [
+  {
+    name: 'Steamworks Store Page Written Description',
+    url: 'https://partner.steamgames.com/doc/store/page/description?language=english'
+  },
+  {
+    name: 'Steamworks Importing HTML',
+    url: 'https://partner.steamgames.com/doc/marketing/event_tools/import?language=english'
+  },
+  {
+    name: 'itch.io Creator Documentation',
+    url: 'https://itch.io/docs/creators/getting-started'
+  }
+];

package/src/tool/steamBbcodeTranslator/component.astro

@@ -0,0 +1,83 @@
+---
+import type { SteamBbcodeTranslatorUI } from './ui';
+import { sampleBbcode } from './logic';
+import './steam-bbcode-translator.css';
+
+interface Props {
+  ui: SteamBbcodeTranslatorUI;
+}
+
+const { ui: t } = Astro.props;
+---
+
+<div
+  class="bbcode-root"
+  id="steam-bbcode-translator"
+  data-detected-label={t.detectedLabel}
+  data-detected-empty={t.detectedEmpty}
+  data-bbcode={t.bbcode}
+  data-markdown={t.markdown}
+  data-html={t.html}
+  data-copy={t.copy}
+  data-copied={t.copied}
+  data-preview-empty={t.previewEmpty}
+  data-characters={t.characters}
+  data-blocks={t.blocks}
+>
+  <div class="bbcode-header">
+    <div class="bbcode-title-row">
+      <span class="bbcode-mark" aria-hidden="true">[ / ]</span>
+      <div>
+        <span class="bbcode-kicker">STEAM MARKUP TRANSLATOR</span>
+        <strong>{t.privacyNote}</strong>
+      </div>
+    </div>
+    <span class="bbcode-draft-note">{t.persistenceNote}</span>
+  </div>
+
+  <section class="bbcode-input-card">
+    <div class="bbcode-section-head">
+      <div>
+        <span class="bbcode-step">01</span>
+        <h2>{t.editorLabel}</h2>
+      </div>
+      <span class="bbcode-detected" id="bbcode-detected">{t.detectedEmpty}</span>
+    </div>
+    <label class="bbcode-sr-only" for="bbcode-source">{t.editorLabel}</label>
+    <textarea id="bbcode-source" spellcheck="false" aria-describedby="bbcode-editor-hint">{sampleBbcode}</textarea>
+    <div class="bbcode-input-footer">
+      <p id="bbcode-editor-hint">{t.editorHint}</p>
+      <div class="bbcode-input-meta">
+        <span><strong id="bbcode-character-count">0</strong> {t.characters}</span>
+        <span><strong id="bbcode-block-count">0</strong> {t.blocks}</span>
+        <button type="button" class="bbcode-clear-button" id="bbcode-clear">{t.clear}</button>
+      </div>
+    </div>
+  </section>
+
+  <section class="bbcode-output-section" aria-live="polite">
+    <div class="bbcode-output-heading">
+      <span class="bbcode-step">02</span>
+      <h2>{t.detectedLabel}</h2>
+    </div>
+    <div class="bbcode-output-grid" id="bbcode-output-grid"></div>
+  </section>
+
+  <section class="bbcode-preview-card">
+    <div class="bbcode-output-heading">
+      <span class="bbcode-step">03</span>
+      <h2>{t.previewLabel}</h2>
+    </div>
+    <div id="bbcode-preview" class="bbcode-preview-surface"><p>{t.previewEmpty}</p></div>
+  </section>
+</div>
+
+<script>
+  import { initSteamBbcodeTranslatorApp } from './app-client';
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSteamBbcodeTranslatorApp);
+  } else {
+    initSteamBbcodeTranslatorApp();
+  }
+</script>

package/src/tool/steamBbcodeTranslator/entry.ts

@@ -0,0 +1,28 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { SteamBbcodeTranslatorUI } from './ui';
+
+export type { SteamBbcodeTranslatorUI };
+
+export type SteamBbcodeTranslatorLocaleContent = ToolLocaleContent<SteamBbcodeTranslatorUI>;
+
+export const steamBbcodeTranslator: GamesToolEntry<SteamBbcodeTranslatorUI> = {
+  id: 'steam-bbcode-translator',
+  icons: { bg: 'mdi:gamepad-variant', fg: 'mdi:code-brackets' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/steamBbcodeTranslator/html-parser.ts

@@ -0,0 +1,42 @@
+import type { TranslationResult } from './types';
+
+export function decodeHtml(value: string): string {
+  return value
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
+function countBlocks(source: string): number {
+  return source.trim() ? source.split(/\n{2,}/).filter(Boolean).length : 0;
+}
+
+export function htmlToBbcode(source: string): TranslationResult {
+  let output = source.replace(/<!--[\s\S]*?-->/g, '');
+  const warnings: string[] = [];
+  output = output.replace(/<h([1-3])\b[^>]*>/gi, (_, level: string) => `[h${level}]`);
+  output = output.replace(/<\/h([1-3])>/gi, (_, level: string) => `[/h${level}]`);
+  const replacements: [RegExp, string][] = [
+    [/<(?:strong|b)\b[^>]*>/gi, '[b]'], [/<\/(?:strong|b)>/gi, '[/b]'],
+    [/<(?:em|i)\b[^>]*>/gi, '[i]'], [/<\/(?:em|i)>/gi, '[/i]'],
+    [/<u\b[^>]*>/gi, '[u]'], [/<\/u>/gi, '[/u]'],
+    [/<(?:del|s|strike)\b[^>]*>/gi, '[s]'], [/<\/(?:del|s|strike)>/gi, '[/s]'],
+    [/<blockquote\b[^>]*>/gi, '[quote]'], [/<\/blockquote>/gi, '[/quote]'],
+    [/<code\b[^>]*>/gi, '[code]'], [/<\/code>/gi, '[/code]'],
+    [/<pre\b[^>]*>/gi, ''], [/<\/pre>/gi, ''],
+    [/<details\b[^>]*>/gi, '[spoiler]'], [/<\/details>/gi, '[/spoiler]'],
+    [/<summary\b[^>]*>.*?<\/summary>/gi, ''],
+    [/<ul\b[^>]*>/gi, '[list]'], [/<\/ul>/gi, '[/list]'],
+    [/<ol\b[^>]*>/gi, '[olist]'], [/<\/ol>/gi, '[/olist]'],
+    [/<li\b[^>]*>/gi, '[*]'], [/<\/li>/gi, '\n'],
+    [/<br\s*\/?>/gi, '\n'], [/<p\b[^>]*>/gi, ''], [/<\/p>/gi, '\n\n']
+  ];
+  for (const [pattern, replacement] of replacements) output = output.replace(pattern, replacement);
+  output = output.replace(/<a\b[^>]*href=["']([^"']+)["'][^>]*>([\s\S]*?)<\/a>/gi, '[url=$1]$2[/url]');
+  if (/<[a-z][^>]*>/i.test(output)) warnings.push('Unsupported HTML tags were removed from the BBCode result.');
+  output = decodeHtml(output.replace(/<[^>]+>/g, '')).replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
+  const tagsCount = (source.match(/<\/?[a-z][^>]*>/gi) ?? []).length;
+  return { output, warnings, stats: { characters: output.length, tags: tagsCount, blocks: countBlocks(output) } };
+}

package/src/tool/steamBbcodeTranslator/html-renderer.ts

@@ -0,0 +1,71 @@
+import type { Node, TagNode } from './types';
+
+export function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => {
+    if (character === '&') return '&amp;';
+    if (character === '<') return '&lt;';
+    if (character === '>') return '&gt;';
+    if (character === '"') return '&quot;';
+    return '&#39;';
+  });
+}
+
+export function inlineHtml(nodes: Node[]): string {
+  return nodes.map((node) => node.kind === 'text' ? escapeHtml(node.value) : renderHtmlNode(node, true)).join('');
+}
+
+export function renderHtmlList(node: TagNode, ordered: boolean): string {
+  const items = node.children.filter((child): child is TagNode => child.kind === 'tag' && child.name === '*');
+  const tagName = ordered ? 'ol' : 'ul';
+  const listItems = items.map((item) => {
+    const inner = item.children.map((child) => {
+      if (child.kind === 'tag' && (child.name === 'list' || child.name === 'olist')) return renderHtmlNode(child);
+      if (child.kind === 'text') return escapeHtml(child.value);
+      return renderHtmlNode(child, true);
+    }).join('');
+    return `<li>${inner}</li>`;
+  }).join('');
+  return `<${tagName}>${listItems}</${tagName}>`;
+}
+
+function renderHtmlHeading(name: string, content: string): string | null {
+  if (name === 'h1') return `<h1>${content.trim()}</h1>`;
+  if (name === 'h2') return `<h2>${content.trim()}</h2>`;
+  if (name === 'h3') return `<h3>${content.trim()}</h3>`;
+  return null;
+}
+
+function renderHtmlInlineStyle(name: string, content: string): string | null {
+  if (name === 'b' || name === 'strong') return `<strong>${content}</strong>`;
+  if (name === 'i' || name === 'em') return `<em>${content}</em>`;
+  if (name === 'u') return `<u>${content}</u>`;
+  if (name === 's' || name === 'strike') return `<del>${content}</del>`;
+  return null;
+}
+
+function renderHtmlUrlOrCode(name: string, content: string, value?: string, inline = false): string {
+  if (name === 'url') return value ? `<a href="${escapeHtml(value)}">${content || escapeHtml(value)}</a>` : content;
+  if (name === 'code') return inline ? `<code>${content}</code>` : `<pre><code>${content}</code></pre>`;
+  return content;
+}
+
+function renderHtmlFormatNode(name: string, content: string, value?: string, inline = false): string {
+  const heading = renderHtmlHeading(name, content);
+  if (heading !== null) return heading;
+  const inlineStyle = renderHtmlInlineStyle(name, content);
+  if (inlineStyle !== null) return inlineStyle;
+  return renderHtmlUrlOrCode(name, content, value, inline);
+}
+
+export function renderHtmlNode(node: TagNode, inline = false): string {
+  const content = inlineHtml(node.children);
+  if (node.name === 'quote') return `<blockquote>${content}</blockquote>`;
+  if (node.name === 'spoiler') return `<details><summary>Spoiler</summary>${content}</details>`;
+  if (node.name === 'list') return renderHtmlList(node, false);
+  if (node.name === 'olist') return renderHtmlList(node, true);
+  return renderHtmlFormatNode(node.name, content, node.value, inline);
+}
+
+export function renderHtml(nodes: Node[]): string {
+  return nodes.map((node) => node.kind === 'text' ? escapeHtml(node.value) : renderHtmlNode(node)).join('').replace(/\n{2,}/g, '<br>');
+}