DEV: Use the new modal api (#26)

javascripts/discourse/components/modal/discourse-placeholder-builder.hbs

@@ -0,0 +1,64 @@
+<DModal
+  @title={{i18n (theme-prefix "builder.title")}}
+  @closeModal={{@closeModal}}
+  @tagName="form"
+  class="placeholder-builder"
+>
+  <:body>
+    <div class="control">
+      <span class="label">
+        {{theme-i18n "builder.key.label"}}
+      </span>
+      <div class="input">
+        <Input
+          {{on "input" this.updateKey}}
+          @value={{readonly form.key}}
+          class="placeholder-builder__key"
+        />
+      </div>
+      <p class="description">{{theme-i18n "builder.key.description"}}</p>
+    </div>
+
+    <div class="control">
+      <span class="label">
+        {{theme-i18n "builder.description.label"}}
+      </span>
+      <div class="input">
+        <Input
+          {{on "input" this.updateDescription}}
+          @value={{readonly form.description}}
+          class="placeholder-builder__description"
+        />
+      </div>
+      <p class="description">
+        {{theme-i18n "builder.description.description"}}
+      </p>
+    </div>
+
+    <div class="control">
+      <span class="label">
+        {{theme-i18n "builder.values.label"}}
+      </span>
+      <div class="input">
+        <MultiSelect
+          @valueProperty={{null}}
+          @nameProperty={{null}}
+          @value={{form.values}}
+          @content={{form.values}}
+          @options={{hash allowAny=true placementStrategy="absolute"}}
+          @onChange={{fn (mut form.values)}}
+          class="placeholder-builder__default-values"
+        />
+      </div>
+      <p class="description">{{theme-i18n "builder.values.description"}}</p>
+    </div>
+  </:body>
+
+  <:footer>
+    <DButton
+      @action={{this.insertPlaceholder}}
+      @label={{theme-prefix "builder.insert"}}
+      class="btn-primary"
+    />
+  </:footer>
+</DModal>

javascripts/discourse/components/modal/discourse-placeholder-builder.js

@@ -0,0 +1,52 @@
+import Component from "@ember/component";
+import EmberObject, { action } from "@ember/object";
+import { isBlank } from "@ember/utils";
+import I18n from "I18n";
+import { inject as service } from "@ember/service";
+
+export default class DiscoursePlaceholderBuilder extends Component {
+  @service dialog;
+
+  form = EmberObject.create({
+    key: null,
+    description: null,
+    values: [],
+  });
+
+  @action
+  updateKey(event) {
+    this.form.set("key", event.target.value);
+  }
+
+  @action
+  updateDescription(event) {
+    this.form.set("description", event.target.value);
+  }
+
+  @action
+  insertPlaceholder() {
+    if (isBlank(this.form.key)) {
+      this.dialog.alert(I18n.t(themePrefix("builder.errors.no_key")));
+      return;
+    }
+
+    let output = `[wrap=placeholder key="${this.form.key}"`;
+
+    if (this.form.description) {
+      output += ` description="${this.form.description}"`;
+    }
+
+    if (this.form.values.length) {
+      if (this.form.values.length === 1) {
+        output += ` default="${this.form.values.firstObject}"`;
+      } else {
+        output += ` defaults="${this.form.values.join(",")}"`;
+      }
+    }
+
+    output += "][/wrap]";
+    this.model.toolbarEvent.addText(output);
+
+    this.closeModal();
+  }
+}

javascripts/discourse/controllers/discourse-placeholder-builder.js

@@ -1,50 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import EmberObject, { action } from "@ember/object";
-import { isBlank } from "@ember/utils";
-import I18n from "I18n";
-import { inject as service } from "@ember/service";
-
-export default Controller.extend(ModalFunctionality, {
-  dialog: service(),
-  form: null,
-
-  onShow() {
-    this.set(
-      "form",
-      EmberObject.create({
-        key: null,
-        description: null,
-        values: [],
-      })
-    );
-  },
-
-  onClose() {},
-
-  @action
-  insertPlaceholder() {
-    if (isBlank(this.form.key)) {
-      this.dialog.alert(I18n.t(themePrefix("builder.errors.no_key")));
-      return;
-    }
-
-    let output = `[wrap=placeholder key="${this.form.key}"`;
-
-    if (this.form.description) {
-      output = `${output} description="${this.form.description}"`;
-    }
-
-    if (this.form.values.length) {
-      if (this.form.values.length === 1) {
-        output = `${output} default="${this.form.values.firstObject}"`;
-      } else {
-        output = `${output} defaults="${this.form.values.join(",")}"`;
-      }
-    }
-
-    this.model.toolbarEvent.addText(`${output}][/wrap]`);
-
-    this.send("closeModal");
-  },
-});

javascripts/discourse/initializers/setup.js

@@ -1,6 +1,6 @@
-import showModal from "discourse/lib/show-modal";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { debounce, later } from "@ember/runloop";
+import DiscoursePlaceholderBuilder from "../components/modal/discourse-placeholder-builder";
 
 const VALID_TAGS =
   "h1, h2, h3, h4, h5, h6, p, code, blockquote, .md-table, li p";
@@ -296,7 +296,8 @@ export default {
         label: themePrefix("toolbar.builder"),
         icon: "file",
         action: (toolbarEvent) => {
-          showModal("discourse-placeholder-builder", {
+          const modal = container.lookup("service:modal");
+          modal.show(DiscoursePlaceholderBuilder, {
             model: {
               toolbarEvent,
             },

javascripts/discourse/templates/modal/discourse-placeholder-builder.hbs

@@ -1,60 +0,0 @@
-{{#d-modal-body
-  title=(theme-prefix "builder.title")
-  class="discourse-placeholder-builder"
-  style="overflow: auto"
-}}
-  <form>
-    <div class="control">
-      <span class="label">
-        {{theme-i18n "builder.key.label"}}
-      </span>
-      <div class="input">
-        {{input
-          value=(readonly form.key)
-          input=(action (mut form.key) value="target.value")
-        }}
-      </div>
-      <p class="description">{{theme-i18n "builder.key.description"}}</p>
-    </div>
-
-    <div class="control">
-      <span class="label">
-        {{theme-i18n "builder.description.label"}}
-      </span>
-      <div class="input">
-        {{input
-          value=(readonly form.description)
-          input=(action (mut form.description) value="target.value")
-        }}
-      </div>
-      <p class="description">
-        {{theme-i18n "builder.description.description"}}
-      </p>
-    </div>
-
-    <div class="control">
-      <span class="label">
-        {{theme-i18n "builder.values.label"}}
-      </span>
-      <div class="input">
-        {{multi-select
-          valueProperty=null
-          nameProperty=null
-          value=form.values
-          content=form.values
-          options=(hash allowAny=true placementStrategy="absolute")
-          onChange=(action (mut form.values))
-        }}
-      </div>
-      <p class="description">{{theme-i18n "builder.values.description"}}</p>
-    </div>
-  </form>
-{{/d-modal-body}}
-
-<div class="modal-footer discourse-local-dates-create-modal-footer">
-  {{d-button
-    class="btn-primary"
-    action=(action "insertPlaceholder")
-    label=(theme-prefix "builder.insert")
-  }}
-</div>