From 5f372111694df7be8ef65789629d93d7c94f96df Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Tue, 3 Dec 2024 11:19:13 +0700
Subject: [PATCH] Add component to encapsulate new-tab Markdown logic

This allows us to do the renderer plugin typecast just once rather than
everywhere the Markdown component is used.
---
 .../lib/components/Markdown/NewTabLinkMarkdown.svelte  | 10 ++++++++++
 frontend/src/lib/components/Markdown/index.ts          |  1 +
 .../Projects/ProjectConfidentialityCombobox.svelte     |  6 ++----
 .../src/lib/components/Users/CreateUserModal.svelte    | 10 +++-------
 frontend/src/lib/forms/Checkbox.svelte                 |  6 ++----
 frontend/src/lib/forms/FormError.svelte                |  6 ++----
 frontend/src/lib/forms/FormField.svelte                |  6 ++----
 frontend/src/lib/forms/RadioButtonGroup.svelte         |  6 ++----
 .../project/[project_code]/OpenInFlexModal.svelte      |  5 ++---
 .../routes/(authenticated)/project/create/+page.svelte |  7 +++----
 10 files changed, 29 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/lib/components/Markdown/NewTabLinkMarkdown.svelte

diff --git a/frontend/src/lib/components/Markdown/NewTabLinkMarkdown.svelte b/frontend/src/lib/components/Markdown/NewTabLinkMarkdown.svelte
new file mode 100644
index 000000000..a8167cc33
--- /dev/null
+++ b/frontend/src/lib/components/Markdown/NewTabLinkMarkdown.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Markdown, {type ComponentsMap} from 'svelte-exmarkdown';
+  import type {Component} from 'svelte';
+  import NewTabLinkRenderer from './NewTabLinkRenderer.svelte';
+
+  export let md: string;
+  const renderer: ComponentsMap = { a: NewTabLinkRenderer as unknown as Component };
+</script>
+
+<Markdown {md} plugins={[{ renderer: renderer }]} />
diff --git a/frontend/src/lib/components/Markdown/index.ts b/frontend/src/lib/components/Markdown/index.ts
index 717ae5c56..9ece5f0ad 100644
--- a/frontend/src/lib/components/Markdown/index.ts
+++ b/frontend/src/lib/components/Markdown/index.ts
@@ -1 +1,2 @@
 export { default as NewTabLinkRenderer } from './NewTabLinkRenderer.svelte';
+export { default as NewTabLinkMarkdown } from './NewTabLinkMarkdown.svelte';
diff --git a/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte b/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
index f1c3ffe5e..c76512e79 100644
--- a/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
+++ b/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
@@ -3,9 +3,7 @@
   import Checkbox from '../../forms/Checkbox.svelte';
   import { slide } from 'svelte/transition';
   import { Icon } from '$lib/icons';
-  import Markdown from 'svelte-exmarkdown';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
 
   export let value: boolean;
 </script>
@@ -22,6 +20,6 @@
 {#if value}
   <div class="alert alert-warning mt-4" transition:slide>
     <Icon icon="i-mdi-alert-outline" />
-    <Markdown md={$t('project.confidential.suggestions')} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+    <NewTabLinkMarkdown md={$t('project.confidential.suggestions')} />
   </div>
 {/if}
diff --git a/frontend/src/lib/components/Users/CreateUserModal.svelte b/frontend/src/lib/components/Users/CreateUserModal.svelte
index 95c82c9cb..df5940bde 100644
--- a/frontend/src/lib/components/Users/CreateUserModal.svelte
+++ b/frontend/src/lib/components/Users/CreateUserModal.svelte
@@ -4,9 +4,7 @@
   import { helpLinks } from '$lib/components/help';
   import { type LexAuthUser, type RegisterResponse } from '$lib/user';
   import CreateUser from '$lib/components/Users/CreateUser.svelte';
-  import Markdown from 'svelte-exmarkdown';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import Icon from '$lib/icons/Icon.svelte';
   import { createEventDispatcher } from 'svelte';
 
@@ -30,13 +28,11 @@
     <div>
       <h3 class="text-lg">{$t('common.did_you_know')}</h3>
       <div>
-        <Markdown
+        <NewTabLinkMarkdown
           md={$t('admin_dashboard.create_user_modal.help_create_single_guest_user', { helpLink: helpLinks.addProjectMember })}
-          plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]}
         />
-        <Markdown
+        <NewTabLinkMarkdown
           md={$t('admin_dashboard.create_user_modal.help_create_bulk_guest_users', { helpLink: helpLinks.bulkAddCreate })}
-          plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]}
         />
       </div>
     </div>
diff --git a/frontend/src/lib/forms/Checkbox.svelte b/frontend/src/lib/forms/Checkbox.svelte
index 76a15f01b..507cb4f40 100644
--- a/frontend/src/lib/forms/Checkbox.svelte
+++ b/frontend/src/lib/forms/Checkbox.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-  import Markdown from 'svelte-exmarkdown';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import FormFieldError from './FormFieldError.svelte';
   import { randomFormId } from './utils';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
 
   export let label: string;
   export let value: boolean;
