Replace Draft with Slate

.eslintrc.js

@@ -95,6 +95,7 @@ module.exports = {
         "new-cap": ["warn"],
         "key-spacing": ["warn"],
         "prefer-const": ["warn"],
+        "arrow-parens": "off",
 
         // crashes currently: https://github.com/eslint/eslint/issues/6274
         "generator-star-spacing": "off",

package.json

@@ -59,9 +59,6 @@
     "classnames": "^2.1.2",
     "commonmark": "^0.28.1",
     "counterpart": "^0.18.0",
-    "draft-js": "^0.11.0-alpha",
-    "draft-js-export-html": "^0.6.0",
-    "draft-js-export-markdown": "^0.3.0",
     "emojione": "2.2.7",
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
@@ -86,6 +83,10 @@
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^15.6.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "slate": "^0.33.4",
+    "slate-react": "^0.12.4",
+    "slate-html-serializer": "^0.6.1",
+    "slate-md-serializer": "matrix-org/slate-md-serializer#f7c4ad3",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",

res/css/_common.scss

@@ -291,6 +291,10 @@ textarea {
     vertical-align: middle;
 }
 
+.mx_emojione_selected {
+    background-color: $accent-color;
+}
+
 ::-moz-selection {
     background-color: $accent-color;
     color: $selection-fg-color;

res/css/structures/_RoomView.scss

@@ -176,10 +176,7 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1000;
     overflow: hidden;
 
-    -webkit-transition: all .2s ease-out;
-    -moz-transition: all .2s ease-out;
-    -ms-transition: all .2s ease-out;
-    -o-transition: all .2s ease-out;
+    transition: all .2s ease-out;
 }
 
 .mx_RoomView_statusArea_expanded {

res/css/views/elements/_RichText.scss

@@ -25,6 +25,10 @@
     padding-right: 5px;
 }
 
+.mx_UserPill_selected {
+    background-color: $accent-color ! important;
+}
+
 .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
 .mx_EventTile_content .mx_AtRoomPill,
 .mx_MessageComposer_input .mx_AtRoomPill {

res/css/views/rooms/_EventTile.scss

@@ -443,6 +443,7 @@ limitations under the License.
 .mx_EventTile_content .markdown-body h2
 {
     font-size: 1.5em;
+    border-bottom: none ! important; // override GFM
 }
 
 .mx_EventTile_content .markdown-body a {

res/css/views/rooms/_MessageComposer.scss

@@ -78,12 +78,29 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     min-height: 60px;
-    justify-content: center;
+    justify-content: start;
     align-items: flex-start;
     font-size: 14px;
     margin-right: 6px;
 }
 
+.mx_MessageComposer_editor {
+    width: 100%;
+    max-height: 120px;
+    min-height: 19px;
+    overflow: auto;
+    word-break: break-word;
+}
+
+// FIXME: rather unpleasant hack to get rid of <p/> margins.
+// really we should be mixing in markdown-body from gfm.css instead
+.mx_MessageComposer_editor > :first-child {
+    margin-top: 0 ! important;
+}
+.mx_MessageComposer_editor > :last-child {
+    margin-bottom: 0 ! important;
+}
+
 @keyframes visualbell
 {
     from { background-color: #faa }
@@ -94,36 +111,14 @@ limitations under the License.
     animation: 0.2s visualbell;
 }
 
-.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
-    display: none;
-}
-
-.mx_MessageComposer_input .DraftEditor-root {
-    width: 100%;
-    flex: 1;
-    word-break: break-word;
-    max-height: 120px;
-    min-height: 21px;
-    overflow: auto;
-}
-
-.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
-    /* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */
-    padding-top: 2px;
-}
-
-.mx_MessageComposer .public-DraftStyleDefault-block {
-    overflow-x: hidden;
-}
-
 .mx_MessageComposer_input blockquote {
     color: $blockquote-fg-color;
     margin: 0 0 16px;
     padding: 0 15px;
     border-left: 4px solid $blockquote-bar-color;
 }
 
-.mx_MessageComposer_input pre.public-DraftStyleDefault-pre pre {
+.mx_MessageComposer_input pre {
     background-color: $rte-code-bg-color;
     border-radius: 3px;
     padding: 10px;

src/ComposerHistoryManager.js

@@ -15,38 +15,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ContentState, convertToRaw, convertFromRaw} from 'draft-js';
-import * as RichText from './RichText';
-import Markdown from './Markdown';
+import { Value } from 'slate';
+
 import _clamp from 'lodash/clamp';
 
-type MessageFormat = 'html' | 'markdown';
+type MessageFormat = 'rich' | 'markdown';
 
 class HistoryItem {
 
-    // Keeping message for backwards-compatibility
-    message: string;
-    rawContentState: RawDraftContentState;
-    format: MessageFormat = 'html';
+    // We store history items in their native format to ensure history is accurate
+    // and then convert them if our RTE has subsequently changed format.
+    value: Value;
+    format: MessageFormat = 'rich';
 
-    constructor(contentState: ?ContentState, format: ?MessageFormat) {
-        this.rawContentState = contentState ? convertToRaw(contentState) : null;
+    constructor(value: ?Value, format: ?MessageFormat) {
+        this.value = value;
         this.format = format;
     }
 
-    toContentState(outputFormat: MessageFormat): ContentState {
-        const contentState = convertFromRaw(this.rawContentState);
-        if (outputFormat === 'markdown') {
-            if (this.format === 'html') {
-                return ContentState.createFromText(RichText.stateToMarkdown(contentState));
-            }
-        } else {
-            if (this.format === 'markdown') {
-                return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML());
-            }
-        }
-        // history item has format === outputFormat
-        return contentState;
+    static fromJSON(obj: Object): HistoryItem {
+        return new HistoryItem(
+            Value.fromJSON(obj.value),
+            obj.format,
+        );
+    }
+
+    toJSON(): Object {
+        return {
+            value: this.value.toJSON(),
+            format: this.format,
+        };
     }
 }
 
@@ -62,23 +60,27 @@ export default class ComposerHistoryManager {
         // TODO: Performance issues?
         let item;
         for (; item = sessionStorage.getItem(`${this.prefix}[${this.currentIndex}]`); this.currentIndex++) {
-            this.history.push(
-                Object.assign(new HistoryItem(), JSON.parse(item)),
-            );
+            try {
+                this.history.push(
+                    HistoryItem.fromJSON(JSON.parse(item)),
+                );
+            } catch (e) {
+                console.warn("Throwing away unserialisable history", e);
+            }
         }
         this.lastIndex = this.currentIndex;
     }
 
-    save(contentState: ContentState, format: MessageFormat) {
-        const item = new HistoryItem(contentState, format);
+    save(value: Value, format: MessageFormat) {
+        const item = new HistoryItem(value, format);
         this.history.push(item);
         this.currentIndex = this.lastIndex + 1;
-        sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item));
+        sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item.toJSON()));
     }
 
