Doctored.js – A new kind of editor | Hacker News Reader

Doctored.js – A new kind of editor

holloway.co.nz

125 pointsholloway30 comments

Beautiful interface, very nicely done. Writing XML by hand can be pretty painful, it would be awesome to use something like this when setting up XML configuration files.

Also, the website quotes are hilarious.

Nice quotes: "It's looking good! I haven't had a proper look yet though ... it's late, plus I'm drunk" "It's looking good! I haven't had a proper look yet though ... it's early, I just got up, plus I'm drunk"

In both "I'm drunk"... :D

This is a really great tool. I'm wondering how hard it would be to use it with JSON structures too? Maybe the XML validation runtime could become much simpler?

https://github.com/codecombat/treema does JSON structures, so it's definitely a possibility to use a very similar interface to represent JSON.

Very cool! I wish it worked with arbitrary schemas, I would love to have a nice tool like this when I get stuck dealing with SOAP.

Hi, it (sort of!) already does support arbitrary schemas, or were you meaning that you want to be able to give it a schema through the interface (URL/file upload)? It doesn't currently support the later, although there's no reason why it couldn't.

Currently if you wish to add a schema just needs a thin wrapper where you tell it the elements that are to be displayed as inline (rather than block).

Specifically, an .RNG or .XSD file just needs a tiny reference to a schema family: https://github.com/holloway/doctored/blob/master/doctored/sc...

And that config file is a pointer to these schema families https://github.com/holloway/doctored/blob/master/doctored/js... that name the inline/block config.

In the demo, how does one append another chapter?

tldr; I'm going to allow double <enter>, and I'm going to add a [+] to the top-left of every block but that's not done yet and in the meantime you'll have to edit the XML ('view source') to make those kind of changes.

Long answer: Currently hitting <enter> clones the current block element but when there are block elements within block elements (such as chapter > para) there's no way to know what <enter> should mean. Other software (some wordprocessors) use double <enter> to step up a level, and I guess I'll support that. For UI reasons though I think that I'll also add a [+] button to the top-left of block elements (above the vertical label, above the nodeName). And I should also support pasting XML more (it kind of works right now but it needs more work).

I'll be a bit busy for the next week on a live split-view of the XML, but after that I'll work on cloning nesting block elements. I'll say when it's done on @hollowaynz -- cheers :)

Just added a [+] to each block element

http://holloway.github.io/doctored/

I'm late for a meeting so I just say couple of things.

This looks really good and sounds even better! I have invested a considerable amount of time in exploring visual XML document editing, including contentEditable, RelaxNG, web components, textarea input redirection (CodeMirror), especially for DocBook XML.

I'm curious have you thought about things like non-textual (for the writer) elements like widgets for dates, how to edit attributes, types in general (only numbers here).

In the comments here you mention douple enter to clone current block level (para) element. What about configurable behaviors or templates that insert XML fragments Emmet style? I have been looking at ways to declare editorial aspects (things that should happen with common editorial operations like douple enter, selection, copy/paste), perhaps using RelaxNG annotations or LESS style CSS extensions. New chapters, tables and links might come with considerable package which is not evident from the schema (nor could it be).

I try to take a close look later...

BTW: What license are you using? I did not find any mention in the Github repo.

JSON and a side-by-side view would make this invaluable.

I'll add a side-by-side view this week :)

I'm not sure how JSON would be displayed in this kind of interface. Any ideas? I'll have some attempts and get back to you.

take a look at http://json-ld.org/ which allows relatively unobtrusive mapping of e.g. RDF to JSON. I think it would work well with an editor like this.

Hi I've added a side-by-side view. Just click 'view source' and start typing.

http://holloway.github.io/doctored/

It's the first version so things will change and it's a bit buggy right now. Should stabilise in a couple of days, cheers :)

Super interesting.

How does this compare to Xopus? https://xopus.com/

Of course, Xopus is closed source, so that's a big difference already.

I'm not really that familiar with Xopus so I can't really comment. Judging from the screenshots (E.g. DITA) it looks like it has a lot of per-schema customisations which my software doesn't have.

Had a quick play around with the demo. Two suggestions:

1. Please, please make tabbing between fields work as I expect (i.e. after I've filled in Book Title, let me tab to the next field down). 2. Please make ctrl-A select all text in that field rather tha making me use the mouse.

The screenshot trapped me into thinking it was an embedded demo - I tried clicking a few times! It'd be great if the link through to the github repo was front and centre too. Great work Matthew

Project page is a pleasure to look at, but screenshot is where it gets a little too slick, my thought as well. Adding subtle faux-gloss to screenshot section would help IMO. It'd unlikely to be confused with real controls then, I think.

(‘Screenshot’ header is there, true, but it may go unnoticed because the UI example below catches user's attention right away.)

Pretty cool. Biggest thing I see in a few minutes of playing around is the "Choose Element" dropdown could benefit from implementing a search/dropdown hybrid.

Something like a Select2 dropdown? Not a problem. I'll do that.

edit: Actually selectize.js looks a bit nicer

Chosen[1] is quite a nice drop in replacement too.

[1] http://harvesthq.github.io/chosen/

Select2 is a bit better than Chosen - more up to date. Check out http://stackoverflow.com/questions/13575531/what-are-the-dif... for more info

The download button does the download seamlessly without any prompting for file name etc.. How is that done?

It's done with FileSaver. More specifically, it uses this polyfill: https://github.com/eligrey/FileSaver.js

that's great, thx

What are the keyboard shortcuts? ("Optional keyboard-only interface was advertised)

Very nicely designed project page. I think this deserves to be noted.

Upvote just because of the quotes :-)

Like those testimonials.

Reply on news.ycombinator.com