Announcing SyntaxArea, a.k.a CustomEditField 2

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.

31 Likes

Thanks a lot for sharing this. It is really beautiful, and a lot to learn from your cose!
Thanks again !

Luciano

1 Like

Fantastic work!

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.

10 Likes

This is an awesome amount of work @GarryPettet and it looks great!

I’m considering implementing SyntaxArea. It looks pretty feature complete, but I have one question:

How to perform a word search?

I looked through the API and I can see how to replace a word (once I have the position of the word), but how to find a specific word in the first place?

Forgive me if I’m blind.

Thank you for contributing so much to the community!

Hi Scott,

Thanks for the kind words - it sure has been a labour of love :slight_smile:

There isn’t a specific find API for the contents of the editor (yet). You’d have to grab the contents of the editor with Editor.Text, use Xojo’s native String searching methods (e.g. RegEx or IndexOf) and then set the text again.

What about the LineManager class. Would I get anywhere if I iterate through that?

For a “Find All” request, it’d be nice to return a collection of line numbers and positions.

Or, am I barking up the wrong tree?

I’ll let you know if I get anywhere. Thank you again Garry.

Sorry for the delay @Scott_C, I’m currently without much internet on holiday in a forrest.

I’ll put some thought into the best way to engineer an API for find and replace. I’m currently working on an app that will use SyntaxArea so it will benefit me. I’ve opened an issue on GitHub if you’d like to track it.

Probably iterating over the LineManager would be a bad idea because of how line endings are managed…

@Scott_C: If you check out the latest commit on the finding branch I’ve implemented a SyntaxArea.Editor.Find() method. Check it out to see if it works for you. I’ve not yet done a Replace() equivalent but, like I said, I’m currently on holiday so time is a little short.

1 Like

I’ve also added a Replace() method to the editor and merged the changes into main. Let me know if I broke something…

No need to apologize @GarryPettet, you’re on holiday and I’m not in a big hurry. I’ve got lots to keep me busy before I tackle fully wiring up the Editor, and I don’t move as fast as I used to. It’s just nice to know that feature will be there.

I like that you added an option for highlighting the found word :+1:

I’ll get back to you with some feedback as soon as I can. I should probably start a new thread, because I think I hijacked this one. Sorry about that :grimacing:

Thanks again!

1 Like