E-mail content: insert placeholder into text on click

src/pretix/static/pretixcontrol/js/ui/main.js

@@ -699,6 +699,38 @@ var form_handlers = function (el) {
     el.find("input[name*=question], select[name*=question]").change(questions_toggle_dependent);
     questions_toggle_dependent();
     questions_init_photos(el);
+
+    var lastFocusedInput;
+    $(document).on('focusin', 'input, textarea', function(e) {
+        lastFocusedInput = e.target;
+    }).on("click", function(e) {
+        if (e.target.classList.contains('content-placeholder')) {
+            var container = e.target.closest(".form-group");
+            if (!lastFocusedInput || !container.contains(lastFocusedInput)) {
+                lastFocusedInput = container.querySelector("input, textarea");
+                //lastFocusedInput.selectionStart = lastFocusedInput.selectionEnd = lastFocusedInput.value.length;
+            }
+            if (lastFocusedInput) {
+                var start = lastFocusedInput.selectionStart;
+                var end = lastFocusedInput.selectionEnd;
+                var v = lastFocusedInput.value;
+                var p = e.target.textContent;
+                var phStart = /\{\w*$/.exec(v.substring(0, start));
+                var phEnd = /^\w*\}/.exec(v.substring(end));
+                if (phStart) {
+                    start -= phStart[0].length
+                }
+                if (phEnd) {
+                    end += phEnd[0].length;
+                }
+
+                lastFocusedInput.value = v.substring(0, start) + p + v.substring(end);
+                lastFocusedInput.selectionStart = start;
+                lastFocusedInput.selectionEnd = start + p.length
+                lastFocusedInput.focus();
+            }
+        }
+    });
 };
 
 function setup_basics(el) {

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -2,6 +2,16 @@
   color: $text-muted;
 }
 
+.content-placeholder {
+  padding-left: 2px;
+  padding-right: 2px;
+  background: $gray-lighter;
+  border: 0;
+  border-radius: $border-radius-base;
+  margin-bottom: 4px;
+  margin-right: 6px;
+}
+
 td > .form-group {
   margin-bottom: 0;
 }