diff --git a/.gitignore b/.gitignore index a27cf1c6..761db583 100644 --- a/.gitignore +++ b/.gitignore @@ -25,8 +25,8 @@ yarn-debug.log* yarn-error.log* .eslintcache - +.vscode # script outputs translationIssues.txt - +# Ignore output of local pip install when building the tar src/workers/python/python_package/ diff --git a/src/Papyros.css b/src/Papyros.css index 9285acf2..e9f4f873 100644 --- a/src/Papyros.css +++ b/src/Papyros.css @@ -155,3 +155,12 @@ Ensure the default browser behavior of the `hidden` attribute. /* same value as placeholder-grey in tailwind.config.js */ color: #888; } + +/* Also override CodeMirror buttons to use this style */ +.papyros-button, .cm-button { + @apply _tw-m-1 _tw-px-3 _tw-py-1 _tw-rounded-lg _tw-cursor-pointer disabled:_tw-opacity-50 disabled:_tw-cursor-not-allowed !important; +} +/* Round the corners of textfields created by CodeMirror */ +.cm-textfield { + @apply _tw-rounded-lg !important; +} diff --git a/src/Translations.d.ts b/src/Translations.d.ts index fc0c0bea..3d7f0bc1 100644 --- a/src/Translations.d.ts +++ b/src/Translations.d.ts @@ -2,10 +2,23 @@ * I18n translations object: * */ -interface Translations { +interface Translation { + /** + * Phrase for given translation key + */ + [key: string]: string; +} +interface NestedTranslations { /** * Each key yields a translated string or a nested object */ - [key: string]: string | Translations; + [key: string]: Translation | NestedTranslations; +} +interface CodeMirrorTranslations { + /** + * CodeMirror expects a flat object per language + */ + [key: string]: Translation } -export declare const TRANSLATIONS: Translations; +export declare const TRANSLATIONS: NestedTranslations; +export declare const CODE_MIRROR_TRANSLATIONS: CodeMirrorTranslations; diff --git a/src/Translations.js b/src/Translations.js index 09f120ea..6ff56d09 100644 --- a/src/Translations.js +++ b/src/Translations.js @@ -108,9 +108,45 @@ const DUTCH_TRANSLATION = { "used_input_with_prompt": "Deze regel werd gebruikt als invoer voor de volgende vraag: %{prompt}" }; +const DUTCH_PHRASES = { + // @codemirror/view + "Control character": "Controlekarakter", + // @codemirror/fold + "Folded lines": "Ingeklapte regels", + "Unfolded lines": "Uitgeklapte regels", + "to": "tot", + "folded code": "ingeklapte code", + "unfold": "uitklappen", + "Fold line": "Regel inklappen", + "Unfold line": "Regel uitklappen", + // @codemirror/search + "Go to line": "Spring naar regel", + "go": "OK", + "Find": "Zoeken", + "Replace": "Vervangen", + "next": "volgende", + "previous": "vorige", + "all": "alle", + "match case": "Hoofdlettergevoelig", + "replace": "vervangen", + "replace all": "alles vervangen", + "close": "sluiten", + "current match": "huidige overeenkomst", + "on line": "op regel", + // @codemirror/lint + "Diagnostics": "Problemen", + "No diagnostics": "Geen problemen", + } + const TRANSLATIONS = { en: { "Papyros": ENGLISH_TRANSLATION }, nl: { "Papyros": DUTCH_TRANSLATION } }; + +const CODE_MIRROR_TRANSLATIONS = { + en: {}, + nl: DUTCH_PHRASES +}; // JS exports to allow use in TS and JS files module.exports.TRANSLATIONS = TRANSLATIONS; +module.exports.CODE_MIRROR_TRANSLATIONS = CODE_MIRROR_TRANSLATIONS; diff --git a/src/editor/CodeMirrorEditor.ts b/src/editor/CodeMirrorEditor.ts index 076c491b..c1dc77d1 100644 --- a/src/editor/CodeMirrorEditor.ts +++ b/src/editor/CodeMirrorEditor.ts @@ -3,6 +3,8 @@ import { EditorView, placeholder, ViewUpdate } from "@codemirror/view"; import { Renderable, RenderOptions, renderWithOptions } from "../util/Rendering"; import { StyleSpec } from "style-mod"; import { oneDark } from "@codemirror/theme-one-dark"; +import { CODE_MIRROR_TRANSLATIONS } from "../Translations"; +import I18n from "i18n-js"; /** * Data structure containing common elements for styling @@ -67,6 +69,7 @@ export abstract class CodeMirrorEditor extends Renderable { public static STYLE = "style"; public static PLACEHOLDER = "placeholder"; public static THEME = "theme"; + public static LANGUAGE = "language"; /** * CodeMirror EditorView representing the internal editor */ @@ -96,6 +99,7 @@ export abstract class CodeMirrorEditor extends Renderable { compartments.add(CodeMirrorEditor.STYLE); compartments.add(CodeMirrorEditor.PLACEHOLDER); compartments.add(CodeMirrorEditor.THEME); + compartments.add(CodeMirrorEditor.LANGUAGE); this.compartments = new Map(); const configurableExtensions: Array = []; compartments.forEach(opt => { @@ -204,6 +208,10 @@ export abstract class CodeMirrorEditor extends Renderable { protected override _render(options: RenderOptions): void { this.setDarkMode(options.darkMode || false); + this.reconfigure([ + CodeMirrorEditor.LANGUAGE, + EditorState.phrases.of(CODE_MIRROR_TRANSLATIONS[I18n.locale]) + ]); const wrappingDiv = document.createElement("div"); wrappingDiv.classList.add(...this.styling.classes); wrappingDiv.replaceChildren(this.editorView.dom); diff --git a/src/util/Rendering.ts b/src/util/Rendering.ts index b2756779..72c6868f 100644 --- a/src/util/Rendering.ts +++ b/src/util/Rendering.ts @@ -104,7 +104,7 @@ export interface ButtonOptions { */ export function renderButton(options: ButtonOptions): string { appendClasses(options, - "_tw-m-1 _tw-px-3 _tw-py-1 _tw-rounded-lg _tw-cursor-pointer disabled:_tw-opacity-50 disabled:_tw-cursor-not-allowed"); + "papyros-button"); return `