Radish alpha
r
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Fix emoji reactivity bug
Open rudolfs opened 1 year ago

The emoji list would not update correctly when adding and removing emojis.

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

2 files changed +20 -3 0338e96d c64a718e
modified src/components/Reactions.svelte
@@ -2,7 +2,7 @@
  import type { Author } from "@bindings/cob/Author";
  import type { Reaction } from "@bindings/cob/Reaction";

-
  import { twemoji } from "@app/lib/utils";
+
  import { emojiToTwemoji } from "@app/lib/utils";

  interface Props {
    reactions: Reaction[];
@@ -44,12 +44,12 @@
              await handleReaction(authors, emoji);
            }
          }}>
-
          <span use:twemoji={{ exclude: ["21a9"] }}>{emoji}</span>
+
          <span>{@html emojiToTwemoji(emoji, ["21a9"])}</span>
          <span>{authors.length}</span>
        </div>
      {:else}
        <div class="reaction txt-tiny" style="padding: 2px 4px;">
-
          <span use:twemoji={{ exclude: ["21a9"] }}>{emoji}</span>
+
          <span>{@html emojiToTwemoji(emoji, ["21a9"])}</span>
          <span>{authors.length}</span>
        </div>
      {/if}
modified src/lib/utils.ts
@@ -102,6 +102,10 @@ export const formatTimestamp = (
  return new Date(timestamp).toUTCString();
};

+
// Svelte action for replacing emojis within an element with Twemoji SVGs.
+
// This action is non-reactive; it only runs when the element is mounted.
+
//
+
// Usage: <span use:twemoji>👍</span>
export function twemoji(
  node: HTMLElement,
  { exclude }: { exclude: string[] } = { exclude: [] },
@@ -121,6 +125,19 @@ export function twemoji(
  });
}

+
// Converts a single emoji character to an <img> tag using Twemoji SVG assets.
+
// This function is useful in reactive contexts where Svelte actions won't
+
// re-run automatically.
+
//
+
// Usage: <span>{@html emojiToTwemoji("👍")}</span>
+
export function emojiToTwemoji(emoji: string, exclude?: string[]) {
+
  const filename = emoji.codePointAt(0)?.toString(16);
+
  if (!filename || exclude?.includes(filename)) {
+
    return "";
+
  }
+
  return `<img alt="${emoji}" src="/twemoji/${filename}.svg" class="txt-emoji">`;
+
}
+

export function scrollIntoView(id: string, options?: ScrollIntoViewOptions) {
  const lineElement = document.getElementById(id);
  if (lineElement) {