Snippet Completion with Placeholders

I’m adapting CodeMirror for an online IDE-like thing for a custom programming language. I want to build auto-completion for small snippets (e.g. a while-loop). When such a snippet is expanded, I want the user to be able to Tab to the places where he needs to enter something - like in Eclipse, when a function is auto-completed.

I have a working prototype of this. You can find it here, just tick I want to use the beta version, click Files, create a new, empty pseuCo file, start typing while, and accept the completion with Tab. You can then advance to the second (currently red) placeholder with Tab.

This is working fine, but I think I overlooked some shortcuts - my code is pretty horrible. The parts of the code needed for this snippet completion are here, the full code is here.

Does anyone see an easier way to achieve this, or something similar?

To substantiate my question:

  1. Is there a nice way to insert text at the cursor position which contains line breaks that I want auto-indented? I don’t necessarily want to re-indent the whole file.
  2. Is there a nice way to insert a text at the cursor position containing TextMarker instances, without inserting the text first, computing the offset, and marking the text afterwards?

No and no, but if you first insert the text and then do the indentation/marking, this should all be very easy. Make sure you wrap your code in an operation to save on redraws and make sure the undo history treats the changes as a single action.

Okay - thanks!

@fefrei can you please share your solution?
It would really help people who are trying to recreate the same logic, such as me :slight_smile:

You can find my code here: https://dgit.cs.uni-saarland.de/pseuco/concurrent-programming-web/blob/edge/src/js/ui/directives/codeMirrorTextEditor.js

It’s not pretty but it works :slight_smile:

1 Like