Add emoji reactions

src/lib/components/EmojiPicker.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import 'emoji-picker-element'
+  import type {Emoji} from 'emoji-picker-element/shared'
+  import {onMount} from 'svelte'
+
+  export let onClick: (emoji: Emoji) => void
+
+  let element: Element
+
+  onMount(() => {
+    element.addEventListener('emoji-click', (event: any) => onClick(event.detail as Emoji))
+  })
+</script>
+
+<emoji-picker bind:this={element} />

src/lib/components/Tippy.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import type {SvelteComponent, ComponentType, ComponentProps} from 'svelte'
+  import tippy, {type Instance, type Props} from "tippy.js"
+
+  export let component: ComponentType
+  export let props: ComponentProps<any> = {}
+  export let params: Partial<Props> = {}
+  export let popover: Instance | undefined = undefined
+  export let instance: SvelteComponent | undefined = undefined
+
+  let element: Element
+
+  $: instance?.$set(props)
+
+  onMount(() => {
+    const target = document.createElement("div")
+
+    popover = tippy(element, {content: target, ...params})
+
+    instance = new component({target, props})
+
+    return () => {
+      popover?.destroy()
+      instance?.$destroy()
+    }
+  })
+</script>
+
+<div bind:this={element} />

src/lib/editor/Suggestions.ts

@@ -51,7 +51,6 @@ export const createSuggestions = (options: SuggestionsOptions) =>
     },
     render: () => {
       let popover: Instance[]
-      let target: HTMLElement
       let suggestions: SvelteComponent
 
       const mapProps = (props: any) => ({
@@ -64,7 +63,7 @@ export const createSuggestions = (options: SuggestionsOptions) =>
 
       return {
         onStart: props => {
-          target = document.createElement("div")
+          const target = document.createElement("div")
 
           popover = tippy("body", {
             getReferenceClientRect: props.clientRect as any,