Skip to content

Commit 84b135b

Browse files
khanniiekhanniie
committed
Split off hinter functionality into a separate file
1 parent 1b63a06 commit 84b135b

File tree

2 files changed

+118
-108
lines changed

2 files changed

+118
-108
lines changed

‎client/modules/IDE/components/Editor/hinter.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import Fuse from 'fuse.js';
2+
import CodeMirror from 'codemirror';
3+
import { JSHINT } from 'jshint';
4+
import { HTMLHint } from 'htmlhint';
5+
import 'codemirror/addon/hint/css-hint';
6+
7+
import * as hinterDefinition from '../../../../utils/p5-hinter';
8+
import '../show-hint'; // Remove for codemirror v6?
9+
10+
// Are we using these?????
11+
window.JSHINT = JSHINT;
12+
window.HTMLHint = HTMLHint;
13+
14+
const hinter = new Fuse(hinterDefinition.p5Hinter, {
15+
threshold: 0.05,
16+
keys: ['text']
17+
});
18+
19+
/** Hides the hinter. */
20+
export function hideHinter() {
21+
CodeMirror.showHint(this._cm, () => {}, {});
22+
}
23+
24+
/** Shows a hint in the codemirror instance. */
25+
export function showHint(cmInstance, autocompleteHinter, fontSize) {
26+
if (!autocompleteHinter) {
27+
CodeMirror.showHint(cmInstance, () => {}, {});
28+
return;
29+
}
30+
31+
let focusedLinkElement = null;
32+
const setFocusedLinkElement = (set) => {
33+
if (set && !focusedLinkElement) {
34+
const activeItemLink = document.querySelector(
35+
`.CodeMirror-hint-active a`
36+
);
37+
if (activeItemLink) {
38+
focusedLinkElement = activeItemLink;
39+
focusedLinkElement.classList.add('focused-hint-link');
40+
focusedLinkElement.parentElement.parentElement.classList.add(
41+
'unfocused'
42+
);
43+
}
44+
}
45+
};
46+
const removeFocusedLinkElement = () => {
47+
if (focusedLinkElement) {
48+
focusedLinkElement.classList.remove('focused-hint-link');
49+
focusedLinkElement.parentElement.parentElement.classList.remove(
50+
'unfocused'
51+
);
52+
focusedLinkElement = null;
53+
return true;
54+
}
55+
return false;
56+
};
57+
58+
const hintOptions = {
59+
_fontSize: fontSize,
60+
completeSingle: false,
61+
extraKeys: {
62+
'Shift-Right': (cm, e) => {
63+
const activeItemLink = document.querySelector(
64+
`.CodeMirror-hint-active a`
65+
);
66+
if (activeItemLink) activeItemLink.click();
67+
},
68+
Right: (cm, e) => {
69+
setFocusedLinkElement(true);
70+
},
71+
Left: (cm, e) => {
72+
removeFocusedLinkElement();
73+
},
74+
Up: (cm, e) => {
75+
const onLink = removeFocusedLinkElement();
76+
e.moveFocus(-1);
77+
setFocusedLinkElement(onLink);
78+
},
79+
Down: (cm, e) => {
80+
const onLink = removeFocusedLinkElement();
81+
e.moveFocus(1);
82+
setFocusedLinkElement(onLink);
83+
},
84+
Enter: (cm, e) => {
85+
if (focusedLinkElement) focusedLinkElement.click();
86+
else e.pick();
87+
}
88+
},
89+
closeOnUnfocus: false
90+
};
91+
92+
if (cmInstance.options.mode === 'javascript') {
93+
CodeMirror.showHint(
94+
cmInstance,
95+
() => {
96+
const cursor = cmInstance.getCursor();
97+
const token = cmInstance.getTokenAt(cursor);
98+
99+
const hints = hinter
100+
.search(token.string)
101+
.filter((h) => h.item.text[0] === token.string[0]);
102+
103+
return {
104+
list: hints,
105+
from: CodeMirror.Pos(cursor.line, token.start),
106+
to: CodeMirror.Pos(cursor.line, cursor.ch)
107+
};
108+
},
109+
hintOptions
110+
);
111+
} else if (cmInstance.options.mode === 'css') {
112+
CodeMirror.showHint(cmInstance, CodeMirror.hint.css, hintOptions);
113+
}
114+
}

‎client/modules/IDE/components/Editor/index.jsx

Lines changed: 4 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import PropTypes from 'prop-types';
44
import React from 'react';
55
import CodeMirror from 'codemirror';
6-
import Fuse from 'fuse.js';
76
import emmet from '@emmetio/codemirror-plugin';
87
import prettier from 'prettier/standalone';
98
import babelParser from 'prettier/parser-babel';
@@ -33,12 +32,9 @@ import 'codemirror/addon/search/jump-to-line';
3332
import 'codemirror/addon/edit/matchbrackets';
3433
import 'codemirror/addon/edit/closebrackets';
3534
import 'codemirror/addon/selection/mark-selection';
36-
import 'codemirror/addon/hint/css-hint';
3735
import 'codemirror-colorpicker';
3836

