Extend syntax highlighting with ACE for pre-request script textarea

[aeeed99]

Related to #218

Is your feature request related to a problem? Please describe.
No syntax highlighting might confuse users in pre-request scritps. It could look like they're writing in plaintext, and common typos won't be as apparent.

Describe the solution you'd like
Simple syntax highlighting. Things like basic javascript types should be highlighted. Nothing too fancy needed.

Describe alternatives you've considered
Going without, but syntax highlighting looks more l33t.

Additional context
@sblasa has done some research on this after reaching out on #91

[aeeed99]

@sblasa are you still interested in taking this?

[liyasthomas]

HighlightJS is already implemented in the PW.
Introduced in #142
https://highlightjs.org/

[sblasa]

@sblasa are you still interested in taking this?

@liyasthomas and @nickpalenchar yes, I'm still interested in this. So, I'm using hiighlight.js instead, since highlight is already there; therefore use that. to extend syntax highlighting for pre-request script.

[liyasthomas]

@sblasa thought I should ping you to get the latest updates on this issue...! If you need any help, ping me.

[sblasa]

@liyasthomas Hi! I pulled down the latest changes--and running on my local. I'll ping you shortly for some help. Thanks!

[sblasa]

@liyasthomas Hi, noticed that the reference for highlight.js will be removed from pages/index.vue with Replace highlight.js with ace editor #292 . So we probably won't use highlight.js to create the feature since it has been removed? Use Ace Editor instead? Thanks!

[liyasthomas]

@sblasa sorry for the delayed response!
HighlightJS is being replaced with ace. Its implementation is much simpler and have out of the box support for textarea. Please use ace for pre-request scripts.

Or wait untill #292 is merged so you don't have any trouble importing lib.

[sblasa]

@liyasthomas Okay, thanks for confirming. 👍

[liyasthomas]

@sblasa ace is in production (master branch) now! Refer the code snippets from there.

[AndrewBastin]

Yeah, I tried implementing two-way binding (v-model) onto the Ace Editor component (components/ace-editor.vue) but it had some issues with the re-render (cursor keeps staying in the first col of first line), so I dropped it...

Can somebody go into fixing that ? Or can we move Ace Editor stuff to a library (like a Ace Editor wrapper for Vue)

[liyasthomas]

I think v-model doesn't work on Ace. I too tried and failed doing it.

[AndrewBastin]

Can we look into libraries providing Vue wrappers from Ace ?

[liyasthomas]

@AndrewBastin https://stackoverflow.com/questions/57645961/vue-apply-v-model-on-user-defined-component-which-use-ace-editor there's a sollution.

[AndrewBastin]

Ooooh, if nobody is working on it, I will try implementing it and migrate the necessary views.

If nobody is working on it, can I get an assign ?