hikari-desktop/src/lib/components/Markdown.svelte

<script lang="ts">
  import { marked } from "marked";
  import hljs from "highlight.js";
  import { onMount } from "svelte";
  import { openUrl } from "@tauri-apps/plugin-opener";

  interface Props {
    content: string;
    searchQuery?: string;
  }

  let { content, searchQuery = "" }: Props = $props();
  let containerElement: HTMLDivElement;

  const renderer = new marked.Renderer();

  renderer.code = ({ text, lang }) => {
    const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
    const highlighted = hljs.highlight(text, { language }).value;
    return `<pre class="hljs-code-block"><code class="hljs language-${language}">${highlighted}</code></pre>`;
  };

  renderer.codespan = ({ text }) => {
    return `<code class="hljs-inline">${text}</code>`;
  };

  marked.setOptions({
    renderer,
    gfm: true,
    breaks: true,
  });

  function processSpoilers(html: string): string {
    const codeBlockPlaceholders: string[] = [];

    // Temporarily replace code blocks and inline code with placeholders
    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
      codeBlockPlaceholders.push(match);
      return `__CODE_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
    });

    // Apply spoiler transformation only to non-code content
    processed = processed.replace(
      /\|\|(.+?)\|\|/g,
      '<span class="spoiler" role="button" tabindex="0">$1</span>'
    );

    // Restore code blocks
    processed = processed.replace(/__CODE_PLACEHOLDER_(\d+)__/g, (_, index) => {
      return codeBlockPlaceholders[parseInt(index)];
    });

    return processed;
  }

  function highlightSearchMatches(html: string, query: string): string {
    if (!query) return html;

    const codeBlockPlaceholders: string[] = [];
    const tagPlaceholders: string[] = [];

    // Temporarily replace code blocks with placeholders (don't highlight in code)
    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
      codeBlockPlaceholders.push(match);
      return `__CODE_SEARCH_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
    });

    // Temporarily replace all HTML tags with placeholders
    processed = processed.replace(/<[^>]+>/g, (match) => {
      tagPlaceholders.push(match);
      return `__TAG_PLACEHOLDER_${tagPlaceholders.length - 1}__`;
    });

    // Apply search highlighting to text content
    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    const regex = new RegExp(`(${escapedQuery})`, "gi");
    processed = processed.replace(regex, '<mark class="search-highlight">$1</mark>');

    // Restore HTML tags
    processed = processed.replace(/__TAG_PLACEHOLDER_(\d+)__/g, (_, index) => {
      return tagPlaceholders[parseInt(index)];
    });

    // Restore code blocks
    processed = processed.replace(/__CODE_SEARCH_PLACEHOLDER_(\d+)__/g, (_, index) => {
      return codeBlockPlaceholders[parseInt(index)];
    });

    return processed;
  }

  function renderMarkdown(text: string): string {
    try {
      const html = marked.parse(text) as string;
      const withSpoilers = processSpoilers(html);
      return highlightSearchMatches(withSpoilers, searchQuery);
    } catch {
      return text;
    }
  }

  function handleSpoilerClick(event: Event) {
    const target = event.target as HTMLElement;
    if (target.classList.contains("spoiler")) {
      target.classList.toggle("revealed");
    }
  }

  function handleSpoilerKeydown(event: KeyboardEvent) {
    const target = event.target as HTMLElement;
    if (target.classList.contains("spoiler") && (event.key === "Enter" || event.key === " ")) {
      event.preventDefault();
      target.classList.toggle("revealed");
    }
  }

  function handleLinkClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    const anchor = target.closest("a");
    if (anchor?.href) {
      event.preventDefault();
      openUrl(anchor.href);
    }
  }

  onMount(() => {
    if (containerElement) {
      containerElement.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
        hljs.highlightElement(block as HTMLElement);
      });
    }
  });
</script>

<div
  bind:this={containerElement}
  class="markdown-content"
  onclick={(e) => {
    handleSpoilerClick(e);
    handleLinkClick(e);
  }}
  onkeydown={handleSpoilerKeydown}
  role="presentation"
>
  <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown rendering requires @html; content is from Claude API -->
  {@html renderMarkdown(content)}
</div>