39-
import { JSHINT } from 'jshint';
4037
import { CSSLint } from 'csslint';
41-
import { HTMLHint } from 'htmlhint';
4238
import classNames from 'classnames';
4339
import { debounce } from 'lodash';
4440
import { connect } from 'react-redux';
@@ -47,8 +43,6 @@ import MediaQuery from 'react-responsive';
4743
import '../../../../utils/htmlmixed';
4844
import '../../../../utils/p5-javascript';
4945
import { metaKey } from '../../../../utils/metaKey';
50-
import '../show-hint';
51-
import * as hinter from '../../../../utils/p5-hinter';
5246
import '../../../../utils/codemirror-search';
5347

5448
import beepUrl from '../../../../sounds/audioAlert.mp3';
@@ -73,11 +67,11 @@ import { EditorContainer, EditorHolder } from './MobileEditor';
7367
import { FolderIcon } from '../../../../common/icons';
7468
import IconButton from '../../../../common/IconButton';
7569

70+
import { showHint, hideHinter } from './hinter';
71+
7672
emmet(CodeMirror);
7773

78-
window.JSHINT = JSHINT;
7974
window.CSSLint = CSSLint;
80-
window.HTMLHint = HTMLHint;
8175

8276
const INDENTATION_AMOUNT = 2;
8377

@@ -146,11 +140,6 @@ class Editor extends React.Component {
146140
}
147141
});
148142

149-
this.hinter = new Fuse(hinter.p5Hinter, {
150-
threshold: 0.05,
151-
keys: ['text']
152-
});
153-
154143
delete this._cm.options.lint.options.errors;
155144

156145
const replaceCommand =
@@ -207,7 +196,7 @@ class Editor extends React.Component {
207196
// Show hint
208197
const mode = this._cm.getOption('mode');
209198
if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
210-
this.showHint(_cm);
199+
showHint(_cm, this.props.autocompleteHinter, this.props.fontSize);
211200
}
212201
if (e.key === 'Escape') {
213202
e.preventDefault();
@@ -283,7 +272,7 @@ class Editor extends React.Component {
283272
if (this.props.autocompleteHinter !== prevProps.autocompleteHinter) {
284273
if (!this.props.autocompleteHinter) {
285274
// close the hinter window once the preference is turned off
286-
CodeMirror.showHint(this._cm, () => {}, {});
275+
hideHinter();
287276
}
288277
}
289278

@@ -378,99 +367,6 @@ class Editor extends React.Component {
378367
this._cm.execCommand('findPersistent');
379368
}
380369

381-
showHint(_cm) {
382-
if (!this.props.autocompleteHinter) {
383-
CodeMirror.showHint(_cm, () => {}, {});
384-
return;
385-
}
386-
387-
let focusedLinkElement = null;
388-
const setFocusedLinkElement = (set) => {
389-
if (set && !focusedLinkElement) {
390-
const activeItemLink = document.querySelector(
391-
`.CodeMirror-hint-active a`
392-
);
393-
if (activeItemLink) {
394-
focusedLinkElement = activeItemLink;
395-
focusedLinkElement.classList.add('focused-hint-link');
396-
focusedLinkElement.parentElement.parentElement.classList.add(
397-
'unfocused'
398-
);
399-
}
400-
}
401-
};
402-
const removeFocusedLinkElement = () => {
403-
if (focusedLinkElement) {
404-
focusedLinkElement.classList.remove('focused-hint-link');
405-
focusedLinkElement.parentElement.parentElement.classList.remove(
406-
'unfocused'
407-
);
408-
focusedLinkElement = null;
409-
return true;
410-
}
411-
return false;
412-
};
413-
414-
const hintOptions = {
415-
_fontSize: this.props.fontSize,
416-
completeSingle: false,
417-
extraKeys: {
418-
'Shift-Right': (cm, e) => {
419-
const activeItemLink = document.querySelector(
420-
`.CodeMirror-hint-active a`
421-
);
422-
if (activeItemLink) activeItemLink.click();
423-
},
424-
Right: (cm, e) => {
425-
setFocusedLinkElement(true);
426-
},
427-
Left: (cm, e) => {
428-
removeFocusedLinkElement();
429-
},
430-
Up: (cm, e) => {
431-
const onLink = removeFocusedLinkElement();
432-
e.moveFocus(-1);
433-
setFocusedLinkElement(onLink);
434-
},
435-
Down: (cm, e) => {
436-
const onLink = removeFocusedLinkElement();
437-
e.moveFocus(1);
438-
setFocusedLinkElement(onLink);
439-
},
440-
Enter: (cm, e) => {
441-
if (focusedLinkElement) focusedLinkElement.click();
442-
else e.pick();
443-
}
444-
},
445-
closeOnUnfocus: false
446-
};
447-
448-
if (_cm.options.mode === 'javascript') {
449-
// JavaScript
450-
CodeMirror.showHint(
451-
_cm,
452-
() => {
453-
const c = _cm.getCursor();
454-
const token = _cm.getTokenAt(c);
455-
456-
const hints = this.hinter
457-
.search(token.string)
458-
.filter((h) => h.item.text[0] === token.string[0]);
459-
460-
return {
461-
list: hints,
462-
from: CodeMirror.Pos(c.line, token.start),
463-
to: CodeMirror.Pos(c.line, c.ch)
464-
};
465-
},
466-
hintOptions
467-
);
468-
} else if (_cm.options.mode === 'css') {
469-
// CSS
470-
CodeMirror.showHint(_cm, CodeMirror.hint.css, hintOptions);
471-
}
472-
}
473-
474370
showReplace() {
475371
this._cm.execCommand('replace');
476372
}

0 commit comments

Comments
 (0)