@@ -24,7 +22,7 @@
   {#if description}
     <label for={id} class="label pb-0">
       <span class="label-text-alt">
-        <Markdown md={description} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+        <NewTabLinkMarkdown md={description} />
       </span>
     </label>
   {/if}
diff --git a/frontend/src/lib/forms/FormError.svelte b/frontend/src/lib/forms/FormError.svelte
index 09cc9d308..320180e1a 100644
--- a/frontend/src/lib/forms/FormError.svelte
+++ b/frontend/src/lib/forms/FormError.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import Markdown from 'svelte-exmarkdown';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import type { ErrorMessage } from './types';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
 
   export let error: ErrorMessage = undefined;
   export let markdown = false;
@@ -12,7 +10,7 @@
 {#if error}
   <span class="label text-lg text-error" class:justify-end={right}>
     {#if markdown}
-      <Markdown md={error} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+      <NewTabLinkMarkdown md={error} />
     {:else}
       {error}
     {/if}
diff --git a/frontend/src/lib/forms/FormField.svelte b/frontend/src/lib/forms/FormField.svelte
index de252c72a..928aae4fb 100644
--- a/frontend/src/lib/forms/FormField.svelte
+++ b/frontend/src/lib/forms/FormField.svelte
@@ -2,9 +2,7 @@
   import { onMount } from 'svelte';
   import FormFieldError from './FormFieldError.svelte';
   import { randomFormId } from './utils';
-  import Markdown from 'svelte-exmarkdown';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import type { HelpLink } from '$lib/components/help';
   import SupHelp from '$lib/components/help/SupHelp.svelte';
 
@@ -41,7 +39,7 @@
   {#if description}
     <label for={id} class="label pb-0">
       <span class="label-text-alt description">
-        <Markdown md={description} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+        <NewTabLinkMarkdown md={description} />
       </span>
     </label>
   {/if}
diff --git a/frontend/src/lib/forms/RadioButtonGroup.svelte b/frontend/src/lib/forms/RadioButtonGroup.svelte
index 33974da89..0ba71de77 100644
--- a/frontend/src/lib/forms/RadioButtonGroup.svelte
+++ b/frontend/src/lib/forms/RadioButtonGroup.svelte
@@ -6,11 +6,9 @@
 </script>
 
 <script lang="ts">
-  import Markdown from 'svelte-exmarkdown';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import FormFieldError from './FormFieldError.svelte';
   import { randomFormId } from './utils';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
 
   export let buttons: SingleRadioButton[];
   export let label: string; // This is for the group as a whole
@@ -45,7 +43,7 @@
   {#if description}
     <label for={id} class="label pb-0">
       <span class="label-text-alt">
-        <Markdown md={description} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+        <NewTabLinkMarkdown md={description} />
       </span>
     </label>
   {/if}
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/OpenInFlexModal.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/OpenInFlexModal.svelte
index 192556245..90b0d1bd8 100644
--- a/frontend/src/routes/(authenticated)/project/[project_code]/OpenInFlexModal.svelte
+++ b/frontend/src/routes/(authenticated)/project/[project_code]/OpenInFlexModal.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import Modal from '$lib/components/modals/Modal.svelte';
   import Markdown from 'svelte-exmarkdown';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import type { Project } from './+page';
   import t from '$lib/i18n';
   import OpenInFlexButton from './OpenInFlexButton.svelte';
   import SendReceiveUrlField from './SendReceiveUrlField.svelte';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
-  import type {Component} from 'svelte';
 
   export let project: Project;
   let modal: Modal;
@@ -21,7 +20,7 @@
     <h3>{$t('project_page.open_with_flex.button')}</h3>
     <div class="alert alert-info mb-4 not-prose">
       <span class="i-mdi-info-outline text-xl"></span>
-      <Markdown md={$t('project_page.open_with_flex.supported_version')} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+      <NewTabLinkMarkdown md={$t('project_page.open_with_flex.supported_version')} />
     </div>
     <div class="not-prose">
       <Markdown md={$t('project_page.open_with_flex.instructions')} />
diff --git a/frontend/src/routes/(authenticated)/project/create/+page.svelte b/frontend/src/routes/(authenticated)/project/create/+page.svelte
index 8931ffea5..4a6c20483 100644
--- a/frontend/src/routes/(authenticated)/project/create/+page.svelte
+++ b/frontend/src/routes/(authenticated)/project/create/+page.svelte
@@ -10,15 +10,14 @@
   import { useNotifications } from '$lib/notify';
   import { Duration, deriveAsync, deriveAsyncIfDefined } from '$lib/util/time';
   import { getSearchParamValues } from '$lib/util/query-params';
-  import { onMount, type Component } from 'svelte';
+  import { onMount } from 'svelte';
   import MemberBadge from '$lib/components/Badges/MemberBadge.svelte';
   import { derived, writable, type Readable } from 'svelte/store';
   import { concatAll } from '$lib/util/array';
   import { browser } from '$app/environment';
   import { ProjectConfidentialityCombobox } from '$lib/components/Projects';
   import { _getProjectsByLangCodeAndOrg, _getProjectsByNameAndOrg } from './+page';
-  import Markdown from 'svelte-exmarkdown';
-  import { NewTabLinkRenderer } from '$lib/components/Markdown';
+  import {NewTabLinkMarkdown} from '$lib/components/Markdown';
   import Button from '$lib/forms/Button.svelte';
   import {projectUrl} from '$lib/util/project';
 
@@ -287,7 +286,7 @@
           {/each}
           <label for="group-extra-projects" class="label pb-0">
             <span class="label-text-alt">
-              <Markdown md={$t('project.create.maybe_related_description')} plugins={[{ renderer: { a: NewTabLinkRenderer as Component<any> } }]} />
+              <NewTabLinkMarkdown md={$t('project.create.maybe_related_description')} />
             </span>
           </label>
         </div>