malice

<script lang="ts">

  import { tick } from 'svelte';

  import ComposerText from './ComposerText.svelte';

  import EmojiText from './EmojiText.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import StickerPicker from './StickerPicker.svelte';

  import { mediaUrl } from './api';

  import { COMMAND_USAGE, commandQueryAt, matchCommands, type CommandName } from './commands';

  import { markMentions } from './composer-marks';

  import { loadEmoji, type EmojiEntry } from './emoji';

  import { completeShortcode, emoteQueryAt, rankEmotes, resolveEmotes, type Emote, type EmoteCandidate, type EmoteQuery } from './emotes';

  import { insideOpenFence } from './markdown';

  import { mentionQueryAt, rankPeople, type Mention, type MentionQuery } from './mentions';

  import type { StagedAttachment, StickerHandlers } from './staging';

  import { contentPreview, senderLabel } from './types';

  import type { ImagePack, PackImage, Person, ReplyReference } from './types';

  export let value: string;

  export let inputId: string;

  export let label: string;

  export let placeholder: string;

  export let ready = true;

  export let readyTitle = 'Send message';

  export let picked: Mention[] = [];

  export let onPick: (mention: Mention) => void;

  export let staged: StagedAttachment[] = [];

  export let onStage: (files: File[]) => void;

  export let onUnstage: (id: number) => void;

  export let uploadBusy = false;

  export let uploadName: string | null = null;

  export let editing: { original: string } | null = null;

  export let onCancelEdit: () => void = () => {};

  export let replyingTo: ReplyReference | null = null;

  export let onCancelReply: () => void = () => {};

  export let people: Record<string, Person> = {};

  export let self: string | null = null;

  export let emotes: Emote[] = [];

  export let packs: ImagePack[] = [];

  export let stickers: StickerHandlers | null = null;

  export let commands = false;

  export let onSubmit: () => void;

  export let onEditLast: () => boolean = () => false;

  export let onMentionStart: () => void = () => {};

  let field: HTMLTextAreaElement | null = null;

  let marksEl: HTMLDivElement | null = null;

  let fileInput: HTMLInputElement | null = null;

  let composing = false;

  let stickersOpen = false;

  let mentionQuery: MentionQuery | null = null;

  let mentionIndex = 0;

  $: mentionCandidates = mentionQuery ? rankPeople(Object.values(people), mentionQuery.query, self) : [];

  $: if (mentionIndex >= mentionCandidates.length) mentionIndex = 0;

  let commandQuery: string | null = null;

  let commandIndex = 0;

  $: commandCandidates = commands && commandQuery !== null ? matchCommands(commandQuery) : [];

  $: if (commandIndex >= commandCandidates.length) commandIndex = 0;

  let emoteQuery: EmoteQuery | null = null;

  let emoteIndex = 0;

  let emojiList: EmojiEntry[] = [];

  $: emoteCandidates = emoteQuery ? rankEmotes(emoteQuery.query, emotes, emojiList) : [];

  $: if (emoteIndex >= emoteCandidates.length) emoteIndex = 0;

  $: marks = markMentions(value, picked, resolveEmotes(value, emotes).map((e) => `:${e.shortcode}:`));

  export function focus(): void {

    field?.focus();

  }

  export async function focusEnd(): Promise<void> {

    await tick();

    field?.focus();

    field?.setSelectionRange(value.length, value.length);

  }

  export function closeFinders(): void {

    mentionQuery = null;

    commandQuery = null;

    emoteQuery = null;

    stickersOpen = false;

  }

  function syncMarks(node: HTMLTextAreaElement) {

    const sync = () => {

      if (!marksEl) return;

      marksEl.style.width = `${node.clientWidth}px`;

      marksEl.scrollTop = node.scrollTop;

      marksEl.scrollLeft = node.scrollLeft;

    };

    const observer = new ResizeObserver(sync);

    observer.observe(node);

    node.addEventListener('scroll', sync);

    return {

      destroy: () => {

        observer.disconnect();

        node.removeEventListener('scroll', sync);

      }

    };

  }

  function ensureEmoji(): void {

    if (emojiList.length) return;

    loadEmoji()

      .then((groups) => (emojiList = groups.flatMap((g) => g.emojis)))

      .catch(() => undefined);

  }

  function caret(): number {

    return field?.selectionStart ?? value.length;

  }

  async function placeCaret(at: number): Promise<void> {

    await tick();

    field?.focus();

    field?.setSelectionRange(at, at);

  }

  function updateQueries(): void {

    if (!field) return;

    const at = caret();

    const nextEmote = emoteQueryAt(field.value, at);

    if (nextEmote?.start !== emoteQuery?.start) emoteIndex = 0;

    emoteQuery = nextEmote;

    const nextCommand = commands ? commandQueryAt(field.value, at) : null;

    if (nextCommand !== commandQuery) commandIndex = 0;

    commandQuery = nextCommand;

    const nextMention = mentionQueryAt(field.value, at);

    if (nextMention && !mentionQuery) onMentionStart();

    if (nextMention?.start !== mentionQuery?.start) mentionIndex = 0;

    mentionQuery = nextMention;

  }

  async function onInput(): Promise<void> {

    if (field && value.includes(':')) {

      ensureEmoji();

      const done = completeShortcode(field.value, caret(), emojiList);

      if (done) {

        value = done.text;

        await placeCaret(done.caret);

      }

    }

    updateQueries();

  }

  async function pickCommand(name: CommandName): Promise<void> {

    const rest = value.slice(caret()).replace(/^\S*/, '');

    value = `/${name}${rest.startsWith(' ') ? rest : ` ${rest}`}`;

    commandQuery = null;

    await placeCaret(name.length + 2);

  }

  async function pickEmote(candidate: EmoteCandidate): Promise<void> {

    if (!emoteQuery) return;

    const inserted = candidate.kind === 'emoji' ? candidate.emoji : `:${candidate.shortcode}: `;

    const start = emoteQuery.start;

    value = value.slice(0, start) + inserted + value.slice(caret());

    emoteQuery = null;

    await placeCaret(start + inserted.length);

  }

  async function pickMention(person: Person): Promise<void> {

    if (!mentionQuery) return;

    const inserted = `${person.name} `;

    const start = mentionQuery.start;

    value = value.slice(0, start) + inserted + value.slice(caret());

    onPick({ user_id: person.user_id, text: person.name });

    mentionQuery = null;

    await placeCaret(start + inserted.length);

  }

  function step<T>(list: T[], index: number, key: string): number {

    return (index + (key === 'ArrowDown' ? 1 : -1) + list.length) % list.length;

  }

  function onKey(ev: KeyboardEvent): void {

    if (ev.isComposing || composing) return;

    if (emoteQuery && emoteCandidates.length > 0) {

      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {

        ev.preventDefault();

        emoteIndex = step(emoteCandidates, emoteIndex, ev.key);

        return;

      }

      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {

        ev.preventDefault();

        void pickEmote(emoteCandidates[emoteIndex]);

        return;

      }

      if (ev.key === 'Escape') {

        ev.stopPropagation();

        emoteQuery = null;

        return;

      }

    }

    if (commandQuery !== null && commandCandidates.length > 0) {

      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {

        ev.preventDefault();

        commandIndex = step(commandCandidates, commandIndex, ev.key);

        return;

      }

      const exact = commandCandidates.length === 1 && commandCandidates[0] === commandQuery;

      if (ev.key === 'Tab' || (ev.key === 'Enter' && !ev.shiftKey && !exact)) {

        ev.preventDefault();

        void pickCommand(commandCandidates[commandIndex]);

        return;

      }

      if (ev.key === 'Escape') {

        ev.stopPropagation();

        commandQuery = null;

        return;

      }

    }

    if (mentionQuery && mentionCandidates.length > 0) {

      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {

        ev.preventDefault();

        mentionIndex = step(mentionCandidates, mentionIndex, ev.key);

        return;

      }

      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {

        ev.preventDefault();

        void pickMention(mentionCandidates[mentionIndex]);

        return;

      }

      if (ev.key === 'Escape') {

        ev.stopPropagation();

        mentionQuery = null;

        return;

      }

    }

    if (ev.key === 'Enter' && !ev.shiftKey && !insideOpenFence(value, caret())) {

      ev.preventDefault();

      onSubmit();

    } else if (ev.key === 'Escape' && editing) {

      ev.stopPropagation();

      onCancelEdit();

    } else if (ev.key === 'Escape' && replyingTo) {

      ev.stopPropagation();

      onCancelReply();

    } else if (ev.key === 'ArrowUp' && !value && !editing && onEditLast()) {

      ev.preventDefault();

    }

  }

  function onPaste(ev: ClipboardEvent): void {

    const data = ev.clipboardData;

    // Office apps put a rendered image next to the copied text, so only take the image when there is no plain text.

    if (!data || data.types.includes('text/plain')) return;

    const images = Array.from(data.files).filter((f) => f.type.startsWith('image/'));

    if (images.length === 0) return;

    ev.preventDefault();

    onStage(images);

  }

  function onFileChosen(): void {

    onStage(Array.from(fileInput?.files ?? []));

    if (fileInput) fileInput.value = '';

  }

  function onCaretKey(e: KeyboardEvent): void {

    if ((e.key.startsWith('Arrow') && e.key !== 'ArrowUp' && e.key !== 'ArrowDown') || e.key === 'Home' || e.key === 'End') updateQueries();

  }

