diff --git a/assets/javascripts/wizard/components/wizard-field-composer-preview.js.es6 b/assets/javascripts/wizard/components/wizard-field-composer-preview.js.es6
new file mode 100644
index 00000000..b49233f2
--- /dev/null
+++ 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]);
+ },
+});
diff --git a/assets/javascripts/wizard/initializers/custom-wizard.js.es6 b/assets/javascripts/wizard/initializers/custom-wizard.js.es6
index 24102bed..ca396081 100644
--- 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());
});
},
};
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-composer-preview.hbs b/assets/javascripts/wizard/templates/components/wizard-field-composer-preview.hbs
new file mode 100644
index 00000000..508cf31d
--- /dev/null
+++ b/assets/javascripts/wizard/templates/components/wizard-field-composer-preview.hbs
@@ -0,0 +1,5 @@
+
+
+ {{html-safe field.preview_template}}
+
+
diff --git a/assets/stylesheets/wizard/custom/composer.scss b/assets/stylesheets/wizard/custom/composer.scss
index 4e561c61..24cad2a4 100644
--- 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;
+ }
}
}
diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss
index aef346fc..6290ce6e 100644
--- 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";
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index a21f79bc..ef826cab 100644
--- 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
diff --git a/controllers/custom_wizard/admin/wizard.rb b/controllers/custom_wizard/admin/wizard.rb
index 9b128d4d..8da64fac 100644
--- 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,
diff --git a/lib/custom_wizard/builder.rb b/lib/custom_wizard/builder.rb
index fab99446..91dbbeb0 100644
--- 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'],
diff --git a/lib/custom_wizard/field.rb b/lib/custom_wizard/field.rb
index 36a800c1..eb4af65d 100644
--- 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"
},
diff --git a/serializers/custom_wizard/wizard_field_serializer.rb b/serializers/custom_wizard/wizard_field_serializer.rb
index fe22fdeb..37f7a80f 100644
--- 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