aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New editor (#458)

Browse Source 
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
This commit is contained in:
Baptiste Gelez
2019-03-15 16:06:10 +01:00
committed by GitHub
parent ffcbc0fde3
commit 9076dbaadc
25 changed files with 618 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/posts/new.rs.html
+11 -5
View File
@@ -11,11 +11,17 @@
@(ctx: BaseContext, title: String, blog: Blog, editing: bool, form: &NewPostForm, is_draft: bool, article: Option<Post>, errors: ValidationErrors, medias: Vec<Media>, content_len: u64)
@:base(ctx, title.clone(), {}, {}, {
<h1>@title</h1>
<h1 id="plume-editor-title">@title</h1>
<div id="plume-editor" style="display: none;">
<header>
<button id="publish" class="button">@i18n!(ctx.1, "Publish")</button>
<p id="char-count">@content_len</p>
</header>
</div>
@if let Some(article) = article {
<form id="post-form" class="new-post" method="post" action="@uri!(posts::update: blog = blog.actor_id, slug = &article.slug)" content-size="@content_len">
<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="post-form" class="new-post" method="post" action="@uri!(posts::new: blog = blog.actor_id)" content-size="@content_len">
<form id="plume-fallback-editor" class="new-post" method="post" action="@uri!(posts::new: blog = blog.actor_id)" content-size="@content_len">
}
@input!(ctx.1, title (text), "Title", form, errors.clone(), "required")
@input!(ctx.1, subtitle (optional text), "Subtitle", form, errors.clone(), "")
@@ -24,8 +30,8 @@
@format!(r#"<p class="error">{}</p>"#, errs[0].message.clone().unwrap_or(Cow::from("Unknown error")))
}
<label for="plume-editor">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
<textarea id="plume-editor" name="content" rows="20">@form.content</textarea>
<label for="editor-content">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
<textarea id="editor-content" name="content" rows="20">@Html(&form.content)</textarea>
<small id="editor-left">@content_len</small>
<p>
@i18n!(ctx.1, "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them.")