add: markdown emoji parsing

crates/app/src/public/html/components.html

@@ -1112,4 +1112,75 @@ secondary=false) -%}
     </div>
     {% endif %}
 </div>
-{%- endmacro %}
+{%- endmacro %} {% macro emoji_picker(element_id, render_dialog=false) -%}
+<button
+    class="button small square quaternary"
+    onclick="window.EMOJI_PICKER_TEXT_ID = '{{ element_id }}'; document.getElementById('emoji_dialog').showModal()"
+    title="Emojis"
+    type="button"
+>
+    {{ icon "smile-plus" }}
+</button>
+
+{% if render_dialog %}
+<dialog id="emoji_dialog">
+    <div class="inner flex flex-col gap-2">
+        <script
+            type="module"
+            src="https://unpkg.com/emoji-picker-element@1.22.8/index.js"
+        ></script>
+
+        <emoji-picker
+            style="
+                --border-radius: var(--radius);
+                --background: var(--color-super-raised);
+                --input-border-radiFus: var(--radius);
+                --input-border-color: var(--color-primary);
+                --indicator-color: var(--color-primary);
+                --emoji-padding: 0.25rem;
+                box-shadow: 0 0 4px var(--color-shadow);
+            "
+            class="w-full"
+        ></emoji-picker>
+
+        <script>
+            document
+                .querySelector("emoji-picker")
+                .addEventListener("emoji-click", (event) => {
+                    function gemoji() {
+                        const use_first_shortcode = ["grinning squinting face"];
+
+                        if (
+                            use_first_shortcode.includes(
+                                event.detail.emoji.annotation,
+                            )
+                        ) {
+                            return event.detail.emoji.shortcodes[0];
+                        }
+
+                        return event.detail.emoji.shortcodes[1];
+                    }
+
+                    document.getElementById(
+                        window.EMOJI_PICKER_TEXT_ID,
+                    ).value += ` :${gemoji()}:`;
+                    document.getElementById("emoji_dialog").close();
+                });
+        </script>
+
+        <div class="flex justify-between">
+            <div></div>
+
+            <div class="flex gap-2">
+                <button
+                    class="bold red quaternary"
+                    onclick="document.getElementById('emoji_dialog').close()"
+                    type="button"
+                >
+                    {{ icon "x" }} {{ text "dialog:action.close" }}
+                </button>
+            </div>
+        </div>
+    </div>
+</dialog>
+{% endif %} {%- endmacro %}