Skip to content

Commit

Permalink
test ACE editor
Browse files Browse the repository at this point in the history
  • Loading branch information
chris-laplante committed May 15, 2024
1 parent 2173e1a commit 0c3b250
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 6 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@mantine/hooks": "^7.9.1",
"@types/react": "^18.2.77",
"@types/react-dom": "^18.2.25",
"ace-builds": "^1.33.1",
"ace-builds": "^1.33.2",
"axios": "^1.6.8",
"classnames": "^2.5.1",
"immer": "^10.1.1",
Expand Down
198 changes: 198 additions & 0 deletions src/BitBakeMode.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
import "ace-builds/src-noconflict/ace";
import {PythonHighlightRules} from "ace-builds/src-noconflict/mode-python"
import {ShHighlightRules} from "ace-builds/src-noconflict/mode-sh"

const TextHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;
const TextMode = ace.require("ace/mode/text").Mode

export class BitBakeHighlightRules extends TextHighlightRules {
constructor() {
super();
const bitbakeIdentifierRegex = /[\w_][\w.\-+{}$:]*/;

this.$rules = {
"start" : [
{
// Comment - don't bother handling line continuation in comments
token: "comment",
regex: "#(.*)$",
next: "start"
},
{
// python task
token: "keyword",
regex: /python(?=\s|\()/,
next: "python_task",
},
{
// fakeroot task
token: "keyword",
regex: /fakeroot(?=\s)/,
next: "shell_task",
},
{
// def
token: "keyword",
regex: "def",
next: "python-def-start",
},
{
// addhandler, addtask, deltask, EXPORT_FUNCTIONS
token: "keyword",
regex: /(?:addhandler|addtask|deltask|EXPORT_FUNCTIONS)(?=\s)/,
next: "directive",
},
{
token: "keyword",
regex: /(?:inherit|require|include)(?=\s)/,
next: "unquoted_value",
},
{
token: "variable",
regex: bitbakeIdentifierRegex,
next: "task_or_variable",
}
],
"task_or_variable": [
{
token: "keyword.operator",
regex: /=|\?{1,2}=|=\+|\+=|:=|=:/,
},
{
// Varflag
token: ["paren.lparen", "constant.character", "paren.rparen"],
regex: /(\[)([-\w_+.]+)(])/
},
{
token: "string",
regex: /".*"$/,
next: "start",
},
{
token: "string",
regex: /'.*'$/,
next: "start",
},
{
token: "paren.lparen",
regex: /\(/,
push: [{
token: "paren.rparen",
regex: /\)/,
next: "pop",
}]
},
{
token: "paren.lparen",
regex: /\{/,
next: "sh-start",
}
],
"directive": [
{
token: "keyword",
regex: /(?:after|before)(?=\s)/,
},
{
token: "text",
regex: bitbakeIdentifierRegex,
},
{
// TODO: handle line continuations
token: "text",
regex: /$/,
next: "start",
}
],
"unquoted_value": [
{
token: ["text", "constant.language.escape"],
regex: /(.+?)(\\)$/,
},
{
token: "text",
regex: /.+$/,
next: "start",
}
],
"python_task": [
{
token: "keyword",
regex: /fakeroot(?=\s)/
},
{
token: "entity.function",
regex: bitbakeIdentifierRegex,
},
{
token: "paren.lparen",
regex: /\(/,
push: [{
token: "paren.rparen",
regex: /\)/,
next: "pop",
}]
},
{
token: "paren.lparen",
regex: /\{/,
next: "python-start",
}
],
"shell_task": [
{
token: "entity.function",
regex: bitbakeIdentifierRegex,
},
{
token: "paren.lparen",
regex: /\(/,
push: [{
token: "paren.rparen",
regex: /\)/,
next: "pop",
}]
},
{
token: "paren.lparen",
regex: /\{/,
next: "sh-start",
}
]
};

this.embedRules(PythonHighlightRules, "python-", [
{
token: "paren.rparen",
regex: "^}$",
next: "start"
}
]);

this.embedRules(ShHighlightRules, "sh-", [
{
token: "paren.rparen",
regex: "^}$",
next: "start"
}
]);

this.embedRules(PythonHighlightRules, "python-def-", [
{
token: "text",
// A Python def function ends on the first non-indented line
regex: /^(?=[^\s])/,
next: "start"
}
]);

this.normalizeRules();
}
}

export default class BitBakeMode extends TextMode {
constructor() {
super();
this.HighlightRules = BitBakeHighlightRules;
}
}
16 changes: 15 additions & 1 deletion src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from "react";
import React, {useEffect, useRef} from "react";

import {AppShell, Burger, createTheme, MantineColorsTuple, MantineProvider} from '@mantine/core';
import {useDisclosure} from "@mantine/hooks";
import {PlaygroundTerminal} from "./PlaygroundTerminal";
import AceEditor from "react-ace";
import BitBakeMode from "../BitBakeMode";

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

const editor = useRef(null);

useEffect(() => {
editor.current.editor.getSession().setMode(new BitBakeMode());
}, []);

return (
<MantineProvider theme={theme}>
<AppShell
Expand All @@ -51,6 +59,12 @@ export const App: React.FC = () => {

<AppShell.Main>
<PlaygroundTerminal/>
<AceEditor
ref={editor}
mode="text"
theme="github"
editorProps={{ $blockScrolling: true }}
/>,
</AppShell.Main>
</AppShell>

Expand Down

0 comments on commit 0c3b250

Please sign in to comment.