variables and mentions

api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php

@@ -26,7 +26,7 @@ function ($attribute, $value, $fail) {
                     }
                 },
             ],
-            'confirmation_reply_to' => 'email|nullable',
+            'confirmation_reply_to' => 'nullable',
             'notification_sender' => 'required',
             'notification_subject' => 'required',
             'notification_body' => 'required',
@@ -107,6 +107,7 @@ public static function validateEmail($email): bool
     public static function formatData(array $data): array
     {
         return array_merge(parent::formatData($data), [
+            'notification_subject' => Purify::clean($data['notification_subject'] ?? ''),
             'notification_body' => Purify::clean($data['notification_body'] ?? ''),
         ]);
     }

api/app/Mail/Forms/SubmissionConfirmationMail.php

@@ -4,6 +4,7 @@
 
 use App\Events\Forms\FormSubmitted;
 use App\Mail\OpenFormMail;
+use App\Open\MentionParser;
 use App\Service\Forms\FormSubmissionFormatter;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
@@ -16,13 +17,21 @@ class SubmissionConfirmationMail extends OpenFormMail implements ShouldQueue
     use Queueable;
     use SerializesModels;
 
+    private $formattedData;
+
     /**
      * Create a new message instance.
      *
      * @return void
      */
     public function __construct(private FormSubmitted $event, private $integrationData)
     {
+        $formatter = (new FormSubmissionFormatter($event->form, $event->data))
+            ->createLinks()
+            ->outputStringsOnly()
+            ->useSignedUrlForFiles();
+
+        $this->formattedData = $formatter->getFieldsWithValue();
     }
 
     /**
@@ -34,17 +43,13 @@ public function build()
     {
         $form = $this->event->form;
 
-        $formatter = (new FormSubmissionFormatter($form, $this->event->data))
-            ->createLinks()
-            ->outputStringsOnly()
-            ->useSignedUrlForFiles();
 
         return $this
             ->replyTo($this->getReplyToEmail($form->creator->email))
             ->from($this->getFromEmail(), $this->integrationData->notification_sender)
-            ->subject($this->integrationData->notification_subject)
+            ->subject($this->getSubject())
             ->markdown('mail.form.confirmation-submission-notification', [
-                'fields' => $formatter->getFieldsWithValue(),
+                'fields' => $this->formattedData,
                 'form' => $form,
                 'integrationData' => $this->integrationData,
                 'noBranding' => $form->no_branding,
@@ -67,9 +72,25 @@ private function getReplyToEmail($default)
     {
         $replyTo = $this->integrationData->confirmation_reply_to ?? null;
 
-        if ($replyTo && filter_var($replyTo, FILTER_VALIDATE_EMAIL)) {
-            return $replyTo;
+        if ($replyTo) {
+            $parser = new MentionParser($replyTo, $this->formattedData);
+            $parsedReplyTo = $parser->parse();
+            if ($parsedReplyTo && filter_var($parsedReplyTo, FILTER_VALIDATE_EMAIL)) {
+                return $parsedReplyTo;
+            }
         }
         return $default;
     }
+
+    private function getSubject()
+    {
+        $parser = new MentionParser($this->integrationData->notification_subject, $this->formattedData);
+        return $parser->parse();
+    }
+
+    private function getNotificationBody()
+    {
+        $parser = new MentionParser($this->integrationData->notification_body, $this->formattedData);
+        return $parser->parse();
+    }
 }

api/app/Open/MentionParser.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Open;
+
+class MentionParser
+{
+    private $content;
+    private $data;
+
+    public function __construct($content, $data)
+    {
+        $this->content = $content;
+        $this->data = $data;
+    }
+
+    public function parse()
+    {
+        return $this->replaceMentions();
+    }
+
+    private function replaceMentions()
+    {
+        $pattern = '/<span[^>]*mention-field-id="([^"]*)"[^>]*mention-fallback="([^"]*)"[^>]*>.*?<\/span>/';
+        return preg_replace_callback($pattern, function ($matches) {
+            $fieldId = $matches[1];
+            $fallback = $matches[2];
+            $value = $this->getData($fieldId);
+
+            if ($value !== null) {
+                if (is_array($value)) {
+                    return implode(' ', array_map(function ($v) {
+                        return $v;
+                    }, $value));
+                }
+                return $value;
+            } elseif ($fallback) {
+                return $fallback;
+            }
+            return '';
+        }, $this->content);
+    }
+
+    private function getData($fieldId)
+    {
+        $value = collect($this->data)->filter(function ($item) use ($fieldId) {
+            return $item['id'] === $fieldId;
+        })->first()['value'] ?? null;
+
+        if (is_object($value)) {
+            return (array) $value;
+        }
+
+        return $value;
+    }
+}

api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Service\HtmlPurifier;
+
+use HTMLPurifier_HTMLDefinition;
+use Stevebauman\Purify\Definitions\Definition;
+use Stevebauman\Purify\Definitions\Html5Definition;
+
+class OpenFormsHtmlDefinition implements Definition
+{
+    public static function apply(HTMLPurifier_HTMLDefinition $definition)
+    {
+        Html5Definition::apply($definition);
+
+        $definition->addAttribute('span', 'mention-field-id', 'Text');
+        $definition->addAttribute('span', 'mention-field-name', 'Text');
+        $definition->addAttribute('span', 'mention-fallback', 'Text');
+        $definition->addAttribute('span', 'mention', 'Bool');
+        $definition->addAttribute('span', 'contenteditable', 'Bool');
+    }
+}

api/config/purify.php

@@ -1,6 +1,6 @@
 <?php
 
-use Stevebauman\Purify\Definitions\Html5Definition;
+use App\Service\HtmlPurifier\OpenFormsHtmlDefinition;
 
 return [
 
@@ -40,7 +40,7 @@
     'configs' => [
 
         'default' => [
-            'HTML.Allowed' => 'h1,h2,b,strong,i,em,a[href|title],ul,ol,li,p,br,span,*[style]',
+            'HTML.Allowed' => 'h1,h2,b,strong,i,em,a[href|title],ul,ol,li,p,br,span[mention|mention-field-id|mention-field-name|mention-fallback|contenteditable],*[style]',
             'HTML.ForbiddenElements' => '',
             'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,text-decoration,color,text-align',
 
@@ -86,7 +86,7 @@
     |
     */
 
