

Doctored.js – A new kind of editor - holloway
http://holloway.co.nz/doctored/#

======
primitivesuave
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.

------
ttty
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

------
syntern
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?

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

------
imjustabill
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.

~~~
holloway
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...](https://github.com/holloway/doctored/blob/master/doctored/schemas/TEI/config.json)

And that config file is a pointer to these schema families
[https://github.com/holloway/doctored/blob/master/doctored/js...](https://github.com/holloway/doctored/blob/master/doctored/js/app-
schemas.js#L340) that name the inline/block config.

~~~
d55
In the demo, how does one append another chapter?

~~~
holloway
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 :)

------
jarpineh
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.

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

~~~
holloway
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.

~~~
phpnode
take a look at [http://json-ld.org/](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.

------
ned
Super interesting.

How does this compare to Xopus? [https://xopus.com/](https://xopus.com/)

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

~~~
holloway
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.

------
kalleth
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.

------
yRetsyM
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

~~~
goblin89
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.)

------
seanlinehan
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.

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

edit: Actually selectize.js looks a bit nicer

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

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

~~~
LordIllidan
Select2 is a bit better than Chosen - more up to date. Check out
[http://stackoverflow.com/questions/13575531/what-are-the-
dif...](http://stackoverflow.com/questions/13575531/what-are-the-differences-
between-chosen-and-select2) for more info

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

~~~
wildpeaks
It's done with FileSaver. More specifically, it uses this polyfill:
[https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js)

~~~
dpweb
that's great, thx

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

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

------
auggierose
Upvote just because of the quotes :-)

------
fourstar
Like those testimonials.

