FEATURE: new field type Composer Preview (#130)

* WIP

* composer preview field working

* remove redundant variable

* fix linting issues

* fix rubocop

* remove unnecessary entry

* consolidate preview generation code

* add styles for onebox

* add css for @ mentions

* fixed eslint issues

* FIX: ensure oneboxes load every time

* remove unused import

* fix prettier issues

* removed unused code

* remove unused imports

* fixed prettier issue

* improve css structure

* add csrf header in all cases

assets/javascripts/discourse/components/wizard-custom-field.js.es6

@@ -25,6 +25,7 @@ export default Component.extend(UndoChanges, {
   showContent: or("isCategory", "isTag", "isGroup", "isDropdown"),
   showLimit: or("isCategory", "isTag"),
   isTextType: or("isText", "isTextarea", "isComposer"),
+  isComposerPreview: equal("field.type", "composer_preview"),
   categoryPropertyTypes: selectKitContent(["id", "slug"]),
   showAdvanced: alias("field.type"),
   messageUrl: "https://thepavilion.io/t/2809",

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -125,6 +125,18 @@
   </div>
 {{/if}}
 
+{{#if isComposerPreview}}
+  <div class="setting">
+    <div class="setting-label">
+      <label>{{i18n "admin.wizard.field.preview_template"}}</label>
+    </div>
+
+    <div class="setting-value">
+      {{textarea name="preview-template" value=field.preview_template}}
+    </div>
+  </div>
+{{/if}}
+
 {{#if isUpload}}
   <div class="setting">
     <div class="setting-label">

assets/javascripts/wizard/components/wizard-field-composer-preview.js.es6

@@ -0,0 +1,49 @@
+import Component from "@ember/component";
+import { loadOneboxes } from "discourse/lib/load-oneboxes";
+import { schedule } from "@ember/runloop";
+import discourseDebounce from "discourse-common/lib/debounce";
+import { resolveAllShortUrls } from "pretty-text/upload-short-url";
+import { ajax } from "discourse/lib/ajax";
+import { on } from "discourse-common/utils/decorators";
+
+export default Component.extend({
+  @on("init")
+  updatePreview() {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    schedule("afterRender", () => {
+      if (this._state !== "inDOM" || !this.element) {
+        return;
+      }
+
+      const $preview = $(this.element);
+
+      if ($preview.length === 0) {
+        return;
+      }
+
+      this.previewUpdated($preview);
+    });
+  },
+
+  previewUpdated($preview) {
+    // Paint oneboxes
+    const paintFunc = () => {
+      loadOneboxes(
+        $preview[0],
+        ajax,
+        null,
+        null,
+        this.siteSettings.max_oneboxes_per_post,
+        true // refresh on every load
+      );
+    };
+
+    discourseDebounce(this, paintFunc, 450);
+
+    // Short upload urls need resolution
+    resolveAllShortUrls(ajax, this.siteSettings, $preview[0]);
+  },
+});

assets/javascripts/wizard/initializers/custom-wizard.js.es6

@@ -29,8 +29,6 @@ export default {
     const getToken = requirejs("wizard/lib/ajax").getToken;
     const setEnvironment = requirejs("discourse-common/config/environment")
       .setEnvironment;
-    const isDevelopment = requirejs("discourse-common/config/environment")
-      .isDevelopment;
     const container = app.__container__;
     Discourse.Model = EmberObject.extend();
     Discourse.__container__ = container;
@@ -114,9 +112,7 @@ export default {
     });
 
     $.ajaxPrefilter(function (_, __, jqXHR) {
-      if (isDevelopment()) {
+      jqXHR.setRequestHeader("X-CSRF-Token", getToken());
-        jqXHR.setRequestHeader("X-CSRF-Token", getToken());
-      }
     });
   },
 };

assets/javascripts/wizard/templates/components/wizard-field-composer-preview.hbs

@@ -0,0 +1,5 @@
+<div class="wizard-composer-preview d-editor-preview-wrapper">
+  <div class="d-editor-preview">
+    {{html-safe field.preview_template}}
+  </div>
+</div>

assets/stylesheets/wizard/custom/composer.scss

@@ -239,31 +239,43 @@
 
 // Markdown table styles for wizard composer preview
 
-.cooked table,
+.cooked,
-.d-editor-preview table {
+.d-editor-preview {
-  border-collapse: collapse;
+  a.mention {
+    display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
+    font-weight: bold;
+    font-size: 0.93em;
+    color: var(--primary-high-or-secondary-low);
+    padding: 0 4px 1px;
+    background: var(--primary-low);
+    border-radius: 8px;
+  }
 
-  tr {
+  table {
-    border-bottom: 1px solid var(--primary-low);
+    border-collapse: collapse;
-    &.highlighted {
+
-      animation: background-fade-highlight 2.5s ease-out;
+    tr {
+      border-bottom: 1px solid var(--primary-low);
+      &.highlighted {
+        animation: background-fade-highlight 2.5s ease-out;
+      }
     }
-  }
 
-  thead {
+    thead {
-    th {
+      th {
-      text-align: left;
+        text-align: left;
-      padding: 0.5em;
+        padding: 0.5em;
-      font-weight: bold;
+        font-weight: bold;
-      color: var(--primary);
+        color: var(--primary);
+      }
     }
-  }
 
-  tbody {
+    tbody {
-    border-top: 3px solid var(--primary-low);
+      border-top: 3px solid var(--primary-low);
-  }
+    }
 
-  td {
+    td {
-    padding: 3px 3px 3px 0.5em;
+      padding: 3px 3px 3px 0.5em;
+    }
   }
 }

assets/stylesheets/wizard/wizard_custom.scss

@@ -2,6 +2,7 @@
 @import "common/foundation/variables";
 @import "common/base/code_highlighting";
 @import "common/base/modal";
+@import "common/base/onebox";
 @import "common/components/buttons";
 @import "common/d-editor";
 @import "desktop/modal";

config/locales/client.en.yml

@@ -175,6 +175,7 @@ en:
           char_counter_placeholder: "Display Character Counter"
           field_placeholder: "Field Placeholder"
           file_types: "File Types"
+          preview_template: "Preview Template"
           limit: "Limit"
           property: "Property"
           prefill: "Prefill"
@@ -201,6 +202,7 @@ en:
             text: "Text"
             textarea: Textarea
             composer: Composer
+            composer_preview: Composer Preview
             text_only: Text Only
             number: Number
             checkbox: Checkbox

controllers/custom_wizard/admin/wizard.rb

@@ -109,6 +109,7 @@ class CustomWizard::AdminWizardController < CustomWizard::AdminController
           :format,
           :limit,
           :property,
+          :preview_template,
           :placeholder,
           prefill: mapped_params,
           content: mapped_params,

lib/custom_wizard/builder.rb

@@ -187,6 +187,18 @@ class CustomWizard::Builder
       )
     end
 
+    if field_template['preview_template'].present?
+      preview_template = mapper.interpolate(
+        field_template['preview_template'],
+        user: true,
+        value: true,
+        wizard: true,
+        template: true
+      )
+
+      params[:preview_template] = PrettyText.cook(preview_template)
+    end
+
     if field_template['placeholder'].present?
       params[:placeholder] = mapper.interpolate(
         field_template['placeholder'],

lib/custom_wizard/field.rb

@@ -21,6 +21,7 @@ class CustomWizard::Field
               :limit,
               :property,
               :content,
+              :preview_template,
               :placeholder
 
   attr_accessor :index,
@@ -45,6 +46,7 @@ class CustomWizard::Field
     @limit = attrs[:limit]
     @property = attrs[:property]
     @content = attrs[:content]
+    @preview_template = attrs[:preview_template]
     @placeholder = attrs[:placeholder]
   end
 
@@ -82,6 +84,9 @@ class CustomWizard::Field
         placeholder: nil
       },
       text_only: {},
+      composer_preview: {
+        preview_template: nil,
+      },
       date: {
         format: "YYYY-MM-DD"
       },

serializers/custom_wizard/wizard_field_serializer.rb

@@ -18,7 +18,8 @@ class CustomWizard::FieldSerializer < ::ApplicationSerializer
              :content,
              :validations,
              :max_length,
-             :char_counter
+             :char_counter,
+             :preview_template
 
   def id
     object.id
@@ -117,4 +118,8 @@ class CustomWizard::FieldSerializer < ::ApplicationSerializer
   def char_counter
     object.char_counter
   end
+
+  def preview_template
+    object.preview_template
+  end
 end