chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

fix commands not being translated

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

14
src/features/command/index.tsx
View file

@ -1,4 +1,5 @@
import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
import { Dictionary, DictionaryKey, useI18n } from '../i18n';
interface CommandContextType { interface CommandContextType {
set(commands: CommandType<any>[]): void; 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 Handle: Component<{ command: CommandType }> = (props) => {
const { t } = useI18n();
return <samp> return <samp>
{props.command.label} {String(t(props.command.label))}
<Show when={props.command.shortcut}>{ <Show when={props.command.shortcut}>{
shortcut => { shortcut => {
const modifier = shortcut().modifier; const modifier = shortcut().modifier;
@ -150,7 +154,7 @@ export enum Modifier {
export interface CommandType<T extends (...args: any[]) => any = any> { export interface CommandType<T extends (...args: any[]) => any = any> {
(...args: Parameters<T>): Promise<ReturnType<T>>; (...args: Parameters<T>): Promise<ReturnType<T>>;
label: string; label: DictionaryKey;
shortcut?: { shortcut?: {
key: string; key: string;
modifier: Modifier; 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>>; 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, { return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
label: { label: {
value: label, value: label,
@ -172,7 +176,7 @@ export const createCommand = <T extends (...args: any[]) => any>(label: string,
writable: false, writable: false,
}, },
withLabel: { withLabel: {
value(label: string) { value(label: DictionaryKey) {
return createCommand(label, command, shortcut); return createCommand(label, command, shortcut);
}, },
configurable: false, 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'; export { Context } from './contextMenu';

3
src/features/i18n/context.tsx
View file

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

1
src/features/i18n/index.tsx
View file

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

22
src/routes/(editor)/edit.tsx
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' }); const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
filesContext.open(directory); filesContext.open(directory);
@ -236,18 +236,18 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
}); });
const commands = { const commands = {
open: createCommand(t('page.edit.command.open'), async () => { open: createCommand('page.edit.command.open', async () => {
const directory = await window.showDirectoryPicker({ mode: 'readwrite' }); const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
await filesContext.open(directory); await filesContext.open(directory);
}, { key: 'o', modifier: Modifier.Control }), }, { key: 'o', modifier: Modifier.Control }),
close: createCommand(t('page.edit.command.close'), async () => { close: createCommand('page.edit.command.close', async () => {
filesContext.remove('__root__'); 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); filesContext.remove(id);
}, { key: 'w', modifier: Modifier.Control | (isInstalledPWA ? Modifier.None : Modifier.Alt) }), }, { 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]) => { 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 // 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'] } }] }); 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(); stream.close();
})); }));
}, { key: 's', modifier: Modifier.Control }), }, { 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); console.log('save as ...', handle);
window.showSaveFilePicker({ window.showSaveFilePicker({
@ -273,13 +273,13 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
}); });
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }), }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
selectAll: createCommand(t('page.edit.command.selectAll'), () => { selectAll: createCommand('page.edit.command.selectAll', () => {
api()?.selectAll(); api()?.selectAll();
}, { key: 'a', modifier: Modifier.Control }), }, { key: 'a', modifier: Modifier.Control }),
clearSelection: createCommand(t('page.edit.command.clearSelection'), () => { clearSelection: createCommand('page.edit.command.clearSelection', () => {
api()?.clearSelection(); api()?.clearSelection();
}), }),
delete: createCommand(t('page.edit.command.delete'), () => { delete: createCommand('page.edit.command.delete', () => {
const { selection, remove } = api() ?? {}; const { selection, remove } = api() ?? {};
if (!selection || !remove) { if (!selection || !remove) {
@ -288,7 +288,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
remove(selection().map(s => s.key)); remove(selection().map(s => s.key));
}, { key: 'delete', modifier: Modifier.None }), }, { 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 formData = await newKeyPrompt()?.showModal();
const key = formData?.get('key')?.toString(); const key = formData?.get('key')?.toString();
@ -298,7 +298,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
api()?.addKey(key); api()?.addKey(key);
}), }),
insertLanguage: createCommand(t('page.edit.command.insertLanguage'), async () => { insertLanguage: createCommand('page.edit.command.insertLanguage', async () => {
const formData = await newLanguagePrompt()?.showModal(); const formData = await newLanguagePrompt()?.showModal();
const locale = formData?.get('locale')?.toString(); const locale = formData?.get('locale')?.toString();