fix commands not being translated

This commit is contained in:
Chris Kruining 2025-01-06 16:33:42 +01:00
parent 7d6a02235d
commit 1ae0e14e42
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 23 additions and 17 deletions

View file

@ -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<any>[]): void;
@ -115,8 +116,11 @@ const Context = <T extends (...args: any[]) => any = any>(props: ParentProps<{ f
};
const Handle: Component<{ command: CommandType }> = (props) => {
const { t } = useI18n();
return <samp>
{props.command.label}
{String(t(props.command.label))}
<Show when={props.command.shortcut}>{
shortcut => {
const modifier = shortcut().modifier;
@ -150,7 +154,7 @@ export enum Modifier {
export interface CommandType<T extends (...args: any[]) => any = any> {
(...args: Parameters<T>): Promise<ReturnType<T>>;
label: string;
label: DictionaryKey;
shortcut?: {
key: string;
modifier: Modifier;
@ -159,7 +163,7 @@ export interface CommandType<T extends (...args: any[]) => any = any> {
with<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>>;
}
export const createCommand = <T extends (...args: any[]) => any>(label: string, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
export const createCommand = <T extends (...args: any[]) => any>(label: DictionaryKey, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
label: {
value: label,
@ -172,7 +176,7 @@ export const createCommand = <T extends (...args: any[]) => 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 = <T extends (...args: any[]) => any>(label: string,
});
};
export const noop = createCommand('noop', () => { });
export const noop = createCommand('noop' as any, () => { });
export { Context } from './contextMenu';

View file

@ -5,7 +5,8 @@ import nl from '~/i18n/nl-NL.json';
import { makePersisted } from '@solid-primitives/storage';
type RawDictionary = typeof en;
type Dictionary = Flatten<RawDictionary>;
export type Dictionary = Flatten<RawDictionary>;
export type DictionaryKey = keyof Dictionary;
export type Locale = 'en-GB' | 'nl-NL';
const dictionaries = {

View file

@ -1,2 +1,3 @@
export type { Dictionary, DictionaryKey } from './context';
export { I18nProvider, useI18n } from './context';
export { LocalePicker } from './picker';

View file

@ -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();