|
6 | 6 | import {EditorState }from'@codemirror/state'; |
7 | 7 | import {indentWithTab }from'@codemirror/commands'; |
8 | 8 | import {indentUnit }from'@codemirror/language'; |
| 9 | +import {acceptCompletion }from'@codemirror/autocomplete'; |
9 | 10 | import {setDiagnostics }from'@codemirror/lint'; |
10 | 11 | import {javascript }from'@codemirror/lang-javascript'; |
11 | 12 | import {html }from'@codemirror/lang-html'; |
|
17 | 18 | import {files,selected_file,selected_name,update_file,warnings }from'./state.js'; |
18 | 19 | import'./codemirror.css'; |
19 | 20 |
|
20 | | -// TODO add more styles (selection ranges, etc) |
21 | | -consthighlights=HighlightStyle.define([ |
22 | | -{ tag:tags.tagName, color:'#c05726' }, |
23 | | -{ tag:tags.keyword, color:'var(--sk-code-keyword)' }, |
24 | | -{ tag:tags.comment, color:'var(--sk-code-comment)' }, |
25 | | -{ tag:tags.string, color:'var(--sk-code-string)' } |
26 | | -]); |
27 | | -
|
28 | | -consttheme=syntaxHighlighting(highlights); |
29 | | -
|
30 | 21 | /**@type{HTMLDivElement}*/ |
31 | 22 | let container; |
32 | 23 |
|
|
45 | 36 | constextensions= [ |
46 | 37 | basicSetup, |
47 | 38 | EditorState.tabSize.of(2), |
48 | | -keymap.of([indentWithTab]), |
| 39 | +keymap.of([{ key:'Tab', run: acceptCompletion },indentWithTab]), |
49 | 40 | indentUnit.of('\t'), |
50 | | -theme |
| 41 | +syntaxHighlighting( |
| 42 | +HighlightStyle.define([ |
| 43 | +// TODO add more styles |
| 44 | +{ tag:tags.tagName, color:'#c05726' }, |
| 45 | +{ tag:tags.keyword, color:'var(--sk-code-keyword)' }, |
| 46 | +{ tag:tags.comment, color:'var(--sk-code-comment)' }, |
| 47 | +{ tag:tags.string, color:'var(--sk-code-string)' } |
| 48 | +]) |
| 49 | +) |
51 | 50 | ]; |
52 | 51 |
|
53 | 52 | $:reset($files); |
|
