Skip to content

feat: add i18n translation #565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
strictKraken wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

feat: add i18n translation #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a7e3ce
feat(feat): add i18n
strictKraken Oct 23, 2025
88e0833
refactor(i18n): use only store
strictKraken Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion src/lib/components/JSONEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
JSONParser,
JSONPatchResult,
JSONPathParser,
Language,
MenuItem,
OnBlur,
OnChange,
Expand All @@ -45,6 +46,8 @@
import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch'
import { noop } from '../utils/noop.js'
import { parseJSONPath, stringifyJSONPath } from '$lib/utils/pathUtils.js'
import { setI18nData } from '$lib/i18n'
import { english } from 'svelte-jsoneditor/index-vanilla'
import JSONEditorRoot from './modes/JSONEditorRoot.svelte'
import JSONEditorModal from './modals/JSONEditorModal.svelte'
import memoizeOne from 'memoize-one'
Expand Down Expand Up @@ -91,6 +94,7 @@
}
const onFocusDefault = noop
const onBlurDefault = noop
const languageDefault: Language = english

export let content: Content = contentDefault
export let selection: JSONEditorSelection | undefined = selectionDefault
Expand Down Expand Up @@ -123,6 +127,7 @@
export let onError: OnError = onErrorDefault
export let onFocus: OnFocus = onFocusDefault
export let onBlur: OnBlur = onBlurDefault
export let language: Language = languageDefault

let instanceId = uniqueId()
let hasFocus = false
Expand All @@ -131,6 +136,10 @@
let sortModalProps: SortModalCallback | undefined
let transformModalProps: TransformModalProps | undefined

$: if (language) {
setI18nData(language)
}

