RuleEdit: A .rule file editing tool

[I6_I6]

I started working on an .rule file editor a long time ago, but I didn't have enough time to make good progress so it's been sitting in my files in an early development stage for quite a while. I knew I wouldn't be able finish the project without other people's help, so I decided to post about it here.

GitHub repo: https://github.com/I6-I6/RuleEdit

To try it yourself, run it locally using Vite:

Code: Select all

git clone https://github.com/I6-I6/RuleEdit.git
cd RuleEdit
npm install
npm run dev

Here's a brief explanation on how RuleEdit works so you don't have to figure it out yourself:
It was built using CodeMirror 6 and written in JavaScript.
Whenever the user alters something in the text field, the text is sent to analyzer.js, which then scans through the text section by section. It returns an object containing an array of diagnostics (i.e. issues), an array of tokens (info on how to style the text) and the rule name. renderer.js takes this and applies everything.

Current features

Underline diagnostics:

• Errors: Guaranteed crash; solid red underline
• Warnings: Potential crash; solid orange underline
• Hints: Not a crash, but helpful information (such as omitting duplicates); dotted green underline

Syntax styling:

• Section headers: light blue
• Comments: italicized gray
• Keywords: pinkish red
• Numbers: tan
• Variables: orange

As I mentioned earlier, this is very incomplete. I haven't even finished the diagnostics framework. So far it's only capable of analyzing the @RULE section, nothing else.

Things to add

• Finish logic for the rest of analyze.js
• Display diagnostic messages at the bottom (diagnostics-panel element). Click on them to jump to the line. Add buttons to ignore/quick fixes.
• Autocorrect/autocomplete/suggestions popups
• Import/export .rule files
• Table-to-tree & tree-to-table shortcuts
• Rulestring-to-table/tree shortcuts
• Color picker for @COLORS and @ICONS
• Drawing & import images features for @ICONS
• Rule preview (maybe) (using LV?)

Help would be much appreciated! Please don't hesitate to ask questions or give suggestions.

[I6_I6]

I've just looked at RuletableGolfer and got a new idea. What if we implemented something similar to that so that users could switch between a button selection-based editor and a text-based editor?

[NNlk05]

I had an idea like this, seeing that you had a base, may I PR this?

[I6_I6]

I had an idea like this, seeing that you had a base, may I PR this?

What does PR mean?

[NNlk05]

What does PR mean?

Pull request, aka contribute.

[I6_I6]

What does PR mean?

Pull request, aka contribute.

Sure! What do you want to add?

[NNlk05]

Sure! What do you want to add?

Let’s see.
I can do the color picker, import and export, and maybe autocomplete.

[NNlk05]

Sure! What do you want to add?

Let’s see.
I can do the color picker, import and export, and maybe autocomplete.

[I6_I6]

Sure! What do you want to add?

Let’s see.
I can do the color picker, import and export, and maybe autocomplete.

I don't think we're ready for those features just yet, but you could add them later. For now, I'll do the diagnostics panel and then finish the analysis logic.

[NNlk05]

Code: Select all

Uncaught TypeError: Failed to resolve module specifier "codemirror". Relative references must start with either "/", "./", or "../".

[I6_I6]

Code: Select all

Uncaught TypeError: Failed to resolve module specifier "codemirror". Relative references must start with either "/", "./", or "../".

Looks like it isn't importing CodeMirror correctly. It happens when you open index.html directly in the browser; you should install Vite and run it using Vite instead. (See the first post)