460 lines
16 KiB
JavaScript
460 lines
16 KiB
JavaScript
|
import * as utils from './utils';
|
||
|
|
|
||
|
|
/* config section */
|
||
|
|
const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault;
|
||
|
|
const defaultEditorMode = 'gfm';
|
||
|
|
const viewportMargin = 20;
|
||
|
|
|
||
|
|
const jumpToAddressBarKeymapName = isMac ? "Cmd-L" : "Ctrl-L";
|
||
|
|
|
||
|
|
export default class Editor {
|
||
|
|
constructor() {
|
||
|
|
this.editor = null;
|
||
|
|
|
||
|
|
this.defaultExtraKeys = {
|
||
|
|
"F10": function (cm) {
|
||
|
|
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||
|
|
},
|
||
|
|
"Esc": function (cm) {
|
||
|
|
if (cm.getOption('keyMap').substr(0, 3) === 'vim') return CodeMirror.Pass;
|
||
|
|
else if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||
|
|
},
|
||
|
|
"Cmd-S": function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
"Ctrl-S": function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
"Enter": "newlineAndIndentContinueMarkdownList",
|
||
|
|
"Tab": function (cm) {
|
||
|
|
var tab = '\t';
|
||
|
|
|
||
|
|
// contruct x length spaces
|
||
|
|
var spaces = Array(parseInt(cm.getOption("indentUnit")) + 1).join(" ");
|
||
|
|
|
||
|
|
//auto indent whole line when in list or blockquote
|
||
|
|
var cursor = cm.getCursor();
|
||
|
|
var line = cm.getLine(cursor.line);
|
||
|
|
|
||
|
|
// this regex match the following patterns
|
||
|
|
// 1. blockquote starts with "> " or ">>"
|
||
|
|
// 2. unorder list starts with *+-
|
||
|
|
// 3. order list starts with "1." or "1)"
|
||
|
|
var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/;
|
||
|
|
|
||
|
|
var match;
|
||
|
|
var multiple = cm.getSelection().split('\n').length > 1 || cm.getSelections().length > 1;
|
||
|
|
|
||
|
|
if (multiple) {
|
||
|
|
cm.execCommand('defaultTab');
|
||
|
|
} else if ((match = regex.exec(line)) !== null) {
|
||
|
|
var ch = match[1].length;
|
||
|
|
var pos = {
|
||
|
|
line: cursor.line,
|
||
|
|
ch: ch
|
||
|
|
};
|
||
|
|
if (cm.getOption('indentWithTabs'))
|
||
|
|
cm.replaceRange(tab, pos, pos, '+input');
|
||
|
|
else
|
||
|
|
cm.replaceRange(spaces, pos, pos, '+input');
|
||
|
|
} else {
|
||
|
|
if (cm.getOption('indentWithTabs'))
|
||
|
|
cm.execCommand('defaultTab');
|
||
|
|
else {
|
||
|
|
cm.replaceSelection(spaces);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"Cmd-Left": "goLineLeftSmart",
|
||
|
|
"Cmd-Right": "goLineRight",
|
||
|
|
"Ctrl-C": function (cm) {
|
||
|
|
if (!isMac && cm.getOption('keyMap').substr(0, 3) === 'vim') {
|
||
|
|
document.execCommand("copy");
|
||
|
|
} else {
|
||
|
|
return CodeMirror.Pass;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"Ctrl-*": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '*');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl-8": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '*');
|
||
|
|
},
|
||
|
|
"Ctrl-_": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '_');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl--": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '_');
|
||
|
|
},
|
||
|
|
"Ctrl-~": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '~');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl-`": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '~');
|
||
|
|
},
|
||
|
|
"Ctrl-^": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '^');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl-6": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '^');
|
||
|
|
},
|
||
|
|
"Ctrl-+": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '+');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl-=": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '+');
|
||
|
|
},
|
||
|
|
"Ctrl-=": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, '=');
|
||
|
|
},
|
||
|
|
"Shift-Ctrl-Backspace": (cm) => {
|
||
|
|
utils.wrapTextWith(this.editor, cm, 'Backspace');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.jumpToAddressBarKeymapValue = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
getStatusBarTemplate(callback) {
|
||
|
|
$.get(window.serverurl + '/views/statusbar.html', (template) => {
|
||
|
|
this.statusBarTemplate = template;
|
||
|
|
if (callback) callback();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
addStatusBar() {
|
||
|
|
if (!this.statusBarTemplate) {
|
||
|
|
this.getStatusBarTemplate(this.addStatusBar);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.statusBar = $(this.statusBarTemplate);
|
||
|
|
this.statusCursor = this.statusBar.find('.status-cursor');
|
||
|
|
this.statusFile = this.statusBar.find('.status-file');
|
||
|
|
this.statusIndicators = this.statusBar.find('.status-indicators');
|
||
|
|
this.statusIndent = this.statusBar.find('.status-indent');
|
||
|
|
this.statusKeymap = this.statusBar.find('.status-keymap');
|
||
|
|
this.statusLength = this.statusBar.find('.status-length');
|
||
|
|
this.statusTheme = this.statusBar.find('.status-theme');
|
||
|
|
this.statusSpellcheck = this.statusBar.find('.status-spellcheck');
|
||
|
|
this.statusPreferences = this.statusBar.find('.status-preferences');
|
||
|
|
this.statusPanel = this.editor.addPanel(this.statusBar[0], {
|
||
|
|
position: "bottom"
|
||
|
|
});
|
||
|
|
|
||
|
|
this.setIndent();
|
||
|
|
this.setKeymap();
|
||
|
|
this.setTheme();
|
||
|
|
this.setSpellcheck();
|
||
|
|
this.setPreferences();
|
||
|
|
}
|
||
|
|
|
||
|
|
setIndent() {
|
||
|
|
var cookieIndentType = Cookies.get('indent_type');
|
||
|
|
var cookieTabSize = parseInt(Cookies.get('tab_size'));
|
||
|
|
var cookieSpaceUnits = parseInt(Cookies.get('space_units'));
|
||
|
|
if (cookieIndentType) {
|
||
|
|
if (cookieIndentType == 'tab') {
|
||
|
|
this.editor.setOption('indentWithTabs', true);
|
||
|
|
if (cookieTabSize)
|
||
|
|
this.editor.setOption('indentUnit', cookieTabSize);
|
||
|
|
} else if (cookieIndentType == 'space') {
|
||
|
|
this.editor.setOption('indentWithTabs', false);
|
||
|
|
if (cookieSpaceUnits)
|
||
|
|
this.editor.setOption('indentUnit', cookieSpaceUnits);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (cookieTabSize)
|
||
|
|
this.editor.setOption('tabSize', cookieTabSize);
|
||
|
|
|
||
|
|
var type = this.statusIndicators.find('.indent-type');
|
||
|
|
var widthLabel = this.statusIndicators.find('.indent-width-label');
|
||
|
|
var widthInput = this.statusIndicators.find('.indent-width-input');
|
||
|
|
|
||
|
|
const setType = () => {
|
||
|
|
if (this.editor.getOption('indentWithTabs')) {
|
||
|
|
Cookies.set('indent_type', 'tab', {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
type.text('Tab Size:');
|
||
|
|
} else {
|
||
|
|
Cookies.set('indent_type', 'space', {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
type.text('Spaces:');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setType();
|
||
|
|
|
||
|
|
const setUnit = () => {
|
||
|
|
var unit = this.editor.getOption('indentUnit');
|
||
|
|
if (this.editor.getOption('indentWithTabs')) {
|
||
|
|
Cookies.set('tab_size', unit, {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
Cookies.set('space_units', unit, {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
}
|
||
|
|
widthLabel.text(unit);
|
||
|
|
}
|
||
|
|
setUnit();
|
||
|
|
|
||
|
|
type.click(() => {
|
||
|
|
if (this.editor.getOption('indentWithTabs')) {
|
||
|
|
this.editor.setOption('indentWithTabs', false);
|
||
|
|
cookieSpaceUnits = parseInt(Cookies.get('space_units'));
|
||
|
|
if (cookieSpaceUnits)
|
||
|
|
this.editor.setOption('indentUnit', cookieSpaceUnits)
|
||
|
|
} else {
|
||
|
|
this.editor.setOption('indentWithTabs', true);
|
||
|
|
cookieTabSize = parseInt(Cookies.get('tab_size'));
|
||
|
|
if (cookieTabSize) {
|
||
|
|
this.editor.setOption('indentUnit', cookieTabSize);
|
||
|
|
this.editor.setOption('tabSize', cookieTabSize);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setType();
|
||
|
|
setUnit();
|
||
|
|
});
|
||
|
|
widthLabel.click(() => {
|
||
|
|
if (widthLabel.is(':visible')) {
|
||
|
|
widthLabel.addClass('hidden');
|
||
|
|
widthInput.removeClass('hidden');
|
||
|
|
widthInput.val(this.editor.getOption('indentUnit'));
|
||
|
|
widthInput.select();
|
||
|
|
} else {
|
||
|
|
widthLabel.removeClass('hidden');
|
||
|
|
widthInput.addClass('hidden');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
widthInput.on('change', () => {
|
||
|
|
var val = parseInt(widthInput.val());
|
||
|
|
if (!val) val = this.editor.getOption('indentUnit');
|
||
|
|
if (val < 1) val = 1;
|
||
|
|
else if (val > 10) val = 10;
|
||
|
|
|
||
|
|
if (this.editor.getOption('indentWithTabs')) {
|
||
|
|
this.editor.setOption('tabSize', val);
|
||
|
|
}
|
||
|
|
this.editor.setOption('indentUnit', val);
|
||
|
|
setUnit();
|
||
|
|
});
|
||
|
|
widthInput.on('blur', function () {
|
||
|
|
widthLabel.removeClass('hidden');
|
||
|
|
widthInput.addClass('hidden');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setKeymap() {
|
||
|
|
var cookieKeymap = Cookies.get('keymap');
|
||
|
|
if (cookieKeymap)
|
||
|
|
this.editor.setOption('keyMap', cookieKeymap);
|
||
|
|
|
||
|
|
var label = this.statusIndicators.find('.ui-keymap-label');
|
||
|
|
var sublime = this.statusIndicators.find('.ui-keymap-sublime');
|
||
|
|
var emacs = this.statusIndicators.find('.ui-keymap-emacs');
|
||
|
|
var vim = this.statusIndicators.find('.ui-keymap-vim');
|
||
|
|
|
||
|
|
const setKeymapLabel = () => {
|
||
|
|
var keymap = this.editor.getOption('keyMap');
|
||
|
|
Cookies.set('keymap', keymap, {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
label.text(keymap);
|
||
|
|
this.restoreOverrideEditorKeymap();
|
||
|
|
this.setOverrideBrowserKeymap();
|
||
|
|
}
|
||
|
|
setKeymapLabel();
|
||
|
|
|
||
|
|
sublime.click(() => {
|
||
|
|
this.editor.setOption('keyMap', 'sublime');
|
||
|
|
setKeymapLabel();
|
||
|
|
});
|
||
|
|
emacs.click(() => {
|
||
|
|
this.editor.setOption('keyMap', 'emacs');
|
||
|
|
setKeymapLabel();
|
||
|
|
});
|
||
|
|
vim.click(() => {
|
||
|
|
this.editor.setOption('keyMap', 'vim');
|
||
|
|
setKeymapLabel();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setTheme() {
|
||
|
|
var cookieTheme = Cookies.get('theme');
|
||
|
|
if (cookieTheme) {
|
||
|
|
this.editor.setOption('theme', cookieTheme);
|
||
|
|
}
|
||
|
|
|
||
|
|
var themeToggle = this.statusTheme.find('.ui-theme-toggle');
|
||
|
|
|
||
|
|
const checkTheme = () => {
|
||
|
|
var theme = this.editor.getOption('theme');
|
||
|
|
if (theme == "one-dark") {
|
||
|
|
themeToggle.removeClass('active');
|
||
|
|
} else {
|
||
|
|
themeToggle.addClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
themeToggle.click(() => {
|
||
|
|
var theme = this.editor.getOption('theme');
|
||
|
|
if (theme == "one-dark") {
|
||
|
|
theme = "default";
|
||
|
|
} else {
|
||
|
|
theme = "one-dark";
|
||
|
|
}
|
||
|
|
this.editor.setOption('theme', theme);
|
||
|
|
Cookies.set('theme', theme, {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
|
||
|
|
checkTheme();
|
||
|
|
});
|
||
|
|
|
||
|
|
checkTheme();
|
||
|
|
}
|
||
|
|
|
||
|
|
setSpellcheck() {
|
||
|
|
var cookieSpellcheck = Cookies.get('spellcheck');
|
||
|
|
if (cookieSpellcheck) {
|
||
|
|
var mode = null;
|
||
|
|
if (cookieSpellcheck === 'true' || cookieSpellcheck === true) {
|
||
|
|
mode = 'spell-checker';
|
||
|
|
} else {
|
||
|
|
mode = defaultEditorMode;
|
||
|
|
}
|
||
|
|
if (mode && mode !== this.editor.getOption('mode')) {
|
||
|
|
this.editor.setOption('mode', mode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle');
|
||
|
|
|
||
|
|
const checkSpellcheck = () => {
|
||
|
|
var mode = this.editor.getOption('mode');
|
||
|
|
if (mode == defaultEditorMode) {
|
||
|
|
spellcheckToggle.removeClass('active');
|
||
|
|
} else {
|
||
|
|
spellcheckToggle.addClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
spellcheckToggle.click(() => {
|
||
|
|
var mode = this.editor.getOption('mode');
|
||
|
|
if (mode == defaultEditorMode) {
|
||
|
|
mode = "spell-checker";
|
||
|
|
} else {
|
||
|
|
mode = defaultEditorMode;
|
||
|
|
}
|
||
|
|
if (mode && mode !== this.editor.getOption('mode')) {
|
||
|
|
this.editor.setOption('mode', mode);
|
||
|
|
}
|
||
|
|
Cookies.set('spellcheck', (mode == "spell-checker"), {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
|
||
|
|
checkSpellcheck();
|
||
|
|
});
|
||
|
|
|
||
|
|
checkSpellcheck();
|
||
|
|
|
||
|
|
//workaround spellcheck might not activate beacuse the ajax loading
|
||
|
|
if (window.num_loaded < 2) {
|
||
|
|
var spellcheckTimer = setInterval(() => {
|
||
|
|
if (window.num_loaded >= 2) {
|
||
|
|
if (this.editor.getOption('mode') == "spell-checker") {
|
||
|
|
this.editor.setOption('mode', "spell-checker");
|
||
|
|
}
|
||
|
|
clearInterval(spellcheckTimer);
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
resetEditorKeymapToBrowserKeymap() {
|
||
|
|
var keymap = this.editor.getOption('keyMap');
|
||
|
|
if (!this.jumpToAddressBarKeymapValue) {
|
||
|
|
this.jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName];
|
||
|
|
delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
restoreOverrideEditorKeymap() {
|
||
|
|
var keymap = this.editor.getOption('keyMap');
|
||
|
|
if (this.jumpToAddressBarKeymapValue) {
|
||
|
|
CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = this.jumpToAddressBarKeymapValue;
|
||
|
|
this.jumpToAddressBarKeymapValue = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setOverrideBrowserKeymap() {
|
||
|
|
var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]');
|
||
|
|
if (overrideBrowserKeymap.is(":checked")) {
|
||
|
|
Cookies.set('preferences-override-browser-keymap', true, {
|
||
|
|
expires: 365
|
||
|
|
});
|
||
|
|
this.restoreOverrideEditorKeymap();
|
||
|
|
} else {
|
||
|
|
Cookies.remove('preferences-override-browser-keymap');
|
||
|
|
this.resetEditorKeymapToBrowserKeymap();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setPreferences() {
|
||
|
|
var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]');
|
||
|
|
var cookieOverrideBrowserKeymap = Cookies.get('preferences-override-browser-keymap');
|
||
|
|
if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === "true") {
|
||
|
|
overrideBrowserKeymap.prop('checked', true);
|
||
|
|
} else {
|
||
|
|
overrideBrowserKeymap.prop('checked', false);
|
||
|
|
}
|
||
|
|
this.setOverrideBrowserKeymap();
|
||
|
|
|
||
|
|
overrideBrowserKeymap.change(() => {
|
||
|
|
this.setOverrideBrowserKeymap();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
init(textit) {
|
||
|
|
this.editor = CodeMirror.fromTextArea(textit, {
|
||
|
|
mode: defaultEditorMode,
|
||
|
|
backdrop: defaultEditorMode,
|
||
|
|
keyMap: "sublime",
|
||
|
|
viewportMargin: viewportMargin,
|
||
|
|
styleActiveLine: true,
|
||
|
|
lineNumbers: true,
|
||
|
|
lineWrapping: true,
|
||
|
|
showCursorWhenSelecting: true,
|
||
|
|
highlightSelectionMatches: true,
|
||
|
|
indentUnit: 4,
|
||
|
|
continueComments: "Enter",
|
||
|
|
theme: "one-dark",
|
||
|
|
inputStyle: "textarea",
|
||
|
|
matchBrackets: true,
|
||
|
|
autoCloseBrackets: true,
|
||
|
|
matchTags: {
|
||
|
|
bothTags: true
|
||
|
|
},
|
||
|
|
autoCloseTags: true,
|
||
|
|
foldGutter: true,
|
||
|
|
gutters: ["CodeMirror-linenumbers", "authorship-gutters", "CodeMirror-foldgutter"],
|
||
|
|
extraKeys: this.defaultExtraKeys,
|
||
|
|
flattenSpans: true,
|
||
|
|
addModeClass: true,
|
||
|
|
readOnly: true,
|
||
|
|
autoRefresh: true,
|
||
|
|
otherCursors: true,
|
||
|
|
placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
|
||
|
|
});
|
||
|
|
|
||
|
|
this.getStatusBarTemplate();
|
||
|
|
|
||
|
|
return this.editor;
|
||
|
|
}
|
||
|
|
|
||
|
|
getEditor() {
|
||
|
|
return this.editor;
|
||
|
|
}
|
||
|
|
}
|