Ionaru / Ionaru/easy-markdown-editor

[discussion] Options for i18n and/or text replacement consitency.

Open
#68 2 comments 8 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

### I'm submitting a...
- [ ] Bug report
- [x] Feature request

I just discovered the v3.0 milestone, among with its description:

> Completely rewrite the source code into typescript while still providing the same basic functionality. **Also re-evaluate the current configuration options, add/remove if needed.**

This options configuration rewrite could be a nice opportunity to think about internationalization, or to create a consistent option to replace text in order to let the developer implement internationalization itself.

Currently, as far as I know, we can replace texts with the `promptTexts` option, and toolbar title option for each icon. That said, a french translation should look like this:

```js
var easyMde = new EasyMDE({
promptTexts: {
image: 'URL de l\'image',
link: 'URL du lien'
},
toolbar: [{
name: 'bold',
action: EasyMDE.toggleBold,
className: 'fa fa-bold',
title: 'Gras',
}, {
name: 'italic',
action: EasyMDE.toggleItalic,
className: 'fa fa-italic',
title: 'Italique',
},
// etc.
]
});
```

Which is long and not really convenient.

There are also some text that can not be changed with options, such as in the status bar.

Maybe we can start to add a new option to replace text literals easily, with for instance only one option, like this:

```js
var easyMde = new EasyMDE({
textLiteral:
promptImage: 'URL de l\'image :',
promptLink: 'URL du lien :',
iconTitleBold: 'Gras',
iconTitleItalic: 'Italique',
});
```

We could also create a new file dedicated to a language dictionary, with these texts in different languages and let contributors do the job:

```js
var i18n = {
promptImage: {
en: `URL of the image:`,
fr: `URL de l\'image :`
}, {
promptLink: {
en: `URL of the link:`,
fr: `URL du lien :`
}, {
iconTitleBold: {
en: `Bold`,
fr: `Gras`
}, {
iconTitleItalic: {
en: `Italic`,
fr: `Italique`
},
// etc.
}
```

...then use it with something like:

```js
var easyMde = new EasyMDE({
language: 'fr'
});
```

or, in a more concrete way, something like:

```js
onLanguageChange(language) {
easyMde.options.language = language;
}
```

(defaulting to English if no translation was found)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.