I’m really pleased to announce a new free and open source control for Xojo called SyntaxArea.
SyntaxArea is a fast, customisable, Canvas-based source code editor written in 100% API 2.0 Xojo code with no proprietary plugin requirements.
For those that know me, you may realise that this is the second open source code editor I’ve released (the other being XUICodeEditor). What differentiates SyntaxArea from XUICodeEditor is that it’s faster, much simpler to define new language definitions and is more robust.
The code is heavily based on / ported from Alex Restrepo’s CustomEditField (CEF) control that is currently under the stewardship of Thomas Tempelmann. CEF is API 1.0 only and has a number of outstanding bugs. This is a complete rewrite with standardisation / documentation of the source code and complete migration to API 2.0.
Here are a few of the features of SyntaxArea (improvements over CEF are in bold):
- Cross platform (macOS and Windows tested)
- API 2.0
- Based on TextInputCanvas so it has full support for internationalisation and proper keyboard commands including emoji insertion
- Native scrollbars on macOS
- Syntax highlighting with easy to define regex-based syntax definitions
- Support for autocompletion
- Undo/redo engine
- Powerful theming engine for robust light/dark mode support
- Fast (handles 100s or 1000s lines of Xojo code for example)
- Optional block / line folding
- Vertical ruler support (with a definable column width)
- Symbol support to allow easy navigation within a source code document
The control is MIT licensed so you’re free to use it how you see fit.
You can see how to use it by checking out the repo home page, looking at the wiki or trying the demo.
Pull requests are very welcome.
Requirements
As detailed on the repo home page, you’ll need to put the open source TextInputCanvas plugin in Xojo’s plugins folder and restart the Xojo IDE for the control to work.
Future plans
I have significantly refactored the control from CEF to allow future support of the control on mobile (iOS at first). This is something I am currently actively working on and has been made possible due to recently added support for the keyboard in the iOS canvas control in the latest version of Xojo.
28 Likes
Thanks a lot for sharing this. It is really beautiful, and a lot to learn from your cose!
Thanks again !
Luciano
1 Like
This is fantastic, I’ve been looking for this for years. Keep up the good work.
1 Like
Great work!
The only issue for me, and it’s not a big one, is the time it takes to syntax-color 20,000 lines of Xojoscript code (c. 10 seconds). OK, I’m comparing it to MBS’s Scintilla plugin which is pretty much instantaneous (but requires a lot of extra code shenanigans in order to make it as usable as your solution). I would certainly use your solution in any new project, since it is otherwise superior to Scintilla (and editing 20,000 lines of code is not something I do often).
Thanks Paul.
20,000 lines is a big ask for a code editor.
I suspect one way that it could be sped up would be to replace the Xojo RegEx class in the syntax highlighting engine with the RegEx engine from MBS (since it’s much faster). Unfortunately that’s not an option if I want to keep the control open source.
1 Like
did you try Kem’s regex classes ?
1 Like
Nope, never heard of it.
The repo doesn’t describe much about its performance. Maybe @Kem_Tekinay could chime in?
knowing Kem’s legendary perfectionism I’m pretty sure it’s more than optimized !
3 Likes
Not in this case, as I recall it was a concept I started, then abandoned. I needed to call directly into the PCRE library but ultimately couldn’t.
I really should go through my repos and pull the ones that are defunct.
Thank you, Fold function is very nice
1 Like
I’m pleased to announce version 1.1 of SyntaxArea.
New
- Added definition extension support. Syntax definitions can now import other definitions into their own contexts. This permits functionality like syntax highlighting within Markdown code fences and inline PHP / Javascript in HTML documents.
- Added Markdown definition.
- Added PHP definition.
- Added Javascript definition.
- Xojo definition can now highlight URLs within comments.
- Can now specify the case-sensitivity of matches a the highlight context level. Previously this could only be specified at the context level.
- The demo app can now export the current editor styles as a theme.
- The key combination
Cmd-Return on macOS and Alt-Return on Windows allows the host app to offer code completion to the editor. This allows you to do things like complete an if...end if block for example.
Fixed
- The editor now correctly updates all styles when loading a theme.
- Tokens with a background colour now actually display a background colour.
- The background colour of whitespace now correctly inherits its enclosing text’s background colour.
New documentation
I have updated the GitHub wiki with detailed descriptions on how syntax definitions and theme files work to make it easier for others to write their own.
9 Likes
