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();
+  }
+}