feat(i18n): fix to properly style code elements with translation

sanity-io · Oct 26, 2023 · a1370a9 · a1370a9
1 parent bb63e7f
commit a1370a9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
@@ -170,11 +170,11 @@ const deskLocaleStrings = {
 
   /** The text to display when type is missing */
   'panes.unknown-pane-type.missing-type.text':
-    'Structure item is missing required <code>type</code> property.',
+    'Structure item is missing required <Code>type</Code> property.',
 
   /** The text to display when type is unknown */
   'panes.unknown-pane-type.unknown-type.text':
-    'Structure item of type <code>{{type}}</code> is not a known entity.',
+    'Structure item of type <Code>{{type}}</Code> is not a known entity.',
 }
 
 /**

diff --git a/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx b/packages/sanity/src/desk/panes/unknown/UnknownPaneType.tsx
@@ -2,7 +2,7 @@ import {Box, Text} from '@sanity/ui'
 import React from 'react'
 import {Pane, PaneContent, PaneHeader} from '../../components/pane'
 import {deskLocaleNamespace} from '../../i18n'
-import {isRecord, useTranslation} from 'sanity'
+import {isRecord, Translate, useTranslation} from 'sanity'
 
 interface UnknownPaneProps {
   isSelected: boolean
@@ -17,19 +17,27 @@ export function UnknownPane(props: UnknownPaneProps) {
   const {isSelected, pane, paneKey} = props
   const type = (isRecord(pane) && pane.type) || null
   const {t} = useTranslation(deskLocaleNamespace)
-
   return (
     <Pane id={paneKey} selected={isSelected}>
       <PaneHeader title="Unknown pane type" />
       <PaneContent>
         <Box padding={4}>
           {typeof type === 'string' ? (
             <Text as="p" muted>
-              {t('panes.unknown-pane-type.unknown-type.text', {type: type})}
+              <Translate
+                t={t}
+                i18nKey="panes.unknown-pane-type.unknown-type.text"
+                components={{Code: ({children}) => <code>{children}</code>}}
+                values={{type}}
+              />
             </Text>
           ) : (
             <Text as="p" muted>
-              {t('panes.unknown-pane-type.missing-type.text')}
+              <Translate
+                t={t}
+                i18nKey="panes.unknown-pane-type.missing-type.text"
+                components={{Code: ({children}) => <code>{children}</code>}}
+              />
             </Text>
           )}
         </Box>