<style>
  .markdown-content {
    line-height: 1.6;
  }

  .markdown-content :global(p) {
    margin: 0.5em 0;
  }

  .markdown-content :global(p:first-child) {
    margin-top: 0;
  }

  .markdown-content :global(p:last-child) {
    margin-bottom: 0;
  }

  .markdown-content :global(.hljs-code-block) {
    background: var(--bg-code, #1e1e2e);
    border-radius: 6px;
    padding: 1em;
    margin: 0.75em 0;
    overflow-x: auto;
    border: 1px solid var(--border-color);
  }

  .markdown-content :global(.hljs-code-block code) {
    background: transparent;
    padding: 0;
    font-size: 0.9em;
    font-family: "JetBrains Mono", "Fira Code", monospace;
  }

  .markdown-content :global(.hljs-inline) {
    background: var(--bg-code, #1e1e2e);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: "JetBrains Mono", "Fira Code", monospace;
  }

  .markdown-content :global(ul),
  .markdown-content :global(ol) {
    margin: 0.5em 0;
    padding-left: 1.5em;
  }

  .markdown-content :global(li) {
    margin: 0.25em 0;
  }

  .markdown-content :global(blockquote) {
    border-left: 3px solid var(--border-color);
    margin: 0.75em 0;
    padding-left: 1em;
    color: var(--text-secondary);
  }

  .markdown-content :global(a) {
    color: var(--accent-primary, #f472b6);
    text-decoration: underline;
  }

  .markdown-content :global(a:hover) {
    color: var(--accent-secondary, #e879f9);
  }

  .markdown-content :global(strong) {
    font-weight: 600;
  }

  .markdown-content :global(h1),
  .markdown-content :global(h2),
  .markdown-content :global(h3),
  .markdown-content :global(h4) {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
  }

  .markdown-content :global(h1:first-child),
  .markdown-content :global(h2:first-child),
  .markdown-content :global(h3:first-child),
  .markdown-content :global(h4:first-child) {
    margin-top: 0;
  }

  .markdown-content :global(hr) {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1em 0;
  }

  .markdown-content :global(table) {
    border-collapse: collapse;
    margin: 0.75em 0;
    width: 100%;
  }

  .markdown-content :global(th),
  .markdown-content :global(td) {
    border: 1px solid var(--border-color);
    padding: 0.5em;
    text-align: left;
  }

  .markdown-content :global(th) {
    background: var(--bg-secondary);
    font-weight: 600;
  }

  /* Highlight.js theme colors - using CSS variables for light/dark mode support */
  .markdown-content :global(.hljs) {
    color: var(--text-primary);
  }

  .markdown-content :global(.hljs-keyword),
  .markdown-content :global(.hljs-selector-tag),
  .markdown-content :global(.hljs-built_in),
  .markdown-content :global(.hljs-name) {
    color: var(--hljs-keyword);
  }

  .markdown-content :global(.hljs-string),
  .markdown-content :global(.hljs-attr),
  .markdown-content :global(.hljs-symbol),
  .markdown-content :global(.hljs-bullet) {
    color: var(--hljs-string);
  }

  .markdown-content :global(.hljs-number),
  .markdown-content :global(.hljs-literal) {
    color: var(--hljs-number);
  }

  .markdown-content :global(.hljs-comment),
  .markdown-content :global(.hljs-quote) {
    color: var(--hljs-comment);
    font-style: italic;
  }

  .markdown-content :global(.hljs-function),
  .markdown-content :global(.hljs-title) {
    color: var(--hljs-function);
  }

  .markdown-content :global(.hljs-type),
  .markdown-content :global(.hljs-class) {
    color: var(--hljs-type);
  }

  .markdown-content :global(.hljs-variable),
  .markdown-content :global(.hljs-template-variable) {
    color: var(--hljs-variable);
  }

  .markdown-content :global(.hljs-meta) {
    color: var(--hljs-meta);
  }

  .markdown-content :global(.hljs-tag) {
    color: var(--hljs-keyword);
  }

  .markdown-content :global(.hljs-attribute) {
    color: var(--hljs-function);
  }

  .markdown-content :global(.hljs-params) {
    color: var(--text-primary);
  }

  /* Spoiler tag styles */
  .markdown-content :global(.spoiler) {
    background: var(--text-primary);
    color: transparent;
    border-radius: 4px;
    padding: 0 0.25em;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
  }

  .markdown-content :global(.spoiler:hover) {
    opacity: 0.8;
  }

  .markdown-content :global(.spoiler:focus) {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .markdown-content :global(.spoiler.revealed) {
    background: var(--bg-hover);
    color: var(--text-primary);
    user-select: text;
  }

  .markdown-content :global(.search-highlight) {
    background-color: var(--search-highlight, #fbbf24);
    color: var(--search-highlight-text, #000);
    border-radius: 2px;
    padding: 0 2px;
  }
</style>