malice

<script lang="ts">

  import EmojiText from './EmojiText.svelte';

  import { parseCode } from './code';

  import { segmentInline } from './inline';

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

  export let text: string;

  export let jumbo = false;

  export let mentions: Mention[] = [];

  export let self: string | null = null;

  $: segments = parseCode(text);

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

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

</script>

{#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} /></span>{:else if p.kind === 'link'}<a class="link" href={p.href} target="_blank" rel="noopener noreferrer">{p.text}</a>{:else}<EmojiText text={p.text} jumbo={jumbo && single} />{/if}{/each}{/if}{/each}

<style>

  code {

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

    font-size: 0.9em;

  }

  .inline {

    padding: 1px 5px;

    border-radius: 4px;

    background: var(--bg-soft);

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

  }

  .block {

    margin: 4px 0;

    padding: 8px 10px;

    border-radius: 6px;

    background: var(--bg-soft);

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

    overflow-x: auto;

    white-space: pre;

    line-height: 1.4;

  }

  .mention {

    padding: 0 4px;

    border-radius: 4px;

    font-weight: 600;

    color: var(--accent);

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

  }

  .mention.me {

    color: var(--warn-text);

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

  }

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

  .link:hover { text-decoration: underline; }

</style>