ID:1652788
 
Applies to:
Status: Open

Issue hasn't been assigned a status value.
Just putting this here to see if it's feasible.

I know it'll probably be not compatible with the HTML5 client, if this does get implemented.

I'm wondering if it'd be possible to implement an interface control that acts exactly like DM's code editor. Simply, a monospace'd, multi-line input control that uses BYOND's native syntax highlighting as you type.

There are plenty of cases where people can use something like this. Currently, the only way to display code in a game is to pass it through a browser & use JS, or use Lummy's syntax highlighting library. I recall Lummy's lib breaking with large pieces of code or being really slow, and the Javascript solutions I've seen...haven't really been solutions.

Plus, with those, it's not editable and if you'd like to edit or write something out in Seeker, it's not highlighted.

of course, this could probably be completely pointless.
Since a lot of the dev tools want to be written in DM eventually, once the new HTML5 client gets written this likely won't be as incompatible as you think.
Super Saiyan X wrote:
I know it'll probably be not compatible with the HTML5 client, if this does get implemented.

In that case, I wouldn't consider this worth the effort. Any code editing control that is implemented at this point definitely needs to support the web client, because that's where BYOND is going.

I also think that there is nothing stopping us from developing a sane browser based solution. Although, I really wish it could be done directly on a map control, but that would be quite a challenge with the current flexibility that maptext offers.
In response to Multiverse7
Multiverse7 wrote:
Super Saiyan X wrote:
I know it'll probably be not compatible with the HTML5 client, if this does get implemented.

In that case, I wouldn't consider this worth the effort. Any code editing control that is implemented at this point definitely needs to support the web client, because that's where BYOND is going.

I don't think the webclient should ever limit features that could be implemented in Dream Seeker.
In response to Super Saiyan X
As far as I know, the eventual plan is that everything will be running within a web client. Games that run in Dream Seeker will actually be running within an embedded browser control within Seeker. That change may not happen right away though, and I'm really not sure about any of this.
I should add that not supporting the web client means you will not be supporting other users on other potential operating systems. BYOND needs to expand and grow BeYOND the world of Windows.
Yes, this would be feasible. (And no, we don't have any plans of abandoning or moving away from DS. The webclient is just a way to reach more people.)

Roughly, bearing in mind all this syntax is in flux, this is what I think a highlighter control would look like:

<byondclass name=dmedit>
<style>
// define styles here
.byond_dmedit > pre {
overflow: auto;
width: 100%;
height: 100%;
box-sizing: border-box;
}
// more styles for syntax
</style>
<script>
{
fn: {
create: function() {
var e=this.content();
// the client is not compatible with outdated IE versions like 8, so no need to use IE fallbacks
e.addEventListener('keydown', this.keydown.bind(this));
e.addEventListener('keypress', this.keypress.bind(this));
},
_highlight: function() {
var e=this.content(), code=e.textContent();
if(this._hltimer) cancelTimeout(this._hltimer);
this._hltimer = 0;
// perform highlighting here
},
_highlightWait: function() {
if(this._hltimer) cancelTimeout(this._hltimer);
this._hltimer = setTimeout(this._highlight.bind(this), 500);
},
keydown: function(e) {
// TODO: check if key event is one we don't care about, and see if the map wants it
// TODO: handle keys like tab, backspace, navigation
this._highlightWait();
},
keypress: function(e) {
// TODO: insert text
this._highlightWait();
}
},
winsetfn: {
text: function(v) {
var e=this.content();
// null or undefined is winget
if(typeof v != 'string') return e.textContent;
e.innerHTML = byond.htmlEncode(v);
this._highlight();
}
}
}
</script>
<pre id=editor></pre>
</byondclass>


That's really just an opening shell, but it's the gist of how such a control might look. Doing this via a pre instead of a textarea lets you do the highlighting in place, although I'm not sure how that would work as far as showing a caret. I haven't experimented much with WYSIWYG editors in JavaScript, so I couldn't tell you much more than that.

I'd expect that with syntax highlighting you'd want to do all the following:

1) Keep track of which parts may and may not have changed, so the early parts of the code don't have to be re-highlighted
2) Avoid unnecessary creation of <span> elements by reusing the ones you already have
3) Handle selection gracefully (not necessarily an easy thing when spanning multiple elements, but doable)

This could be a very interesting and worthy project. Also, you could even create a prompt class for this kind of thing. Webclient prompts are highly configurable as well, and you could override byond.prompt.which() to return a custom type based on the parameters of the prompt.

[edit]
I should add that I don't actually expect we'd implement this, but rather this is something a dev can implement themselves. If it's a good control we might add it to the standard library. The structure I've presented here might be subject to change here and there, but you could easily get started on filling in the missing bits of JavaScript right now so you have something to test and play with when the client is out.
CodeMirror is pretty widely used for this sort of thing (in Chrome's dev tools, for example). Are there any restrictions on the HTML/JS that can be used in controls that might rule out using a library like it?

Regardless, it would be neat if someone were to write a DM mode for CodeMirror!
I can't think of any restrictions offhand, except that the lib is probably bigger than would be ideal. Even minified I expect it'd be huge, and it's more than you probably need unless you want to make the control work for other languages than DM.

The MIT license should be pretty compatible. Our color prompt uses Flexi, which is licensed the same way, although I'm tempted to swap out Flexi for a similar color control I rolled myself.