Ivan Fontosh
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
|
|
|
|
import {
|
|
EDITOR_LOCALE_STORAGE_KEY,
|
|
inferEditorLocaleFromSystem,
|
|
normalizeEditorLocale,
|
|
translateEditorMessage,
|
|
type EditorLocale,
|
|
} from './editorMessages';
|
|
|
|
type EditorI18nContextValue = {
|
|
locale: EditorLocale;
|
|
setLocale: (next: EditorLocale) => void;
|
|
t: (key: string, vars?: Record<string, string | number>) => string;
|
|
};
|
|
|
|
const EditorI18nContext = createContext<EditorI18nContextValue | null>(null);
|
|
|
|
function readInitialLocale(): EditorLocale {
|
|
try {
|
|
return normalizeEditorLocale(localStorage.getItem(EDITOR_LOCALE_STORAGE_KEY));
|
|
} catch {
|
|
return inferEditorLocaleFromSystem();
|
|
}
|
|
}
|
|
|
|
export function EditorI18nProvider({ children }: { children: React.ReactNode }) {
|
|
const [locale, setLocaleState] = useState<EditorLocale>(readInitialLocale);
|
|
|
|
const setLocale = useCallback((next: EditorLocale) => {
|
|
setLocaleState(next);
|
|
try {
|
|
localStorage.setItem(EDITOR_LOCALE_STORAGE_KEY, next);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
const t = useCallback(
|
|
(key: string, vars?: Record<string, string | number>) => translateEditorMessage(locale, key, vars),
|
|
[locale],
|
|
);
|
|
|
|
const value = useMemo<EditorI18nContextValue>(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
|
|
|
|
return <EditorI18nContext.Provider value={value}>{children}</EditorI18nContext.Provider>;
|
|
}
|
|
|
|
export function useEditorI18n(): EditorI18nContextValue {
|
|
const ctx = useContext(EditorI18nContext);
|
|
if (!ctx) {
|
|
throw new Error('useEditorI18n must be used within EditorI18nProvider');
|
|
}
|
|
return ctx;
|
|
}
|