From 1ae0e14e4267f40daec6e894f5f1078866bb66ef Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Mon, 6 Jan 2025 16:33:42 +0100 Subject: [PATCH] fix commands not being translated --- src/features/command/index.tsx | 14 +++++++++----- src/features/i18n/context.tsx | 3 ++- src/features/i18n/index.tsx | 1 + src/routes/(editor)/edit.tsx | 22 +++++++++++----------- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/features/command/index.tsx b/src/features/command/index.tsx index 137de5b..371c488 100644 --- a/src/features/command/index.tsx +++ b/src/features/command/index.tsx @@ -1,4 +1,5 @@ import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; +import { Dictionary, DictionaryKey, useI18n } from '../i18n'; interface CommandContextType { set(commands: CommandType[]): void; @@ -115,8 +116,11 @@ const Context = any = any>(props: ParentProps<{ f }; const Handle: Component<{ command: CommandType }> = (props) => { + const { t } = useI18n(); + return - {props.command.label} + {String(t(props.command.label))} + { shortcut => { const modifier = shortcut().modifier; @@ -150,7 +154,7 @@ export enum Modifier { export interface CommandType any = any> { (...args: Parameters): Promise>; - label: string; + label: DictionaryKey; shortcut?: { key: string; modifier: Modifier; @@ -159,7 +163,7 @@ export interface CommandType any = any> { with(this: (this: ThisParameterType, ...args: [...A, ...B]) => ReturnType, ...args: A): CommandType<(...args: B) => ReturnType>; } -export const createCommand = any>(label: string, command: T, shortcut?: CommandType['shortcut']): CommandType => { +export const createCommand = any>(label: DictionaryKey, command: T, shortcut?: CommandType['shortcut']): CommandType => { return Object.defineProperties(((...args: Parameters) => command(...args)) as any, { label: { value: label, @@ -172,7 +176,7 @@ export const createCommand = any>(label: string, writable: false, }, withLabel: { - value(label: string) { + value(label: DictionaryKey) { return createCommand(label, command, shortcut); }, configurable: false, @@ -188,6 +192,6 @@ export const createCommand = any>(label: string, }); }; -export const noop = createCommand('noop', () => { }); +export const noop = createCommand('noop' as any, () => { }); export { Context } from './contextMenu'; \ No newline at end of file diff --git a/src/features/i18n/context.tsx b/src/features/i18n/context.tsx index 39f801a..5780290 100644 --- a/src/features/i18n/context.tsx +++ b/src/features/i18n/context.tsx @@ -5,7 +5,8 @@ import nl from '~/i18n/nl-NL.json'; import { makePersisted } from '@solid-primitives/storage'; type RawDictionary = typeof en; -type Dictionary = Flatten; +export type Dictionary = Flatten; +export type DictionaryKey = keyof Dictionary; export type Locale = 'en-GB' | 'nl-NL'; const dictionaries = { diff --git a/src/features/i18n/index.tsx b/src/features/i18n/index.tsx index 38e40d4..0ac0abc 100644 --- a/src/features/i18n/index.tsx +++ b/src/features/i18n/index.tsx @@ -1,2 +1,3 @@ +export type { Dictionary, DictionaryKey } from './context'; export { I18nProvider, useI18n } from './context'; export { LocalePicker } from './picker'; \ No newline at end of file diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx index ff24889..9df6c5f 100644 --- a/src/routes/(editor)/edit.tsx +++ b/src/routes/(editor)/edit.tsx @@ -58,7 +58,7 @@ export default function Edit(props: ParentProps) { } }); - const open = createCommand('open folder', async () => { + const open = createCommand('page.edit.command.open', async () => { const directory = await window.showDirectoryPicker({ mode: 'readwrite' }); filesContext.open(directory); @@ -236,18 +236,18 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { }); const commands = { - open: createCommand(t('page.edit.command.open'), async () => { + open: createCommand('page.edit.command.open', async () => { const directory = await window.showDirectoryPicker({ mode: 'readwrite' }); await filesContext.open(directory); }, { key: 'o', modifier: Modifier.Control }), - close: createCommand(t('page.edit.command.close'), async () => { + close: createCommand('page.edit.command.close', async () => { filesContext.remove('__root__'); }), - closeTab: createCommand(t('page.edit.command.closeTab'), async (id: string) => { + closeTab: createCommand('page.edit.command.closeTab', async (id: string) => { filesContext.remove(id); }, { key: 'w', modifier: Modifier.Control | (isInstalledPWA ? Modifier.None : Modifier.Alt) }), - save: createCommand(t('page.edit.command.save'), async () => { + save: createCommand('page.edit.command.save', async () => { await Promise.allSettled(mutatedData().map(async ([file, data]) => { // TODO :: add the newly created file to the known files list to that the save file picker is not shown again on subsequent saves const handle = file.existing ? file.handle : await window.showSaveFilePicker({ suggestedName: file.name, excludeAcceptAllOption: true, types: [{ description: 'JSON file', accept: { 'application/json': ['.json'] } }] }); @@ -259,7 +259,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { stream.close(); })); }, { key: 's', modifier: Modifier.Control }), - saveAs: createCommand(t('page.edit.command.saveAs'), (handle?: FileSystemFileHandle) => { + saveAs: createCommand('page.edit.command.saveAs', (handle?: FileSystemFileHandle) => { console.log('save as ...', handle); window.showSaveFilePicker({ @@ -273,13 +273,13 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { }); }, { key: 's', modifier: Modifier.Control | Modifier.Shift }), - selectAll: createCommand(t('page.edit.command.selectAll'), () => { + selectAll: createCommand('page.edit.command.selectAll', () => { api()?.selectAll(); }, { key: 'a', modifier: Modifier.Control }), - clearSelection: createCommand(t('page.edit.command.clearSelection'), () => { + clearSelection: createCommand('page.edit.command.clearSelection', () => { api()?.clearSelection(); }), - delete: createCommand(t('page.edit.command.delete'), () => { + delete: createCommand('page.edit.command.delete', () => { const { selection, remove } = api() ?? {}; if (!selection || !remove) { @@ -288,7 +288,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { remove(selection().map(s => s.key)); }, { key: 'delete', modifier: Modifier.None }), - insertKey: createCommand(t('page.edit.command.insertKey'), async () => { + insertKey: createCommand('page.edit.command.insertKey', async () => { const formData = await newKeyPrompt()?.showModal(); const key = formData?.get('key')?.toString(); @@ -298,7 +298,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { api()?.addKey(key); }), - insertLanguage: createCommand(t('page.edit.command.insertLanguage'), async () => { + insertLanguage: createCommand('page.edit.command.insertLanguage', async () => { const formData = await newLanguagePrompt()?.showModal(); const locale = formData?.get('locale')?.toString();