Asciidoctor.js Editor (Chrome App)

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Asciidoctor.js Editor (Chrome App)

ggrossetie
Hi,

I'm starting to work on an Asciidoctor editor based on the great work of @asotobu : http://www.lordofthejars.com/2013/07/asciidoc-editor-with-markitup.html.

Unfortunately, I'm having trouble integrating the Markitup code into a Chrome App primarily because of the Content Security Policy : http://developer.chrome.com/extensions/contentSecurityPolicy.html. The Markitup code uses eval function and "Cross-Origin XMLHttpRequest".

The rendering part is really easy thanks to Asciidoctor.js so I was thinking, why not using http://ace.c9.io/ as editor and just add a preview frame ?

There is already a Chrome Extension that integrates Ace editor to create a text editor, so I guess this will be pretty easy : https://github.com/tylerlong/slim_text

What do you think ?
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

LightGuardjp
Administrator
That sounds like a great way to do it. We used ace in the https://github.com/awestruct/web-editor[Web Editor for awestruct]. It works well.


On Sun, Oct 6, 2013 at 6:44 AM, ggrossetie [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi,

I'm starting to work on an Asciidoctor editor based on the great work of @asotobu : http://www.lordofthejars.com/2013/07/asciidoc-editor-with-markitup.html.

Unfortunately, I'm having trouble integrating the Markitup code into a Chrome App primarily because of the Content Security Policy : http://developer.chrome.com/extensions/contentSecurityPolicy.html. The Markitup code uses eval function and "Cross-Origin XMLHttpRequest".

The rendering part is really easy thanks to Asciidoctor.js so I was thinking, why not using http://ace.c9.io/ as editor and just add a preview frame ?

There is already a Chrome Extension that integrates Ace editor to create a text editor, so I guess this will be pretty easy : https://github.com/tylerlong/slim_text

What do you think ?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-js-Editor-Chrome-App-tp730.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

ggrossetie
In reply to this post by ggrossetie
Just worked half an hour on it but its looks very good so far :

Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

mojavelinux
Administrator
In reply to this post by ggrossetie

I think it's a great idea to explore both options and let the best choice emerge.

My understanding is that Ace is a great editor, as it's used on several of the online IDEs. It has decent support for AsciiDoc syntax highlighting in the editor part already. I think we could use Asciidoctor.js to make that part better in addition to using it for the preview pane.

You're well on the way to an online & offline editor with nothing more than the browser. So exciting!

-Dan

On Oct 6, 2013 6:44 AM, "ggrossetie [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
Hi,

I'm starting to work on an Asciidoctor editor based on the great work of @asotobu : http://www.lordofthejars.com/2013/07/asciidoc-editor-with-markitup.html.

Unfortunately, I'm having trouble integrating the Markitup code into a Chrome App primarily because of the Content Security Policy : http://developer.chrome.com/extensions/contentSecurityPolicy.html. The Markitup code uses eval function and "Cross-Origin XMLHttpRequest".

The rendering part is really easy thanks to Asciidoctor.js so I was thinking, why not using http://ace.c9.io/ as editor and just add a preview frame ?

There is already a Chrome Extension that integrates Ace editor to create a text editor, so I guess this will be pretty easy : https://github.com/tylerlong/slim_text

What do you think ?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-js-Editor-Chrome-App-tp730.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

mojavelinux
Administrator
In reply to this post by ggrossetie

One feature that came to mind that could really set this editor apart is template shortcuts. Most people think about making buttons to insert markup like a section title or image. But we should think about our IDEs.

Do you click a button to make a for loop or try/catch block? More likely you use an autocomplete template or, even simpler, a key combination.

It would be great to have these templates in the online editor. That way, your fingers stay on the keyboard and keep writing.

-Dan

On Oct 7, 2013 5:58 PM, [hidden email] wrote:

I think it's a great idea to explore both options and let the best choice emerge.

My understanding is that Ace is a great editor, as it's used on several of the online IDEs. It has decent support for AsciiDoc syntax highlighting in the editor part already. I think we could use Asciidoctor.js to make that part better in addition to using it for the preview pane.

You're well on the way to an online & offline editor with nothing more than the browser. So exciting!

-Dan

On Oct 6, 2013 6:44 AM, "ggrossetie [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
Hi,

I'm starting to work on an Asciidoctor editor based on the great work of @asotobu : http://www.lordofthejars.com/2013/07/asciidoc-editor-with-markitup.html.

Unfortunately, I'm having trouble integrating the Markitup code into a Chrome App primarily because of the Content Security Policy : http://developer.chrome.com/extensions/contentSecurityPolicy.html. The Markitup code uses eval function and "Cross-Origin XMLHttpRequest".

The rendering part is really easy thanks to Asciidoctor.js so I was thinking, why not using http://ace.c9.io/ as editor and just add a preview frame ?

There is already a Chrome Extension that integrates Ace editor to create a text editor, so I guess this will be pretty easy : https://github.com/tylerlong/slim_text

What do you think ?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-js-Editor-Chrome-App-tp730.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

mojavelinux
Administrator
In reply to this post by ggrossetie
You might be interested in StackEdit, which was just announced today. It's an open source, browser-based editor for Markdown. It uses ACE for the editor pane and PageDown for the preview pane. It may be a good reference point or perhaps a good foundation on which to build the AsciiDoc editor.


One thing I can tell you for sure. Once we manage to put together a browser-based editor for AsciiDoc, *that* will be news :)

