fix broken markdown link event callback

oramasearch · Nov 27, 2024 · 30cbd3f · 30cbd3f
1 parent 03e08b0
commit 30cbd3f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -71,11 +71,10 @@ function App() {
                 endpoint: 'https://cloud.orama.run/v1/indexes/docs-orama-b3f5xd',
               }}
               onSearchCompleted={(e: Event) => console.log(e)}
-              onSearchResultClick={(e: Event) => {
-                console.log(e)
+              onSearchResultClick={(e) => {
+                alert("You've clicked on a search result!")
+                console.log(e.detail.result.path)
                 e.preventDefault()
-
-                console.log('Prevented')
               }}
               onAnswerGenerated={(e: Event) => console.log(e)}
               onAnswerSourceClick={(e: Event) => {
@@ -84,8 +83,8 @@ function App() {
               }}
               chatMarkdownLinkTitle={({ text }) => text?.toUpperCase()}
               chatMarkdownLinkHref={({ href }) => href}
-              onChatMarkdownLinkClicked={(e: Event) => {
-                console.log(e)
+              onChatMarkdownLinkClicked={(e) => {
+                alert('ON REACT SIDE')
                 e.preventDefault()
               }}
             />

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -494,7 +494,7 @@ declare global {
         new (): HTMLOramaSearchButtonElement;
     };
     interface HTMLOramaSearchResultsElementEventMap {
-        "searchResultClick": SearchResult;
+        "searchResultClick": OnSearchResultClickCallbackProps;
     }
     interface HTMLOramaSearchResultsElement extends Components.OramaSearchResults, HTMLStencilElement {
         addEventListener<K extends keyof HTMLOramaSearchResultsElementEventMap>(type: K, listener: (this: HTMLOramaSearchResultsElement, ev: OramaSearchResultsCustomEvent<HTMLOramaSearchResultsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -777,7 +777,7 @@ declare namespace LocalJSX {
         "linksRel"?: string;
         "linksTarget"?: string;
         "loading"?: boolean;
-        "onSearchResultClick"?: (event: OramaSearchResultsCustomEvent<SearchResult>) => void;
+        "onSearchResultClick"?: (event: OramaSearchResultsCustomEvent<OnSearchResultClickCallbackProps>) => void;
         "searchTerm"?: SearchResultsProps['searchTerm'];
         "sections"?: SearchResultBySection[];
         "setChatTerm"?: (term: string) => void;

diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
@@ -108,6 +108,19 @@ export class OramaMarkdown {
     this.parseMarkdown()
   }
 
+  handleMarkdownLinkClicked(originalOnClickEvent: MouseEvent) {
+    const htmlElement = originalOnClickEvent.target as HTMLLinkElement
+    const chatMarkdownLinkClicked = this.chatMarkdownLinkClicked.emit({
+      text: htmlElement.innerText,
+      href: htmlElement.href,
+    })
+
+    if (chatMarkdownLinkClicked.defaultPrevented) {
+      originalOnClickEvent.preventDefault()
+      return
+    }
+  }
+
   componentDidLoad() {
     marked.use({
       useNewRenderer: true,
@@ -117,19 +130,8 @@ export class OramaMarkdown {
           link.innerHTML = this.chatMarkdownLinkTitle?.({ href: token.href, text: token.text }) ?? token.text
           link.href = this.chatMarkdownLinkHref?.({ href: token.href, text: token.text }) ?? token.href
 
-          if (this.chatMarkdownLinkHref) {
-            link.target = this.chatMarkdownLinkHref?.({ href: token.href, text: token.text })
-          }
-
-          link.onclick = (onClickEvent) => {
-            const chatMarkdownLinkClicked = this.chatMarkdownLinkClicked.emit({
-              text: token.text,
-              href: token.href,
-            })
-
-            if (chatMarkdownLinkClicked?.defaultPrevented) {
-              onClickEvent.preventDefault()
-            }
+          if (this.chatMarkdownLinkTarget) {
+            link.target = this.chatMarkdownLinkTarget?.({ href: token.href, text: token.text })
           }
 
           return link.outerHTML
@@ -225,11 +227,19 @@ export class OramaMarkdown {
           rel="stylesheet"
           href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
         />
+        {/* biome-ignore lint/a11y/useKeyWithClickEvents: TODO: fix usability issue */}
         <div
           class="orama-markdown-wrapper"
           ref={(ref) => {
             this.divElement = ref
           }}
+          onClick={(event) => {
+            const htmlEvent = event.target as HTMLElement
+            // Needs to be here because renderer function only outputs text. There is not a way to set a onclick there
+            if (htmlEvent.tagName === 'A') {
+              this.handleMarkdownLinkClicked(event)
+            }
+          }}
         />
       </host>
     )

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
@@ -1,5 +1,5 @@
 import { Component, Host, h, Element, Prop, Event, type EventEmitter } from '@stencil/core'
-import type { SearchResult, SearchResultBySection } from '@/types'
+import type { OnSearchResultClickCallbackProps, SearchResult, SearchResultBySection } from '@/types'
 import { Highlight } from '@orama/highlight'
 import type { HighlightOptions } from '@orama/highlight'
 import '@phosphor-icons/webcomponents/dist/icons/PhFiles.mjs'
@@ -29,7 +29,8 @@ export class SearchResults {
   @Prop() highlightTitle?: HighlightOptions | false = false
   @Prop() highlightDescription?: HighlightOptions | false = false
 
-  @Event({ bubbles: true, composed: true, cancelable: true }) searchResultClick: EventEmitter<SearchResult>
+  @Event({ bubbles: true, composed: true, cancelable: true })
+  searchResultClick: EventEmitter<OnSearchResultClickCallbackProps>
 
   private highlighterTitle?: Highlight
   private highlighterDescription?: Highlight
@@ -54,7 +55,7 @@ export class SearchResults {
   }
 
   handleItemClick = (originalOnClickEvent: MouseEvent, item: SearchResult) => {
-    const searchResultClick = this.searchResultClick.emit(item)
+    const searchResultClick = this.searchResultClick.emit({ result: item })
 
     if (searchResultClick.defaultPrevented) {
       originalOnClickEvent.preventDefault()

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md b/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
@@ -22,9 +22,9 @@
 
 ## Events
 
-| Event               | Description | Type                                                                             |
-| ------------------- | ----------- | -------------------------------------------------------------------------------- |
-| `searchResultClick` |             | `CustomEvent<{ id: string; title: string; description: string; path: string; }>` |
+| Event               | Description | Type                                     |
+| ------------------- | ----------- | ---------------------------------------- |
+| `searchResultClick` |             | `CustomEvent<{ result: SearchResult; }>` |
 
 
 ## Dependencies