feat: ensured parser renders correctly

codewith-luke · Nov 20, 2023 · d9a1ae7 · d9a1ae7
1 parent 314d644
commit d9a1ae7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/apps/client/src/lib/components/ChatArea.svelte b/apps/client/src/lib/components/ChatArea.svelte
@@ -27,9 +27,9 @@
     });
 
     function handleKeydown(event: KeyboardEvent) {
-        if (event.key === Key.Space) {
-            messageInputEl.focus();
-        }
+        // if (event.key === Key.Space) {
+        //     messageInputEl.focus();
+        // }
     }
 
     async function handleMessageSend(event: CustomEvent<string>) {

diff --git a/apps/client/src/lib/components/TipTap.svelte b/apps/client/src/lib/components/TipTap.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import {onMount, onDestroy, createEventDispatcher} from 'svelte';
     import {Key} from "w3c-keys";
-    import {createEditor, SvelteNodeViewRenderer} from 'svelte-tiptap';
+    import {createEditor, SvelteNodeViewRenderer, BubbleMenu} from 'svelte-tiptap';
     import {Node, mergeAttributes, nodeInputRule} from '@tiptap/core'
     import StarterKit from '@tiptap/starter-kit'
     import {BulletList} from "@tiptap/extension-bullet-list";
@@ -41,8 +41,6 @@
             name: 'image',
 
             group: 'block',
-            // group: 'inline',
-            // inline: false,
             atom: true,
 
             addAttributes() {
@@ -53,27 +51,21 @@
                     alt: {
                         default: null,
                     },
-                    title: {
+                    tag: {
                         default: null,
                     },
-                    'data-tag': {
-                        default: null,
-                    },
-                    class: {
-                        default: 'inline',
-                    }
                 }
             },
 
             parseHTML() {
                 return [{tag: 'TipTapEmote'}];
             },
 
-            // renderHTML(data) {
-            //     return ['img', mergeAttributes(this.options.HTMLAttributes, data.HTMLAttributes), 0]
-            // },
-
             renderHTML({HTMLAttributes}) {
+                if (!HTMLAttributes.src) {
+                    return
+                }
+
                 return ['TipTapEmote', mergeAttributes(HTMLAttributes)];
             },
 
@@ -91,14 +83,12 @@
                             const [name] = match;
                             const src = getEmoteUrl($emotes, "small", name);
 
-                            const alt = name;
-                            const title = name;
+                            const alt = name.split(":")[1];
 
                             return {
-                                'data-tag': name,
+                                tag: name,
                                 src,
                                 alt,
-                                title
                             }
                         },
                     }),
@@ -143,6 +133,4 @@
     #tippy {
         white-space: pre;
     }
-
-
 </style>
diff --git a/apps/client/src/lib/components/TipTapEmote.svelte b/apps/client/src/lib/components/TipTapEmote.svelte
@@ -2,10 +2,24 @@
     import type {NodeViewProps} from '@tiptap/core';
     import {NodeViewWrapper} from 'svelte-tiptap';
 
+    export let editor: NodeViewProps['editor'];
+    export let decorations: NodeViewProps['decorations'];
+    export let selected: NodeViewProps['selected'];
+    export let extension: NodeViewProps['extension'];
+    export let getPos: NodeViewProps['getPos'];
+    export let deleteNode: NodeViewProps['deleteNode'];
     export let node: NodeViewProps['node'];
     export let updateAttributes: NodeViewProps['updateAttributes'];
+
+    editor.on('selectionUpdate', (data) => {
+        console.log(data.transaction)
+    })
 </script>
 
 <NodeViewWrapper class="inline">
-    <img src="//cdn.7tv.app/emote/6102a37ba57eeb23c0e3e5cb/2x.webp" class="inline-block" alt="">
+    {#if !node.attrs.src}
+        <p class="inline">{node.attrs.tag}</p>
+    {:else}
+        <img src={node.attrs.src} class="inline" alt={node.attrs.alt} data-tag={node.attrs.tag}>
+    {/if}
 </NodeViewWrapper>
diff --git a/apps/client/src/lib/emote-parser.ts b/apps/client/src/lib/emote-parser.ts
@@ -25,6 +25,8 @@ const sizes = {
 
 export function getEmoteUrl(emotes: EmoteSet, size: Sizes, emoteString: string) {
     const emote = emoteString.split(':')[1] ? emoteString.split(':')[1] : emoteString;
+    if (!emotes[emote]) return null;
+
     return emotes[emote].files[size].url;
 }
 
@@ -38,6 +40,7 @@ export function parseMessage(emotes: EmoteSet, message: string) {
 
         if (emotes[emote]) {
             const url = getEmoteUrl(emotes, 'medium', emote);
+            if (!url) continue;
             parsedMessage = parsedMessage.replace(match[0], `<img src="${url}" class="inline-block" alt="">`);
         }
     }

diff --git a/apps/client/src/lib/seven-tv-adapter.ts b/apps/client/src/lib/seven-tv-adapter.ts
@@ -35,6 +35,11 @@ export async function fetchSevenTVEmotes() {
             return [] as SevenTvEmoteSet[];
         });
 
+    if (!emoteSetResponse.length) {
+        console.error('Failed to fetch 7TV emotes');
+        return {};
+    }
+
     return emoteSetResponse.reduce((acc: EmoteSet, emote: SevenTvEmoteSet) => {
         const files = emote.data.host.files.reduce((acc: Record<Sizes, EmoteFile>, file: SevenTvEmoteSetFile) => {
             const size = file.name.split('.')[0];