Skip to content

Commit 0c3b250

Browse files
chris-laplantechris-laplante
committed
test ACE editor
1 parent 2173e1a commit 0c3b250

File tree

4 files changed

+218
-6
lines changed

4 files changed

+218
-6
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"@mantine/hooks": "^7.9.1",
6565
"@types/react": "^18.2.77",
6666
"@types/react-dom": "^18.2.25",
67-
"ace-builds": "^1.33.1",
67+
"ace-builds": "^1.33.2",
6868
"axios": "^1.6.8",
6969
"classnames": "^2.5.1",
7070
"immer": "^10.1.1",

‎src/BitBakeMode.ts

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import "ace-builds/src-noconflict/ace";
2+
import {PythonHighlightRules} from "ace-builds/src-noconflict/mode-python"
3+
import {ShHighlightRules} from "ace-builds/src-noconflict/mode-sh"
4+
5+
const TextHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;
6+
const TextMode = ace.require("ace/mode/text").Mode
7+
8+
export class BitBakeHighlightRules extends TextHighlightRules {
9+
constructor() {
10+
super();
11+
const bitbakeIdentifierRegex = /[\w_][\w.\-+{}$:]*/;
12+
13+
this.$rules = {
14+
"start" : [
15+
{
16+
// Comment - don't bother handling line continuation in comments
17+
token: "comment",
18+
regex: "#(.*)$",
19+
next: "start"
20+
},
21+
{
22+
// python task
23+
token: "keyword",
24+
regex: /python(?=\s|\()/,
25+
next: "python_task",
26+
},
27+
{
28+
// fakeroot task
29+
token: "keyword",
30+
regex: /fakeroot(?=\s)/,
31+
next: "shell_task",
32+
},
33+
{
34+
// def
35+
token: "keyword",
36+
regex: "def",
37+
next: "python-def-start",
38+
},
39+
{
40+
// addhandler, addtask, deltask, EXPORT_FUNCTIONS
41+
token: "keyword",
42+
regex: /(?:addhandler|addtask|deltask|EXPORT_FUNCTIONS)(?=\s)/,
43+
next: "directive",
44+
},
45+
{
46+
token: "keyword",
47+
regex: /(?:inherit|require|include)(?=\s)/,
48+
next: "unquoted_value",
49+
},
50+
{
51+
token: "variable",
52+
regex: bitbakeIdentifierRegex,
53+
next: "task_or_variable",
54+
}
55+
],
56+
"task_or_variable": [
57+
{
58+
token: "keyword.operator",
59+
regex: /=|\?{1,2}=|=\+|\+=|:=|=:/,
60+
},
61+
{
62+
// Varflag
63+
token: ["paren.lparen", "constant.character", "paren.rparen"],
64+
regex: /(\[)([-\w_+.]+)(])/
65+
},
66+
{
67+
token: "string",
68+
regex: /".*"$/,
69+
next: "start",
70+
},
71+
{
72+
token: "string",
73+
regex: /'.*'$/,
74+
next: "start",
75+
},
76+
{
77+
token: "paren.lparen",
78+
regex: /\(/,
79+
push: [{
80+
token: "paren.rparen",
81+
regex: /\)/,
82+
next: "pop",
83+
}]
84+
},
85+
{
86+
token: "paren.lparen",
87+
regex: /\{/,
88+
next: "sh-start",
89+
}
90+
],
91+
"directive": [
92+
{
93+
token: "keyword",
94+
regex: /(?:after|before)(?=\s)/,
95+
},
96+
{
97+
token: "text",
98+
regex: bitbakeIdentifierRegex,
99+
},
100+
{
101+
// TODO: handle line continuations
102+
token: "text",
103+
regex: /$/,
104+
next: "start",
105+
}
106+
],
107+
"unquoted_value": [
108+
{
109+
token: ["text", "constant.language.escape"],
110+
regex: /(.+?)(\\)$/,
111+
},
112+
{
113+
token: "text",
114+
regex: /.+$/,
115+
next: "start",
116+
}
117+
],
118+
"python_task": [
119+
{
120+
token: "keyword",
121+
regex: /fakeroot(?=\s)/
122+
},
123+
{
124+
token: "entity.function",
125+
regex: bitbakeIdentifierRegex,
126+
},
127+
{
128+
token: "paren.lparen",
129+
regex: /\(/,
130+
push: [{
131+
token: "paren.rparen",
132+
regex: /\)/,
133+
next: "pop",
134+
}]
135+
},
136+
{
137+
token: "paren.lparen",
138+
regex: /\{/,
139+
next: "python-start",
140+
}
141+
],
142+
"shell_task": [
143+
{
144+
token: "entity.function",
145+
regex: bitbakeIdentifierRegex,
146+
},
147+
{
148+
token: "paren.lparen",
149+
regex: /\(/,
150+
push: [{
151+
token: "paren.rparen",
152+
regex: /\)/,
153+
next: "pop",
154+
}]
155+
},
156+
{
157+
token: "paren.lparen",
158+
regex: /\{/,
159+
next: "sh-start",
160+
}
161+
]
162+
};
163+
164+
this.embedRules(PythonHighlightRules, "python-", [
165+
{
166+
token: "paren.rparen",
167+
regex: "^}$",
168+
next: "start"
169+
}
170+
]);
171+
172+
this.embedRules(ShHighlightRules, "sh-", [
173+
{
174+
token: "paren.rparen",
175+
regex: "^}$",
176+
next: "start"
177+
}
178+
]);
179+
180+
this.embedRules(PythonHighlightRules, "python-def-", [
181+
{
182+
token: "text",
183+
// A Python def function ends on the first non-indented line
184+
regex: /^(?=[^\s])/,
185+
next: "start"
186+
}
187+
]);
188+
189+
this.normalizeRules();
190+
}
191+
}
192+
193+
export default class BitBakeMode extends TextMode {
194+
constructor() {
195+
super();
196+
this.HighlightRules = BitBakeHighlightRules;
197+
}
198+
}

‎src/components/App.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import React from "react";
1+
import React, {useEffect, useRef} from "react";
22

33
import {AppShell, Burger, createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
44
import {useDisclosure} from "@mantine/hooks";
55
import {PlaygroundTerminal} from "./PlaygroundTerminal";
6+
import AceEditor from "react-ace";
7+
import BitBakeMode from "../BitBakeMode";
68

79
const myColor: MantineColorsTuple = [
810
'#e4f8ff',
@@ -26,6 +28,12 @@ const theme = createTheme({
2628
export const App: React.FC = () => {
2729
const [opened, {toggle}] = useDisclosure();
2830

31+
const editor = useRef(null);
32+
33+
useEffect(() => {
34+
editor.current.editor.getSession().setMode(new BitBakeMode());
35+
}, []);
36+
2937
return (
3038
<MantineProvider theme={theme}>
3139
<AppShell
@@ -51,6 +59,12 @@ export const App: React.FC = () => {
5159

5260
<AppShell.Main>
5361
<PlaygroundTerminal/>
62+
<AceEditor
63+
ref={editor}
64+
mode="text"
65+
theme="github"
66+
editorProps={{ $blockScrolling: true }}
67+
/>,
5468
</AppShell.Main>
5569
</AppShell>
5670

0 commit comments

Comments
 (0)