malice

<script lang="ts">

  import EmojiText from './EmojiText.svelte';

  import RichNodes from './RichNodes.svelte';

  import { parseCode } from './code';

  import { segmentInline } from './inline';

  import type { Mention } from './mentions';

  import { parseRich } from './rich';

  export let text: string;

  export let html: string | null = null;

  export let jumbo = false;

  export let mentions: Mention[] = [];

  export let self: string | null = null;

  export let nameOf: (userId: string) => string | null = () => null;

  $: rich = html ? parseRich(html) : null;

  $: segments = parseCode(text);

  $: pieces = segments.map((s) => (s.kind === 'text' ? segmentInline(s.text, mentions) : []));

  $: single = segments.length === 1 && pieces[0].length === 1;

</script>

{#if rich}<div class="rich"><RichNodes nodes={rich} {mentions} {self} {nameOf} /></div>{:else}{#each segments as s, i}{#if s.kind === 'inline'}<code class="inline">{s.text}</code>{:else if s.kind === 'block'}<pre class="block"><code>{s.text}</code></pre>{:else}{#each pieces[i] as p}{#if p.kind === 'mention'}<span class="mention" class:me={p.user_id === self} title={p.user_id}><EmojiText text={p.text === p.user_id ? (nameOf(p.user_id) ?? p.text) : p.text} /></span>{:else if p.kind === 'link'}<a class="link" href={p.href} target="_blank" rel="noopener noreferrer"><EmojiText text={p.text} /></a>{:else}<EmojiText text={p.text} jumbo={jumbo && single} />{/if}{/each}{/if}{/each}{/if}

<style>

  code, .rich :global(code) {

    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, monospace;

    font-size: 0.9em;

  }

  .inline, .rich :global(:not(pre) > code) {

    padding: 1px 5px;

    border-radius: var(--r-sm);

    background: var(--bg-soft);

    border: 1px solid var(--border);

  }

  .block, .rich :global(pre) {

    margin: 4px 0;

    padding: 8px 10px;

    border-radius: var(--r-sm);

    background: var(--bg-soft);

    border: 1px solid var(--border);

    overflow-x: auto;

    white-space: pre;

    line-height: 1.4;

  }

  .mention, .rich :global(.mention) {

    padding: 0 4px;

    border-radius: var(--r-sm);

    font-weight: 600;

    color: var(--accent);

    background: color-mix(in srgb, var(--accent) 18%, transparent);

  }

  .mention.me, .rich :global(.mention.me) {

    color: var(--warn-text);

    background: color-mix(in srgb, var(--warn) 28%, transparent);

  }

  .link, .rich :global(.link) { color: var(--accent); overflow-wrap: anywhere; }

  .link:hover, .rich :global(.link:hover) { text-decoration: underline; }

  .rich { white-space: normal; }

  .rich :global(:is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, table, details)) { margin: 4px 0; }

  .rich :global(:first-child) { margin-top: 0; }

  .rich :global(:last-child) { margin-bottom: 0; }

  .rich :global(:is(ul, ol)) { padding-left: 22px; }

  .rich :global(blockquote) {

    padding: 2px 10px;

    border-left: 3px solid var(--border);

    color: var(--muted);

  }

  .rich :global(:is(h1, h2, h3, h4, h5, h6)) { line-height: 1.3; }

  .rich :global(h1) { font-size: 1.4em; }

  .rich :global(h2) { font-size: 1.25em; }

  .rich :global(:is(h3, h4, h5, h6)) { font-size: 1.1em; }

  .rich :global(hr) { border: none; border-top: 1px solid var(--border); margin: 8px 0; }

  .rich :global(table) { border-collapse: collapse; }

  .rich :global(:is(th, td)) { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }

  .rich :global(.spoiler) {

    border-radius: var(--r-sm);

    background: var(--text);

    color: transparent;

    cursor: pointer;

  }

  .rich :global(.spoiler:is(:hover, :focus)) { background: var(--bg-soft); color: inherit; }

  .rich :global(.emote) { height: 1.6em; width: auto; vertical-align: middle; }

</style>