Asciidoctor :: Discussion

Asciidoctor.js Editor (Chrome App)

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

10 messages Options

ggrossetie

Oct 06, 2013; 12:43pm

Asciidoctor.js Editor (Chrome App)

63 posts

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 ?

LightGuardjp

Oct 07, 2013; 4:07pm

Re: Asciidoctor.js Editor (Chrome App)

354 posts

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

... [show rest of quote]

Jason Porter
http://en.gravatar.com/lightguardjp

ggrossetie

Oct 07, 2013; 6:30pm

Re: Asciidoctor.js Editor (Chrome App)

63 posts

In reply to this post by ggrossetie

Just worked half an hour on it but its looks very good so far :

mojavelinux

Oct 07, 2013; 11:59pm

Re: Asciidoctor.js Editor (Chrome App)

Administrator

2681 posts

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

... [show rest of quote]

mojavelinux

Oct 08, 2013; 12:04am

Re: Asciidoctor.js Editor (Chrome App)

Administrator

2681 posts

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
... [show rest of quote]

... [show rest of quote]

mojavelinux

Oct 08, 2013; 9:20am

Re: Asciidoctor.js Editor (Chrome App)

Administrator

2681 posts

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.

https://github.com/benweet/stackedit/

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
... [show rest of quote]

... [show rest of quote]

... [show rest of quote]

Dan Allen | http://google.com/profiles/dan.j.allen

ggrossetie

Oct 08, 2013; 7:23pm

Re: Asciidoctor.js Editor (Chrome App)

63 posts

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.

mojavelinux

Oct 09, 2013; 3:57am

Re: Asciidoctor.js Editor (Chrome App)

Administrator

2681 posts

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

Dan Allen | http://google.com/profiles/dan.j.allen

ggrossetie

Oct 12, 2013; 5:02pm

Re: Asciidoctor.js Editor (Chrome App)

63 posts

First *draft* is pushed on Github!

https://github.com/asciidoctor/asciidoctor-chrome-editor

ggrossetie

Oct 27, 2013; 11:37pm

Re: Asciidoctor.js Editor (Chrome App)

63 posts

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.