$: {
const contentError = validateContentType(content)
if (contentError) {
Expand Down Expand Up @@ -287,7 +296,6 @@

export function updateProps(props: JSONEditorPropsOptional): void {
const names = Object.keys(props) as (keyof JSONEditorPropsOptional)[]

for (const name of names) {
switch (name) {
case 'content':
Expand Down Expand Up @@ -383,6 +391,9 @@
case 'onBlur':
onBlur = props[name] ?? onBlurDefault
break
case 'language':
language = props[name] ?? languageDefault
break

default:
// We should never reach this default case
Expand Down
27 changes: 13 additions & 14 deletions src/lib/components/controls/SearchBox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
searchPrevious,
updateSearchResult
} from '$lib/logic/search.js'
import { t } from '$lib/i18n/index.js'
import type { JSONPath } from 'immutable-json-patch'
import { flushSync } from 'svelte'

Expand Down Expand Up @@ -284,7 +285,7 @@
<button
type="button"
class="jse-replace-toggle"
title="Toggle visibility of replace options (Ctrl+H)"
title={$t('toggleReplaceOptions')}
on:click={toggleShowReplace}
>
<Icon data={showReplace ? faCaretDown : faCaretRight} />
Expand All @@ -302,9 +303,9 @@
<label class="jse-search-input-label" about="jse-search input">
<input
class="jse-search-input"
title="Enter text to search"
title={$t('enterTextSearch')}
type="text"
placeholder="Find"
placeholder={$t('findPlaceholder')}
bind:value={text}
use:initSearchInput
on:paste={handlePaste}
Expand All @@ -318,23 +319,23 @@
<button
type="button"
class="jse-search-next"
title="Go to next search result (Enter)"
title={$t('nextResult')}
on:click={handleNext}
>
<Icon data={faChevronDown} />
</button>
<button
type="button"
class="jse-search-previous"
title="Go to previous search result (Shift+Enter)"
title={$t('prevResult')}
on:click={handlePrevious}
>
<Icon data={faChevronUp} />
</button>
<button
type="button"
class="jse-search-clear"
title="Close search box (Esc)"
title={$t('closeSearch')}
on:click={handleClose}
>
<Icon data={faTimes} />
Expand All @@ -344,19 +345,17 @@
<div class="jse-replace-section">
<input
class="jse-replace-input"
title="Enter replacement text"
title={$t('enterReplaceText')}
type="text"
placeholder="Replace"
placeholder={$t('replace')}
bind:value={replaceText}
on:keydown={handleReplaceKeyDown}
/>
<button
type="button"
title="Replace current occurrence (Ctrl+Enter)"
on:click={handleReplace}>Replace</button
<button type="button" title={$t('replaceCtrlEnter')} on:click={handleReplace}
>{$t('replace')}</button
>
<button type="button" title="Replace all occurrences" on:click={handleReplaceAll}
>All</button
<button type="button" title={$t('replaceAllTitle')} on:click={handleReplaceAll}
>{$t('replaceAll')}</button
>
</div>
{/if}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/controls/contextmenu/ContextMenuPointer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
import { faCaretDown } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import {
CONTEXT_MENU_EXPLANATION,
CONTEXT_MENU_HEIGHT,
CONTEXT_MENU_WIDTH
} from '$lib/constants.js'
import { t } from '$lib/i18n'
import type { OnContextMenu } from '$lib/types'

export let root: boolean = false
Expand Down Expand Up @@ -42,7 +42,7 @@
class:jse-root={root}
class:jse-insert={insert}
class:jse-selected={selected}
title={CONTEXT_MENU_EXPLANATION}
title={$t('contextMenuExplanation')}
on:click={handleClick}
>
<Icon data={faCaretDown} />
Expand Down
11 changes: 6 additions & 5 deletions src/lib/components/modals/JSONEditorModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
import JSONEditorRoot from '../modes/JSONEditorRoot.svelte'
import { noop } from '$lib/utils/noop.js'
import { stringifyJSONPath } from '$lib/utils/pathUtils.js'
import { t } from '$lib/i18n'
import { initial, isEmpty, last } from 'lodash-es'
import { isJSONContent, toJSONContent } from '$lib/utils/jsonUtils.js'
import Icon from 'svelte-awesome'
Expand Down Expand Up @@ -222,26 +223,26 @@
<div class="jse-modal-wrapper">
<AbsolutePopup>
<Header
title="Edit nested content {stack.length > 1 ? ` (${stack.length})` : ''}"
title="${$t('editNestedContent')} {stack.length > 1 ? ` (${stack.length})` : ''}"
fullScreenButton={true}
bind:fullscreen
onClose={handleClose}
/>

<div class="jse-modal-contents">
<div class="jse-label">
<div class="jse-label-inner">Path</div>
<div class="jse-label-inner">{$t('path')}</div>
</div>
<input
class="jse-path"
type="text"
readonly
title="Selected path"
title={$t('selectedPath')}
value={pathDescription}
/>

<div class="jse-label">
<div class="jse-label-inner">Contents</div>
<div class="jse-label-inner">{$t('contents')}</div>
</div>

<div class="jse-modal-inline-editor">
Expand Down Expand Up @@ -292,7 +293,7 @@

{#if stack.length > 1}
<button type="button" class="jse-secondary" on:click={handleClose}>
<Icon data={faCaretLeft} /> Back
<Icon data={faCaretLeft} /> {$t('back')}
</button>
{/if}
{#if !readOnly}
Expand Down
17 changes: 9 additions & 8 deletions src/lib/components/modals/SortModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import { compileJSONPointer, getIn } from 'immutable-json-patch'
import { createDebug } from '$lib/utils/debug.js'
import type { OnSort } from '$lib/types.js'
import { t } from '$lib/i18n'
import Modal from './Modal.svelte'

const debug = createDebug('jsoneditor:SortModal')
Expand All @@ -29,11 +30,11 @@

const asc = {
value: 1,
label: 'ascending'
label: $t('sortAscending')
}
const desc = {
value: -1,
label: 'descending'
label: $t('sortDescending')
}
const directions = [asc, desc]

Expand Down Expand Up @@ -76,7 +77,7 @@
</script>

<Modal {onClose} className="jse-sort-modal">
<Header title={jsonIsArray ? 'Sort array items' : 'Sort object keys'} {onClose} />
<Header title={jsonIsArray ? $t('sortArrayItems') : $t('sortObjectKeys')} {onClose} />

<div class="jse-modal-contents">
<table>
Expand All @@ -86,7 +87,7 @@
</colgroup>
<tbody>
<tr>
<th>Path</th>
<th>{$t('path')}</th>
<td>
<input
class="jse-path"
Expand All @@ -95,20 +96,20 @@
title="Selected path"
value={rootPath && !isEmpty(rootPath)
? stringifyJSONPath(rootPath)
: '(document root)'}
: `(${$t('docRoot')})`}
/>
</td>
</tr>
{#if jsonIsArray && properties && properties?.length > 1}
<tr>
<th>Property</th>
<th>{$t('property')}</th>
<td>
<Select showChevron items={properties} bind:value={selectedProperty} />
</td>
</tr>
{/if}
<tr>
<th>Direction</th>
<th>{$t('direction')}</th>
<td>
<Select
showChevron
Expand Down Expand Up @@ -137,7 +138,7 @@
use:focus
disabled={jsonIsArray && properties && properties?.length > 1 ? !selectedProperty : false}
>
Sort
{$t('sort')}
</button>
</div>
</div>
Expand Down
21 changes: 11 additions & 10 deletions src/lib/components/modals/TransformModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
import Modal from './Modal.svelte'
import { onMount } from 'svelte'
import { createHistoryInstance } from '$lib/logic/history'
import { t } from '$lib/i18n'

const debug = createDebug('jsoneditor:TransformModal')

Expand Down Expand Up @@ -256,29 +257,29 @@
<div class="jse-main-contents">
<div class="jse-query-contents">
<div class="jse-label">
<div class="jse-label-inner">Language</div>
<div class="jse-label-inner">{$t('language')}</div>
</div>
<div class="jse-description">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html getSelectedQueryLanguage(queryLanguageId).description}
</div>

<div class="jse-label">
<div class="jse-label-inner">Path</div>
<div class="jse-label-inner">{$t('path')}</div>
</div>
<input
class="jse-path"
type="text"
readonly
title="Selected path"
value={!isEmpty(rootPath) ? stringifyJSONPath(rootPath) : '(document root)'}
title={$t('selectedPath')}
value={!isEmpty(rootPath) ? stringifyJSONPath(rootPath) : `(${$t('docRoot')})`}
/>

<div class="jse-label">
<div class="jse-label-inner">
<button type="button" on:click={toggleShowWizard}>
<Icon data={showWizard ? faCaretDown : faCaretRight} />
Wizard
{$t('wizard')}
</button>
</div>
</div>
Expand All @@ -295,12 +296,12 @@
</div>
{/if}
{:else}
(Only available for arrays, not for objects)
({$t('wizardInfo')})
{/if}
{/if}

<div class="jse-label">
<div class="jse-label-inner">Query</div>
<div class="jse-label-inner">{$t('query')}</div>
</div>
<textarea
bind:this={refQueryInput}
Expand All @@ -315,7 +316,7 @@
<div class="jse-label-inner">
<button type="button" on:click={toggleShowOriginal}>
<Icon data={showOriginal ? faCaretDown : faCaretRight} />
Original
{$t('original')}
</button>
</div>
</div>
Expand Down Expand Up @@ -356,7 +357,7 @@
</div>
<div class="jse-preview-data">
<div class="jse-label">
<div class="jse-label-inner">Preview</div>
<div class="jse-label-inner">{$t('preview')}</div>
</div>
{#if !previewError}
<TreeMode
Expand Down Expand Up @@ -408,7 +409,7 @@
use:focus
disabled={!!previewError}
>
Transform
{$t('transform')}
</button>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/lib/components/modals/TransformModalHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { faCog } from '@fortawesome/free-solid-svg-icons'
import SelectQueryLanguage from '../controls/selectQueryLanguage/SelectQueryLanguage.svelte'
import type { AbsolutePopupContext, OnChangeQueryLanguage, QueryLanguage } from '$lib/types.js'
import { t } from '$lib/i18n'
import Header from './Header.svelte'

export let queryLanguages: QueryLanguage[]
Expand Down Expand Up @@ -39,7 +40,7 @@
}
</script>

<Header title="Transform" fullScreenButton={true} bind:fullscreen {onClose}>
<Header title={$t('transform')} fullScreenButton={true} bind:fullscreen {onClose}>
<button
slot="actions"
type="button"
Expand Down
Loading