New editor (#458)

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
+55
View File
@@ -266,3 +266,58 @@ main .article-meta {
}
}
}
#plume-editor {
header {
display: flex;
flex-direction: row-reverse;
background: transparent;
align-items: center;
button {
flex: 0 0 10em;
font-size: 1.25em;
margin: .5em 0em .5em 1em;
}
}
& > * {
min-height: 1em;
outline: none;
margin-bottom: 0.5em;
}
.placeholder {
color: transparentize($black, 0.6);
}
article {
max-width: none;
min-height: 80vh;
}
}
.popup {
position: fixed;
top: 15vh;
bottom: 20vh;
left: 20vw;
right: 20vw;
background: $lightgray;
border: 1px solid $purple;
z-index: 2;
padding: 2em;
overflow-y: auto;
}
.popup:not(.show), .popup-bg:not(.show) {
display: none;
}
.popup-bg {
background: rgba(0, 0, 0, 0.1);
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}