-    getItem(offset: number, format: MessageFormat): ?ContentState {
+    getItem(offset: number): ?HistoryItem {
         this.currentIndex = _clamp(this.currentIndex + offset, 0, this.lastIndex - 1);
         const item = this.history[this.currentIndex];
-        return item ? item.toContentState(format) : null;
+        return item;
     }
 }

src/HtmlUtils.js

@@ -112,7 +112,7 @@ export function charactersToImageNode(alt, useSvg, ...unicode) {
     />;
 }
 
-
+/*
 export function processHtmlForSending(html: string): string {
     const contentDiv = document.createElement('div');
     contentDiv.innerHTML = html;
@@ -146,6 +146,7 @@ export function processHtmlForSending(html: string): string {
 
     return contentHTML;
 }
+*/
 
 /*
  * Given an untrusted HTML string, return a React node with an sanitized version
@@ -402,19 +403,22 @@ class TextHighlighter extends BaseHighlighter {
 }
 
 
-    /* turn a matrix event body into html
-     *
-     * content: 'content' of the MatrixEvent
-     *
-     * highlights: optional list of words to highlight, ordered by longest word first
-     *
-     * opts.highlightLink: optional href to add to highlighted words
-     * opts.disableBigEmoji: optional argument to disable the big emoji class.
-     * opts.stripReplyFallback: optional argument specifying the event is a reply and so fallback needs removing
-     */
+/* turn a matrix event body into html
+ *
+ * content: 'content' of the MatrixEvent
+ *
+ * highlights: optional list of words to highlight, ordered by longest word first
+ *
+ * opts.highlightLink: optional href to add to highlighted words
+ * opts.disableBigEmoji: optional argument to disable the big emoji class.
+ * opts.stripReplyFallback: optional argument specifying the event is a reply and so fallback needs removing
+ * opts.returnString: return an HTML string rather than JSX elements
+ * opts.emojiOne: optional param to do emojiOne (default true)
+ */
 export function bodyToHtml(content, highlights, opts={}) {
     const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
 
+    const doEmojiOne = opts.emojiOne === undefined ? true : opts.emojiOne;
     let bodyHasEmoji = false;
 
     let strippedBody;
@@ -440,8 +444,9 @@ export function bodyToHtml(content, highlights, opts={}) {
         if (opts.stripReplyFallback && formattedBody) formattedBody = ReplyThread.stripHTMLReply(formattedBody);
         strippedBody = opts.stripReplyFallback ? ReplyThread.stripPlainReply(content.body) : content.body;
 
-        bodyHasEmoji = containsEmoji(isHtmlMessage ? formattedBody : content.body);
-
+        if (doEmojiOne) {
+            bodyHasEmoji = containsEmoji(isHtmlMessage ? formattedBody : content.body);
+        }
 
         // Only generate safeBody if the message was sent as org.matrix.custom.html
         if (isHtmlMessage) {
@@ -466,6 +471,10 @@ export function bodyToHtml(content, highlights, opts={}) {
         delete sanitizeHtmlParams.textFilter;
     }
 
+    if (opts.returnString) {
+        return isDisplayedWithHtml ? safeBody : strippedBody;
+    }
+
     let emojiBody = false;
     if (!opts.disableBigEmoji && bodyHasEmoji) {
         EMOJI_REGEX.lastIndex = 0;

src/Markdown.js

@@ -102,6 +102,16 @@ export default class Markdown {
             // (https://github.com/vector-im/riot-web/issues/3154)
             softbreak: '<br />',
         });
+
+        // Trying to strip out the wrapping <p/> causes a lot more complication
+        // than it's worth, i think.  For instance, this code will go and strip
+        // out any <p/> tag (no matter where it is in the tree) which doesn't
+        // contain \n's.
+        // On the flip side, <p/>s are quite opionated and restricted on where
+        // you can nest them.
+        //
+        // Let's try sending with <p/>s anyway for now, though.
+/*        
         const real_paragraph = renderer.paragraph;
 
         renderer.paragraph = function(node, entering) {
@@ -114,16 +124,21 @@ export default class Markdown {
                 real_paragraph.call(this, node, entering);
             }
         };
+*/        
 
         renderer.html_inline = html_if_tag_allowed;
+
         renderer.html_block = function(node) {
+/*
             // as with `paragraph`, we only insert line breaks
             // if there are multiple lines in the markdown.
             const isMultiLine = is_multi_line(node);
-
             if (isMultiLine) this.cr();
+*/
             html_if_tag_allowed.call(this, node);
+/*
             if (isMultiLine) this.cr();
+*/        
         };
 
         return renderer.render(this.parsed);
@@ -133,7 +148,10 @@ export default class Markdown {
      * Render the markdown message to plain text. That is, essentially
      * just remove any backslashes escaping what would otherwise be
      * markdown syntax
-     * (to fix https://github.com/vector-im/riot-web/issues/2870)
+     * (to fix https://github.com/vector-im/riot-web/issues/2870).
+     *
+     * N.B. this does **NOT** render arbitrary MD to plain text - only MD
+     * which has no formatting.  Otherwise it emits HTML(!).
      */
     toPlaintext() {
         const renderer = new commonmark.HtmlRenderer({safe: false});
@@ -156,11 +174,20 @@ export default class Markdown {
                 }
             }
         };
+
         renderer.html_block = function(node) {
             this.lit(node.literal);
             if (is_multi_line(node) && node.next) this.lit('\n\n');
         };
 
+        // convert MD links into console-friendly ' < http://foo >' style links
+        // ...except given this function never gets called with links, it's useless.
+        // renderer.link = function(node, entering) {
+        //     if (!entering) {
+        //         this.lit(` < ${node.destination} >`);
+        //     }
+        // };
+
         return renderer.render(this.parsed);
     }
 }