Merge pull request #4305 from tgxworld/avoid_coupling_composer_and_d_editor

Remove coupling of a composer feature to d editor.

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -23,6 +23,11 @@ export default Ember.Component.extend({
     this.set('showPreview', val === 'true');
   },
 
+  @computed('site.mobileView', 'showPreview')
+  forcePreview(mobileView, showPreview) {
+    return mobileView && showPreview;
+  },
+
   @computed('showPreview')
   toggleText: function(showPreview) {
     return showPreview ? I18n.t('composer.hide_preview') : I18n.t('composer.show_preview');
@@ -431,6 +436,16 @@ export default Ember.Component.extend({
           sendAction: 'showOptions'
         });
       }
+
+      if (this.site.mobileView) {
+        toolbar.addButton({
+          id: 'preview',
+          group: 'mobileExtras',
+          icon: 'television',
+          title: 'composer.show_preview',
+          sendAction: 'togglePreview'
+        });
+      }
     },
 
     previewUpdated($preview) {

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -102,14 +102,6 @@ class Toolbar {
 
     if (site.mobileView) {
       this.groups.push({group: 'mobileExtras', buttons: []});
-
-      this.addButton({
-        id: 'preview',
-        group: 'mobileExtras',
-        icon: 'television',
-        title: 'composer.hr_preview',
-        perform: e => e.preview()
-      });
     }
 
     this.groups[this.groups.length-1].lastGroup = true;
@@ -181,7 +173,6 @@ export function onToolbarCreate(func) {
 export default Ember.Component.extend({
   classNames: ['d-editor'],
   ready: false,
-  forcePreview: false,
   insertLinkHidden: true,
   linkUrl: '',
   linkText: '',
@@ -487,10 +478,6 @@ export default Ember.Component.extend({
     Ember.run.scheduleOnce("afterRender", () => this.$("textarea.d-editor-input").focus());
   },
 
-  _togglePreview() {
-    this.toggleProperty('forcePreview');
-  },
-
   actions: {
     toolbarButton(button) {
       const selected = this._getSelected(button.trimLeading);
@@ -500,7 +487,6 @@ export default Ember.Component.extend({
         applySurround: (head, tail, exampleKey) => this._applySurround(selected, head, tail, exampleKey),
         applyList: (head, exampleKey) => this._applyList(selected, head, exampleKey),
         addText: text => this._addText(selected, text),
-        preview: () => this._togglePreview()
       };
 
       if (button.sendAction) {
@@ -510,10 +496,6 @@ export default Ember.Component.extend({
       }
     },
 
-    hidePreview() {
-      this.set('forcePreview', false);
-    },
-
     showLinkModal() {
       this._lastSel = this._getSelected();
       this.set('insertLinkHidden', false);

app/assets/javascripts/discourse/templates/components/composer-editor.hbs

@@ -7,16 +7,23 @@
            importQuote="importQuote"
            showOptions="showOptions"
            showUploadModal="showUploadModal"
+           togglePreview="togglePreview"
            validation=validation
-           loading=composer.loading}}
+           loading=composer.loading
+           forcePreview=forcePreview}}
 
 <div class="composer-bottom-right">
   {{#if site.mobileView}}
     <input type="file" id="mobile-uploader" multiple />
     <a class="mobile-file-upload {{if isUploading 'hidden'}}">{{i18n 'upload'}}</a>
+
+    {{#if showPreview}}
+      {{d-button action='togglePreview' class='hide-preview' label='composer.hide_preview'}}
+    {{/if}}
   {{else}}
     <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
   {{/if}}
+
   {{#if isUploading}}
     <div id="file-uploading">
       {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}}

app/assets/javascripts/discourse/templates/components/d-editor.hbs

@@ -30,8 +30,5 @@
     <div class="d-editor-preview">
       {{{preview}}}
     </div>
-    {{#if site.mobileView}}
-      {{d-button action='hidePreview' class='hide-preview' label='composer.hide_preview'}}
-    {{/if}}
   </div>
 </div>

app/assets/stylesheets/mobile/compose.scss

@@ -252,6 +252,13 @@ input {
       display: none;
     }
 
+    .btn.hide-preview {
+      position: fixed;
+      right: 5px;
+      bottom: 5px;
+      z-index: 1000001;
+    }
+
     .d-editor-preview-wrapper.force-preview {
       display: block;
       position: fixed;
@@ -268,13 +275,6 @@ input {
         border: 0;
         overflow: auto;
       }
-
-      .hide-preview {
-        position: fixed;
-        right: 5px;
-        bottom: 5px;
-        z-index: 1000001;
-      }
     }
     .d-editor-textarea-wrapper {
       position: relative;