Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New translate #179

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ easyMDE.value('New input for **EasyMDE**');
- **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s).
- **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
- **timeFormat**: Set DateTimeFormat. More information see [DateTimeFormat instances](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). Default `locale: en-US, format: hour:minute`.
- **text**: Set text for autosave.
- **blockStyles**: Customize how certain buttons that style blocks of text behave.
- **bold**: Can be set to `**` or `__`. Defaults to `**`.
- **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````.
Expand All @@ -140,6 +139,7 @@ easyMDE.value('New input for **EasyMDE**');
- table
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
- **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Defaults to `"300px"`.
- **markdownUrl**: Customize url for guide.
- **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`.
- **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
Expand Down Expand Up @@ -188,11 +188,13 @@ easyMDE.value('New input for **EasyMDE**');
- **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`.
- **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
- Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
- **statusTexts**: Customize the text used to status bar.
- **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`.
- **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`.
- **tabSize**: If set, customize the tab size. Defaults to `2`.
- **theme**: Override the theme. Defaults to `easymde`.
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbarTitles**: Customize the title used to toolbar.
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.


Expand All @@ -218,7 +220,6 @@ var editor = new EasyMDE({
minute: '2-digit',
},
},
text: "Autosaved: "
},
blockStyles: {
bold: "__",
Expand All @@ -237,6 +238,7 @@ var editor = new EasyMDE({
},
lineWrapping: false,
minHeight: "500px",
markdownUrl: "https://www.markdownguide.org/basic-syntax/",
parsingConfig: {
allowAtxHeaderWithoutSpace: true,
strikethrough: false,
Expand Down Expand Up @@ -287,10 +289,18 @@ var editor = new EasyMDE({
el.innerHTML = ++this.keystrokes + " Keystrokes";
},
}], // Another optional usage, with a custom status bar item that counts keystrokes
statusTexts: {
lines: "lines: ",
words: "words: ",
autosave: "Autosaved: ",
},
styleSelectedText: false,
syncSideBySidePreviewScroll: false,
tabSize: 4,
toolbar: false,
toobarTitles: {
"bold": {"title": "Bold"},
},
toolbarTips: false,
});
```
Expand Down
4 changes: 2 additions & 2 deletions src/css/easymde.css
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@
}

.editor-statusbar .lines:before {
content: 'lines: '
content: attr(data-status-bar-before);
}

.editor-statusbar .words:before {
content: 'words: '
content: attr(data-status-bar-before);
}

.editor-statusbar .characters:before {
Expand Down
52 changes: 50 additions & 2 deletions src/js/easymde.js
Original file line number Diff line number Diff line change
Expand Up @@ -1489,6 +1489,12 @@ var promptTexts = {
image: 'URL of the image:',
};

var statusTexts = {
lines: 'lines: ',
words: 'words: ',
autosave: 'Autosaved: ',
};

var timeFormat = {
locale: 'en-US',
format: {
Expand Down Expand Up @@ -1564,6 +1570,10 @@ function EasyMDE(options) {
document.getElementsByTagName('head')[0].appendChild(link);
}

if (options.markdownUrl != undefined) {
toolbarBuiltInButtons.guide.action = options.markdownUrl;
}


// Find the textarea to use
if (options.element) {
Expand Down Expand Up @@ -1633,6 +1643,10 @@ function EasyMDE(options) {
options.promptTexts = extend({}, promptTexts, options.promptTexts || {});


// Merging the statusTexts, with the given options
options.statusTexts = extend({}, statusTexts, options.statusTexts || {});


// Merging the blockStyles, with the given options
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});

Expand All @@ -1642,6 +1656,9 @@ function EasyMDE(options) {
options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {});
}

// Merging the toolbar title, with the given options
toolbarBuiltInButtons = extend({}, toolbarBuiltInButtons, options.toolbarTitles || {});


// Merging the shortcuts, with the given options
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
Expand Down Expand Up @@ -2025,7 +2042,7 @@ EasyMDE.prototype.autosave = function () {
if (el != null && el != undefined && el != '') {
var d = new Date();
var dd = new Intl.DateTimeFormat([this.options.autosave.timeFormat.locale, 'en-US'], this.options.autosave.timeFormat.format).format(d);
var save = this.options.autosave.text == undefined ? 'Autosaved: ' : this.options.autosave.text;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You change this one

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But how does this affect work?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If someone use this.options.autosave.text in this setting, this will not work anymore because you change to this.options.statusTexts.autosave. Old settings, should still work after your change.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will work, just reset to the default value.
var statusTexts = {
lines: 'lines: ',
words: 'words: ',
autosave: 'Autosaved: ',
};

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the user adds translation of statuses, what prevents them from updating the AutoSave text? Despite the fact that it appeared recently.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will work, just reset to the default value.
var statusTexts = {
lines: 'lines: ',
words: 'words: ',
autosave: 'Autosaved: ',
};

But we should keep the user setting not the default setting, because this make a breakchange.

var save = this.options.statusTexts.autosave;

el.innerHTML = save + dd;
}
Expand Down Expand Up @@ -2372,32 +2389,40 @@ EasyMDE.prototype.createStatusbar = function (status) {

// Set up the built-in items
var items = [];
var i, onUpdate, defaultValue;
var i, onUpdate, onCursorActivity, defaultValue, dataSet;

for (i = 0; i < status.length; i++) {
// Reset some values
onUpdate = undefined;
onCursorActivity = undefined;
defaultValue = undefined;
dataSet = undefined;


// Handle if custom or not
if (typeof status[i] === 'object') {
items.push({
className: status[i].className,
dataSet: status[i].dataSet,
defaultValue: status[i].defaultValue,
onUpdate: status[i].onUpdate,
onCursorActivity: status[i].onCursorActivity,
});
} else {
var name = status[i];

if (name === 'words') {
dataSet = options.statusTexts[name];

defaultValue = function (el) {
el.innerHTML = wordCount(cm.getValue());
};
onUpdate = function (el) {
el.innerHTML = wordCount(cm.getValue());
};
} else if (name === 'lines') {
dataSet = options.statusTexts[name];

defaultValue = function (el) {
el.innerHTML = cm.lineCount();
};
Expand All @@ -2412,6 +2437,11 @@ EasyMDE.prototype.createStatusbar = function (status) {
var pos = cm.getCursor();
el.innerHTML = pos.line + ':' + pos.ch;
};
onCursorActivity = function (el) {
var pos = cm.getCursor();

el.innerHTML = pos.line + ':' + pos.ch;
};
} else if (name === 'autosave') {
defaultValue = function (el) {
if (options.autosave != undefined && options.autosave.enabled === true) {
Expand All @@ -2426,8 +2456,10 @@ EasyMDE.prototype.createStatusbar = function (status) {

items.push({
className: name,
dataSet: dataSet,
defaultValue: defaultValue,
onUpdate: onUpdate,
onCursorActivity: onCursorActivity,
});
}
}
Expand All @@ -2449,6 +2481,11 @@ EasyMDE.prototype.createStatusbar = function (status) {
el.className = item.className;


if (item.dataSet != undefined) {
el.dataset.statusBarBefore = item.dataSet;
}


// Ensure the defaultValue is a function
if (typeof item.defaultValue === 'function') {
item.defaultValue(el);
Expand All @@ -2466,6 +2503,17 @@ EasyMDE.prototype.createStatusbar = function (status) {
}


// Ensure the onCursorActivity is a function
if (typeof item.onCursorActivity === 'function') {
// Create a closure around the span of the current action, then execute the onCursorActivity handler
this.codemirror.on('cursorActivity', (function (el, item) {
return function () {
item.onCursorActivity(el);
};
}(el, item)));
}


// Append the item to the status bar
bar.appendChild(el);
}
Expand Down