CODEWITHSUNDEEP
javascriptace-editor
AlfaTeK
AlfaTeK

Reputation: 7765

How to do simple server side validation with Ace Editor

I want to use Ace Editor to achieve:

  1. Simple color coded syntax highlight

  2. Server side validation and then mark some lines with errors using:

    editor.session.setAnnotations([{row:1 ,column: 0, text: "message",type:"error"}]);

I want to parse a new language that is parsed "line by line" and is something like this:

A. GO TO 20
B. TURN LEFT

I already have a server side validator for my language (a Java lib) and I already achieved my 1. goal

My doubt is how to integrate everything for my second goal. Does the ace editor provide some functionality like this (server side validation)?

I saw this on github: https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/javascript_worker.js that looks some kind of external validation for JS but I really don't understand if Ace provides something like I want or not.

In case ACE doesn't support it, how can I achieve this? If you can't provide the full example some high-level "architectural" tips would be appreciated...

Upvotes: 0

Views: 1042

Answers (1)

a user
a user

Reputation: 24104

Ace doesn't have an example of a validator that sends stuff to the server, but it runs validator in webworker which is somewhat similar.

The naive approach to the problem would be to add change listener to the session, and on every change send session contents to the server, run validator, send back json with error locations, and use setAnnotations the way you show in your question.

But sending whole document on every change is slow so ace sends only the changes, and rebuilds document from that.

How ace works?:
The modes have createWorker function which creates instance of WorkerClient, WorkerClient starts webWorker and adds changeListener to the document. worker.js uses mirror.js to reconstruct document from the changes, and call a function after timeout. All the language specific part is in that function. See json_worker.js if you somehow find it hard to understand javascript_worker.js

If you don't want to go with naive approach, You can reuse some of ace webWorker code to synchronize with the server. For client you'll need to replace postMessage in worker_client.js with send over socket, and for server use nodejs or reimplement mirror.js in java.

However reimplementing validation for your language in js and using it similar to jshint in javascript_worker will provide better user experience. You can even use a java to js compiler for that.

Upvotes: 2

Related Questions