fix: migrate i18n code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx

@@ -44,7 +44,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
         ref={button}
         size={size}
         variant={variant}
-        title={t('renderer.highlightCode.copyCode')}
+        title={t('renderer.highlightCode.copyCode') ?? undefined}
         onClick={copyToClipboard}
         {...cypressId(props)}>
         <ForkAwesomeIcon icon='files-o' />

src/components/common/fields/current-password-field.tsx

@@ -26,7 +26,7 @@ export const CurrentPasswordField: React.FC<CommonFieldProps> = ({ onChange }) =
         type='password'
         size='sm'
         onChange={onChange}
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
         className='bg-dark text-light'
         autoComplete='current-password'
         required

src/components/common/fields/display-name-field.tsx

@@ -38,7 +38,7 @@ export const DisplayNameField: React.FC<DisplayNameFieldProps> = ({ onChange, va
         value={value}
         isValid={isValid}
         onChange={onChange}
-        placeholder={t('profile.displayName')}
+        placeholder={t('profile.displayName') ?? undefined}
         className='bg-dark text-light'
         autoComplete='name'
         required

src/components/common/fields/new-password-field.tsx

@@ -32,7 +32,7 @@ export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value }
         size='sm'
         isValid={isValid}
         onChange={onChange}
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
         className='bg-dark text-light'
         minLength={8}
         autoComplete='new-password'

src/components/common/fields/password-again-field.tsx

@@ -42,7 +42,7 @@ export const PasswordAgainField: React.FC<PasswordAgainFieldProps> = ({ onChange
         isInvalid={isInvalid}
         isValid={isValid}
         onChange={onChange}
-        placeholder={t('login.register.passwordAgain')}
+        placeholder={t('login.register.passwordAgain') ?? undefined}
         className='bg-dark text-light'
         autoComplete='new-password'
         required

src/components/common/fields/username-field.tsx

@@ -33,7 +33,7 @@ export const UsernameField: React.FC<CommonFieldProps> = ({ onChange, value }) =
         value={value}
         isValid={isValid}
         onChange={onChange}
-        placeholder={t('login.auth.username')}
+        placeholder={t('login.auth.username') ?? undefined}
         className='bg-dark text-light'
         autoComplete='username'
         autoFocus={true}

src/components/document-read-only-page/document-infobar.tsx

@@ -37,7 +37,7 @@ export const DocumentInfobar: React.FC = () => {
               href={`/n/${noteDetails.primaryAddress}`}
               icon={'pencil'}
               className={'text-primary text-decoration-none mx-1'}
-              title={t('views.readOnly.editNote')}
+              title={t('views.readOnly.editNote') ?? undefined}
             />
           </ShowIf>
         </span>

src/components/editor-page/app-bar/dark-mode-button.tsx

@@ -26,13 +26,13 @@ const DarkModeButton: React.FC = () => {
       <Button
         onClick={enable}
         variant={darkModeEnabled ? 'secondary' : 'outline-secondary'}
-        title={t('editor.darkMode.switchToDark')}>
+        title={t('editor.darkMode.switchToDark') ?? undefined}>
         <ForkAwesomeIcon icon='moon' />
       </Button>
       <Button
         onClick={disable}
         variant={darkModeEnabled ? 'outline-secondary' : 'secondary'}
-        title={t('editor.darkMode.switchToLight')}>
+        title={t('editor.darkMode.switchToLight') ?? undefined}>
         <ForkAwesomeIcon icon='sun-o' />
       </Button>
     </ButtonGroup>

src/components/editor-page/app-bar/help-button/help-button.tsx

@@ -23,7 +23,7 @@ export const HelpButton: React.FC = () => {
     <Fragment>
       <Button
         {...cypressId('editor-help-button')}
-        title={t('editor.documentBar.help')}
+        title={t('editor.documentBar.help') ?? undefined}
         className='ms-2 text-secondary'
         size='sm'
         variant='outline-light'

src/components/editor-page/app-bar/read-only-mode-button.tsx

@@ -22,7 +22,7 @@ export const ReadOnlyModeButton: React.FC = () => {
     <Link href={`/s/${noteIdentifier}`}>
       <a target='_blank'>
         <Button
-          title={t('editor.documentBar.readOnlyMode')}
+          title={t('editor.documentBar.readOnlyMode') ?? undefined}
           className='ms-2 text-secondary'
           size='sm'
           variant='outline-light'>

src/components/editor-page/app-bar/slide-mode-button.tsx

@@ -22,7 +22,7 @@ export const SlideModeButton: React.FC = () => {
     <Link href={`/p/${noteIdentifier}`}>
       <a target='_blank'>
         <Button
-          title={t('editor.documentBar.slideMode')}
+          title={t('editor.documentBar.slideMode') ?? undefined}
           className='ms-2 text-secondary'
           size='sm'
           variant='outline-light'>

src/components/editor-page/app-bar/sync-scroll-buttons/sync-scroll-buttons.tsx

@@ -28,13 +28,13 @@ export const SyncScrollButtons: React.FC = () => {
       <Button
         onClick={enable}
         variant={syncScrollEnabled ? 'secondary' : 'outline-secondary'}
-        title={t('editor.appBar.syncScroll.enable')}>
+        title={t('editor.appBar.syncScroll.enable') ?? undefined}>
         <EnabledScroll />
       </Button>
       <Button
         onClick={disable}
         variant={syncScrollEnabled ? 'outline-secondary' : 'secondary'}
-        title={t('editor.appBar.syncScroll.disable')}>
+        title={t('editor.appBar.syncScroll.disable') ?? undefined}>
         <DisabledScroll />
       </Button>
     </ButtonGroup>

src/components/editor-page/document-bar/aliases/aliases-add-form.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React, { useCallback, useMemo, useState } from 'react'
 import type { FormEvent } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Form, InputGroup } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import { useTranslation } from 'react-i18next'
@@ -50,7 +50,7 @@ export const AliasesAddForm: React.FC = () => {
       <InputGroup className={'me-1 mb-1'} hasValidation={true}>
         <Form.Control
           value={newAlias}
-          placeholder={t('editor.modal.aliases.addAlias')}
+          placeholder={t('editor.modal.aliases.addAlias') ?? undefined}
           onChange={onNewAliasInputChange}
           isInvalid={!newAliasValid}
           required={true}
@@ -61,7 +61,7 @@ export const AliasesAddForm: React.FC = () => {
           variant='light'
           className={'text-secondary ms-2'}
           disabled={!newAliasValid || newAlias === ''}
-          title={t('editor.modal.aliases.addAlias')}
+          title={t('editor.modal.aliases.addAlias') ?? undefined}
           {...testId('addAliasButton')}>
           <ForkAwesomeIcon icon={'plus'} />
         </Button>

src/components/editor-page/document-bar/aliases/aliases-list-entry.tsx

@@ -48,7 +48,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
             className={'me-2 text-warning'}
             variant='light'
             disabled={true}
-            title={t('editor.modal.aliases.isPrimary')}
+            title={t('editor.modal.aliases.isPrimary') ?? undefined}
             {...testId('aliasIsPrimary')}>
             <ForkAwesomeIcon icon={'star'} />
           </Button>
@@ -57,7 +57,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
           <Button
             className={'me-2'}
             variant='light'
-            title={t('editor.modal.aliases.makePrimary')}
+            title={t('editor.modal.aliases.makePrimary') ?? undefined}
             onClick={onMakePrimaryClick}
             {...testId('aliasButtonMakePrimary')}>
             <ForkAwesomeIcon icon={'star-o'} />
@@ -66,7 +66,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
         <Button
           variant='light'
           className={'text-danger'}
-          title={t('editor.modal.aliases.removeAlias')}
+          title={t('editor.modal.aliases.removeAlias') ?? undefined}
           onClick={onRemoveClick}
           {...testId('aliasButtonRemove')}>
           <ForkAwesomeIcon icon={'times'} />

src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx

@@ -34,8 +34,8 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps> = (
   return (
     <li className={'list-group-item'}>
       <InputGroup className={'me-1 mb-1'}>
-        <FormControl value={newEntryIdentifier} placeholder={t(i18nKey)} onChange={onChange} />
+        <FormControl value={newEntryIdentifier} placeholder={t(i18nKey) ?? undefined} onChange={onChange} />
-        <Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey)} onClick={onSubmit}>
+        <Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey) ?? undefined} onClick={onSubmit}>
           <ForkAwesomeIcon icon={'plus'} />
         </Button>
       </InputGroup>

src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx

@@ -68,18 +68,22 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps> = ({
 
   return (
     <div>
-      <Button variant='light' className={'text-danger me-2'} title={t(i18nKeys.remove, { name })} onClick={onRemove}>
+      <Button
+        variant='light'
+        className={'text-danger me-2'}
+        title={t(i18nKeys.remove, { name }) ?? undefined}
+        onClick={onRemove}>
         <ForkAwesomeIcon icon={'times'} />
       </Button>
       <ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
         <Button
-          title={t(i18nKeys.setReadOnly, { name })}
+          title={t(i18nKeys.setReadOnly, { name }) ?? undefined}
           variant={currentSetting === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
           onClick={onSetReadOnly}>
           <ForkAwesomeIcon icon='eye' />
         </Button>
         <Button
-          title={t(i18nKeys.setWriteable, { name })}
+          title={t(i18nKeys.setWriteable, { name }) ?? undefined}
           variant={currentSetting === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
           onClick={onSetWriteable}>
           <ForkAwesomeIcon icon='pencil' />

src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx

@@ -68,19 +68,19 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
       <div>
         <ToggleButtonGroup type='radio' name='edit-mode'>
           <Button
-            title={t('editor.modal.permissions.denyGroup', { name })}
+            title={t('editor.modal.permissions.denyGroup', { name }) ?? undefined}
             variant={level === AccessLevel.NONE ? 'secondary' : 'outline-secondary'}
             onClick={onSetEntryDenied}>
             <ForkAwesomeIcon icon={'ban'} />
           </Button>
           <Button
-            title={t('editor.modal.permissions.viewOnlyGroup', { name })}
+            title={t('editor.modal.permissions.viewOnlyGroup', { name }) ?? undefined}
             variant={level === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
             onClick={onSetEntryReadOnly}>
             <ForkAwesomeIcon icon={'eye'} />
           </Button>
           <Button
-            title={t('editor.modal.permissions.editGroup', { name })}
+            title={t('editor.modal.permissions.editGroup', { name }) ?? undefined}
             variant={level === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
             onClick={() => onSetEntryWriteable}>
             <ForkAwesomeIcon icon={'pencil'} />

src/components/editor-page/document-bar/permissions/permission-owner-change.tsx

@@ -36,12 +36,12 @@ export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ on
     <InputGroup className={'me-1 mb-1'}>
       <FormControl
         value={ownerFieldValue}
-        placeholder={t('editor.modal.permissions.ownerChange.placeholder')}
+        placeholder={t('editor.modal.permissions.ownerChange.placeholder') ?? undefined}
         onChange={onChangeField}
       />
       <Button
         variant='light'
-        title={t('common.save')}
+        title={t('common.save') ?? undefined}
         onClick={onClickConfirm}
         className={'ms-2'}
         disabled={confirmButtonDisabled}>

src/components/editor-page/document-bar/permissions/permission-owner-info.tsx

@@ -27,7 +27,10 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEdit
   return (
     <Fragment>
       <UserAvatarForUsername username={noteOwner} />
-      <Button variant='light' title={t('editor.modal.permissions.ownerChange.button')} onClick={onEditOwner}>
+      <Button
+        variant='light'
+        title={t('editor.modal.permissions.ownerChange.button') ?? undefined}
+        onClick={onEditOwner}>
         <ForkAwesomeIcon icon={'pencil'} />
       </Button>
     </Fragment>

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx

@@ -61,7 +61,7 @@ export const EmojiPickerButton: React.FC = () => {
         {...cypressId('show-emoji-picker')}
         variant='light'
         onClick={showPicker}
-        title={t('editor.editorToolbar.emoji')}
+        title={t('editor.editorToolbar.emoji') ?? undefined}
         disabled={!changeEditorContent}
         ref={buttonRef}>
         <ForkAwesomeIcon icon='smile-o' />

src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx

@@ -74,7 +74,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
         <Form.Control
           type={'number'}
           min={1}
-          placeholder={t('editor.editorToolbar.table.cols')}
+          placeholder={t('editor.editorToolbar.table.cols') ?? undefined}
           isInvalid={tableSize.columns <= 0}
           onChange={onColChange}
         />
@@ -82,7 +82,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
         <Form.Control
           type={'number'}
           min={1}
-          placeholder={t('editor.editorToolbar.table.rows')}
+          placeholder={t('editor.editorToolbar.table.rows') ?? undefined}
           isInvalid={tableSize.rows <= 0}
           onChange={onRowChange}
         />

src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx

@@ -60,7 +60,7 @@ export const TableSizePickerPopover = React.forwardRef<HTMLDivElement, TableSize
                 {...cypressAttribute('col', `${col + 1}`)}
                 {...cypressAttribute('row', `${row + 1}`)}
                 onMouseEnter={onSizeHover(row + 1, col + 1)}
-                title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 })}
+                title={t('editor.editorToolbar.table.titleWithSize', { cols: col + 1, rows: row + 1 }) ?? undefined}
                 onClick={() => onTableSizeSelected(row + 1, col + 1)}
               />
             )

src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx

@@ -53,7 +53,7 @@ export const UploadImageButton: React.FC = () => {
         variant='light'
         onClick={buttonClick}
         disabled={!codeMirror}
-        title={t('editor.editorToolbar.uploadImage')}
+        title={t('editor.editorToolbar.uploadImage') ?? undefined}
         {...cypressId('editor-toolbar-upload-image-button')}>
         <ForkAwesomeIcon icon={'upload'} />
       </Button>

src/components/history-page/history-toolbar/clear-history-button.tsx

@@ -37,7 +37,7 @@ export const ClearHistoryButton: React.FC = () => {
     <Fragment>
       <Button
         variant={'light'}
-        title={t('landing.history.toolbar.clear')}
+        title={t('landing.history.toolbar.clear') ?? undefined}
         onClick={showModal}
         {...cypressId('history-clear-button')}>
         <ForkAwesomeIcon icon={'trash'} />

src/components/history-page/history-toolbar/export-history-button.tsx

@@ -17,7 +17,7 @@ export const ExportHistoryButton: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Button variant={'light'} title={t('landing.history.toolbar.export')} onClick={downloadHistory}>
+    <Button variant={'light'} title={t('landing.history.toolbar.export') ?? undefined} onClick={downloadHistory}>
       <ForkAwesomeIcon icon='download' />
     </Button>
   )

src/components/history-page/history-toolbar/history-refresh-button.tsx

@@ -19,7 +19,7 @@ export const HistoryRefreshButton: React.FC = () => {
   const refreshHistory = useSafeRefreshHistoryStateCallback()
 
   return (
-    <Button variant={'light'} title={t('landing.history.toolbar.refresh')} onClick={refreshHistory}>
+    <Button variant={'light'} title={t('landing.history.toolbar.refresh') ?? undefined} onClick={refreshHistory}>
       <ForkAwesomeIcon icon='refresh' />
     </Button>
   )

src/components/history-page/history-toolbar/history-toolbar.tsx

@@ -89,7 +89,10 @@ export const HistoryToolbar: React.FC = () => {
       </div>
       <ShowIf condition={userExists}>
         <div className={'me-1 mb-1'}>
-          <Button variant={'light'} title={t('landing.history.toolbar.uploadAll')} onClick={onUploadAllToRemote}>
+          <Button
+            variant={'light'}
+            title={t('landing.history.toolbar.uploadAll') ?? undefined}
+            onClick={onUploadAllToRemote}>
             <ForkAwesomeIcon icon='cloud-upload' />
           </Button>
         </div>

src/components/history-page/history-toolbar/history-view-mode-toggle-button.tsx

@@ -32,7 +32,7 @@ export const HistoryViewModeToggleButton: React.FC = () => {
   return (
     <ToggleButtonGroup type='radio' name='options' dir='auto' className={'button-height'} onChange={onViewStateChange}>
       <Button
-        title={t('landing.history.toolbar.cards')}
+        title={t('landing.history.toolbar.cards') ?? undefined}
         variant={historyToolbarState.viewState === ViewStateEnum.CARD ? 'light' : 'outline-light'}
         onClick={() => onViewStateChange(ViewStateEnum.CARD)}>
         <ForkAwesomeIcon icon={'sticky-note'} className={'fa-fix-line-height'} />
@@ -40,7 +40,7 @@ export const HistoryViewModeToggleButton: React.FC = () => {
       <Button
         {...cypressId('history-mode-table')}
         variant={historyToolbarState.viewState === ViewStateEnum.TABLE ? 'light' : 'outline-light'}
-        title={t('landing.history.toolbar.table')}
+        title={t('landing.history.toolbar.table') ?? undefined}
         onClick={() => onViewStateChange(ViewStateEnum.TABLE)}>
         <ForkAwesomeIcon icon={'table'} className={'fa-fix-line-height'} />
       </Button>

src/components/history-page/history-toolbar/import-history-button.tsx

@@ -129,7 +129,7 @@ export const ImportHistoryButton: React.FC = () => {
       />
       <Button
         variant={'light'}
-        title={t('landing.history.toolbar.import')}
+        title={t('landing.history.toolbar.import') ?? undefined}
         onClick={onUploadButtonClick}
         {...cypressId('import-history-file-button')}>
         <ForkAwesomeIcon icon='upload' />

src/components/history-page/history-toolbar/keyword-search-input.tsx

@@ -26,8 +26,8 @@ export const KeywordSearchInput: React.FC = () => {
 
   return (
     <FormControl
-      placeholder={t('landing.history.toolbar.searchKeywords')}
+      placeholder={t('landing.history.toolbar.searchKeywords') ?? undefined}
-      aria-label={t('landing.history.toolbar.searchKeywords')}
+      aria-label={t('landing.history.toolbar.searchKeywords') ?? undefined}
       onChange={onChange}
       value={historyToolbarState.search}
     />

src/components/history-page/history-toolbar/tag-selection-input.tsx

@@ -43,7 +43,7 @@ export const TagSelectionInput: React.FC = () => {
       id={'tagsSelection'}
       options={tags}
       multiple={true}
-      placeholder={t('landing.history.toolbar.selectTags')}
+      placeholder={t('landing.history.toolbar.selectTags') ?? undefined}
       onChange={onChange}
       selected={historyToolbarState.selectedTags}
     />

src/components/landing-layout/navigation/new-guest-note-button.tsx

@@ -19,7 +19,7 @@ export const NewGuestNoteButton: React.FC = () => {
   return (
     <Link href={'/new'} passHref={true}>
       <Button
-        title={t('landing.navigation.newGuestNote')}
+        title={t('landing.navigation.newGuestNote') ?? undefined}
         variant='primary'
         size='sm'
         className='d-inline-flex align-items-center'

src/components/landing-layout/navigation/new-user-note-button.tsx

@@ -19,7 +19,7 @@ export const NewUserNoteButton: React.FC = () => {
   return (
     <Link href={'/new'} passHref={true}>
       <Button
-        title={t('landing.navigation.newNote')}
+        title={t('landing.navigation.newNote') ?? undefined}
         variant='primary'
         size='sm'
         className='d-inline-flex align-items-center'

src/components/landing-layout/navigation/sign-in-button.tsx

@@ -40,7 +40,11 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
   return (
     <ShowIf condition={authProviders.length > 0}>
       <Link href={loginLink} passHref={true}>
-        <Button title={t('login.signIn')} {...cypressId('sign-in-button')} variant={variant || 'success'} {...props}>
+        <Button
+          title={t('login.signIn') ?? undefined}
+          {...cypressId('sign-in-button')}
+          variant={variant || 'success'}
+          {...props}>
           <Trans i18nKey='login.signIn' />
         </Button>
       </Link>

src/components/login-page/auth/fields/password-field.tsx

@@ -24,7 +24,7 @@ export const PasswordField: React.FC<AuthFieldProps> = ({ onChange, invalid }) =
         isInvalid={invalid}
         type='password'
         size='sm'
-        placeholder={t('login.auth.password')}
+        placeholder={t('login.auth.password') ?? undefined}
         onChange={onChange}
         className='bg-dark text-light'
         autoComplete='current-password'

src/components/login-page/auth/fields/username-field.tsx

@@ -24,7 +24,7 @@ export const UsernameField: React.FC<AuthFieldProps> = ({ onChange, invalid }) =
         isInvalid={invalid}
         type='text'
         size='sm'
-        placeholder={t('login.auth.username')}
+        placeholder={t('login.auth.username') ?? undefined}
         onChange={onChange}
         className='bg-dark text-light'
         autoComplete='username'

src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form-label-field.tsx

@@ -38,7 +38,7 @@ export const AccessTokenCreationFormLabelField: React.FC<AccessTokenCreationForm
       <Form.Control
         type='text'
         size='sm'
-        placeholder={t('profile.accessTokens.label')}
+        placeholder={t('profile.accessTokens.label') ?? undefined}
         value={formValues.label}
         className='bg-dark text-light'
         onChange={onChangeLabel}

src/extensions/extra-integrations/mermaid/mermaid-chart.tsx

@@ -60,7 +60,7 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
       const message = (error as Error).message
       log.error(error)
       diagramContainer.current?.querySelectorAll('svg').forEach((child) => child.remove())
-      throw new Error(message || t('renderer.mermaid.unknownError'))
+      throw new Error(message ?? t('renderer.mermaid.unknownError'))
     }
   }, [code, t])
 

src/extensions/extra-integrations/vega-lite/vega-lite-chart.tsx

@@ -46,8 +46,8 @@ export const VegaLiteChart: React.FC<CodeProps> = ({ code }) => {
         editor: false
       },
       i18n: {
-        PNG_ACTION: t('renderer.vega-lite.png'),
+        PNG_ACTION: t('renderer.vega-lite.png') ?? undefined,
-        SVG_ACTION: t('renderer.vega-lite.svg')
+        SVG_ACTION: t('renderer.vega-lite.svg') ?? undefined
       }
     })
   }, [code, vegaEmbed])