|
@@ -57,7 +57,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
isGfmMode: this.props.isGfmMode,
|
|
isGfmMode: this.props.isGfmMode,
|
|
|
isEnabledEmojiAutoComplete: false,
|
|
isEnabledEmojiAutoComplete: false,
|
|
|
isLoadingKeymap: false,
|
|
isLoadingKeymap: false,
|
|
|
- additionalClass: '',
|
|
|
|
|
|
|
+ additionalClassSet: new Set(),
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
this.init();
|
|
this.init();
|
|
@@ -150,10 +150,15 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
* @inheritDoc
|
|
* @inheritDoc
|
|
|
*/
|
|
*/
|
|
|
setGfmMode(bool) {
|
|
setGfmMode(bool) {
|
|
|
|
|
+ // update state
|
|
|
|
|
+ const additionalClassSet = this.state.additionalClassSet;
|
|
|
this.setState({
|
|
this.setState({
|
|
|
isGfmMode: bool,
|
|
isGfmMode: bool,
|
|
|
isEnabledEmojiAutoComplete: bool,
|
|
isEnabledEmojiAutoComplete: bool,
|
|
|
|
|
+ additionalClassSet,
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ // update CodeMirror option
|
|
|
const mode = bool ? 'gfm' : undefined;
|
|
const mode = bool ? 'gfm' : undefined;
|
|
|
this.getCodeMirror().setOption('mode', mode);
|
|
this.getCodeMirror().setOption('mode', mode);
|
|
|
}
|
|
}
|
|
@@ -388,11 +393,21 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
|
|
|
|
|
cursorHandler(editor, event) {
|
|
cursorHandler(editor, event) {
|
|
|
const strFromBol = this.getStrFromBol();
|
|
const strFromBol = this.getStrFromBol();
|
|
|
|
|
+
|
|
|
|
|
+ const autoformatTableClass = 'autoformat-markdown-table-activated';
|
|
|
|
|
+ const additionalClassSet = this.state.additionalClassSet;
|
|
|
|
|
+ const hasCustomClass = additionalClassSet.has(autoformatTableClass);
|
|
|
if (mtu.isEndOfLine(editor) && mtu.linePartOfTableRE.test(strFromBol)) {
|
|
if (mtu.isEndOfLine(editor) && mtu.linePartOfTableRE.test(strFromBol)) {
|
|
|
- this.setState({additionalClass: 'autoformat-markdown-table-activated'});
|
|
|
|
|
|
|
+ if (!hasCustomClass) {
|
|
|
|
|
+ additionalClassSet.add(autoformatTableClass);
|
|
|
|
|
+ this.setState({additionalClassSet});
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
- this.setState({additionalClass: ''});
|
|
|
|
|
|
|
+ if (hasCustomClass) {
|
|
|
|
|
+ additionalClassSet.delete(autoformatTableClass);
|
|
|
|
|
+ this.setState({additionalClassSet});
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -415,23 +430,17 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- getOverlayStyle() {
|
|
|
|
|
- return {
|
|
|
|
|
- position: 'absolute',
|
|
|
|
|
- zIndex: 4, // forward than .CodeMirror-gutters
|
|
|
|
|
|
|
+ renderLoadingKeymapOverlay() {
|
|
|
|
|
+ const style = {
|
|
|
top: 0,
|
|
top: 0,
|
|
|
right: 0,
|
|
right: 0,
|
|
|
bottom: 0,
|
|
bottom: 0,
|
|
|
left: 0,
|
|
left: 0,
|
|
|
};
|
|
};
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- renderLoadingKeymapOverlay() {
|
|
|
|
|
- const overlayStyle = this.getOverlayStyle();
|
|
|
|
|
|
|
|
|
|
return this.state.isLoadingKeymap
|
|
return this.state.isLoadingKeymap
|
|
|
- ? <div style={overlayStyle} className="loading-keymap overlay">
|
|
|
|
|
- <span className="overlay-content">
|
|
|
|
|
|
|
+ ? <div className="overlay overlay-loading-keymap">
|
|
|
|
|
+ <span style={style} className="overlay-content">
|
|
|
<div className="speeding-wheel d-inline-block"></div> Loading Keymap ...
|
|
<div className="speeding-wheel d-inline-block"></div> Loading Keymap ...
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -444,12 +453,13 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
theme: 'elegant',
|
|
theme: 'elegant',
|
|
|
lineNumbers: true,
|
|
lineNumbers: true,
|
|
|
};
|
|
};
|
|
|
|
|
+ const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
|
|
|
const editorOptions = Object.assign(defaultEditorOptions, this.props.editorOptions || {});
|
|
const editorOptions = Object.assign(defaultEditorOptions, this.props.editorOptions || {});
|
|
|
|
|
|
|
|
return <React.Fragment>
|
|
return <React.Fragment>
|
|
|
<ReactCodeMirror
|
|
<ReactCodeMirror
|
|
|
ref="cm"
|
|
ref="cm"
|
|
|
- className={this.state.additionalClass}
|
|
|
|
|
|
|
+ className={additionalClasses}
|
|
|
editorDidMount={(editor) => {
|
|
editorDidMount={(editor) => {
|
|
|
// add event handlers
|
|
// add event handlers
|
|
|
editor.on('paste', this.pasteHandler);
|
|
editor.on('paste', this.pasteHandler);
|