Adress issues

app/common/src/text/english.json

@@ -3,7 +3,7 @@
   "retry": "Retry",
 
   "arbitraryFetchError": "An error occurred while fetching data",
-  "arbitraryFetchImageError": "An error occurred while fetching image",
+  "arbitraryFetchImageError": "An error occurred while fetching an image",
 
   "createFolderError": "Could not create new folder",
   "createProjectError": "Could not create new project",

app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx

@@ -6,7 +6,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import type { RendererObject } from 'marked'
 import { marked } from 'marked'
 import { type TestIdProps } from '../AriaComponents'
-import { defaultRenderer } from './defaultRenderer'
+import { DEFAULT_RENDERER } from './defaultRenderer'
 
 /** Props for a {@link MarkdownViewer}. */
 export interface MarkdownViewerProps extends TestIdProps {
@@ -21,12 +21,12 @@ export interface MarkdownViewerProps extends TestIdProps {
  * Parses markdown passed in as a `text` prop into HTML and displays it.
  */
 export function MarkdownViewer(props: MarkdownViewerProps) {
-  const { text, imgUrlResolver, renderer = defaultRenderer, testId } = props
+  const { text, imgUrlResolver, renderer = {}, testId } = props
 
   const { getText } = useText()
   const logger = useLogger()
 
-  const markedInstance = marked.use({ renderer: Object.assign({}, defaultRenderer, renderer) })
+  const markedInstance = marked.use({ renderer: Object.assign({}, DEFAULT_RENDERER, renderer) })
 
   const { data: markdownToHtml } = useSuspenseQuery({
     queryKey: ['markdownToHtml', { text, imgUrlResolver, markedInstance }] as const,

app/gui/src/dashboard/components/MarkdownViewer/defaultRenderer.ts

@@ -3,7 +3,7 @@ import type { RendererObject } from 'marked'
 import { BUTTON_STYLES, TEXT_STYLE } from '../AriaComponents'
 
 /** The default renderer for Markdown. */
-export const defaultRenderer: RendererObject = {
+export const DEFAULT_RENDERER: Readonly<RendererObject> = {
   /** The renderer for headings. */
   heading({ depth, tokens }) {
     const variant = depth === 1 ? 'h1' : 'subtitle'