Add a way to change block type

Prototype for a WYSIWYG editor
We use pulldown-cmark in plume-front too now, but instead of using the provided HTML renderer, we use a custom DOM renderer, which let us use contenteditable only where we want, and which will allow us to add event listeners to provide a good contextual edition experience. Also removed the character counter, as the API limits are almost unreachable.
2019-08-25 18:45:02 +02:00 · 2019-08-08 16:33:14 +02:00 · 2019-08-04 12:37:38 +02:00 · 2019-08-03 23:04:25 +02:00 · 2019-08-02 23:10:05 +02:00 · 2019-08-02 16:53:28 +02:00
19 changed files with 837 additions and 339 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@ -243,7 +243,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"

 [[package]]
 name = "bitflags"
-version = "1.0.4"
+version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"

 [[package]]
@ -370,7 +370,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
 "ansi_term 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "atty 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)",
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "strsim 0.8.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "textwrap 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "unicode-width 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
@ -382,7 +382,7 @@ name = "cloudabi"
 version = "0.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

 [[package]]
@ -659,7 +659,7 @@ name = "devise_core"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)",
 "quote 0.6.12 (registry+https://github.com/rust-lang/crates.io-index)",
 "syn 0.15.34 (registry+https://github.com/rust-lang/crates.io-index)",
@ -670,7 +670,7 @@ name = "diesel"
 version = "1.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "byteorder 1.3.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "chrono 0.4.6 (registry+https://github.com/rust-lang/crates.io-index)",
 "diesel_derives 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
@ -923,7 +923,7 @@ name = "fsevent"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "fsevent-sys 2.0.1 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

@ -953,7 +953,7 @@ name = "fuchsia-zircon"
 version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "fuchsia-zircon-sys 0.3.3 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

@ -1236,7 +1236,7 @@ name = "inotify"
 version = "0.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "inotify-sys 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)",
 "libc 0.2.58 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
