Basic functioning editor demo

[Peter Kelly]

Hi all,

I’ve just pushed a commit to the corinthia-editor repository which includes a bare-bones editing application to demonstrate the use of the library. Currently the following things work:

- Inserting characters

- Deleting characters and selected text

- Creating new paragraphs (i.e. pressing enter)

- Cursor movement and selection using the keyboard (including shortcuts like shift for selection, ctrl/alt for skipping words/paragraphs)

- Cursor movement and selection using the mouse

To launch this editor, pull the latest changes from the repository, run ‘tsc’ to compile, and then open app/app.html in your browser. Note that you may run into cross-origin errors which prevent it from working, as the content document is stored in an iframe, separate from the main HTML page. The easiest way to get around this is to set up a local web server on your machine and serve the files from there, e.g.:

cd corinthia-editor

python -m SimpleHTTPServer

Go to http://localhost:8000/demo/app.html

There’s some debug output printed to the console which you may find useful when troubleshooting or adding features. There’s now a proper “public” API in place, all defined in externalapi.ts. None of the functions are documented yet, but in many cases the names and parameters should hopefully be somewhat self-explanatory.

Check it out, and let me know if you have any questions. This is just a basic demo; eventually we can start a proper version in the corinthia-webapp repository which has a full UI, perhaps using Angular & Bootstrap, or similar frameworks.

--
Dr. Peter M. Kelly
kell...@gmail.com

http://www.kellypmk.net/

PGP key: http://www.kellypmk.net/pgp-key

(fingerprint 5435 6718 59F0 DD1F BFA0 5E46 2523 BAA1 44AE 2966)

[Peter Kelly]

BTW - I currently have this successfully working only in Safari and Chrome. It doesn’t run in Firefox at the moment; not sure about IE.

--
Dr. Peter M. Kelly
kell...@gmail.com

http://www.kellypmk.net/

PGP key: http://www.kellypmk.net/pgp-key

(fingerprint 5435 6718 59F0 DD1F BFA0 5E46 2523 BAA1 44AE 2966)

[Louis Suárez-Potts]

This is great to hear, but is it running only on desktop browsers? Or also on mobiles, i.e., iOS?

-louis

> --
> You received this message because you are subscribed to the Google Groups "CorinthiaTeam" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to corinthiatea...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Peter Kelly]

Thanks Franz - caught it now! I had trouble reproducing this consistently but eventually realised it happens when you click exactly on the cursor (which is only 2 pixels wide). Because the cursor is actually a HTML div element, it was confusing the logic that determined the position in the text that you clicked on, which was returning the DOM position of the cursor instead of the actual text.

I’ve also pushed a couple of fixes which make the app work in firefox now. Details are in the commit logs.

Support for Edge is partially working - there seems to be an issue with keyboard input which I’m still looking into. Unfortunately IE11 is missing some important functionality the library relies on (relating to mouse events and position calculation - the same part of the code as mentioned above actually). I’m of the mind that Edge is more of a priority for now on Windows, though of course IE support would be nice if we can do it.

Now that we’ve got the basic functionality in place, would you be interested in having a go at turning this into a more fully-featured editor, based on the code that’s currently in the corinthia-webapp repository? I remember you did some work on this before, and I think it would be useful to have someone other than me work on this as another set of eyes should will help a lot in terms of getting the API and documentation into a better state, suitable for others to use.

--
Dr. Peter M. Kelly
kell...@gmail.com

http://www.kellypmk.net/

PGP key: http://www.kellypmk.net/pgp-key

(fingerprint 5435 6718 59F0 DD1F BFA0 5E46 2523 BAA1 44AE 2966)

On 14 Mar 2016, at 10:20 AM, Franz de Copenhague <franzdec...@outlook.com> wrote:

I have downloaded it and I have a found an issue with click and the cursor. It looks like then body is selected as selRange.end. See the attached image.

I can reproduce it doing several double clicks and moving the mouse at the same time.

Franz

  

<Captura de pantalla 2016-03-13 a la(s) 23.05.21.png>

   

---

Subject: Re: Basic functioning editor demo
From: kell...@gmail.com
Date: Sun, 13 Mar 2016 23:44:20 +0700
To: corint...@googlegroups.com

[Peter Kelly]

On 14 Mar 2016, at 12:26 AM, Louis Suárez-Potts <lui...@gmail.com> wrote:

This is great to hear, but is it running only on desktop browsers? Or also on mobiles, i.e., iOS?

Currently desktop only - I haven’t yet tested it on mobile.

[Louis Suárez-Potts]

> On 14 Mar 16, at 11:12, Peter Kelly <kell...@gmail.com> wrote:
>
>> On 14 Mar 2016, at 12:26 AM, Louis Suárez-Potts <lui...@gmail.com> wrote:
>>
>> This is great to hear, but is it running only on desktop browsers? Or also on mobiles, i.e., iOS?
>
> Currently desktop only - I haven’t yet tested it on mobile.

Okay.

FWIW, there's still strong desire, esp. among "writers" for mobile (and Desktop/browser) apps that manage document files as Scriv does. Scrivener for iOS is *still* in Beta, to be released, am told, summer (of this, or next, or next year). It's not likely to be particularly cheap.

The writer community includes, I should add, not just wannabe novelists (like yours truly) but also a portion of the marketing class, i.e., those who need to write composed text reiteratively and collaboratively, if only asynchronously.

louis

PS Given that amazon.com does Kindle….

>
> --
> Dr. Peter M. Kelly
> kell...@gmail.com
> http://www.kellypmk.net/
>
> PGP key: http://www.kellypmk.net/pgp-key
> (fingerprint 5435 6718 59F0 DD1F BFA0 5E46 2523 BAA1 44AE 2966)
>
>

[Franz de Copenhague]

HI Peter,

 

I have some ideas about the frontend and backend,  definitely they are based on Node.js. I need to know what are your requirements and the interface between the editor component and the web app that contains the editor.

 

According to your implementation the main requirement is using iframe for the editor component.

 

My goal will be create a simple UI like draft.js does. (https://facebook.github.io/draft-js/)

 

- Franz

[Peter Kelly]

On 16 Mar 2016, at 6:23 PM, Franz de Copenhague <franzdec...@outlook.com> wrote:

HI Peter,

 

I have some ideas about the frontend and backend,  definitely they are based on Node.js. I need to know what are your requirements and the interface between the editor component and the web app that contains the editor.

Well, as far as the app is concerned the requirements are up to you :)

I’ll get you some more details about how to integrate the editor ASAP. I’m just finishing up a long article about the design of the library which I intent to post in the next few days, and I also need to start documenting the public API. The same app should hopefully help give you a few ideas about how to get started… also check out externalapi.ts in the repository to see the public API.

Whether you use JavaScript or TypeScript for the editor is up to your preference - but i would strongly recommend TypeScript, partly because that’s what the editor is written in (though it compiles to JS ant he API call be used from JS), but also because I happen to think it’s a really handy tool for JS. You can actually start off with pure JS and add type annotations as you go, so the barrier to entry is low.

 According to your implementation the main requirement is using iframe for the editor component.

That’s correct. The library is implemented with the assumption that it has exclusive access to the frame containing the document’s content, and there are no other scripts running in the frame, nor any extra content (like UI elements). The app’s UI should be outside the iframe, as in demo/app.html.

I’ve just added corinthia-editor as a git submodule of corinthia-webapp so you can reference the files from there. Further down the track when things are in a more stable state I think using an npm depdendency would be good, but this should do for now.

Draft does look good. I look forward to seeing what you come up with!