👀 Editor View

[austincondiff]

Note

The Editor View lives in CodeEditSourceEditor and features a basic implementation of tree-sitter using SwiftTreeSitter.

Overview

We need to implement a fully featured editor view. This view sits inside the Workspace UI (#346). We need to determine if we should roll our own or use an existing solution.

Features

Our code editor view should include the following features

• Syntax Highlighting
  • 👀 Missing Languages CodeEditLanguages#10
• ✨ Editor/Terminal Color Themes #189
• ✨ Setting for editor font size #98
• ✨ Multiple Cursors CodeEditSourceEditor#30
• ✨ Column selection CodeEditSourceEditor#46
• ✨ Shrink/expand selection CodeEditSourceEditor#47
• ✨ Code Completion CodeEditSourceEditor#29
• ✨ Code Completion Provider CodeEditSourceEditor#32
• Code Validation
• Messages - errors, warnings, info
• ✨ Minimap CodeEditSourceEditor#33
• Line Numbers
• ✨ Current Line Highlight CodeEditSourceEditor#34
• Change Indicator
• Diff comparison

Resources

• Tree-sitter
• SwiftTreeSitter
• STTextView
• Neon

Packages to consider

• CodeEditorView
• CodeViewer
• CodeEditor
• Sourceful
• SavannaKit
• CotEditor

[lukepistrol]

I'll dump some resources to consider here:

• https://github.com/mchakravarty/CodeEditorView
• https://github.com/dwarvesf/CodeViewer
• https://github.com/ZeeZide/CodeEditor
• https://github.com/twostraws/Sourceful
• https://github.com/louisdh/savannakit

[austincondiff]

I've spoken to the developer of CodeEditorView and added mchakravarty/CodeEditorView#43 and mchakravarty/CodeEditorView#44. I also left some comments on mchakravarty/CodeEditorView#3.

[austincondiff]

Let's reopen because this editor is just a start. I assume based on PR comments that it will not support #46 among other things like diff, code completion, messages, validation, etc. all of which are being worked on or supported by https://github.com/mchakravarty/CodeEditorView.

[MarcoCarnevali]

I'm actively working on a custom solution built over Highlightr.js!

[mattmassicotte]

@MarcoCarnevali Hello! It looks like you've already found something you want to use, but I thought I'd let you know what we're up to just in case.

My app (Chime) does highlighting (and indentation) using tree-sitter. We've open sourced a low-level library for working with it in Swift.

However, Chime has a huge amount of infrastructure on top of that for its actual implementation. We were actually in the process of pulling out another layer in the system now. A few others have asked about this before, so it was something we wanted to do anyways.

If any of this sounds interesting, let me know and we can discuss more!

[MarcoCarnevali]

@mattmassicotte I'm currently using a wrapper around highlightjs but happy to change it to something better! I would definitely love to discuss more on that, seems interesting!

[mattmassicotte]

I'm not familiar with highlight.js, but it looks like a great tool!

I've taken many different paths along my syntax highlighting journey. Right now, Chime uses a hybrid tree-sitter + LSP semantic tokens.

Tree-sitter's support for incremental parsing gives it really good performance characteristics. However, Chime has to wrap it up with a bunch of extra stuff to make it both lazy (only coloring what the user sees) and asynchronous (computing coloring in the background, if needed). Plus, it supports generalized syntax-tree queries, which we use for structure highlighting (matching if-{-}) and precise indentation calculations. Tree-sitter is awesome, but very complex.

LSP also has a syntax highlighting system called semantic tokens. Glueing together both of these is tricky. But, it's desirable because semantic tokens can provide better information, but is slower and always asynchronous. Tree-sitter isn't as precise, but is faster and can be used synchronously if needed. It also works well in the face of syntax errors, which is the common case during editing.

I was just in the process of pulling out some more of the tree sitter system we use, it will be here: TreeSitterClient . But, I'll need some more time to finish that. And, even when done, that's just perf/convenience around the system, not a full highlighting implementation...