@ -1630,7 +1630,7 @@ name = "nix"
 version = "0.14.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "cc 1.0.37 (registry+https://github.com/rust-lang/crates.io-index)",
 "cfg-if 0.1.9 (registry+https://github.com/rust-lang/crates.io-index)",
 "libc 0.2.58 (registry+https://github.com/rust-lang/crates.io-index)",
@ -1656,7 +1656,7 @@ name = "notify"
 version = "4.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "filetime 0.2.6 (registry+https://github.com/rust-lang/crates.io-index)",
 "fsevent 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "fsevent-sys 2.0.1 (registry+https://github.com/rust-lang/crates.io-index)",
@ -1722,7 +1722,7 @@ name = "openssl"
 version = "0.10.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "cfg-if 0.1.9 (registry+https://github.com/rust-lang/crates.io-index)",
 "foreign-types 0.3.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "lazy_static 1.3.0 (registry+https://github.com/rust-lang/crates.io-index)",
@ -1898,7 +1898,7 @@ dependencies = [
 "plume-models 0.3.0",
 "rocket 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)",
 "rocket_contrib 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)",
- "rocket_csrf 0.1.0 (git+https://github.com/fdb-hiroshima/rocket_csrf?rev=4a72ea2ec716cb0b26188fb00bccf2ef7d1e031c)",
+ "rocket_csrf 0.1.0 (git+https://github.com/Plume-org/rocket_csrf?rev=89ecb380266234f858c651354216bf5bf3cc09b2)",
 "rocket_i18n 0.4.0 (git+https://github.com/Plume-org/rocket_i18n?rev=e922afa7c366038b3433278c03b1456b346074f2)",
 "rpassword 3.0.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "rsass 0.9.8 (registry+https://github.com/rust-lang/crates.io-index)",
@ -1965,6 +1965,9 @@ dependencies = [
 "gettext-macros 0.4.0 (git+https://github.com/Plume-org/gettext-macros/?rev=a7c605f7edd6bfbfbfe7778026bfefd88d82db10)",
 "gettext-utils 0.1.0 (git+https://github.com/Plume-org/gettext-macros/?rev=a7c605f7edd6bfbfbfe7778026bfefd88d82db10)",
 "lazy_static 1.3.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "plume-api 0.3.0",
+ "pulldown-cmark 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.39 (registry+https://github.com/rust-lang/crates.io-index)",
 "stdweb 0.4.14 (registry+https://github.com/rust-lang/crates.io-index)",
 "stdweb-internal-runtime 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
@ -2080,7 +2083,17 @@ name = "pulldown-cmark"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
+[[package]]
+name = "pulldown-cmark"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "memchr 2.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "unicase 2.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

 [[package]]
@ -2436,7 +2449,7 @@ dependencies = [
 [[package]]
 name = "rocket_csrf"
 version = "0.1.0"
-source = "git+https://github.com/fdb-hiroshima/rocket_csrf?rev=4a72ea2ec716cb0b26188fb00bccf2ef7d1e031c#4a72ea2ec716cb0b26188fb00bccf2ef7d1e031c"
+source = "git+https://github.com/Plume-org/rocket_csrf?rev=89ecb380266234f858c651354216bf5bf3cc09b2#89ecb380266234f858c651354216bf5bf3cc09b2"
 dependencies = [
 "data-encoding 2.1.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "ring 0.13.5 (registry+https://github.com/rust-lang/crates.io-index)",
@ -2684,7 +2697,7 @@ name = "shrinkwraprs"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
+ "bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 "itertools 0.7.11 (registry+https://github.com/rust-lang/crates.io-index)",
 "quote 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
 "syn 0.12.15 (registry+https://github.com/rust-lang/crates.io-index)",
@ -3534,7 +3547,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 "checksum bit-set 0.5.1 (registry+https://github.com/rust-lang/crates.io-index)" = "e84c238982c4b1e1ee668d136c510c67a13465279c0cb367ea6baf6310620a80"
 "checksum bit-vec 0.5.1 (registry+https://github.com/rust-lang/crates.io-index)" = "f59bbe95d4e52a6398ec21238d31577f2b28a9d86807f06ca59d191d8440d0bb"
 "checksum bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "aad18937a628ec6abcd26d1489012cc0e18c21798210f491af69ded9b881106d"
-"checksum bitflags 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)" = "228047a76f468627ca71776ecdebd732a3423081fcf5125585bcd7c49886ce12"
+"checksum bitflags 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "3d155346769a6855b86399e9bc3814ab343cd3d62c7e985113d46a0ec3c281fd"
 "checksum bitpacking 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)" = "667f3f518358b2cf64891b46a6dd2eb794e9f80d39f7eb5974f4784bcda9a61b"
 "checksum block-cipher-trait 0.6.2 (registry+https://github.com/rust-lang/crates.io-index)" = "1c924d49bd09e7c06003acda26cd9742e796e34282ec6c1189404dee0c1f4774"
 "checksum blowfish 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "6aeb80d00f2688459b8542068abd974cfb101e7a82182414a99b5026c0d85cc3"
@ -3728,6 +3741,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 "checksum proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)" = "cf3d2011ab5c909338f7887f4fc896d35932e29146c12c8d01da6b22a80ba759"
 "checksum publicsuffix 1.5.2 (registry+https://github.com/rust-lang/crates.io-index)" = "5afecba86dcf1e4fd610246f89899d1924fe12e1e89f555eb7c7f710f3c5ad1d"
 "checksum pulldown-cmark 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "eef52fac62d0ea7b9b4dc7da092aa64ea7ec3d90af6679422d3d7e0e14b6ee15"
+"checksum pulldown-cmark 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)" = "77043da1282374688ee212dc44b3f37ff929431de9c9adc3053bd3cee5630357"
 "checksum quick-error 1.2.2 (registry+https://github.com/rust-lang/crates.io-index)" = "9274b940887ce9addde99c4eee6b5c44cc494b182b97e73dc8ffdcb3397fd3f0"
 "checksum quick-xml 0.12.4 (registry+https://github.com/rust-lang/crates.io-index)" = "1d8065cbb01701c11cc195cde85cbf39d1c6a80705b67a157ebb3042e0e5777f"
 "checksum quote 0.3.15 (registry+https://github.com/rust-lang/crates.io-index)" = "7a6e920b65c65f10b2ae65c831a81a073a89edd28c7cce89475bff467ab4167a"
@ -3763,7 +3777,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 "checksum rocket 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)" = "55b83fcf219c8b4980220231d5dd9eae167bdc63449fdab0a04b6c8b8cd361a8"
 "checksum rocket_codegen 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)" = "5549dc59a729fbd0e6f5d5de33ba136340228871633485e4946664d36289ffd7"
 "checksum rocket_contrib 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)" = "5af691b5f5c06c3a30213217696681d3d3bdc2f10428fa3ce6bbaeab156b6409"
-"checksum rocket_csrf 0.1.0 (git+https://github.com/fdb-hiroshima/rocket_csrf?rev=4a72ea2ec716cb0b26188fb00bccf2ef7d1e031c)" = "<none>"
+"checksum rocket_csrf 0.1.0 (git+https://github.com/Plume-org/rocket_csrf?rev=89ecb380266234f858c651354216bf5bf3cc09b2)" = "<none>"
 "checksum rocket_http 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)" = "abec045da00893bd4eef6084307a4bec0742278a7635a6a8b943da023202a5f7"
 "checksum rocket_i18n 0.4.0 (git+https://github.com/Plume-org/rocket_i18n?rev=e922afa7c366038b3433278c03b1456b346074f2)" = "<none>"
 "checksum rpassword 3.0.2 (registry+https://github.com/rust-lang/crates.io-index)" = "c34fa7bcae7fca3c8471e8417088bbc3ad9af8066b0ecf4f3c0d98a0d772716e"
--- a/Cargo.toml
+++ b/Cargo.toml
@ -64,8 +64,8 @@ path = "plume-common"
 path = "plume-models"

 [dependencies.rocket_csrf]
-git = "https://github.com/fdb-hiroshima/rocket_csrf"
-rev = "4a72ea2ec716cb0b26188fb00bccf2ef7d1e031c"
+git = "https://github.com/Plume-org/rocket_csrf"
+rev = "89ecb380266234f858c651354216bf5bf3cc09b2"

 [build-dependencies]
 ructe = "0.6.2"
--- a/migrations/postgres/2019-08-03-131154_default_app/down.sql
+++ b/migrations/postgres/2019-08-03-131154_default_app/down.sql
@ -0,0 +1,2 @@
+-- This file should undo anything in `up.sql`
+DELETE FROM apps WHERE name = 'Plume web interface';
--- a/migrations/postgres/2019-08-03-131154_default_app/up.sql
+++ b/migrations/postgres/2019-08-03-131154_default_app/up.sql
@ -0,0 +1,35 @@
+-- Your SQL goes here
+--#!|conn: &Connection, path: &Path| {
+--#!    use plume_common::utils::random_hex;
+--#!
+--#!	let client_id = random_hex();
+--#!    let client_secret = random_hex();
+--#!    let app = crate::apps::App::insert(
+--#!        &*conn,
+--#!        crate::apps::NewApp {
+--#!            name: "Plume web interface".into(),
+--#!            client_id,
+--#!            client_secret,
+--#!            redirect_uri: None,
+--#!            website: Some("https://joinplu.me".into()),
+--#!        },
+--#!    ).unwrap();
+--#!
+--#!    for i in 0..=(crate::users::User::count_local(conn).unwrap() as i32 / 20) {
+--#!		if let Ok(page) = crate::users::User::get_local_page(conn, (i * 20, (i + 1) * 20)) {
+--#!			for user in page {
+--#!				crate::api_tokens::ApiToken::insert(
+--#!			        conn,
+--#!			        crate::api_tokens::NewApiToken {
+--#!			            app_id: app.id,
+--#!			            user_id: user.id,
+--#!			            value: random_hex(),
+--#!			            scopes: "read+write".into(),
+--#!			        },
+--#!			    ).unwrap();
+--#!			}
+--#!		}
+--#!	}
+--#!
+--#!	Ok(())
+--#!}
--- a/migrations/sqlite/2019-08-03-210305_default_app/down.sql
+++ b/migrations/sqlite/2019-08-03-210305_default_app/down.sql
@ -0,0 +1,2 @@
+-- This file should undo anything in `up.sql`
+DELETE FROM apps WHERE name = 'Plume web interface';
--- a/migrations/sqlite/2019-08-03-210305_default_app/up.sql
+++ b/migrations/sqlite/2019-08-03-210305_default_app/up.sql
@ -0,0 +1,35 @@
+-- Your SQL goes here
+--#!|conn: &Connection, path: &Path| {
+--#!    use plume_common::utils::random_hex;
+--#!
+--#!	let client_id = random_hex();
+--#!    let client_secret = random_hex();
+--#!    let app = crate::apps::App::insert(
+--#!        &*conn,
+--#!        crate::apps::NewApp {
+--#!            name: "Plume web interface".into(),
+--#!            client_id,
+--#!            client_secret,
+--#!            redirect_uri: None,
+--#!            website: Some("https://joinplu.me".into()),
+--#!        },
+--#!    ).unwrap();
+--#!
+--#!    for i in 0..=(crate::users::User::count_local(conn).unwrap() as i32 / 20) {
+--#!		if let Ok(page) = crate::users::User::get_local_page(conn, (i * 20, (i + 1) * 20)) {
+--#!			for user in page {
+--#!				crate::api_tokens::ApiToken::insert(
+--#!			        conn,
+--#!			        crate::api_tokens::NewApiToken {
+--#!			            app_id: app.id,
+--#!			            user_id: user.id,
+--#!			            value: random_hex(),
+--#!			            scopes: "read+write".into(),
+--#!			        },
+--#!			    ).unwrap();
+--#!			}
+--#!		}
+--#!	}
+--#!
+--#!	Ok(())
+--#!}
--- a/plume-api/src/posts.rs
+++ b/plume-api/src/posts.rs
@ -28,4 +28,5 @@ pub struct PostData {
    pub license: String,
    pub tags: Vec<String>,
    pub cover_id: Option<i32>,
+    pub url: String,
 }
--- a/plume-front/Cargo.toml
+++ b/plume-front/Cargo.toml
@ -10,3 +10,9 @@ gettext = { git = "https://github.com/Plume-org/gettext/", rev = "294c54d74c699f
 gettext-macros = { git = "https://github.com/Plume-org/gettext-macros/", rev = "a7c605f7edd6bfbfbfe7778026bfefd88d82db10" }
 gettext-utils = { git = "https://github.com/Plume-org/gettext-macros/", rev = "a7c605f7edd6bfbfbfe7778026bfefd88d82db10" }
 lazy_static = "1.3"
+plume-api = { path = "../plume-api" }
+serde_json = "1.0"
+
+[dependencies.pulldown-cmark]
+default-features = false
+version = "0.5"
--- a/plume-front/src/editor.rs
+++ b/plume-front/src/editor.rs
@ -1,32 +1,212 @@
+use pulldown_cmark::{Event, Options, Parser, Tag};
 use stdweb::{
    unstable::{TryFrom, TryInto},
    web::{event::*, html_element::*, *},
 };
 use CATALOG;

-macro_rules! mv {
-    ( $( $var:ident ),* => $exp:expr ) => {
-        {
-            $( let $var = $var.clone(); )*
-            $exp
+fn from_md(md: &str) {
+    let md_parser = Parser::new_ext(md, Options::all());
+    md_parser.fold(
+        document().get_element_by_id("editor-main").unwrap(),
+        |last_elt, event| {
+            match event {
+                Event::Start(tag) => {
+                    let new = match tag {
+                        Tag::Paragraph => document().create_element("p").unwrap(),
+                        Tag::Rule => document().create_element("hr").unwrap(),
+                        Tag::Header(level) => {
+                            document().create_element(&format!("h{}", level)).unwrap()
                        }
+                        Tag::BlockQuote => document().create_element("blockquote").unwrap(),
+                        Tag::CodeBlock(code) => {
+                            let pre = document().create_element("pre").unwrap();
+                            let code_elt = document().create_element("code").unwrap();
+                            code_elt.append_child(&document().create_text_node(&code));
+                            pre.append_child(&code_elt);
+                            pre
+                        }
+                        Tag::List(None) => document().create_element("ul").unwrap(),
+                        Tag::List(Some(_start_index)) => document().create_element("ol").unwrap(), // TODO: handle start_index
+                        Tag::Item => document().create_element("li").unwrap(),
+                        Tag::FootnoteDefinition(def) => {
+                            let note = document().create_element("div").unwrap();
+                            note.class_list().add("footnote");
+                            note.append_child(&document().create_text_node(&def));
+                            note
+                        }
+                        Tag::HtmlBlock => document().create_element("div").unwrap(),
+                        Tag::Table(_alignements) => document().create_element("table").unwrap(), // TODO: handle alignements
+                        Tag::TableHead => document().create_element("th").unwrap(),
+                        Tag::TableRow => document().create_element("tr").unwrap(),
+                        Tag::TableCell => document().create_element("td").unwrap(),
+                        Tag::Emphasis => document().create_element("em").unwrap(),
+                        Tag::Strong => document().create_element("strong").unwrap(),
+                        Tag::Strikethrough => document().create_element("s").unwrap(),
+                        Tag::Link(_link_type, url, text) => {
+                            let url: &str = &url;
+                            let text: &str = &text;
+                            let link = document().create_element("a").unwrap();
+                            js! {
+                                @{&link}.href = @{url};
+                                @{&link}.title = @{text};
+                            };
+                            link
+                        }
+                        Tag::Image(_link_type, url, text) => {
+                            let url: &str = &url;
+                            let text: &str = &text;
+                            let img = document().create_element("img").unwrap();
+                            js! {
+                                @{&img}.src = @{url};
+                                @{&img}.title = @{text};
+                                @{&img}.alt = @{text};
+                            };
+                            img
+                        }
+                    };
+                    last_elt.append_child(&new);
+                    new
+                }
+                Event::End(_) => last_elt.parent_element().unwrap(),
+                Event::Text(text) => {
+                    let node = document().create_text_node(&text);
+                    last_elt.append_child(&node);
+                    last_elt
+                }
+                Event::Code(code) => {
+                    let elt = document().create_element("code").unwrap();
+                    let content = document().create_text_node(&code);
+                    elt.append_child(&content);
+                    last_elt.append_child(&elt);
+                    last_elt
+                }
+                Event::Html(html) => {
+                    // TODO: sanitize it?
+                    last_elt.set_attribute("innerHtml", &html);
+                    last_elt
+                }
+                Event::InlineHtml(html) => {
+                    let elt = document().create_element("span").unwrap();
+                    elt.set_attribute("innerHtml", &html);
+                    last_elt.append_child(&elt);
+                    last_elt
+                }
+                Event::FootnoteReference(reference) => {
+                    last_elt // TODO
+                }
+                Event::SoftBreak => {
+                    last_elt.append_child(&document().create_element("br").unwrap());
+                    last_elt
+                }
+                Event::HardBreak => {
+                    last_elt // TODO
+                }
+                Event::TaskListMarker(done) => {
+                    last_elt // TODO
+                }
+            }
+        },
+    );
+
+    MutationObserver::new(|muts, _obs| {
+        for m in muts {
+            console!(log, "mut!!");
+        }
+    })
+    .observe(
+        &document().get_element_by_id("editor-main").unwrap(),
+        MutationObserverInit {
+            child_list: true,
+            attributes: true,
+            character_data: false,
+            subtree: true,
+            attribute_old_value: true,
+            character_data_old_value: false,
+            attribute_filter: None,
+        },
+    );
+}
+
+fn to_md() -> String {
+    let root = document().get_element_by_id("editor-main").unwrap();
+    fold_children(&root).join("")
+}
+
+fn fold_children(elt: &Element) -> Vec<String> {
+    elt.child_nodes().iter().fold(vec![], |mut blocks, node| {
+        blocks.push(html_to_md(&node));
+        blocks
+    })
+}
+
+fn html_to_md(node: &Node) -> String {
+    console!(log, node);
+    if let Ok(elt) = Element::try_from(node.clone()) {
+        console!(log, elt.node_name().to_lowercase());
+        match elt.node_name().to_lowercase().as_ref() {
+            "hr" => "---".into(),
+            "h1" => format!("# {}\n\n", fold_children(&elt).join("")),
+            "h2" => format!("## {}\n\n", fold_children(&elt).join("")),
+            "h3" => format!("### {}\n\n", fold_children(&elt).join("")),
+            "h4" => format!("#### {}\n\n", fold_children(&elt).join("")),
+            "h5" => format!("##### {}\n\n", fold_children(&elt).join("")),
+            "h6" => format!("###### {}\n\n", fold_children(&elt).join("")),
+            "blockquote" => format!("> {}\n\n", fold_children(&elt).join("> ")),
+            "pre" => format!("```\n{}\n```\n\n", node.text_content().unwrap_or_default()),
+            "li" => match elt
+                .parent_element()
+                .unwrap()
+                .node_name()
+                .to_lowercase()
+                .as_ref()
+            {
+                "ol" => format!(
+                    "{}. {}\n",
+                    elt.parent_element()
+                        .unwrap()
+                        .child_nodes()
+                        .iter()
+                        .position(|n| Element::try_from(n).unwrap() == elt)
+                        .unwrap_or_default(),
+                    fold_children(&elt).join(""),
+                ),
+                _ => format!("- {}\n", fold_children(&elt).join("")),
+            },
+            "em" => format!("_{}_", fold_children(&elt).join("")),
+            "strong" => format!("**{}**", fold_children(&elt).join("")),
+            "s" => format!("~~{}~~", fold_children(&elt).join("")),
+            "a" => format!(
+                "[{}]({})",
+                fold_children(&elt).join(""),
+                String::try_from(js! { return @{&elt}.href }).unwrap()
+            ),
+            "img" => format!(
+                "![{}]({})",
+                String::try_from(js! { return @{&elt}.alt }).unwrap(),
+                String::try_from(js! { return @{&elt}.src }).unwrap()
+            ),
+            other => {
+                console!(log, "Warning: unhandled element:", other);
+                String::new()
+            } // TODO: refs, tables, raw html
+        }
+    } else {
+        node.text_content().unwrap_or_default()
    }
 }

 fn get_elt_value(id: &'static str) -> String {
    let elt = document().get_element_by_id(id).unwrap();
    let inp: Result<InputElement, _> = elt.clone().try_into();
+    let select: Result<SelectElement, _> = elt.clone().try_into();
    let textarea: Result<TextAreaElement, _> = elt.try_into();
-    inp.map(|i| i.raw_value())
-        .unwrap_or_else(|_| textarea.unwrap().value())
-}
-
-fn set_value<S: AsRef<str>>(id: &'static str, val: S) {
-    let elt = document().get_element_by_id(id).unwrap();
-    let inp: Result<InputElement, _> = elt.clone().try_into();
-    let textarea: Result<TextAreaElement, _> = elt.try_into();
-    inp.map(|i| i.set_raw_value(val.as_ref()))
-        .unwrap_or_else(|_| textarea.unwrap().set_value(val.as_ref()))
+    let res = inp.map(|i| i.raw_value()).unwrap_or_else(|_| {
+        textarea
+            .map(|t| t.value())
+            .unwrap_or_else(|_| select.unwrap().value().unwrap_or_default())
+    });
+    res
 }

 fn no_return(evt: KeyDownEvent) {
@ -63,33 +243,7 @@ impl From<stdweb::private::ConversionError> for EditorError {
    }
 }

-fn init_widget(
-    parent: &Element,
-    tag: &'static str,
-    placeholder_text: String,
-    content: String,
-    disable_return: bool,
-) -> Result<HtmlElement, EditorError> {
-    let widget = placeholder(make_editable(tag).try_into()?, &placeholder_text);
-    if !content.is_empty() {
-        widget.dataset().insert("edited", "true")?;
-    }
-    widget.append_child(&document().create_text_node(&content));
-    if disable_return {
-        widget.add_event_listener(no_return);
-    }
-
-    parent.append_child(&widget);
-    // We need to do that to make sure the placeholder is correctly rendered
-    widget.focus();
-    widget.blur();
-
-    filter_paste(&widget);
-
-    Ok(widget)
-}
-
-fn filter_paste(elt: &HtmlElement) {
+fn filter_paste(elt: &Element) {
    // Only insert text when pasting something
    js! {
        @{&elt}.addEventListener("paste", function (evt) {
@ -127,64 +281,69 @@ pub fn init() -> Result<(), EditorError> {

 fn init_editor() -> Result<(), EditorError> {
    if let Some(ed) = document().get_element_by_id("plume-editor") {
+        document().body()?.set_attribute("id", "editor")?;
+
+        let aside = document().get_element_by_id("plume-editor-aside")?;
+
        // Show the editor
-        js! { @{&ed}.style.display = "block"; };
+        js! {
+            @{&ed}.style.display = "grid";
+            @{&aside}.style.display = "block";
+        };
        // And hide the HTML-only fallback
        let old_ed = document().get_element_by_id("plume-fallback-editor")?;
-        let old_title = document().get_element_by_id("plume-editor-title")?;
        js! {
            @{&old_ed}.style.display = "none";
-            @{&old_title}.style.display = "none";
        };

-        // Get content from the old editor (when editing an article for instance)
-        let title_val = get_elt_value("title");
-        let subtitle_val = get_elt_value("subtitle");
-        let content_val = get_elt_value("editor-content");
        // And pre-fill the new editor with this values
-        let title = init_widget(&ed, "h1", i18n!(CATALOG, "Title"), title_val, true)?;
-        let subtitle = init_widget(
-            &ed,
-            "h2",
-            i18n!(CATALOG, "Subtitle, or summary"),
-            subtitle_val,
-            true,
-        )?;
-        let content = init_widget(
-            &ed,
-            "article",
-            i18n!(CATALOG, "Write your article here. Markdown is supported."),
-            content_val.clone(),
-            false,
-        )?;
-        js! { @{&content}.innerHTML = @{content_val}; };
+        let title = document().get_element_by_id("editor-title")?;
+        let subtitle = document().get_element_by_id("editor-subtitle")?;
+        let source = get_elt_value("editor-content");

-        // character counter
-        content.add_event_listener(mv!(content => move |_: KeyDownEvent| {
-            window().set_timeout(mv!(content => move || {
-                if let Some(e) = document().get_element_by_id("char-count") {
-                    let count = chars_left("#plume-fallback-editor", &content).unwrap_or_default();
-                    let text = i18n!(CATALOG, "Around {} characters left"; count);
-                    HtmlElement::try_from(e).map(|e| {
-                        js!{@{e}.innerText = @{text}};
-                    }).ok();
+        setup_toolbar();
+        from_md(&source);
+
+        title.add_event_listener(no_return);
+        subtitle.add_event_listener(no_return);
+
+        filter_paste(&title);
+        filter_paste(&subtitle);
+        // TODO: filter_paste(&content);
+
+        document()
+            .get_element_by_id("publish")?
+            .add_event_listener(|_: ClickEvent| {
+                let publish_page = document().get_element_by_id("publish-page").unwrap();
+                let options_page = document().get_element_by_id("options-page").unwrap();
+                js! {
+                    @{&options_page}.style.display = "none";
+                    @{&publish_page}.style.display = "flex";
                };
-            }), 0);
-        }));
+            });

-        document().get_element_by_id("publish")?.add_event_listener(
-            mv!(title, subtitle, content, old_ed => move |_: ClickEvent| {
-                let popup = document().get_element_by_id("publish-popup").or_else(||
-                        init_popup(&title, &subtitle, &content, &old_ed).ok()
-                    ).unwrap();
-                let bg = document().get_element_by_id("popup-bg").or_else(||
-                        init_popup_bg().ok()
-                    ).unwrap();
+        document()
+            .get_element_by_id("cancel-publish")?
+            .add_event_listener(|_: ClickEvent| {
+                let publish_page = document().get_element_by_id("publish-page").unwrap();
+                let options_page = document().get_element_by_id("options-page").unwrap();
+                js! {
+                    @{&publish_page}.style.display = "none";
+                    @{&options_page}.style.display = "flex";
+                };
+            });

-                popup.class_list().add("show").unwrap();
-                bg.class_list().add("show").unwrap();
-            }),
-        );
+        document()
+            .get_element_by_id("confirm-publish")?
+            .add_event_listener(|_: ClickEvent| {
+                save(false);
+            });
+
+        document()
+            .get_element_by_id("save-draft")?
+            .add_event_listener(|_: ClickEvent| {
+                save(true);
+            });

        show_errors();
        setup_close_button();
@ -192,6 +351,176 @@ fn init_editor() -> Result<(), EditorError> {
    Ok(())
 }

+fn select_style(style: &str) {
+    if let Some(select) = document()
+        .get_element_by_id("toolbar-style")
+        .and_then(|e| SelectElement::try_from(e).ok())
+    {
+        select.set_value(Some(style));
+    }
+}
+
+fn setup_toolbar() {
+    let toolbar = document().get_element_by_id("editor-toolbar").unwrap();
+
+    // List of styles (headings, quote, code, etc)
+    let style_select =
+        SelectElement::try_from(document().create_element("select").unwrap()).unwrap();
+    let options = vec![
+        ("p", i18n!(CATALOG, "Paragraph")),
+        ("ul", i18n!(CATALOG, "List")),
+        ("ol", i18n!(CATALOG, "Ordered list")),
+        ("h1", i18n!(CATALOG, "Heading 1")),
+        ("h2", i18n!(CATALOG, "Heading 2")),
+        ("h3", i18n!(CATALOG, "Heading 3")),
+        ("h4", i18n!(CATALOG, "Heading 4")),
+        ("h5", i18n!(CATALOG, "Heading 5")),
+        ("h6", i18n!(CATALOG, "Heading 6")),
+        ("blockquote", i18n!(CATALOG, "Quote")),
+        ("pre", i18n!(CATALOG, "Code")),
+    ];
+    for (tag, name) in options.clone() {
+        let opt = document().create_element("option").unwrap();
+        opt.set_attribute("value", tag);
+        opt.append_child(&document().create_text_node(&name));
+        style_select.append_child(&opt)
+    }
+    style_select.set_attribute("id", "toolbar-style");
+
+    let options_clone = options.clone();
+    document().add_event_listener(move |_: SelectionChangeEvent| {
+        let block = std::iter::successors(
+            window().get_selection().and_then(|s| s.anchor_node()),
+            |node| {
+                let t = node.node_name().to_lowercase();
+                if options_clone.iter().any(|(tag, _)| *tag == &t) {
+                    None
+                } else {
+                    node.parent_node()
+                }
+            },
+        )
+        .last();
+
+        if let Some(b) = block {
+            select_style(&b.node_name().to_lowercase());
+        }
+    });
+
+    style_select.add_event_listener(move |_: ChangeEvent| {
+        let block = std::iter::successors(
+            window().get_selection().and_then(|s| s.anchor_node()),
+            |node| {
+                let t = node.node_name().to_lowercase();
+                if options.iter().any(|(tag, _)| *tag == &t) {
+                    None
+                } else {
+                    node.parent_node()
+                }
+            },
+        )
+        .last();
+
+        if let Some(block) = block {
+            if let Some(select) = document()
+                .get_element_by_id("toolbar-style")
+                .and_then(|e| SelectElement::try_from(e).ok())
+            {
+                let tag = select.value();
+
+                let new = document().create_element(&tag.unwrap_or_default()).unwrap();
+                for ch in block.child_nodes() {
+                    block.remove_child(&ch);
+                    new.append_child(&ch);
+                }
+
+                block.parent_node().unwrap().replace_child(&new, &block);
+            }
+        }
+    });
+
+    // Bold
+
+    // Italics
+
+    // Insert an image
+
+    toolbar.append_child(&style_select);
+}
+
+fn save(is_draft: bool) {
+    let req = XmlHttpRequest::new();
+    if bool::try_from(js! { return window.editing }).unwrap_or(false) {
+        req.open(
+            "PUT",
+            &format!(
+                "/api/v1/posts/{}",
+                i32::try_from(js! { return window.post_id }).unwrap()
+            ),
+        )
+        .unwrap();
+    } else {
+        req.open("POST", "/api/v1/posts").unwrap();
+    }
+    req.set_request_header("Accept", "application/json")
+        .unwrap();
+    req.set_request_header("Content-Type", "application/json")
+        .unwrap();
+    req.set_request_header(
+        "Authorization",
+        &format!(
+            "Bearer {}",
+            String::try_from(js! { return window.api_token }).unwrap()
+        ),
+    )
+    .unwrap();
+    let req_clone = req.clone();
+    req.add_event_listener(move |_: ProgressLoadEvent| {
+        if let Ok(Some(res)) = req_clone.response_text() {
+            serde_json::from_str(&res)
+                .map(|res: plume_api::posts::PostData| {
+                    let url = res.url;
+                    js! {
+                        window.location.href = @{url};
+                    };
+                })
+                .map_err(|_| {
+                    let json: serde_json::Value = serde_json::from_str(&res).unwrap();
+                    window().alert(&format!(
+                        "Error: {}",
+                        json["error"].as_str().unwrap_or_default()
+                    ));
+                })
+                .ok();
+        }
+    });
+    console!(log, to_md());
+    let data = plume_api::posts::NewPostData {
+        title: HtmlElement::try_from(document().get_element_by_id("editor-title").unwrap())
+            .unwrap()
+            .inner_text(),
+        subtitle: document()
+            .get_element_by_id("editor-subtitle")
+            .map(|s| HtmlElement::try_from(s).unwrap().inner_text()),
+        source: to_md(),
+        author: String::new(), // it is ignored anyway (TODO: remove it ??)
+        blog_id: i32::try_from(js! { return window.blog_id }).ok(),
+        published: Some(!is_draft),
+        creation_date: None,
+        license: Some(get_elt_value("license")),
+        tags: Some(
+            get_elt_value("tags")
+                .split(',')
+                .map(|t| t.trim().to_string())
+                .filter(|t| !t.is_empty())
+                .collect(),
+        ),
+        cover_id: get_elt_value("cover").parse().ok(),
+    };
+    let json = serde_json::to_string(&data).unwrap();
+    req.send_with_string(&json).unwrap();
+}
+
 fn setup_close_button() {
    if let Some(button) = document().get_element_by_id("close-editor") {
        button.add_event_listener(|_: ClickEvent| {
@ -223,200 +552,3 @@ fn show_errors() {
            .unwrap();
    }
 }
-
-fn init_popup(
-    title: &HtmlElement,
-    subtitle: &HtmlElement,
-    content: &HtmlElement,
-    old_ed: &Element,
-) -> Result<Element, EditorError> {
-    let popup = document().create_element("div")?;
-    popup.class_list().add("popup")?;
-    popup.set_attribute("id", "publish-popup")?;
-
-    let tags = get_elt_value("tags")
-        .split(',')
-        .map(str::trim)
-        .map(str::to_string)
-        .collect::<Vec<_>>();
-    let license = get_elt_value("license");
-    make_input(&i18n!(CATALOG, "Tags"), "popup-tags", &popup).set_raw_value(&tags.join(", "));
-    make_input(&i18n!(CATALOG, "License"), "popup-license", &popup).set_raw_value(&license);
-
-    let cover_label = document().create_element("label")?;
-    cover_label.append_child(&document().create_text_node(&i18n!(CATALOG, "Cover")));
-    cover_label.set_attribute("for", "cover")?;
-    let cover = document().get_element_by_id("cover")?;
-    cover.parent_element()?.remove_child(&cover).ok();
-    popup.append_child(&cover_label);
-    popup.append_child(&cover);
-
-    if let Some(draft_checkbox) = document().get_element_by_id("draft") {
-        let draft_label = document().create_element("label")?;
-        draft_label.set_attribute("for", "popup-draft")?;
-
-        let draft = document().create_element("input").unwrap();
-        js! {
-            @{&draft}.id = "popup-draft";
-            @{&draft}.name = "popup-draft";
-            @{&draft}.type = "checkbox";
-            @{&draft}.checked = @{&draft_checkbox}.checked;
-        };
-
-        draft_label.append_child(&draft);
-        draft_label.append_child(&document().create_text_node(&i18n!(CATALOG, "This is a draft")));
-        popup.append_child(&draft_label);
-    }
-
-    let button = document().create_element("input")?;
-    js! {
-        @{&button}.type = "submit";
-        @{&button}.value = @{i18n!(CATALOG, "Publish")};
-    };
-    button.append_child(&document().create_text_node(&i18n!(CATALOG, "Publish")));
-    button.add_event_listener(
-        mv!(title, subtitle, content, old_ed => move |_: ClickEvent| {
-            title.focus(); // Remove the placeholder before publishing
-            set_value("title", title.inner_text());
-            subtitle.focus();
-            set_value("subtitle", subtitle.inner_text());
-            content.focus();
-            set_value("editor-content", content.child_nodes().iter().fold(String::new(), |md, ch| {
-                let to_append = match ch.node_type() {
-                    NodeType::Element => {
-                        if js!{ return @{&ch}.tagName; } == "DIV" {
-                            (js!{ return @{&ch}.innerHTML; }).try_into().unwrap_or_default()
-                        } else {
-                            (js!{ return @{&ch}.outerHTML; }).try_into().unwrap_or_default()
-                        }
-                    },
-                    NodeType::Text => ch.node_value().unwrap_or_default(),
-                    _ => unreachable!(),
-                };
-                format!("{}\n\n{}", md, to_append)
-            }));
-            set_value("tags", get_elt_value("popup-tags"));
-            if let Some(draft) = document().get_element_by_id("popup-draft") {
-                js!{
-                    document.getElementById("draft").checked = @{draft}.checked;
-                };
-            }
-            let cover = document().get_element_by_id("cover").unwrap();
-            cover.parent_element().unwrap().remove_child(&cover).ok();
-            old_ed.append_child(&cover);
-            set_value("license", get_elt_value("popup-license"));
-            js! {
-                @{&old_ed}.submit();
-            };
-        }),
-    );
-    popup.append_child(&button);
-
-    document().body()?.append_child(&popup);
-    Ok(popup)
-}
-
-fn init_popup_bg() -> Result<Element, EditorError> {
-    let bg = document().create_element("div")?;
-    bg.class_list().add("popup-bg")?;
-    bg.set_attribute("id", "popup-bg")?;
-
-    document().body()?.append_child(&bg);
-    bg.add_event_listener(|_: ClickEvent| close_popup());
-    Ok(bg)
-}
-
-fn chars_left(selector: &str, content: &HtmlElement) -> Option<i32> {
-    match document().query_selector(selector) {
-        Ok(Some(form)) => HtmlElement::try_from(form).ok().and_then(|form| {
-            if let Some(len) = form
-                .get_attribute("content-size")
-                .and_then(|s| s.parse::<i32>().ok())
-            {
-                (js! {
-                    let x = encodeURIComponent(@{content}.innerHTML)
-                        .replace(/%20/g, "+")
-                        .replace(/%0A/g, "%0D%0A")
-                        .replace(new RegExp("[!'*()]", "g"), "XXX") // replace exceptions of encodeURIComponent with placeholder
-                        .length + 2;
-                    console.log(x);
-                    return x;
-                })
-                .try_into()
-                .map(|c: i32| len - c)
-                .ok()
-            } else {
-                None
-            }
-        }),
-        _ => None,
-    }
-}
-
-fn close_popup() {
-    let hide = |x: Element| x.class_list().remove("show");
-    document().get_element_by_id("publish-popup").map(hide);
-    document().get_element_by_id("popup-bg").map(hide);
-}
-
-fn make_input(label_text: &str, name: &'static str, form: &Element) -> InputElement {
-    let label = document().create_element("label").unwrap();
-    label.append_child(&document().create_text_node(label_text));
-    label.set_attribute("for", name).unwrap();
-
-    let inp: InputElement = document()
-        .create_element("input")
-        .unwrap()
-        .try_into()
-        .unwrap();
-    inp.set_attribute("name", name).unwrap();
-    inp.set_attribute("id", name).unwrap();
-
-    form.append_child(&label);
-    form.append_child(&inp);
-    inp
-}
-
-fn make_editable(tag: &'static str) -> Element {
-    let elt = document()
-        .create_element(tag)
-        .expect("Couldn't create editable element");
-    elt.set_attribute("contenteditable", "true")
-        .expect("Couldn't make the element editable");
-    elt
-}
-
-fn placeholder(elt: HtmlElement, text: &str) -> HtmlElement {
-    elt.dataset().insert("placeholder", text).unwrap();
-    elt.dataset().insert("edited", "false").unwrap();
-
-    elt.add_event_listener(mv!(elt => move |_: FocusEvent| {
-        if elt.dataset().get("edited").unwrap().as_str() != "true" {
-            clear_children(&elt);
-        }
-    }));
-    elt.add_event_listener(mv!(elt => move |_: BlurEvent| {
-        if elt.dataset().get("edited").unwrap().as_str() != "true" {
-            clear_children(&elt);
-
-            let ph = document().create_element("span").expect("Couldn't create placeholder");
-            ph.class_list().add("placeholder").expect("Couldn't add class");
-            ph.append_child(&document().create_text_node(&elt.dataset().get("placeholder").unwrap_or_default()));
-            elt.append_child(&ph);
-        }
-    }));
-    elt.add_event_listener(mv!(elt => move |_: KeyUpEvent| {
-        elt.dataset().insert("edited", if elt.inner_text().trim_matches('\n').is_empty() {
-            "false"
-        } else {
-            "true"
-        }).expect("Couldn't update edition state");
-    }));
-    elt
-}
-
-fn clear_children(elt: &HtmlElement) {
-    for child in elt.child_nodes() {
-        elt.remove_child(&child).unwrap();
-    }
-}
--- a/plume-front/src/main.rs
+++ b/plume-front/src/main.rs
@ -6,8 +6,10 @@ extern crate gettext;
 extern crate gettext_macros;
 #[macro_use]
 extern crate lazy_static;
+extern crate pulldown_cmark;
 #[macro_use]
 extern crate stdweb;
+extern crate serde_json;

 use stdweb::web::{event::*, *};

@ -56,6 +58,18 @@ lazy_static! {
 }

 fn main() {
+    std::panic::set_hook(Box::new(|info: &std::panic::PanicInfo| {
+        let mut msg = info.to_string();
+        msg.push_str("\n\nStack:\n\n");
+        let e = error::Error::new("Panicked");
+        let stack = js! { return @{&e}.stack; }
+            .into_string()
+            .unwrap_or_default();
+        msg.push_str(&stack);
+        msg.push_str("\n\n");
+        console!(error, msg);
+    }));
+
    menu();
    search();
    editor::init()
--- a/plume-models/src/api_tokens.rs
+++ b/plume-models/src/api_tokens.rs
@ -44,6 +44,18 @@ impl ApiToken {
    get!(api_tokens);
    insert!(api_tokens, NewApiToken);
    find_by!(api_tokens, find_by_value, value as &str);
+    find_by!(
+        api_tokens,
+        find_by_app_and_user,
+        app_id as i32,
+        user_id as i32
+    );
+
+    /// The token for Plume's front-end
+    pub fn web_token(conn: &crate::Connection, user_id: i32) -> Result<ApiToken> {
+        let app = crate::apps::App::find_by_name(conn, "Plume web interface")?;
+        Self::find_by_app_and_user(conn, app.id, user_id)
+    }

    pub fn can(&self, what: &'static str, scope: &'static str) -> bool {
        let full_scope = what.to_owned() + ":" + scope;
--- a/plume-models/src/apps.rs
+++ b/plume-models/src/apps.rs
@ -29,4 +29,5 @@ impl App {
    get!(apps);
    insert!(apps, NewApp);
    find_by!(apps, find_by_client_id, client_id as &str);
+    find_by!(apps, find_by_name, name as &str);
 }
--- a/plume-models/src/lib.rs
+++ b/plume-models/src/lib.rs
@ -64,6 +64,7 @@ pub enum Error {
    Signature,
    Unauthorized,
    Url,
+    Validation(String),
    Webfinger,
    Expired,
 }
--- a/src/api/mod.rs
+++ b/src/api/mod.rs
@ -37,6 +37,7 @@ impl<'r> Responder<'r> for ApiError {
                "error": "You are not authorized to access this resource"
            }))
            .respond_to(req),
+            Error::Validation(msg) => Json(json!({ "error": msg })).respond_to(req),
            _ => Json(json!({
                "error": "Server error"
            }))
--- a/src/api/posts.rs
+++ b/src/api/posts.rs
@ -1,6 +1,7 @@
-use chrono::NaiveDateTime;
+use chrono::{NaiveDateTime, Utc};
 use heck::{CamelCase, KebabCase};
 use rocket_contrib::json::Json;
+use std::collections::HashSet;

 use crate::api::{authorization::*, Api};
 use plume_api::posts::*;
@ -44,6 +45,7 @@ pub fn get(id: i32, auth: Option<Authorization<Read, Post>>, conn: DbConn) -> Ap
        published: post.published,
        license: post.license,
        cover_id: post.cover_id,
+        url: post.ap_url,
    }))
 }

@ -91,6 +93,7 @@ pub fn list(
                    published: p.published,
                    license: p.license,
                    cover_id: p.cover_id,
+                    url: p.ap_url,
                })
            })
            .collect(),
@ -114,6 +117,20 @@ pub fn create(
        NaiveDateTime::parse_from_str(format!("{} 00:00:00", d).as_ref(), "%Y-%m-%d %H:%M:%S").ok()
    });

+    if slug.as_str() == "new" {
+        return Err(
+            Error::Validation("Sorry, but your article can't have this title.".into()).into(),
+        );
+    }
+
+    if payload.title.is_empty() {
+        return Err(Error::Validation("You have to give your article a title.".into()).into());
+    }
+
+    if payload.source.is_empty() {
+        return Err(Error::Validation("Your article can't be empty.".into()).into());
+    }
+
    let domain = &Instance::get_local()?.public_domain;
    let (content, mentions, hashtags) = md_to_html(
        &payload.source,
@ -131,6 +148,10 @@ pub fn create(
        }
    })?;

+    if !author.is_author_in(conn, &Blog::get(conn, blog)?)? {
+        return Err(Error::Unauthorized.into());
+    }
+
    if Post::find_by_slug(conn, slug, blog).is_ok() {
        return Err(Error::InvalidValue.into());
    }
@ -166,11 +187,19 @@ pub fn create(
    )?;

    if let Some(ref tags) = payload.tags {
+        let tags = tags
+            .iter()
+            .map(|t| t.to_camel_case())
+            .filter(|t| !t.is_empty())
+            .collect::<HashSet<_>>()
+            .into_iter()
+            .filter_map(|t| Tag::build_activity(t).ok());
+
        for tag in tags {
            Tag::insert(
                conn,
                NewTag {
-                    tag: tag.to_string(),
+                    tag: tag.name_string().unwrap(),
                    is_hashtag: false,
                    post_id: post.id,
                },
@ -211,7 +240,6 @@ pub fn create(
            .into_iter()
            .map(|t| t.tag)
            .collect(),
-
        id: post.id,
        title: post.title,
        subtitle: post.subtitle,
@ -221,9 +249,132 @@ pub fn create(
        published: post.published,
        license: post.license,
        cover_id: post.cover_id,
+        url: post.ap_url,
    }))
 }

+#[put("/posts/<id>", data = "<payload>")]
+pub fn update(
+    id: i32,
+    auth: Authorization<Write, Post>,
+    payload: Json<NewPostData>,
+    rockets: PlumeRocket,
+) -> Api<PostData> {
+    let conn = &*rockets.conn;
+    let mut post = Post::get(&*conn, id)?;
+    let author = User::get(conn, auth.0.user_id)?;
+    let b = post.get_blog(&*conn)?;
+
+    let new_slug = if !post.published {
+        payload.title.to_string().to_kebab_case()
+    } else {
+        post.slug.clone()
+    };
+
+    if new_slug != post.slug && Post::find_by_slug(&*conn, &new_slug, b.id).is_ok() {
+        return Err(Error::Validation("A post with the same title already exists.".into()).into());
+    }
+
+    if !author.is_author_in(&*conn, &b)? {
+        Err(Error::Unauthorized.into())
+    } else {
+        let (content, mentions, hashtags) = md_to_html(
+            &payload.source,
+            Some(&Instance::get_local()?.public_domain),
+            false,
+            Some(Media::get_media_processor(
+                &conn,
+                b.list_authors(&conn)?.iter().collect(),
+            )),
+        );
+
+        // update publication date if when this article is no longer a draft
+        let newly_published = if !post.published && payload.published.unwrap_or(post.published) {
+            post.published = true;
+            post.creation_date = Utc::now().naive_utc();
+            true
+        } else {
+            false
+        };
+
+        post.slug = new_slug.clone();
+        post.title = payload.title.clone();
+        post.subtitle = payload.subtitle.clone().unwrap_or_default();
+        post.content = SafeString::new(&content);
+        post.source = payload.source.clone();
+        post.license = payload.license.clone().unwrap_or_default();
+        post.cover_id = payload.cover_id;
+        post.update(&*conn, &rockets.searcher)?;
+
+        if post.published {
+            post.update_mentions(
+                &conn,
+                mentions
+                    .into_iter()
+                    .filter_map(|m| Mention::build_activity(&rockets, &m).ok())
+                    .collect(),
+            )?;
+        }
+
+        let tags = payload
+            .tags
+            .clone()
+            .unwrap_or_default()
+            .iter()
+            .map(|t| t.trim().to_camel_case())
+            .filter(|t| !t.is_empty())
+            .collect::<HashSet<_>>()
+            .into_iter()
+            .filter_map(|t| Tag::build_activity(t).ok())
+            .collect::<Vec<_>>();
+        post.update_tags(&conn, tags)?;
+
+        let hashtags = hashtags
+            .into_iter()
+            .map(|h| h.to_camel_case())
+            .collect::<HashSet<_>>()
+            .into_iter()
+            .filter_map(|t| Tag::build_activity(t).ok())
+            .collect::<Vec<_>>();
+        post.update_hashtags(&conn, hashtags)?;
+
+        if post.published {
+            if newly_published {
+                let act = post.create_activity(&conn)?;
+                let dest = User::one_by_instance(&*conn)?;
+                rockets
+                    .worker
+                    .execute(move || broadcast(&author, act, dest));
+            } else {
+                let act = post.update_activity(&*conn)?;
+                let dest = User::one_by_instance(&*conn)?;
+                rockets
+                    .worker
+                    .execute(move || broadcast(&author, act, dest));
+            }
+        }
+
+        Ok(Json(PostData {
+            authors: post.get_authors(conn)?.into_iter().map(|a| a.fqn).collect(),
+            creation_date: post.creation_date.format("%Y-%m-%d").to_string(),
+            tags: Tag::for_post(conn, post.id)?
+                .into_iter()
+                .map(|t| t.tag)
+                .collect(),
+            id: post.id,
+            title: post.title,
+            subtitle: post.subtitle,
+            content: post.content.to_string(),
+            source: Some(post.source),
+            blog_id: post.blog_id,
+            published: post.published,
+            license: post.license,
+            cover_id: post.cover_id,
+            url: post.ap_url,
+        }))
+    }
+}
+
 #[delete("/posts/<id>")]
 pub fn delete(auth: Authorization<Write, Post>, rockets: PlumeRocket, id: i32) -> Api<()> {
    let author = User::get(&*rockets.conn, auth.0.user_id)?;
--- a/src/main.rs
+++ b/src/main.rs
@ -275,6 +275,7 @@ Then try to restart Plume
                api::posts::get,
                api::posts::list,
                api::posts::create,
+                api::posts::update,
                api::posts::delete,
            ],
        )
@ -299,18 +300,14 @@ Then try to restart Plume
                    (
                        "/inbox".to_owned(),
                        "/inbox".to_owned(),
-                        rocket::http::Method::Post,
+                        Some(rocket::http::Method::Post),
                    ),
                    (
                        "/@/<name>/inbox".to_owned(),
                        "/@/<name>/inbox".to_owned(),
-                        rocket::http::Method::Post,
-                    ),
-                    (
-                        "/api/<path..>".to_owned(),
-                        "/api/<path..>".to_owned(),
-                        rocket::http::Method::Post,
+                        Some(rocket::http::Method::Post),
                    ),
+                    ("/api/<path..>".to_owned(), "/api/<path..>".to_owned(), None),
                ])
                .finalize()
                .expect("main: csrf fairing creation error"),
--- a/src/routes/posts.rs
+++ b/src/routes/posts.rs
@ -13,6 +13,7 @@ use validator::{Validate, ValidationError, ValidationErrors};
 use plume_common::activity_pub::{broadcast, ActivityStream, ApRequest};
 use plume_common::utils;
 use plume_models::{
+    api_tokens::ApiToken,
    blogs::*,
    comments::{Comment, CommentTree},
    inbox::inbox,
@ -156,7 +157,8 @@ pub fn new(blog: String, cl: ContentLen, rockets: PlumeRocket) -> Result<Ructe,
        None,
        ValidationErrors::default(),
        medias,
-        cl.0
+        cl.0,
+        ApiToken::web_token(&*conn, user.id)?.value
    )))
 }

@ -210,7 +212,8 @@ pub fn edit(
        Some(post),
        ValidationErrors::default(),
        medias,
-        cl.0
+        cl.0,
+        ApiToken::web_token(&*conn, user.id)?.value
    )))
 }

@ -366,7 +369,10 @@ pub fn update(
            Some(post),
            errors.clone(),
            medias.clone(),
-            cl.0
+            cl.0,
+            ApiToken::web_token(&*conn, user.id)
+                .expect("The default API token cannot be retrieved")
+                .value
        ))
        .into()
    }
@ -550,7 +556,8 @@ pub fn create(
            None,
            errors.clone(),
            medias,
-            cl.0
+            cl.0,
+            ApiToken::web_token(&*conn, user.id)?.value
        ))
        .into())
    }
--- a/static/css/_article.scss
+++ b/static/css/_article.scss
@ -364,32 +364,89 @@ main .article-meta {
 }

 #plume-editor {
-  header {
+  margin: 0;
+  grid: 50px 1fr / 1fr auto 20%;
+  min-height: 80vh;
+
+  & > header {
    display: flex;
-    flex-direction: row-reverse;
-    background: transparent;
    align-items: center;
    justify-content: space-between;
-    button {
-      flex: 0 0 10em;
-      font-size: 1.25em;
-      margin: .5em 0em .5em 1em;
-    }
+    padding: 0px 20px;
+    border-bottom: 1px solid $purple;
+    max-height: 90px;
+    background: $background;
+
+    grid-column: 1 / 3;
+    grid-row: 1 / 1;
  }

-  & > * {
+  #edition-area {
+    margin: 0;
+    max-width: none;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  #edition-area > * {
    min-height: 1em;
    outline: none;
+    margin-left: 20%;
    margin-bottom: 0.5em;
-  }
+    padding-right: 5%;

-  .placeholder {
+    &:empty::before {
+      content: attr(data-placeholder);
+      display: none;
      color: transparentize($black, 0.6);
+      cursor: text;
    }

-  article {
-    max-width: none;
-    min-height: 80vh;
+    &:empty:not(:focus)::before {
+      display: inline;
+    }
+  }
+
+  #edition-area > h1 {
+    margin-top: 110px;
+  }
+
+  #editor-title, #editor-subtitle, #editor-main > * {
+    padding-left: 18px;
+    border-left: 2px solid transparent;
+    transition: border-left-color 0.1s ease-in;
+
+    &:hover {
+      border-left-color: transparentize($black, 0.6);
+    }
+  }
+
+  aside {
+    background: $gray;
+    margin: 0;
+    flex: 0 0 15%;
+    padding: 0 1em;
+    grid-row: 1 / 4;
+
+    & > * {
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      margin: 2em 0 .5em;
+    }
+
+    button {
+      font-size: 1.25em;
+      margin: 0;
+    }
+  }
+}
+
+body#editor {
+  footer {
+    margin-top: 0;
  }
 }

--- a/templates/posts/new.rs.html
+++ b/templates/posts/new.rs.html
@ -9,22 +9,52 @@
@use routes::posts::NewPostForm;
@use routes::*;

-@(ctx: BaseContext, title: String, blog: Blog, editing: bool, form: &NewPostForm, is_draft: bool, article: Option<Post>, errors: ValidationErrors, medias: Vec<Media>, content_len: u64)
+@(ctx: BaseContext, title: String, blog: Blog, editing: bool, form: &NewPostForm, is_draft: bool, article: Option<Post>, errors: ValidationErrors, medias: Vec<Media>, content_len: u64, api_token: String)

@:base(ctx, title.clone(), {}, {}, {
-    <h1 id="plume-editor-title" dir="auto">@title</h1>
+    <script>
+        window.blog_id = @blog.id
+        window.api_token = '@api_token'
+        @if editing {
+            window.editing = true
+            window.post_id = @article.clone().unwrap().id
+        } else {
+            window.editing = false
+        }
+    </script>
    <div id="plume-editor" style="display: none;" dir="auto">
-      <header>
-        <button id="publish" class="button">@i18n!(ctx.1, "Publish")</button>
-        <p id="char-count">@content_len</p>
+      <header id="editor-toolbar">
        <a href="#" id="close-editor">@i18n!(ctx.1, "Classic editor (any changes will be lost)")</a>
      </header>
+      <article id="edition-area">
+        <h1 contenteditable id="editor-title" data-placeholder="@i18n!(ctx.1, "Type your title")">@form.title</h1>
+        <h2 contenteditable id="editor-subtitle" data-placeholder="@i18n!(ctx.1, "Type a subtitle or a summary")">@form.subtitle</h2>
+        <article contenteditable id="editor-main" data-placeholder="@i18n!(ctx.1, "Write your article here. You can use markdown.")"></article>
+      </article>
+      <aside id="plume-editor-aside" style="display: none;">
+        <div id="options-page">
+            <button id="publish" class="button">@i18n!(ctx.1, "Publish")</button>
+
+            @input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "")
+            @input!(ctx.1, license (optional text), "License", "Leave it empty to reserve all rights", form, errors.clone(), "")
+            @:image_select(ctx, "cover", i18n!(ctx.1, "Illustration"), true, medias.clone(), form.cover)
        </div>
+        <div id="publish-page" style="display: none">
+            <a href="#" id="cancel-publish">@i18n!(ctx.1, "Cancel")</a>
+            <p>@i18n!(ctx.1, "You are about to publish this article in {}"; &blog.title)</p>
+            <button id="confirm-publish" class="button">@i18n!(ctx.1, "Confirm publication")</button>
+            <button id="save-draft" class="button secondary">@i18n!(ctx.1, "Save as draft")</button>
+        </div>
+    </aside>
+    </div>
+
    @if let Some(article) = article {
 	    <form id="plume-fallback-editor" class="new-post" method="post" action="@uri!(posts::update: blog = blog.actor_id, slug = &article.slug)" content-size="@content_len">
    } else {
 	    <form id="plume-fallback-editor" class="new-post" method="post" action="@uri!(posts::new: blog = blog.actor_id)" content-size="@content_len">
    }
+        <h1 id="plume-editor-title" dir="auto">@title</h1>
+
        @input!(ctx.1, title (text), "Title", form, errors.clone(), "required")
        @input!(ctx.1, subtitle (optional text), "Subtitle", form, errors.clone(), "")
Author	SHA1	Message	Date
Ana Gelez	39edca5edc	Add a way to change block type	2019-08-25 18:45:02 +02:00
Ana Gelez	bce806ac63	Prototype for a WYSIWYG editor We use pulldown-cmark in plume-front too now, but instead of using the provided HTML renderer, we use a custom DOM renderer, which let us use contenteditable only where we want, and which will allow us to add event listeners to provide a good contextual edition experience. Also removed the character counter, as the API limits are almost unreachable.	2019-08-08 16:33:14 +02:00
Ana Gelez	3669a0097d	Update rocket_csrf and re-enable it Thank you @fdb-hiroshima for the fix!	2019-08-04 12:37:38 +02:00
Ana Gelez	cc998e7c61	Rewrite article publication with the REST API - Add a default App and ApiToken for each user, that is used by the front-end - Add an API route to update an article (CSRF had to be disabled because of a bug in rocket_csrf) - Use AJAX to publish and edit articles in the new editor, instead of weird hacks with HTML forms	2019-08-03 23:04:25 +02:00
Ana Gelez	4142e73018	Add a sidebar for the editor - The layout now uses CSS grids - We try to generate as much HTML as possible on the server, instead of using the DOM - Placeholders are in pure CSS now! You can't publish articles anymore, but it looks nice!!	2019-08-02 23:10:05 +02:00
Ana Gelez	5d03331f0c	Sticky toolbar	2019-08-02 16:53:28 +02:00
Ana Gelez	3198f30515	Editor: Make it clearer that editable areas are editable - Add a border on the left when hovering - Make full sentences to explain where you can write	2019-08-02 15:36:54 +02:00