</script>

{#if editing}

  <div class="reply-bar" role="status">

    <span class="reply-bar-label">

      Editing message

      <span class="reply-bar-text"><EmojiText text={editing.original} /></span>

    </span>

    <button type="button" class="icon-btn" aria-label="Cancel edit" title="Cancel edit (Esc)" on:click={onCancelEdit}>

      <span aria-hidden="true">✕</span>

    </button>

  </div>

{:else if replyingTo && replyingTo.details.kind === 'Ready'}

  <div class="reply-bar" role="status">

    <span class="reply-bar-label">

      Replying to <strong><EmojiText text={people[replyingTo.details.sender.user_id]?.name ?? senderLabel(replyingTo.details.sender)} /></strong>

      <span class="reply-bar-text"><EmojiText text={contentPreview(replyingTo.details.content)} /></span>

    </span>

    <button type="button" class="icon-btn" aria-label="Cancel reply" title="Cancel reply (Esc)" on:click={onCancelReply}>

      <span aria-hidden="true">✕</span>

    </button>

  </div>

{/if}

{#if staged.length > 0}

  <ul class="staged" aria-label="Attachments to send">

    {#each staged as attachment (attachment.id)}

      <li class="staged-item">

        {#if attachment.previewUrl}

          <img src={attachment.previewUrl} alt={attachment.file.name || 'Pasted image'} />

        {:else}

          <span class="staged-name"><EmojiText text={attachment.file.name || 'attachment'} /></span>

        {/if}

        <button

          type="button"

          class="icon-btn staged-remove"

          aria-label={`Remove ${attachment.file.name || 'attachment'}`}

          title="Remove"

          on:click={() => onUnstage(attachment.id)}

        >

          <span aria-hidden="true">✕</span>

        </button>

      </li>

    {/each}

  </ul>

{/if}

<form class="composer" class:replying={replyingTo || editing} class:staging={staged.length > 0} on:submit|preventDefault={onSubmit}>

  <label class="visually-hidden" for={inputId}>{label}</label>

  <input type="file" multiple bind:this={fileInput} class="visually-hidden" aria-label="Attach a file" on:change={onFileChosen} />

  <button

    type="button"

    class="icon-btn"

    class:busy={uploadBusy}

    title={uploadBusy ? `Uploading ${uploadName ?? 'file'}…` : 'Attach an image or file'}

    aria-label="Attach an image or file"

    aria-busy={uploadBusy}

    disabled={!ready}

    on:click={() => fileInput?.click()}

  >

    <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true">

      <path d="M20 11.5l-8.2 8.2a5 5 0 0 1-7-7L13 4.4a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.5-7.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />

    </svg>

  </button>

  {#if stickers}

    {@const handlers = stickers}

    <button

      type="button"

      class="icon-btn sticker-btn"

      title="Stickers"

      aria-label="Stickers"

      aria-expanded={stickersOpen}

      disabled={!ready}

      on:click={() => (stickersOpen = !stickersOpen)}

    >

      <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true">

        <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7l-7 7H6a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="1.8" />

        <path d="M13 20v-5a2 2 0 0 1 2-2h5" fill="none" stroke="currentColor" stroke-width="1.8" />

      </svg>

    </button>

    {#if stickersOpen}

      <div class="sticker-pop">

        <StickerPicker

          {packs}

          roomName={handlers.roomName}

          onSend={(pack, image) => ((stickersOpen = false), handlers.onSend(pack, image))}

          onClone={(pack, image, x, y) => ((stickersOpen = false), handlers.onClone(pack, image, x, y))}

          onClonePack={(pack, x, y) => ((stickersOpen = false), handlers.onClonePack(pack, x, y))}

          onManage={() => ((stickersOpen = false), handlers.onManage())}

          onClose={() => (stickersOpen = false)}

        />

      </div>

    {/if}

  {/if}

  <div class="composer-field" class:composing>

    {#if commandQuery !== null && commandCandidates.length > 0}

      <ul class="mention-finder" role="listbox" aria-label="Commands">

        {#each commandCandidates as name, i (name)}

          <li

            role="option"

            aria-selected={i === commandIndex}

            class:active={i === commandIndex}

            on:pointerdown|preventDefault={() => void pickCommand(name)}

            on:pointerenter={() => (commandIndex = i)}

          >

            <span class="mention-name">/{name}</span>

            <span class="mention-id">{COMMAND_USAGE[name]}</span>

          </li>

        {/each}

      </ul>

    {/if}

    {#if emoteQuery && emoteCandidates.length > 0}

      <ul class="mention-finder" role="listbox" aria-label="Emotes">

        {#each emoteCandidates as candidate, i (candidate.kind + candidate.shortcode)}

          <li

            role="option"

            aria-selected={i === emoteIndex}

            class:active={i === emoteIndex}

            on:pointerdown|preventDefault={() => void pickEmote(candidate)}

            on:pointerenter={() => (emoteIndex = i)}

          >

            {#if candidate.kind === 'custom'}

              <img class="finder-emote" src={mediaUrl(candidate.mxc, 64) ?? ''} alt="" />

            {:else}

              <span class="finder-emote"><EmojiText text={candidate.emoji} /></span>

            {/if}

            <span class="mention-name">:{candidate.shortcode}:</span>

          </li>

        {/each}

      </ul>

    {/if}

    {#if mentionQuery && mentionCandidates.length > 0}

      <ul class="mention-finder" role="listbox" aria-label="Mention someone">

        {#each mentionCandidates as person, i (person.user_id)}

          <li

            role="option"

            aria-selected={i === mentionIndex}

            class:active={i === mentionIndex}

            on:pointerdown|preventDefault={() => void pickMention(person)}

            on:pointerenter={() => (mentionIndex = i)}

          >

            <MxcAvatar mxc={person.avatar} label={person.name} size={22} />

            <span class="mention-name"><EmojiText text={person.name} /></span>

            <span class="mention-id">{person.user_id}</span>

          </li>

        {/each}

      </ul>

    {/if}

    <div class="composer-marks" aria-hidden="true" bind:this={marksEl}>{#each marks as part}{#if part.mark}<mark><ComposerText text={part.text} /></mark>{:else}<ComposerText text={part.text} />{/if}{/each}&#8203;</div>

    <textarea

      id={inputId}

      bind:this={field}

      bind:value

      use:syncMarks

      rows="1"

      {placeholder}

      aria-label={`${label}. Enter to send, Shift Enter for a new line.`}

      on:keydown={onKey}

      on:input={() => void onInput()}

      on:compositionstart={() => (composing = true)}

      on:compositionend={() => (composing = false)}

      on:click={updateQueries}

      on:focus={ensureEmoji}

      on:keyup={onCaretKey}

      on:blur={() => ((mentionQuery = null), (commandQuery = null), (emoteQuery = null), (composing = false))}

      on:paste={onPaste}

      disabled={!ready}

    ></textarea>

  </div>

  <button

    type="submit"

    class="primary-btn"

    disabled={(!value.trim() && staged.length === 0) || !ready || (staged.length > 0 && uploadBusy)}

    title={ready ? readyTitle : 'Waiting for the room to open'}

  >

    {editing ? 'Save' : 'Send'}

  </button>

</form>