New editor #458

With this PR, when JS is activated and WASM supported, the article editor will be dynamically replaced with contenteditables elements. This makes the editing interface simpler and less like a regular form. It will also allow us to easily add visual formatting with native browser APIs (and to insert images or videos directly). Here is a little demo:

There is still a lot to do, but it is a good first step.

Fixes #255

With this PR, when JS is activated and WASM supported, the article editor will be dynamically replaced with `contenteditable`s elements. This makes the editing interface simpler and less like a regular form. It will also allow us to easily add visual formatting with native browser APIs (and to insert images or videos directly). Here is a little demo: ![peek 05-03-2019 16-12](https://user-images.githubusercontent.com/16254623/53815536-1dc05680-3f62-11e9-94d3-b363ed84eb97.gif) There is still a lot to do, but it is a good first step. Fixes #255

Codecov Report

Merging #458 into master will increase coverage by 1.64%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master     #458      +/-   ##
==========================================
+ Coverage   26.49%   28.13%   +1.64%     
==========================================
  Files          64       64              
  Lines        7111     7496     +385     
==========================================
+ Hits         1884     2109     +225     
- Misses       5227     5387     +160

# [Codecov](https://codecov.io/gh/Plume-org/Plume/pull/458?src=pr&el=h1) Report > Merging [#458](https://codecov.io/gh/Plume-org/Plume/pull/458?src=pr&el=desc) into [master](https://codecov.io/gh/Plume-org/Plume/commit/2a188abfa152efe7a2794174279e3b9da4a809d1?src=pr&el=desc) will **increase** coverage by `1.64%`. > The diff coverage is `n/a`. ```diff @@ Coverage Diff @@ ## master #458 +/- ## ========================================== + Coverage 26.49% 28.13% +1.64% ========================================== Files 64 64 Lines 7111 7496 +385 ========================================== + Hits 1884 2109 +225 - Misses 5227 5387 +160 ```

Something I just noticed: published articles are always drafts (unless you are editing an already published article)

I'm having trouble making it work. I had to tinker plume-front.js. Any idea why, or how to prevent that?

Was the build script correctly run by cargo? Like, did you saw plume(build) before plume(bin) next to the compilation progress bar? Otherwise, you can try to add a println!("cargo:rerun-if-changed=target/deploy/plume-front.js") (IIRC) to it, so that we are sure it is re-run when the JS changes (it does when the WASM changes normally, but maybe that's not enough).

Was the build script correctly run by cargo? Like, did you saw `plume(build)` before `plume(bin)` next to the compilation progress bar? Otherwise, you can try to add a `println!("cargo:rerun-if-changed=target/deploy/plume-front.js")` (IIRC) to it, so that we are sure it is re-run when the JS changes (it does when the WASM changes normally, but maybe that's not enough).

ok my bad, I ran cargo web deploy -o ../static so the buildscript did not update the js file as it should have

ok my bad, I ran `cargo web deploy -o ../static` so the buildscript did not update the js file as it should have

I added back the character counter, but it is not as precise as the previous one, since I only took the article content in account (otherwise I would have had to rebuild all the original form every time, which would be quite long both in code and when running). I don't think that's a big issue, since the previous one was not perfectly precise neither, and that people will rarely reach this limit anyway.

mostly code-style comment again

I tried to make the code a bit more readable, but I'm not sure it is enough…

👍

:+1:

Oups, 2 little things : It doesn't seems to be possible to add carriage return in the content (prevent default I guess), and it may be nice to have a button to switch back to the plain markdown editor

 @ -6,0 +20,4 @@
 lazy_static! {
     static ref CATALOG: gettext::Catalog = {
         let catalogs = include_i18n!();
         let lang = js!{ return navigator.language }.into_string().unwrap();

 @ -6,0 +20,4 @@
 lazy_static! {
     static ref CATALOG: gettext::Catalog = {
         let catalogs = include_i18n!();
         let lang = js!{ return navigator.language }.into_string().unwrap();

 @ -6,0 +20,4 @@
 lazy_static! {
     static ref CATALOG: gettext::Catalog = {
         let catalogs = include_i18n!();
         let lang = js!{ return navigator.language }.into_string().unwrap();

 @ -6,0 +20,4 @@
 lazy_static! {
     static ref CATALOG: gettext::Catalog = {
         let catalogs = include_i18n!();
         let lang = js!{ return navigator.language }.into_string().unwrap();

 @ -6,0 +20,4 @@
 lazy_static! {
     static ref CATALOG: gettext::Catalog = {
         let catalogs = include_i18n!();
         let lang = js!{ return navigator.language }.into_string().unwrap();

Etykiety Kamienie milowe

New editor #458

Codecov Report

Recenzenci

Krok 1:

Krok 2: