@astronox/core 0.2.0 → 0.2.2

package/src/components/content/MarkdownContent/markdownContentRenderer.ts

@@ -0,0 +1,549 @@
+import type { DisplayMedia } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+import { initCodeBlock } from '../CodeBlock/codeBlockController';
+import type { CodeBlockCopy } from '../CodeBlock/contracts';
+import type {
+  MarkdownBlock,
+  MarkdownDocument,
+  MarkdownInline,
+  MarkdownListItem,
+  MarkdownListMarker,
+  MarkdownSection,
+  MarkdownSymbol,
+} from './contracts';
+
+type RenderOptions = {
+  codeBlockCopy?: CodeBlockCopy;
+};
+
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const codeBlockTones = new Set<Tone>([
+  'neutral',
+  'info',
+  'success',
+  'warning',
+  'danger',
+]);
+const defaultListMarker = {
+  symbol: 'bullet',
+  tone: 'neutral',
+} as const satisfies MarkdownListMarker;
+const nestedListMarker = {
+  symbol: 'arrow-right',
+  tone: 'neutral',
+} as const satisfies MarkdownListMarker;
+
+export function renderMarkdownDocument(
+  root: HTMLElement,
+  document: MarkdownDocument,
+  options: RenderOptions = {},
+): void {
+  const fragment = window.document.createDocumentFragment();
+  document.blocks.forEach((block) => {
+    fragment.append(renderNode(block, options));
+  });
+  root.replaceChildren(fragment);
+}
+
+function renderNode(
+  node: MarkdownBlock | MarkdownSection,
+  options: RenderOptions,
+): HTMLElement {
+  if (node.type === 'section') {
+    const section = createElement('section', 'markdown-content__section');
+    section.setAttribute('aria-labelledby', node.id);
+    const heading = createHeading(
+      node.level,
+      'markdown-content__section-title',
+    );
+    heading.id = node.id;
+    heading.textContent = node.title;
+    const body = createElement('div', 'markdown-content__section-body');
+    node.blocks.forEach((block) => body.append(renderNode(block, options)));
+    section.append(heading, body);
+    return section;
+  }
+
+  if (node.type === 'paragraph') {
+    const paragraph = createElement('p', 'markdown-content__paragraph');
+    appendInline(paragraph, node.children);
+    return paragraph;
+  }
+
+  if (node.type === 'heading') {
+    const heading = createHeading(node.level, 'markdown-content__heading');
+    heading.id = node.id;
+    appendInline(heading, node.children);
+    return heading;
+  }
+
+  if (node.type === 'change') {
+    const change = createElement('div', 'markdown-content__change');
+    const label = createElement('span', 'markdown-content__change-label');
+    appendInline(label, node.label);
+    label.append(':');
+    const values = createElement('span', 'markdown-content__change-values');
+
+    if (node.presentation === 'statement') {
+      appendInline(values, node.value);
+    } else {
+      if (node.valueLang) values.lang = node.valueLang;
+      const transition = createElement(
+        'span',
+        'markdown-content__change-transition',
+      );
+      transition.append(
+        document.createTextNode(node.before),
+        renderSymbol({
+          type: 'symbol',
+          name: 'arrow-right',
+          accessibleLabel: node.transitionLabel,
+          lang: node.valueLang,
+        }),
+        document.createTextNode(node.after),
+      );
+      if (node.delta) {
+        const delta = createElement(
+          'span',
+          'markdown-content__change-delta',
+        );
+        delta.dataset.tone = node.delta.tone;
+        delta.append('(');
+        if (node.delta.sign !== 'neutral') {
+          const accessible = createElement(
+            'span',
+            'markdown-content__visually-hidden',
+          );
+          accessible.textContent = node.delta.accessibleLabel;
+          const sign = document.createElement('span');
+          sign.ariaHidden = 'true';
+          sign.textContent = node.delta.sign === 'plus' ? '+' : '-';
+          delta.append(accessible, sign);
+        }
+        delta.append(node.delta.value, ')');
+        transition.append(delta);
+      }
+      values.append(transition);
+      if (node.suffix?.length) {
+        const suffix = createElement(
+          'span',
+          'markdown-content__change-suffix',
+        );
+        appendInline(suffix, node.suffix);
+        values.append(suffix);
+      }
+    }
+
+    change.append(label, values);
+    return change;
+  }
+
+  if (node.type === 'list') {
+    const list = createElement('ul', 'markdown-content__list');
+    if (node.items.some((item) => item.heading)) {
+      list.dataset.markdownHasHeadings = 'true';
+    }
+    if (node.items.some((item) => item.resource)) {
+      list.dataset.markdownHasResources = 'true';
+    }
+    node.items.forEach((item) => list.append(renderListItem(item, options)));
+    return list;
+  }
+
+  if (node.type === 'quote') {
+    const quote = createElement('blockquote', 'markdown-content__quote');
+    quote.dataset.tone = node.tone ?? 'neutral';
+    node.children.forEach((block) => quote.append(renderNode(block, options)));
+    return quote;
+  }
+
+  if (node.type === 'separator') {
+    const separator = createElement('hr', 'separator');
+    separator.dataset.widget = 'separator';
+    separator.dataset.separatorBleed = 'true';
+    separator.dataset.separatorEmphasis = node.emphasis ?? 'muted';
+    return separator;
+  }
+
+  return renderCodeBlock(node.language, node.value, options.codeBlockCopy);
+}
+
+function renderListItem(
+  item: MarkdownListItem,
+  options: RenderOptions,
+): HTMLLIElement {
+  const listItem = createElement('li', 'markdown-content__list-item');
+  const marker =
+    item.marker ??
+    (item.heading
+      ? nestedListMarker
+      : item.resource
+        ? undefined
+        : defaultListMarker);
+
+  if (marker) listItem.dataset.markdownHasMarker = 'true';
+  if (item.resource) {
+    listItem.dataset.markdownResource = 'true';
+    listItem.dataset.markdownResourceLayout = item.resource.layout;
+    listItem.dataset.markdownResourceMedia = item.resource.mediaPlacement;
+    listItem.dataset.markdownResourceMediaScale = item.resource.mediaScale;
+  }
+  if (item.resource?.mediaPlacement === 'lead') {
+    listItem.append(
+      renderMedia(
+        item.resource.media,
+        'markdown-content__lead-media',
+        'fill',
+        item.resource.mediaScale === 'compact',
+      ),
+    );
+  }
+  if (marker) {
+    listItem.append(
+      renderSymbol({
+        type: 'symbol',
+        name: marker.symbol,
+        accessibleLabel: marker.label,
+        lang: marker.lang,
+        tone: marker.tone,
+      }),
+    );
+  }
+
+  const body = createElement('div', 'markdown-content__list-item-body');
+  if (item.heading) {
+    const heading = createHeading(5, 'markdown-content__heading');
+    appendInline(heading, item.heading);
+    body.append(heading);
+  } else if (item.resource) {
+    const heading = createElement(
+      'div',
+      'markdown-content__resource-heading',
+    );
+    if (item.resource.mediaPlacement === 'inline') {
+      heading.append(
+        renderMedia(
+          item.resource.media,
+          'markdown-content__inline-media',
+          'intrinsic',
+          item.resource.mediaScale === 'compact',
+        ),
+      );
+    }
+    const title = createElement(
+      item.resource.layout === 'detailed' ? 'h3' : 'span',
+      'markdown-content__resource-title',
+    );
+    appendInline(title, item.resource.title);
+    heading.append(title);
+    body.append(heading);
+  }
+  item.children.forEach((block) => body.append(renderNode(block, options)));
+  listItem.append(body);
+  return listItem;
+}
+
+function appendInline(
+  parent: HTMLElement,
+  nodes: readonly MarkdownInline[],
+): void {
+  nodes.forEach((node) => parent.append(renderInline(node)));
+}
+
+function renderInline(node: MarkdownInline): Node {
+  if (node.type === 'text') {
+    if (!node.lang) return document.createTextNode(node.value);
+    const text = document.createElement('span');
+    text.lang = node.lang;
+    text.textContent = node.value;
+    return text;
+  }
+  if (node.type === 'symbol') return renderSymbol(node);
+  if (node.type === 'strong' || node.type === 'emphasis') {
+    const element = document.createElement(
+      node.type === 'strong' ? 'strong' : 'em',
+    );
+    appendInline(element, node.children);
+    return element;
+  }
+  if (node.type === 'code') {
+    const code = createElement('code', 'markdown-content__inline-code');
+    code.textContent = node.value;
+    return code;
+  }
+  if (node.type === 'link') {
+    const link = createElement('a', 'markdown-content__link');
+    link.href = node.href;
+    link.dataset.tone = 'info';
+    if (node.lang) link.lang = node.lang;
+    if (node.treatment) link.dataset.markdownLinkTreatment = node.treatment;
+    if (node.external) {
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+    }
+    appendInline(link, node.children);
+    return link;
+  }
+  return document.createElement('br');
+}
+
+function renderSymbol(node: MarkdownSymbol): HTMLSpanElement {
+  const symbol = createElement('span', 'markdown-content__symbol');
+  symbol.dataset.markdownSymbol = node.name;
+  if (node.tone) symbol.dataset.tone = node.tone;
+  if (node.lang) symbol.lang = node.lang;
+  symbol.append(createSymbolIcon(node.name));
+
+  if (node.label) {
+    const label = createElement('span', 'markdown-content__symbol-label');
+    label.textContent = node.label;
+    symbol.append(label);
+  } else if (node.accessibleLabel) {
+    const label = createElement(
+      'span',
+      'markdown-content__visually-hidden',
+    );
+    label.textContent = node.accessibleLabel;
+    symbol.append(label);
+  }
+  return symbol;
+}
+
+function createSymbolIcon(name: MarkdownSymbol['name']): SVGSVGElement {
+  const svg = document.createElementNS(svgNamespace, 'svg');
+  svg.setAttribute('viewBox', '0 0 32 32');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  svg.classList.add('markdown-content__symbol-icon');
+
+  if (name.startsWith('terrain-')) {
+    svg.classList.add('circle-symbol-icon');
+    svg.dataset.terrainIcon = name.slice('terrain-'.length);
+    appendTerrainIcon(svg, name);
+    return svg;
+  }
+
+  if (name === 'bullet') {
+    const circle = document.createElementNS(svgNamespace, 'circle');
+    circle.setAttribute('cx', '16');
+    circle.setAttribute('cy', '16');
+    circle.setAttribute('r', '4.5');
+    circle.setAttribute('fill', 'currentColor');
+    svg.append(circle);
+    return svg;
+  }
+
+  const path = document.createElementNS(svgNamespace, 'path');
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  path.setAttribute('stroke-width', name === 'neutral' ? '3' : '2.4');
+  path.setAttribute(
+    'd',
+    name === 'increase'
+      ? 'm7.5 19.5 8.5-8.5 8.5 8.5'
+      : name === 'decrease'
+        ? 'm7.5 12.5 8.5 8.5 8.5-8.5'
+        : name === 'adjustment'
+          ? 'M11 24V8m0 0-4 4m4-4 4 4m6-4v16m0 0-4-4m4 4 4-4'
+          : name === 'neutral'
+            ? 'M6 11.5h20M6 20.5h20'
+            : 'm12.5 7.5 8.5 8.5-8.5 8.5',
+  );
+  svg.append(path);
+  return svg;
+}
+
+function appendTerrainIcon(
+  svg: SVGSVGElement,
+  name: Extract<MarkdownSymbol['name'], `terrain-${string}`>,
+): void {
+  const surface = document.createElementNS(svgNamespace, 'circle');
+  surface.setAttribute('cx', '16');
+  surface.setAttribute('cy', '16');
+  surface.setAttribute('r', '13');
+  surface.classList.add('circle-symbol-icon__surface');
+  svg.append(surface);
+
+  if (name === 'terrain-field') {
+    const rectangle = document.createElementNS(svgNamespace, 'rect');
+    rectangle.setAttribute('x', '9');
+    rectangle.setAttribute('y', '9');
+    rectangle.setAttribute('width', '14');
+    rectangle.setAttribute('height', '14');
+    rectangle.setAttribute('rx', '1');
+    rectangle.classList.add('circle-symbol-icon__mark');
+    const grid = document.createElementNS(svgNamespace, 'path');
+    grid.setAttribute('d', 'M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14');
+    grid.classList.add('circle-symbol-icon__mark');
+    svg.append(rectangle, grid);
+    return;
+  }
+
+  const fill = document.createElementNS(svgNamespace, 'path');
+  fill.classList.add('circle-symbol-icon__fill');
+  fill.setAttribute(
+    'd',
+    name === 'terrain-grass'
+      ? 'M23.5 8.5c.2 8.4-3.7 14-11.7 15.2-3.1-6.8.2-13.5 11.7-15.2Z'
+      : name === 'terrain-water'
+        ? 'M16 5.5c3.1 4.2 7.5 9 7.5 13.3A7.5 7.5 0 1 1 8.5 18.8C8.5 14.5 12.9 9.7 16 5.5Z'
+        : 'm5.5 24 7.3-13 3.1 5.1 3.4-7.1 7.2 15H5.5Z',
+  );
+  const highlight = document.createElementNS(svgNamespace, 'path');
+  highlight.classList.add('circle-symbol-icon__highlight');
+  highlight.setAttribute(
+    'd',
+    name === 'terrain-grass'
+      ? 'M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6'
+      : name === 'terrain-water'
+        ? 'M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1'
+        : 'm10.8 14.6 2-3.6 3.1 5.1 1.4-2.9 2.4 3.6-3.5-1.1-2.5 2.1-2.9-3.2Z',
+  );
+  svg.append(fill, highlight);
+}
+
+function renderMedia(
+  media: DisplayMedia,
+  className: string,
+  size: 'fill' | 'intrinsic',
+  preventUpscale: boolean,
+): HTMLElement {
+  const figure = createElement('figure', `media ${className}`);
+  figure.dataset.widget = 'media';
+  figure.dataset.mediaFit = media.fit ?? 'contain';
+  figure.dataset.mediaFraming = media.framing ?? 'asset';
+  figure.dataset.mediaRendering = media.rendering ?? 'auto';
+  figure.dataset.mediaShape = media.shape ?? 'default';
+  figure.dataset.mediaSize = size;
+  figure.dataset.mediaUpscale = preventUpscale
+    ? 'prevent'
+    : (media.upscale ?? 'allow');
+  figure.dataset.mediaVisualSize = media.visualSize ?? 'default';
+  figure.style.setProperty(
+    '--media-aspect-ratio',
+    `${media.width} / ${media.height}`,
+  );
+  figure.style.setProperty('--media-source-inline-size', `${media.width}px`);
+  figure.style.setProperty('--media-source-block-size', `${media.height}px`);
+
+  const frame = createElement('div', 'media__frame');
+  const image = document.createElement('img');
+  image.src = media.src;
+  image.alt = media.alt;
+  image.width = media.width;
+  image.height = media.height;
+  image.loading = media.loading ?? 'lazy';
+  image.decoding = media.decoding ?? 'async';
+  if (media.sources?.length) {
+    image.srcset = media.sources
+      .map((source) => `${source.src} ${source.width}w`)
+      .join(', ');
+  }
+  if (media.sizes) image.sizes = media.sizes;
+  frame.append(image);
+  figure.append(frame);
+  if (media.caption) {
+    const caption = document.createElement('figcaption');
+    caption.textContent = media.caption;
+    figure.append(caption);
+  }
+  return figure;
+}
+
+function renderCodeBlock(
+  language: string | undefined,
+  value: string,
+  copy: CodeBlockCopy | undefined,
+): HTMLElement {
+  const normalized = language?.trim().toLowerCase() || undefined;
+  const presentation = normalized === 'markdown' ? 'light' : 'default';
+  const tone =
+    normalized && codeBlockTones.has(normalized as Tone)
+      ? (normalized as Tone)
+      : 'neutral';
+  const content = createElement('pre', 'code-block');
+  content.dataset.codeBlockPresentation = presentation;
+  content.dataset.wrap = 'false';
+  content.textContent = value;
+  if (!copy) {
+    content.dataset.widget = 'code-block';
+    content.dataset.tone = tone;
+    return content;
+  }
+
+  const shell = createElement('nox-code-block', 'code-block-shell');
+  shell.dataset.widget = 'code-block';
+  shell.dataset.tone = tone;
+  content.dataset.codeBlockContent = '';
+  const button = createElement('button', 'nox-button code-block__copy');
+  button.type = 'button';
+  button.dataset.buttonBorderless = 'true';
+  button.dataset.buttonHoverTone = 'info';
+  button.dataset.buttonIconOnly = 'true';
+  button.dataset.buttonSize = 'sm';
+  button.dataset.codeBlockCopy = '';
+  button.dataset.copyLabel = copy.copyLabel;
+  button.dataset.copiedLabel = copy.copiedLabel;
+  button.dataset.copyUnavailableLabel = copy.unavailableLabel;
+  button.setAttribute('aria-label', copy.copyLabel);
+  button.title = copy.copyLabel;
+  if (copy.lang) button.lang = copy.lang;
+  button.append(createCopyIcon());
+  const status = createElement('span', 'code-block__status');
+  status.dataset.codeBlockStatus = '';
+  status.setAttribute('aria-live', 'polite');
+  if (copy.lang) status.lang = copy.lang;
+  shell.append(content, button, status);
+  initCodeBlock(shell);
+  return shell;
+}
+
+function createCopyIcon(): SVGSVGElement {
+  const svg = document.createElementNS(svgNamespace, 'svg');
+  svg.setAttribute('viewBox', '0 0 32 32');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  const rectangle = document.createElementNS(svgNamespace, 'rect');
+  rectangle.setAttribute('x', '11');
+  rectangle.setAttribute('y', '11');
+  rectangle.setAttribute('width', '14');
+  rectangle.setAttribute('height', '14');
+  rectangle.setAttribute('rx', '2');
+  rectangle.setAttribute('stroke', 'currentColor');
+  rectangle.setAttribute('stroke-width', '2.5');
+  const path = document.createElementNS(svgNamespace, 'path');
+  path.setAttribute(
+    'd',
+    'M21 11V9C21 7.89543 20.1046 7 19 7H9C7.89543 7 7 7.89543 7 9V19C7 20.1046 7.89543 21 9 21H11',
+  );
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-width', '2.5');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  svg.append(rectangle, path);
+  return svg;
+}
+
+function createHeading(
+  level: number,
+  className: string,
+): HTMLHeadingElement {
+  const heading = createElement(
+    `h${Math.min(6, Math.max(2, level))}` as keyof HTMLElementTagNameMap,
+    className,
+  ) as HTMLHeadingElement;
+  heading.dataset.markdownHeadingLevel = String(level);
+  return heading;
+}
+
+function createElement<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  className?: string,
+): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  return element;
+}