-Dan


On Mon, Oct 7, 2013 at 6:04 PM, Dan Allen <[hidden email]> wrote:

One feature that came to mind that could really set this editor apart is template shortcuts. Most people think about making buttons to insert markup like a section title or image. But we should think about our IDEs.

Do you click a button to make a for loop or try/catch block? More likely you use an autocomplete template or, even simpler, a key combination.

It would be great to have these templates in the online editor. That way, your fingers stay on the keyboard and keep writing.

-Dan

On Oct 7, 2013 5:58 PM, [hidden email] wrote:

I think it's a great idea to explore both options and let the best choice emerge.

My understanding is that Ace is a great editor, as it's used on several of the online IDEs. It has decent support for AsciiDoc syntax highlighting in the editor part already. I think we could use Asciidoctor.js to make that part better in addition to using it for the preview pane.

You're well on the way to an online & offline editor with nothing more than the browser. So exciting!

-Dan

On Oct 6, 2013 6:44 AM, "ggrossetie [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
Hi,

I'm starting to work on an Asciidoctor editor based on the great work of @asotobu : http://www.lordofthejars.com/2013/07/asciidoc-editor-with-markitup.html.

Unfortunately, I'm having trouble integrating the Markitup code into a Chrome App primarily because of the Content Security Policy : http://developer.chrome.com/extensions/contentSecurityPolicy.html. The Markitup code uses eval function and "Cross-Origin XMLHttpRequest".

The rendering part is really easy thanks to Asciidoctor.js so I was thinking, why not using http://ace.c9.io/ as editor and just add a preview frame ?

There is already a Chrome Extension that integrates Ace editor to create a text editor, so I guess this will be pretty easy : https://github.com/tylerlong/slim_text

What do you think ?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-js-Editor-Chrome-App-tp730.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

ggrossetie
mojavelinux wrote
You might be interested in StackEdit, which was just announced today. It's an open source, browser-based editor for Markdown. It uses ACE for the editor pane and PageDown for the preview pane. It may be a good reference point or perhaps a good foundation on which to build the AsciiDoc editor
Wow nice tool... but I'm sure we can build a better one for AsciiDoc :)

mojavelinux wrote
I think it's a great idea to explore both options and let the best choice emerge.
The ace editor is really great, easy to embedded and the API is nice. I will push a raw version as soon as possible, so we can start tracking issues.

- Guillaume.
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

mojavelinux
Administrator
On Tue, Oct 8, 2013 at 1:23 PM, ggrossetie [via Asciidoctor :: Discussion] <[hidden email]> wrote:
<quote="mojavelinux">

You might be interested in StackEdit, which was just announced today. It's an open source, browser-based editor for Markdown. It uses ACE for the editor pane and PageDown for the preview pane. It may be a good reference point or perhaps a good foundation on which to build the AsciiDoc editor

Wow nice tool... but I'm sure we can build a better one for AsciiDoc :)

That's the spirit!
 

The ace editor is really great, easy to embedded and the API is nice. I will push a raw version as soon as possible, so we can start tracking issues.

Solid!

-Dan

--
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

ggrossetie
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoctor.js Editor (Chrome App)

ggrossetie
If you want to give it a try without building stuff on your computer: https://chrome.google.com/webstore/detail/asciidoctorjs-editor/plpajpdfecifdabnchpaokkcbmkdodbj

The app is currently only available for people with the link (because the app is far from complete).

Cheers,
Guillaume.