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);
  }
 }