Skip to content

Commit e5699d5

Browse files
khanniiekhanniie
committed
finish autocomplete MVP
1 parent 456737a commit e5699d5

File tree

5 files changed

+33
-186
lines changed

5 files changed

+33
-186
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import { debounce } from 'lodash';
1313
import {
1414
getFileMode,
1515
createNewFileState,
16-
updateFileStates
16+
updateFileStates,
17+
AUTOCOMPLETE_OPTIONS
1718
} from './stateUtils';
1819
import { useEffectWithComparison } from '../../hooks/custom-hooks';
1920
import tidyCodeWithPrettier from './tidier';
@@ -143,7 +144,9 @@ export default function useCodeMirror({
143144
}, [autocloseBracketsQuotes]);
144145
useEffect(() => {
145146
const reconfigureEffect = (fileState) =>
146-
fileState.autocompleteCpt.reconfigure(true ? autocompletion() : []);
147+
fileState.autocompleteCpt.reconfigure(
148+
autocompleteHinter ? autocompletion(AUTOCOMPLETE_OPTIONS) : []
149+
);
147150
updateFileStates({
148151
fileStates: fileStates.current,
149152
cmView: cmView.current,
@@ -170,7 +173,7 @@ export default function useCodeMirror({
170173
linewrap,
171174
lineNumbers,
172175
autocloseBracketsQuotes,
173-
autocomplete: true,
176+
autocomplete: autocompleteHinter,
174177
onUpdateLinting,
175178
onViewUpdate
176179
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ function testCompletions(context) {
1010
const itemCopy = { ...item };
1111

1212
if (item.p5DocPath) {
13+
// TODO: Use the option below to add the p5 link for *all* hints.
14+
// https://codemirror.net/docs/ref/#autocomplete.autocompletion^config.addToOptions
1315
itemCopy.info = () => {
1416
const domNode = document.createElement('a');
1517
domNode.href = `https://p5js.org/reference/p5/${item.p5DocPath}`;

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,12 @@ function getFileEmmetConfig(fileName) {
259259
const extraKeymaps = [{ key: 'Tab', run: insertTab, shift: indentLess }];
260260
const emmetKeymaps = [{ key: 'Tab', run: expandAbbreviation }];
261261

262+
export const AUTOCOMPLETE_OPTIONS = {
263+
tooltipClass: () => 'CodeMirror-hints',
264+
optionClass: () => 'CodeMirror-hint',
265+
closeOnBlur: false
266+
};
267+
262268
/**
263269
* Creates a new CodeMirror editor state with configurations,
264270
* extensions, and keymaps tailored to the file type and settings.
@@ -300,7 +306,9 @@ export function createNewFileState(filename, document, settings) {
300306
lineNumbersCpt.of(lineNumbers ? lineNumbersExt() : []),
301307
lineWrappingCpt.of(linewrap ? EditorView.lineWrapping : []),
302308
closeBracketsCpt.of(autocloseBracketsQuotes ? closeBrackets() : []),
303-
autocompleteCpt.of(autocomplete ? autocompletion() : []),
309+
autocompleteCpt.of(
310+
autocomplete ? autocompletion(AUTOCOMPLETE_OPTIONS) : []
311+
),
304312

305313
// Everything below here should always be on.
306314
history(),

‎client/styles/components/_hints.scss

Lines changed: 13 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,22 @@
11
@use "sass:math";
22

3-
.CodeMirror-hints {
4-
position: absolute;
5-
z-index: 10;
6-
overflow: hidden;
7-
list-style: none;
8-
9-
margin: 0;
10-
padding: 0;
11-
3+
.cm-tooltip-autocomplete.CodeMirror-hints {
124
box-shadow: 0 0 #{math.div(18, $base-font-size)}rem 0 rgba(0, 0, 0, 0.16);
135
border: #{math.div(1, $base-font-size)}rem solid #A6A6A6;
14-
15-
font-size: 100%;
166
font-family: Inconsolata, monospace;
17-
18-
width: 18rem;
19-
max-height: 20rem;
20-
overflow-y: auto;
21-
22-
transform-origin: top left;
23-
24-
@include themify() {
25-
background: getThemifyVariable('hint-background-color');
26-
27-
.CodeMirror-hint {
28-
color: getThemifyVariable('hint-text-color');
29-
border-bottom: #{math.div(1, $base-font-size)}rem solid getThemifyVariable('hint-item-border-bottom-color');
30-
}
31-
32-
.hint-name {
33-
height: 100%;
34-
}
35-
36-
.fun-name, .obj-name {
37-
color: getThemifyVariable('hint-fun-text-color');
38-
}
39-
40-
.var-name, .boolean-name {
41-
color: getThemifyVariable('hint-var-text-color');
42-
}
43-
44-
.keyword-name {
45-
color: getThemifyVariable('hint-keyword-text-color');
46-
}
477

48-
.hint-type {
49-
color: getThemifyVariable('hint-type-text-color');
50-
margin-right: #{math.div(10, $base-font-size)}rem;
51-
}
52-
53-
a {
54-
color: getThemifyVariable('hint-arrow-color');
8+
@include themify() {
9+
.cm-completionInfo {
5510
background: getThemifyVariable('hint-arrow-background-color');
11+
height: 1.2em;
12+
left: auto;
13+
right: 0px;
14+
padding: 0 6px;
15+
white-space: nowrap;
16+
17+
a {
18+
color: getThemifyVariable('hint-arrow-color');
19+
}
5620

5721
&:hover, &:active, &.focused-hint-link {
5822
background: getThemifyVariable('hint-arrow-background-active-color');
@@ -64,142 +28,9 @@
6428
}
6529
}
6630

67-
.no-link-placeholder {
68-
background: getThemifyVariable('hint-no-link-background-color');
69-
pointer-events: none;
70-
}
71-
72-
li.CodeMirror-hint-active:not(.unfocused) {
73-
background: getThemifyVariable('hint-item-active-background-color');
74-
outline: getThemifyVariable('hint-item-active-outline');
75-
outline-offset: getThemifyVariable('hint-item-active-outline-offset');
76-
77-
// .fun-item {
78-
// border-bottom: #{2 / $base-font-size}rem solid getThemifyVariable('hint-fun-active-border-bottom-color');
79-
// }
80-
81-
// .var-item {
82-
// border-bottom: #{2 / $base-font-size}rem solid getThemifyVariable('hint-var-active-border-bottom-color');
83-
// }
84-
85-
.hint-name {
86-
color: getThemifyVariable('hint-item-active-text-color');
87-
}
88-
89-
.fun-name, .obj-name {
90-
background-color: getThemifyVariable('hint-fun-text-color');
91-
}
92-
93-
.var-name, .boolean-name {
94-
background-color: getThemifyVariable('hint-var-text-color');
95-
}
96-
97-
.keyword-name {
98-
background-color: getThemifyVariable('hint-keyword-text-color');
99-
}
100-
101-
.hint-type, .plain-hint-item {
102-
color: getThemifyVariable('hint-item-active-type-text-color');
103-
}
104-
}
105-
106-
.CodeMirror-hint:hover:not(.CodeMirror-hint-active) {
107-
background: getThemifyVariable('hint-item-hover-background-color');
108-
}
109-
}
110-
111-
.CodeMirror-hint {
112-
display: flex;
113-
align-items: center;
114-
justify-content: space-between;
115-
116-
position: relative;
117-
margin: 0;
118-
padding: 0;
119-
height: 2rem;
120-
white-space: pre;
121-
cursor: pointer;
122-
123-
&:has(.focused-hint-link) {
124-
z-index: 999;
125-
}
126-
127-
&:only-child, &:last-child {
128-
border-bottom: none !important;
129-
}
130-
131-
p {
132-
display: flex;
133-
width: 100%;
134-
height: 100%;
135-
}
136-
137-
.hint-name, .plain-hint-item {
138-
display: flex;
139-
align-items: center;
140-
padding: 0 0.5rem;
141-
width: min-content;
142-
font-size: 1.2rem;
143-
line-height: 100%;
144-
font-weight: bold;
145-
}
146-
147-
.hint-type {
148-
margin: 0.5rem 2.4rem 0.5rem auto;
149-
font-size: 1rem;
150-
line-height: 100%;
151-
font-weight: normal;
152-
}
153-
15431
.hint-hidden {
15532
@extend %hidden-element;
156-
}
157-
158-
a, .no-link-placeholder {
159-
position: absolute;
160-
top: 0;
161-
right: 0;
162-
height: 100%;
163-
width: calc(2rem - #{math.div(1, $base-font-size)}rem);
164-
margin: 0;
165-
padding-top: 0.4rem;
166-
font-size: 1.2rem;
167-
line-height: 100%;
168-
text-align: center;
169-
outline: none;
170-
z-index: 1;
171-
}
172-
173-
a:focus, a:active {
174-
outline: 0;
175-
}
176-
}
177-
}
178-
179-
// Inline hinter
180-
.CodeMirror-widget {
181-
line-height: inherit;
182-
183-
@include themify() {
184-
.autocomplete-inline-hinter {
185-
// make the border left look like a cursor and animate like a cursor
186-
// border-left: #{1.2 / $base-font-size}rem solid getThemifyVariable(hint-inline-text-color);
187-
// animation: inline-hint-caret-blink 1s step-end infinite;
188-
pointer-events: none;
189-
190-
.inline-hinter-suggestion {
191-
color: getThemifyVariable(hint-inline-text-color);
192-
font-style: italic;
193-
}
194-
195-
.inline-hinter-suggestion-light {
196-
color: getThemifyVariable(hint-inline-text-color-light);
197-
font-style: italic;
198-
}
33+
display: none;
19934
}
20035
}
20136
}
202-
203-
@keyframes inline-hint-caret-blink {
204-
50% { border-color: transparent; }
205-
}

‎server/scripts/update-p5-hinter.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ const fs = require('fs');
22
const process = require('process');
33
const axios = require('axios');
44

5+
// TODO: Currently this makes duplicate entries because
6+
// the default Javascript hinter also has these,
7+
// but should we keep them around for the p5 reference links?
58
const reservedKeywords = [
69
{ name: 'await', p5DocPath: undefined },
710
{ name: 'class', p5DocPath: 'class' },

0 commit comments

Comments
 (0)