Extract Composer state

js/src/common/Application.js

@@ -230,6 +230,16 @@ export default class Application {
     return null;
   }
 
+  /**
+   * Determine the current screen mode, based on our media queries.
+   *
+   * @returns {String} - one of "phone", "tablet", "desktop" or "desktop-hd"
+   */
+  screen() {
+    const styles = getComputedStyle(document.documentElement);
+    return styles.getPropertyValue('--flarum-screen');
+  }
+
   /**
    * Set the <title> of the page.
    *

js/src/common/components/ConfirmDocumentUnload.js

@@ -0,0 +1,37 @@
+import Component from '../Component';
+
+/**
+ * The `ConfirmDocumentUnload` component can be used to register a global
+ * event handler that prevents closing the browser window/tab based on the
+ * return value of a given callback prop.
+ *
+ * ### Props
+ *
+ * - `when` - a callback returning true when the browser should prompt for
+ *            confirmation before closing the window/tab
+ *
+ * ### Children
+ *
+ * NOTE: Only the first child will be rendered. (Use this component to wrap
+ * another component / DOM element.)
+ *
+ */
+export default class ConfirmDocumentUnload extends Component {
+  config(isInitialized, context) {
+    if (isInitialized) return;
+
+    const handler = () => this.props.when() || undefined;
+
+    $(window).on('beforeunload', handler);
+
+    context.onunload = () => {
+      $(window).off('beforeunload', handler);
+    };
+  }
+
+  view() {
+    // To avoid having to render another wrapping <div> here, we assume that
+    // this component is only wrapped around a single element / component.
+    return this.props.children[0];
+  }
+}

js/src/common/utils/SuperTextarea.js

@@ -0,0 +1,109 @@
+/**
+ * A textarea wrapper with powerful helpers for text manipulation.
+ *
+ * This wraps a <textarea> DOM element and allows directly manipulating its text
+ * contents and cursor positions.
+ *
+ * I apologize for the pretentious name. :)
+ */
+export default class SuperTextarea {
+  /**
+   * @param {HTMLTextAreaElement} textarea
+   */
+  constructor(textarea) {
+    this.el = textarea;
+    this.$ = $(textarea);
+  }
+
+  /**
+   * Set the value of the text editor.
+   *
+   * @param {String} value
+   */
+  setValue(value) {
+    this.$.val(value).trigger('input');
+  }
+
+  /**
+   * Focus the textarea and place the cursor at the given index.
+   *
+   * @param {number} position
+   */
+  moveCursorTo(position) {
+    this.setSelectionRange(position, position);
+  }
+
+  /**
+   * Get the selected range of the textarea.
+   *
+   * @return {Array}
+   */
+  getSelectionRange() {
+    return [this.el.selectionStart, this.el.selectionEnd];
+  }
+
+  /**
+   * Insert content into the textarea at the position of the cursor.
+   *
+   * @param {String} text
+   */
+  insertAtCursor(text) {
+    this.insertAt(this.el.selectionStart, text);
+
+    this.el.dispatchEvent(new CustomEvent('input', { bubbles: true, cancelable: true }));
+  }
+
+  /**
+   * Insert content into the textarea at the given position.
+   *
+   * @param {number} pos
+   * @param {String} text
+   */
+  insertAt(pos, text) {
+    this.insertBetween(pos, pos, text);
+  }
+
+  /**
+   * Insert content into the textarea between the given positions.
+   *
+   * If the start and end positions are different, any text between them will be
+   * overwritten.
+   *
+   * @param start
+   * @param end
+   * @param text
+   */
+  insertBetween(start, end, text) {
+    const value = this.el.value;
+
+    const before = value.slice(0, start);
+    const after = value.slice(end);
+
+    this.setValue(`${before}${text}${after}`);
+
+    // Move the textarea cursor to the end of the content we just inserted.
+    this.moveCursorTo(start + text.length);
+  }
+
+  /**
+   * Replace existing content from the start to the current cursor position.
+   *
+   * @param start
+   * @param text
+   */
+  replaceBeforeCursor(start, text) {
+    this.insertBetween(start, this.el.selectionStart, text);
+  }
+
+  /**
+   * Set the selected range of the textarea.
+   *
+   * @param {number} start
+   * @param {number} end
+   * @private
+   */
+  setSelectionRange(start, end) {
+    this.el.setSelectionRange(start, end);
+    this.$.focus();
+  }
+}

js/src/forum/ForumApplication.js

@@ -1,6 +1,5 @@
 import History from './utils/History';
 import Pane from './utils/Pane';
-import ReplyComposer from './components/ReplyComposer';
 import DiscussionPage from './components/DiscussionPage';
 import SignUpModal from './components/SignUpModal';
 import HeaderPrimary from './components/HeaderPrimary';
@@ -16,6 +15,7 @@ import Navigation from '../common/components/Navigation';
 import NotificationListState from './states/NotificationListState';
 import GlobalSearchState from './states/GlobalSearchState';
 import DiscussionListState from './states/DiscussionListState';
+import ComposerState from './states/ComposerState';
 
 export default class ForumApplication extends Application {
   /**
@@ -73,6 +73,11 @@ export default class ForumApplication extends Application {
    */
   search = new GlobalSearchState();
 
+  /*
+   * An object which controls the state of the composer.
+   */
+  composer = new ComposerState();
+
   constructor() {
     super();
 
@@ -114,9 +119,9 @@ export default class ForumApplication extends Application {
     m.mount(document.getElementById('header-navigation'), Navigation.component());
     m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
     m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
+    m.mount(document.getElementById('composer'), Composer.component({ state: this.composer }));
 
     this.pane = new Pane(document.getElementById('app'));
-    this.composer = m.mount(document.getElementById('composer'), Composer.component());
 
     m.route.mode = 'pathname';
     super.mount(this.forum.attribute('basePath'));
@@ -138,21 +143,6 @@ export default class ForumApplication extends Application {
     });
   }
 
-  /**
-   * Check whether or not the user is currently composing a reply to a
-   * discussion.
-   *
-   * @param {Discussion} discussion
-   * @return {Boolean}
-   */
-  composingReplyTo(discussion) {
-    return (
-      this.composer.component instanceof ReplyComposer &&
-      this.composer.component.props.discussion === discussion &&
-      this.composer.position !== Composer.PositionEnum.HIDDEN
-    );
-  }
-
   /**
    * Check whether or not the user is currently viewing a discussion.
    *

js/src/forum/components/CommentPost.js

@@ -77,7 +77,7 @@ export default class CommentPost extends Post {
   }
 
   isEditing() {
-    return app.composer.component instanceof EditPostComposer && app.composer.component.props.post === this.props.post;
+    return app.composer.bodyMatches(EditPostComposer, { post: this.props.post });
   }
 
   attrs() {
@@ -105,7 +105,7 @@ export default class CommentPost extends Post {
     // body with a preview.
     let preview;
     const updatePreview = () => {
-      const content = app.composer.component.content();
+      const content = app.composer.fields.content();
 
       if (preview === content) return;