-    'definitions' => Html5Definition::class,
+    'definitions' => OpenFormsHtmlDefinition::class,
 
     /*
     |--------------------------------------------------------------------------

client/components/forms/MentionInput.vue

@@ -0,0 +1,189 @@
+<template>
+    <InputWrapper v-bind="inputWrapperProps">
+      <template #label>
+        <slot name="label" />
+      </template>
+
+      <MentionDropdown
+        :state="mentionState"
+        :mentions="mentions"
+      />
+
+      <div class="relative">
+        <div
+          ref="editableDiv"
+          :contenteditable="!disabled"
+          class="mention-input"
+          :style="inputStyle"
+          :class="[
+            theme.default.input,
+            theme.default.borderRadius,
+            theme.default.spacing.horizontal,
+            theme.default.spacing.vertical,
+            theme.default.fontSize,
+            {
+              '!ring-red-500 !ring-2 !border-transparent': hasError,
+              '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+            },
+            'pr-12'
+          ]"
+          @input="onInput"
+        />
+        <UButton
+          type="button"
+          color="white"
+          class="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 px-2"
+          icon="i-heroicons-at-symbol-16-solid"
+          @click="openMentionDropdown"
+        />
+      </div>
+
+      <template
+        v-if="$slots.help"
+        #help
+      >
+        <slot name="help" />
+      </template>
+
+      <template
+        v-if="$slots.error"
+        #error
+      >
+        <slot name="error" />
+      </template>
+    </InputWrapper>
+  </template>
+
+  <script setup>
+  import { ref, onMounted, watch, computed } from 'vue'
+  import { inputProps, useFormInput } from './useFormInput.js'
+  import InputWrapper from './components/InputWrapper.vue'
+  import MentionDropdown from './components/MentionDropdown.vue'
+  const props = defineProps({
+    ...inputProps,
+    mentions: { type: Array, default: () => [] },
+  })
+  const emit = defineEmits(['update:modelValue'])
+  const { compVal, inputStyle, hasValidation, hasError, inputWrapperProps } = useFormInput(props, { emit })
+  const editableDiv = ref(null)
+  const savedRange = ref(null)
+  const mentionState = ref({
+    open: false,
+    onInsert: (mention) => {
+      insertMention(mention)
+      mentionState.value.open = false
+    },
+    onCancel: () => {
+      mentionState.value.open = false
+      restoreSelection()
+    },
+  })
+  const createMentionSpan = (mention) => {
+    const mentionSpan = document.createElement('span')
+    mentionSpan.setAttribute('mention-field-id', mention.field.id)
+    mentionSpan.setAttribute('mention-field-name', mention.field.name)
+    mentionSpan.setAttribute('mention-fallback', mention.fallback || '')
+    mentionSpan.setAttribute('contenteditable', 'false')
+    mentionSpan.setAttribute('mention', 'true')
+    mentionSpan.textContent = mention.field.name.length > 25 ? `${mention.field.name.slice(0, 25)}...` : mention.field.name
+    return mentionSpan
+  }
+  const insertMention = (mention) => {
+    const mentionSpan = createMentionSpan(mention)
+    restoreSelection()
+    const range = window.getSelection().getRangeAt(0)
+    // Insert the mention span
+    range.insertNode(mentionSpan)
+
+    // Move the cursor after the inserted mention
+    range.setStartAfter(mentionSpan)
+    range.collapse(true)
+    // Apply the new selection
+    const selection = window.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)
+    // Ensure the editableDiv is focused
+    editableDiv.value.focus()
+    updateCompVal()
+  }
+  const openMentionDropdown = () => {
+    saveSelection()
+    if (!savedRange.value) {
+      // If no previous selection, move cursor to the end
+      const range = document.createRange()
+      range.selectNodeContents(editableDiv.value)
+      range.collapse(false)
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+      savedRange.value = range
+    }
+    mentionState.value.open = true
+  }
+  const saveSelection = () => {
+    const selection = window.getSelection()
+    if (selection.rangeCount > 0) {
+      savedRange.value = selection.getRangeAt(0)
+    }
+  }
+  const restoreSelection = () => {
+    if (savedRange.value) {
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(savedRange.value)
+      editableDiv.value.focus()
+    }
+  }
+  const updateCompVal = () => {
+    compVal.value = editableDiv.value.innerHTML
+  }
+  const onInput = () => {
+    updateCompVal()
+  }
+  onMounted(() => {
+    if (compVal.value) {
+      editableDiv.value.innerHTML = compVal.value
+    }
+  })
+  watch(compVal, (newVal) => {
+    if (editableDiv.value && editableDiv.value.innerHTML !== newVal) {
+      editableDiv.value.innerHTML = newVal
+    }
+  })
+  defineExpose({
+    editableDiv,
+    compVal,
+    mentionState,
+    openMentionDropdown,
+    onInput,
+  })
+  </script>
+
+  <style scoped>
+  .mention-input {
+    min-height: 1.5rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .mention-input:empty::before {
+    content: attr(placeholder);
+    color: #9ca3af;
+  }
+  .mention-input span[mention] {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    background-color: #dbeafe;
+    color: #1e40af;
+    border: 1px solid #bfdbfe;
+    border-radius: 0.25rem;
+    padding: 0 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    position: relative;
+    vertical-align: baseline;
+  }
+  </style>