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
2021-07-12 17:05:05 +05:30 · 2021-07-12 17:05:05 +05:30 · ca10ae797a
Commit ca10ae797a
--- a/assets/javascripts/discourse/components/wizard-custom-field.js.es6
+++ b/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",
--- a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs
+++ b/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">
--- a/assets/javascripts/wizard/components/wizard-field-composer-preview.js.es6
+++ b/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]);
+  },
+});
--- a/assets/javascripts/wizard/initializers/custom-wizard.js.es6
+++ b/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());
    });
  },
 };
--- a/assets/javascripts/wizard/templates/components/wizard-field-composer-preview.hbs
+++ b/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>
--- a/assets/stylesheets/wizard/custom/composer.scss
+++ b/assets/stylesheets/wizard/custom/composer.scss
@ -239,31 +239,43 @@

 // Markdown table styles for wizard composer preview

-.cooked table,
-.d-editor-preview table {
-  border-collapse: collapse;
+.cooked,
+.d-editor-preview {
+  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 {
-    border-bottom: 1px solid var(--primary-low);
-    &.highlighted {
-      animation: background-fade-highlight 2.5s ease-out;
+  table {
+    border-collapse: collapse;
+
+    tr {
+      border-bottom: 1px solid var(--primary-low);
+      &.highlighted {
+        animation: background-fade-highlight 2.5s ease-out;
+      }
    }
-  }

-  thead {
-    th {
-      text-align: left;
-      padding: 0.5em;
-      font-weight: bold;
-      color: var(--primary);
+    thead {
+      th {
+        text-align: left;
+        padding: 0.5em;
+        font-weight: bold;
+        color: var(--primary);
+      }
    }
-  }

-  tbody {
-    border-top: 3px solid var(--primary-low);
-  }
+    tbody {
+      border-top: 3px solid var(--primary-low);
+    }

-  td {
-    padding: 3px 3px 3px 0.5em;
+    td {
+      padding: 3px 3px 3px 0.5em;
+    }
  }
 }
--- a/assets/stylesheets/wizard/wizard_custom.scss
+++ b/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";
--- a/config/locales/client.en.yml
+++ b/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
--- a/controllers/custom_wizard/admin/wizard.rb
+++ b/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,
--- a/lib/custom_wizard/builder.rb
+++ b/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'],
--- a/lib/custom_wizard/field.rb
+++ b/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"
      },
--- a/serializers/custom_wizard/wizard_field_serializer.rb
+++ b/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