From 6c056f26925678b826b28d3c1c0de9dead3fca08 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Wed, 9 Oct 2024 14:26:13 +0100
Subject: [PATCH 1/9] variables and mentions

---
 .../SubmissionConfirmationIntegration.php     |   3 +-
 .../Mail/Forms/SubmissionConfirmationMail.php |  39 +++-
 api/app/Open/MentionParser.php                |  55 +++++
 .../HtmlPurifier/OpenFormsHtmlDefinition.php  |  21 ++
 api/config/purify.php                         |   6 +-
 client/components/forms/MentionInput.vue      | 189 ++++++++++++++++++
 .../forms/RichTextAreaInput.client.vue        |  96 ++++++---
 client/components/forms/TextBlock.vue         |  49 +++++
 .../components/FormSubmissionFormatter.js     | 105 ++++++++++
 .../forms/components/MentionDropdown.vue      | 116 +++++++++++
 .../open/forms/OpenCompleteForm.vue           |  12 +-
 .../forms/components/FirstSubmissionModal.vue |   2 +-
 .../FormSubmissionSettings.vue                |   2 +
 .../SubmissionConfirmationIntegration.vue     |  18 +-
 client/data/blocks_types.json                 |  60 ++++--
 client/lib/quill/quillMentionExtension.js     | 177 ++++++++++++++++
 16 files changed, 880 insertions(+), 70 deletions(-)
 create mode 100644 api/app/Open/MentionParser.php
 create mode 100644 api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php
 create mode 100644 client/components/forms/MentionInput.vue
 create mode 100644 client/components/forms/TextBlock.vue
 create mode 100644 client/components/forms/components/FormSubmissionFormatter.js
 create mode 100644 client/components/forms/components/MentionDropdown.vue
 create mode 100644 client/lib/quill/quillMentionExtension.js

diff --git a/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php b/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php
index 8b40fe4a6..a556e13c5 100644
--- a/api/app/Integrations/Handlers/SubmissionConfirmationIntegration.php
+++ b/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'] ?? ''),
         ]);
     }
diff --git a/api/app/Mail/Forms/SubmissionConfirmationMail.php b/api/app/Mail/Forms/SubmissionConfirmationMail.php
index b50bb9c1e..2b0d249ee 100644
--- a/api/app/Mail/Forms/SubmissionConfirmationMail.php
+++ b/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,6 +17,8 @@ class SubmissionConfirmationMail extends OpenFormMail implements ShouldQueue
     use Queueable;
     use SerializesModels;
 
+    private $formattedData;
+
     /**
      * Create a new message instance.
      *
@@ -23,6 +26,12 @@ class SubmissionConfirmationMail extends OpenFormMail implements ShouldQueue
      */
     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();
+    }
 }
diff --git a/api/app/Open/MentionParser.php b/api/app/Open/MentionParser.php
new file mode 100644
index 000000000..f520763c5
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php b/api/app/Service/HtmlPurifier/OpenFormsHtmlDefinition.php
new file mode 100644
index 000000000..ba9fb807f
--- /dev/null
+++ b/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');
+    }
+}
diff --git a/api/config/purify.php b/api/config/purify.php
index 24c8d1ce4..a7c77e8a7 100644
--- a/api/config/purify.php
+++ b/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,
 
     /*
     |--------------------------------------------------------------------------
diff --git a/client/components/forms/MentionInput.vue b/client/components/forms/MentionInput.vue
new file mode 100644
index 000000000..fd70c464b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index 26143045c..48f0da479 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -24,12 +24,25 @@
       :style="inputStyle"
     />
 
+    <InputHelp
+      v-if="enableMentions"
+      help="Click @ to use form variables"
+      :help-classes="theme.default.help"
+    />
+
     <template #help>
       <slot name="help" />
     </template>
     <template #error>
       <slot name="error" />
     </template>
+
+    <MentionDropdown
+      v-if="enableMentions"
+      :state="mentionState"
+      :mentions="mentions"
+    />
+
   </InputWrapper>
 </template>
 
@@ -37,49 +50,74 @@
 import { Quill, VueEditor } from 'vue3-editor'
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
+import MentionDropdown from './components/MentionDropdown.vue'
+import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
 
 Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
 
 export default {
   name: 'RichTextAreaInput',
-  components: { InputWrapper, VueEditor },
+  components: { InputWrapper, VueEditor, MentionDropdown },
 
   props: {
     ...inputProps,
     editorOptions: {
       type: Object,
-      default: () => {
-        return {
-          formats: [
-            'bold',
-            'color',
-            'font',
-            'italic',
-            'link',
-            'underline',
-            'header',
-            'indent',
-            'list'
-          ]
+      default: () => ({
+        formats: [
+          'bold',
+          'color',
+          'font',
+          'italic',
+          'link',
+          'underline',
+          'header',
+          'indent',
+          'list',
+          'mention'
+        ],
+        modules: {
+          mention: {
+            mentions: [] // This will be populated with form fields
+          }
         }
-      }
+      })
     },
     editorToolbar: {
       type: Array,
-      default: () => {
-        return [
-          [{ header: 1 }, { header: 2 }],
-          ['bold', 'italic', 'underline', 'link'],
-          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }]
-        ]
-      }
+      default: () => [
+        [{ header: 1 }, { header: 2 }],
+        ['bold', 'italic', 'underline', 'link'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ color: [] }]
+      ]
+    },
+    mentions: {
+      type: Array,
+      default: () => []
+    },
+    enableMentions: {
+      type: Boolean,
+      default: false
     }
   },
 
-  setup (props, context) {
+  setup(props, context) {
+    const editorOptions = {
+      ...props.editorOptions,
+      modules: { 
+        ...props.editorOptions.modules,
+        mention: props.enableMentions ? { mentions: props.mentions } : undefined
+      }
+    }
+    const editorToolbar = props.enableMentions 
+      ? [...props.editorToolbar, ['mention']]
+      : props.editorToolbar
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
+      editorOptions,
+      editorToolbar,
+      mentionState: registerMentionExtension(Quill)
     }
   }
 }
@@ -120,4 +158,12 @@ export default {
     @apply text-nt-blue;
   }
 }
+
+.ql-mention::after {
+  content: '@';
+  font-size: 18px;
+}
+span[mention] {
+  @apply max-w-[150px] truncate overflow-hidden bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 inline-flex items-center align-baseline leading-tight text-sm relative;
+}
 </style>
diff --git a/client/components/forms/TextBlock.vue b/client/components/forms/TextBlock.vue
new file mode 100644
index 000000000..71b3218dc
--- /dev/null
+++ b/client/components/forms/TextBlock.vue
@@ -0,0 +1,49 @@
+<template>
+    <div
+      v-html="processedContent"
+    />
+  </template>
+  
+  <script setup>
+  import { FormSubmissionFormatter } from './components/FormSubmissionFormatter'
+  const props = defineProps({
+    content: {
+      type: String,
+      required: true
+    },
+    mentionsAllowed: {
+      type: Boolean,
+      default: false
+    },
+    form: {
+      type: Object,
+      default: null
+    },
+    formData: {
+      type: Object,
+      default: null
+    }
+  })
+  const processedContent = computed(() => {
+    const form = props.form
+    const formData = props.formData
+    if (!props.mentionsAllowed || !form || !formData) {
+      return props.content
+    }
+    const formatter = new FormSubmissionFormatter(form, formData).setOutputStringsOnly()
+    const formattedData = formatter.getFormattedData()
+    console.trace(props.content);
+    return props.content.replace(/<span[^>]*mention-field-id="([^"]*)"[^>]*mention-fallback="([^"]*)"[^>]*>.*?<\/span>/g, (match, fieldId, fallback) => {
+      const value = formattedData[fieldId]
+      if (value) {
+        if(Array.isArray(value)) {
+          return value.map(v => `<span>${v}</span>`).join(' ')
+        }
+        return `<span>${value}</span>`
+      } else if (fallback) {
+        return `<span>${fallback}</span>`
+      }
+      return ''
+    })
+  })
+  </script>
\ No newline at end of file
diff --git a/client/components/forms/components/FormSubmissionFormatter.js b/client/components/forms/components/FormSubmissionFormatter.js
new file mode 100644
index 000000000..ea7cab15e
--- /dev/null
+++ b/client/components/forms/components/FormSubmissionFormatter.js
@@ -0,0 +1,105 @@
+import { format, parseISO } from 'date-fns'
+
+export class FormSubmissionFormatter {
+  constructor(form, formData) {
+    this.form = form
+    this.formData = formData
+    this.createLinks = false
+    this.outputStringsOnly = false
+    this.showGeneratedIds = false
+    this.datesIsoFormat = false
+  }
+
+  setCreateLinks() {
+    this.createLinks = true
+    return this
+  }
+
+  setShowGeneratedIds() {
+    this.showGeneratedIds = true
+    return this
+  }
+
+  setOutputStringsOnly() {
+    this.outputStringsOnly = true
+    return this
+  }
+
+  setUseIsoFormatForDates() {
+    this.datesIsoFormat = true
+    return this
+  }
+
+  getFormattedData() {
+    const formattedData = {}
+
+    this.form.properties.forEach(field => {
+      if (!this.formData[field.id] && !this.fieldGeneratesId(field)) {
+        return
+      }
+
+      const value = this.formatFieldValue(field, this.formData[field.id])
+      formattedData[field.id] = value
+    })
+
+    return formattedData
+  }
+
+  formatFieldValue(field, value) {
+    switch (field.type) {
+      case 'url':
+        return this.createLinks ? `<a href="${value}">${value}</a>` : value
+      case 'email':
+        return this.createLinks ? `<a href="mailto:${value}">${value}</a>` : value
+      case 'checkbox':
+        return value ? 'Yes' : 'No'
+      case 'date':
+        return this.formatDateValue(field, value)
+      case 'people':
+        return this.formatPeopleValue(value)
+      case 'multi_select':
+        return this.outputStringsOnly ? value.join(', ') : value
+      case 'relation':
+        return this.formatRelationValue(value)
+      default:
+        return Array.isArray(value) && this.outputStringsOnly ? value.join(', ') : value
+    }
+  }
+
+  formatDateValue(field, value) {
+    if (this.datesIsoFormat) {
+      return Array.isArray(value) 
+        ? { start_date: value[0], end_date: value[1] || null }
+        : value
+    }
+
+    const dateFormat = (field.date_format || 'dd/MM/yyyy') === 'dd/MM/yyyy' ? 'dd/MM/yyyy' : 'MM/dd/yyyy'
+    const timeFormat = field.with_time ? (field.time_format === 24 ? 'HH:mm' : 'h:mm a') : ''
+    const fullFormat = `${dateFormat}${timeFormat ? ' ' + timeFormat : ''}`
+
+    if (Array.isArray(value)) {
+      const start = format(parseISO(value[0]), fullFormat)
+      const end = value[1] ? format(parseISO(value[1]), fullFormat) : null
+      return end ? `${start} - ${end}` : start
+    }
+
+    return format(parseISO(value), fullFormat)
+  }
+
+  formatPeopleValue(value) {
+    if (!value) return []
+    const people = Array.isArray(value) ? value : [value]
+    return this.outputStringsOnly ? people.map(p => p.name).join(', ') : people
+  }
+
+  formatRelationValue(value) {
+    if (!value) return []
+    const relations = Array.isArray(value) ? value : [value]
+    const formatted = relations.map(r => r.title || 'Untitled')
+    return this.outputStringsOnly ? formatted.join(', ') : formatted
+  }
+
+  fieldGeneratesId(field) {
+    return this.showGeneratedIds && (field.generates_auto_increment_id || field.generates_uuid)
+  }
+}
diff --git a/client/components/forms/components/MentionDropdown.vue b/client/components/forms/components/MentionDropdown.vue
new file mode 100644
index 000000000..49dcd0398
--- /dev/null
+++ b/client/components/forms/components/MentionDropdown.vue
@@ -0,0 +1,116 @@
+<template>
+    <UPopover
+      ref="popover"
+      v-model:open="open"
+      class="h-0"
+      @close="cancel"
+    >
+      <span class="hidden" />
+      <template #panel>
+        <div class="p-2 max-h-[300px] flex flex-col">
+          <div class="flex items-center border-b -mx-2 px-2">
+            <div class="font-semibold w-1/2 mb-2 flex-grow">
+              Insert Mention
+            </div>
+            <input
+              v-model="fallbackValue"
+              class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
+              placeholder="Fallback value"
+            >
+          </div>
+          <div class="overflow-scroll pt-2">
+            <div class="w-full max-w-xs mb-2">
+              <div class="text-sm text-gray-500 mb-1">
+                Select a field
+              </div>
+              <div class="space-y-1">
+                <div
+                  v-for="field in filteredMentions"
+                  :key="field.id"
+                  class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
+                  :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
+                  @click="selectField(field)"
+                  @dblclick="selectField(field, true)"
+                >
+                  <BlockTypeIcon
+                    :type="field.type"
+                    class="mr-2"
+                  />
+                  <p class="text-sm text-gray-700 truncate">
+                    {{ field.name }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+            
+          <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
+            <UButton
+              size="sm"
+              color="primary"
+              class="px-6"
+              :disabled="!selectedField"
+              @click="insertMention" 
+            >
+              Insert
+            </UButton>
+            <UButton
+              size="sm"
+              color="gray"
+              @click="cancel"
+            >
+              Cancel
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </template>
+      
+  <script setup>
+  import { ref, toRefs } from 'vue'
+  import BlockTypeIcon from '~/components/open/forms/components/BlockTypeIcon.vue'
+  import blocksTypes from '~/data/blocks_types.json'
+  const props = defineProps({
+    state: Object,
+    mentions: Array
+  })
+  defineShortcuts({
+    escape: () => {
+      open.value = false
+    }
+  })
+  const { open, onInsert, onCancel } = toRefs(props.state)
+  const selectedField = ref(null)
+  const fallbackValue = ref('')
+  const filteredMentions = computed(() => {
+    return props.mentions.filter(mention => blocksTypes[mention.type].is_input)
+  })
+  function selectField(field, insert = false) {
+    selectedField.value = {...field}
+    if (insert) {
+      insertMention()
+    }
+  }
+  watch(open, (newValue) => {
+    if (newValue) {
+      selectedField.value = null
+      fallbackValue.value = ''
+    }
+  })
+  const insertMention = () => {
+    if (selectedField.value && onInsert.value) {
+      onInsert.value({
+        field: selectedField.value,
+        fallback: fallbackValue.value
+      })
+      open.value = false
+    }
+  }
+  const cancel = () => {
+    if (onCancel.value) {
+      onCancel.value()
+    }
+    open.value = false
+  }
+  </script>
\ No newline at end of file
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index d0eb36516..12ec56747 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -140,9 +140,13 @@
         key="submitted"
         class="px-2"
       >
-        <p
+      <TextBlock
+          v-if="form.submitted_text"
           class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
-          v-html="form.submitted_text "
+          :content="form.submitted_text"
+          :mentions-allowed="true"
+          :form="form"
+          :form-data="submittedData"
         />
         <open-form-button
           v-if="form.re_fillable"
@@ -222,7 +226,8 @@ export default {
         password: null
       }),
       hidePasswordDisabledMsg: false,
-      submissionId: false
+      submissionId: false,
+      submittedData: null
     }
   },
 
@@ -261,6 +266,7 @@ export default {
       this.loading = true
 
       form.post('/forms/' + this.form.slug + '/answer').then((data) => {
+        this.submittedData = form.data()
         useAmplitude().logEvent('form_submission', {
           workspace_id: this.form.workspace_id,
           form_id: this.form.id
diff --git a/client/components/open/forms/components/FirstSubmissionModal.vue b/client/components/open/forms/components/FirstSubmissionModal.vue
index 25fbbf990..333990ee9 100644
--- a/client/components/open/forms/components/FirstSubmissionModal.vue
+++ b/client/components/open/forms/components/FirstSubmissionModal.vue
@@ -2,7 +2,7 @@
   <modal
     :show="show"
     compact-header
-    backdrop-blur="sm"
+    ;backdrop-blur="true"
     @close="$emit('close')"
   >
     <template #title>
diff --git a/client/components/open/forms/components/form-components/FormSubmissionSettings.vue b/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
index 1a5214388..41625e1d7 100644
--- a/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
+++ b/client/components/open/forms/components/form-components/FormSubmissionSettings.vue
@@ -129,6 +129,8 @@
       </template>
       <template v-else>
         <rich-text-area-input
+          enable-mentions
+          :mentions="form.properties"
           name="submitted_text"
           class="w-full"
           :form="form"
diff --git a/client/components/open/integrations/SubmissionConfirmationIntegration.vue b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
index 6a9885d8c..15fd02fb2 100644
--- a/client/components/open/integrations/SubmissionConfirmationIntegration.vue
+++ b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
@@ -24,30 +24,32 @@
         name="settings.notification_sender"
         class="mt-4"
         required
-        label="Confirmation Email Sender Name"
+        label="Email Sender Name"
         help="Emails will be sent from our email address but you can customize the name of the Sender"
       />
-      <text-input
+      <MentionInput
         :form="integrationData"
+        :mentions="form.properties"
         name="settings.notification_subject"
         class="mt-4"
         required
-        label="Confirmation email subject"
-        help="Subject of the confirmation email that will be sent"
+        label="Email subject"
       />
       <rich-text-area-input
         :form="integrationData"
         name="settings.notification_body"
+        :enable-mentions="true"
+        :mentions="form.properties"
         class="mt-4"
         required
-        label="Confirmation email content"
-        help="Content of the confirmation email that will be sent"
+        label="Email content"
       />
-      <text-input
+      <MentionInput
         :form="integrationData"
+        :mentions="form.properties"
         name="settings.confirmation_reply_to"
         class="mt-4"
-        label="Confirmation Reply To"
+        label="Reply To"
         help="If empty, Reply-to will be your own email."
       />
       <toggle-switch-input
diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
index c13950505..0a1ac7b9b 100644
--- a/client/data/blocks_types.json
+++ b/client/data/blocks_types.json
@@ -5,7 +5,8 @@
     "icon": "i-heroicons-bars-3-bottom-left",
     "default_block_name": "Your name",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "date": {
     "name": "date",
@@ -13,7 +14,8 @@
     "icon": "i-heroicons-calendar-20-solid",
     "default_block_name": "Date",
     "bg_class": "bg-green-100",
-    "text_class": "text-green-900"
+    "text_class": "text-green-900",
+    "is_input": true
   },
   "url": {
     "name": "url",
@@ -21,7 +23,8 @@
     "icon": "i-heroicons-link-20-solid",
     "default_block_name": "Link",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "phone_number": {
     "name": "phone_number",
@@ -29,7 +32,8 @@
     "icon": "i-heroicons-phone-20-solid",
     "default_block_name": "Phone Number",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "email": {
     "name": "email",
@@ -37,7 +41,8 @@
     "icon": "i-heroicons-at-symbol-20-solid",
     "default_block_name": "Email",
     "bg_class": "bg-blue-100",
-    "text_class": "text-blue-900"
+    "text_class": "text-blue-900",
+    "is_input": true
   },
   "checkbox": {
     "name": "checkbox",
@@ -45,7 +50,8 @@
     "icon": "i-heroicons-check-circle",
     "default_block_name": "Checkbox",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "select": {
     "name": "select",
@@ -53,7 +59,8 @@
     "icon": "i-heroicons-chevron-up-down-20-solid",
     "default_block_name": "Select",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "multi_select": {
     "name": "multi_select",
@@ -61,7 +68,8 @@
     "icon": "i-heroicons-chevron-up-down-20-solid",
     "default_block_name": "Multi Select",
     "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "matrix": {
     "name": "matrix",
@@ -69,7 +77,8 @@
     "icon": "i-heroicons-table-cells-20-solid",
     "default_block_name": "Matrix",
      "bg_class": "bg-red-100",
-    "text_class": "text-red-900"
+    "text_class": "text-red-900",
+    "is_input": true
   },
   "number": {
     "name": "number",
@@ -77,7 +86,8 @@
     "icon": "i-heroicons-hashtag-20-solid",
     "default_block_name": "Number",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "rating": {
     "name": "rating",
@@ -85,7 +95,8 @@
     "icon": "i-heroicons-star",
     "default_block_name": "Rating",
      "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "scale": {
     "name": "scale",
@@ -93,7 +104,8 @@
     "icon": "i-heroicons-scale-20-solid",
     "default_block_name": "Scale",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "slider": {
     "name": "slider",
@@ -101,7 +113,8 @@
     "icon": "i-heroicons-adjustments-horizontal",
     "default_block_name": "Slider",
     "bg_class": "bg-purple-100",
-    "text_class": "text-purple-900"
+    "text_class": "text-purple-900",
+    "is_input": true
   },
   "files": {
     "name": "files",
@@ -109,7 +122,8 @@
     "icon": "i-heroicons-paper-clip",
     "default_block_name": "Files",
     "bg_class": "bg-pink-100",
-    "text_class": "text-pink-900"
+    "text_class": "text-pink-900",
+    "is_input": true
   },
   "signature": {
     "name": "signature",
@@ -117,7 +131,8 @@
     "icon": "i-heroicons-pencil-square-20-solid",
     "default_block_name": "Signature",
     "bg_class": "bg-pink-100",
-    "text_class": "text-pink-900"
+    "text_class": "text-pink-900",
+    "is_input": true
   },
   "nf-text": {
     "name": "nf-text",
@@ -125,7 +140,8 @@
     "icon": "i-heroicons-bars-3",
     "default_block_name": "Text",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   },
   "nf-page-break": {
     "name": "nf-page-break",
@@ -133,7 +149,8 @@
     "icon": "i-heroicons-document-plus",
     "default_block_name": "Page Break",
     "bg_class": "bg-gray-100",
-    "text_class": "text-gray-900"
+    "text_class": "text-gray-900",
+    "is_input": false
   },
   "nf-divider": {
     "name": "nf-divider",
@@ -141,7 +158,8 @@
     "icon": "i-heroicons-minus",
     "default_block_name": "Divider",
     "bg_class": "bg-gray-100",
-    "text_class": "text-gray-900"
+    "text_class": "text-gray-900",
+    "is_input": false
   },
   "nf-image": {
     "name": "nf-image",
@@ -149,7 +167,8 @@
     "icon": "i-heroicons-photo",
     "default_block_name": "Image",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   },
   "nf-code": {
     "name": "nf-code",
@@ -157,6 +176,7 @@
     "icon": "i-heroicons-code-bracket",
     "default_block_name": "Code Block",
     "bg_class": "bg-yellow-100",
-    "text_class": "text-yellow-900"
+    "text_class": "text-yellow-900",
+    "is_input": false
   }
 }
diff --git a/client/lib/quill/quillMentionExtension.js b/client/lib/quill/quillMentionExtension.js
new file mode 100644
index 000000000..853fb10a8
--- /dev/null
+++ b/client/lib/quill/quillMentionExtension.js
@@ -0,0 +1,177 @@
+import Quill from 'quill'
+
+import { reactive, nextTick } from 'vue'
+
+
+
+
+const Embed = Quill.import('blots/embed')
+
+
+
+
+class MentionBlot extends Embed {
+
+  static blotName = "mention"
+
+  static tagName = "span"
+
+
+
+
+  static create(data) {
+
+    const node = super.create()
+
+    node.setAttribute('mention-field-id', data.field.id)
+
+    node.setAttribute('mention-field-name', data.field.name)
+
+    node.setAttribute('mention-fallback', data.fallback)
+
+    node.setAttribute('contenteditable', 'false')
+
+    node.setAttribute('mention', true)
+
+
+
+
+    node.textContent = data.field.name.length > 25 ? `${data.field.name.slice(0, 25)}...` : data.field.name
+
+    return node
+
+  }
+
+
+
+
+  static value(node) {
+
+    return {
+
+      field_id: node.getAttribute('mention-field-id'),
+
+      field_name: node.getAttribute('mention-field-name'),
+
+      fallback: node.getAttribute('mention-fallback'),
+
+    }
+
+  }
+
+
+
+
+  static formats() {
+
+    return true
+
+  }
+
+}
+
+
+
+
+export default function registerMentionExtension(Quill) {
+
+  const mentionState = reactive({
+
+    open: false,
+
+    onInsert: null,
+
+    onCancel: null,
+
+  })
+
+
+
+
+  if (!Quill.imports['modules/mention']) {
+
+    Quill.register(MentionBlot)
+
+
+
+
+    class MentionModule {
+
+      constructor(quill, options) {
+
+        this.quill = quill
+
+        this.options = options
+
+        this.setupMentions()
+
+      }
+
+
+
+
+      setupMentions() {
+
+        this.quill.getModule('toolbar').addHandler('mention', () => {
+
+          const range = this.quill.getSelection()
+
+          if (range) {
+
+            mentionState.open = true
+
+            mentionState.onInsert = (mention) => {
+
+              this.insertMention(mention, range.index)
+
+            }
+
+            mentionState.onCancel = () => {
+
+              mentionState.open = false
+
+            }
+
+          }
+
+        })
+
+      }
+
+
+
+
+      insertMention(mention, index) {
+
+        this.quill.insertEmbed(index, 'mention', mention)
+
+        this.quill.insertText(index + 1, ' ')
+
+        this.quill.setSelection(index + 2)
+
+
+
+
+        nextTick(() => {
+
+          mentionState.open = false
+
+        })
+
+      }
+
+    }
+
+
+
+
+    Quill.register('modules/mention', MentionModule)
+
+  }
+
+
+
+
+  return mentionState
+
+}
\ No newline at end of file

From 70804efe0bcacb67bc618cebd9abf5ad770781f3 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Wed, 9 Oct 2024 15:56:25 +0100
Subject: [PATCH 2/9] fix lint

---
 api/app/Mail/Forms/SubmissionConfirmationMail.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/app/Mail/Forms/SubmissionConfirmationMail.php b/api/app/Mail/Forms/SubmissionConfirmationMail.php
index 2b0d249ee..2bc417750 100644
--- a/api/app/Mail/Forms/SubmissionConfirmationMail.php
+++ b/api/app/Mail/Forms/SubmissionConfirmationMail.php
@@ -43,7 +43,7 @@ public function build()
     {
         $form = $this->event->form;
 
-       
+
         return $this
             ->replyTo($this->getReplyToEmail($form->creator->email))
             ->from($this->getFromEmail(), $this->integrationData->notification_sender)

From 4640b2630a848263587bff43ddf981c365341bd5 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Wed, 9 Oct 2024 16:32:48 +0100
Subject: [PATCH 3/9] add missing changes

---
 .../mail/form/confirmation-submission-notification.blade.php    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/resources/views/mail/form/confirmation-submission-notification.blade.php b/api/resources/views/mail/form/confirmation-submission-notification.blade.php
index 871998f30..271779fc0 100644
--- a/api/resources/views/mail/form/confirmation-submission-notification.blade.php
+++ b/api/resources/views/mail/form/confirmation-submission-notification.blade.php
@@ -1,6 +1,6 @@
 @component('mail::message', ['noBranding' => $noBranding])
 
-{!! $integrationData->notification_body !!}
+{!! $notificationBody !!}
 
 @if($form->editable_submissions)
 @component('mail::button', ['url' => $form->share_url.'?submission_id='.$submission_id])

From 1b5dc997a312494745a8b703da8b8d695e1de1ed Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Wed, 9 Oct 2024 16:59:33 +0100
Subject: [PATCH 4/9] fix tests

---
 api/app/Mail/Forms/SubmissionConfirmationMail.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/api/app/Mail/Forms/SubmissionConfirmationMail.php b/api/app/Mail/Forms/SubmissionConfirmationMail.php
index 2bc417750..ab51190a0 100644
--- a/api/app/Mail/Forms/SubmissionConfirmationMail.php
+++ b/api/app/Mail/Forms/SubmissionConfirmationMail.php
@@ -49,6 +49,7 @@ public function build()
             ->from($this->getFromEmail(), $this->integrationData->notification_sender)
             ->subject($this->getSubject())
             ->markdown('mail.form.confirmation-submission-notification', [
+                'notificationBody' => $this->getNotificationBody(),
                 'fields' => $this->formattedData,
                 'form' => $form,
                 'integrationData' => $this->integrationData,

From 3773313c50349641872552dc530111e0defa0291 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 10 Oct 2024 11:02:30 +0100
Subject: [PATCH 5/9] update quilly, fix bugs

---
 api/app/Open/MentionParser.php                |  50 +++-
 api/config/purify.php                         |   2 +-
 .../Unit/Service/Forms/MentionParserTest.php  | 196 ++++++++++++++++
 .../forms/RichTextAreaInput.client.vue        | 180 +++++++-------
 .../forms/components/QuillyEditor.vue         |  98 ++++++++
 client/composables/lib/vForm/Form.js          |   2 +-
 client/lib/quill/quillMentionExtension.js     | 219 +++++++-----------
 client/package.json                           |   2 +-
 8 files changed, 517 insertions(+), 232 deletions(-)
 create mode 100644 api/tests/Unit/Service/Forms/MentionParserTest.php
 create mode 100644 client/components/forms/components/QuillyEditor.vue

diff --git a/api/app/Open/MentionParser.php b/api/app/Open/MentionParser.php
index f520763c5..4b9e4dd7d 100644
--- a/api/app/Open/MentionParser.php
+++ b/api/app/Open/MentionParser.php
@@ -2,6 +2,9 @@
 
 namespace App\Open;
 
+use DOMDocument;
+use DOMXPath;
+
 class MentionParser
 {
     private $content;
@@ -15,7 +18,48 @@ public function __construct($content, $data)
 
     public function parse()
     {
-        return $this->replaceMentions();
+        $doc = new DOMDocument();
+        // Disable libxml errors and use internal errors
+        $internalErrors = libxml_use_internal_errors(true);
+
+        // Wrap the content in a root element to ensure it's valid XML
+        $wrappedContent = '<root>' . $this->content . '</root>';
+
+        // Load HTML, using UTF-8 encoding
+        $doc->loadHTML(mb_convert_encoding($wrappedContent, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
+
+        // Restore libxml error handling
+        libxml_use_internal_errors($internalErrors);
+
+        $xpath = new DOMXPath($doc);
+        $mentionElements = $xpath->query("//span[@mention]");
+
+        foreach ($mentionElements as $element) {
+            $fieldId = $element->getAttribute('mention-field-id');
+            $fallback = $element->getAttribute('mention-fallback');
+            $value = $this->getData($fieldId);
+
+            if ($value !== null) {
+                $textNode = $doc->createTextNode(is_array($value) ? implode(', ', $value) : $value);
+                $element->parentNode->replaceChild($textNode, $element);
+            } elseif ($fallback) {
+                $textNode = $doc->createTextNode($fallback);
+                $element->parentNode->replaceChild($textNode, $element);
+            } else {
+                $element->parentNode->removeChild($element);
+            }
+        }
+
+        // Extract and return the processed HTML content
+        $result = $doc->saveHTML($doc->getElementsByTagName('root')->item(0));
+
+        // Remove the root tags we added
+        $result = preg_replace('/<\/?root>/', '', $result);
+
+        // Trim whitespace and convert HTML entities back to UTF-8 characters
+        $result = trim(html_entity_decode($result, ENT_QUOTES | ENT_HTML5, 'UTF-8'));
+
+        return $result;
     }
 
     private function replaceMentions()
@@ -42,9 +86,7 @@ private function replaceMentions()
 
     private function getData($fieldId)
     {
-        $value = collect($this->data)->filter(function ($item) use ($fieldId) {
-            return $item['id'] === $fieldId;
-        })->first()['value'] ?? null;
+        $value = collect($this->data)->firstWhere('nf_id', $fieldId)['value'] ?? null;
 
         if (is_object($value)) {
             return (array) $value;
diff --git a/api/config/purify.php b/api/config/purify.php
index a7c77e8a7..f440c058c 100644
--- a/api/config/purify.php
+++ b/api/config/purify.php
@@ -40,7 +40,7 @@
     'configs' => [
 
         'default' => [
-            '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.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],*[style]',
             'HTML.ForbiddenElements' => '',
             'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,text-decoration,color,text-align',
 
diff --git a/api/tests/Unit/Service/Forms/MentionParserTest.php b/api/tests/Unit/Service/Forms/MentionParserTest.php
new file mode 100644
index 000000000..79ed8667c
--- /dev/null
+++ b/api/tests/Unit/Service/Forms/MentionParserTest.php
@@ -0,0 +1,196 @@
+<?php
+
+
+
+
+use App\Open\MentionParser;
+
+
+
+
+test('it replaces mention elements with their corresponding values', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => 'World']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello World</p>');
+
+});
+
+
+
+
+test('it handles multiple mentions', function () {
+
+    $content = '<p><span mention mention-field-id="123">Name</span> is <span mention mention-field-id="456">Age</span> years old</p>';
+
+    $data = [
+
+        ['nf_id' => '123', 'value' => 'John'],
+
+        ['nf_id' => '456', 'value' => 30],
+
+    ];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>John is 30 years old</p>');
+
+});
+
+
+
+
+test('it uses fallback when value is not found', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123" mention-fallback="Friend">Placeholder</span></p>';
+
+    $data = [];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello Friend</p>');
+
+});
+
+
+
+
+test('it removes mention element when no value and no fallback', function () {
+
+    $content = '<p>Hello <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Hello </p>');
+
+});
+
+
+
+
+test('it handles array values', function () {
+
+    $content = '<p>Tags: <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => ['PHP', 'Laravel', 'Testing']]];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>Tags: PHP, Laravel, Testing</p>');
+
+});
+
+
+
+
+test('it preserves HTML structure', function () {
+
+    $content = '<div><p>Hello <span mention mention-field-id="123">Placeholder</span></p><p>How are you?</p></div>';
+
+    $data = [['nf_id' => '123', 'value' => 'World']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<div><p>Hello World</p><p>How are you?</p></div>');
+
+});
+
+
+
+
+test('it handles UTF-8 characters', function () {
+
+    $content = '<p>こんにちは <span mention mention-field-id="123">Placeholder</span></p>';
+
+    $data = [['nf_id' => '123', 'value' => '世界']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('<p>こんにちは 世界</p>');
+
+});
+
+
+
+
+test('it handles content without surrounding paragraph tags', function () {
+
+    $content = 'some text <span contenteditable="false" mention="" mention-field-id="123" mention-field-name="Post excerpt" mention-fallback="">Post excerpt</span> dewde';
+
+    $data = [['nf_id' => '123', 'value' => 'replaced text']];
+
+
+
+
+    $parser = new MentionParser($content, $data);
+
+    $result = $parser->parse();
+
+
+
+
+    expect($result)->toBe('some text replaced text dewde');
+
+});
\ No newline at end of file
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index 48f0da479..72ba8a538 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -4,12 +4,8 @@
       <slot name="label" />
     </template>
 
-    <VueEditor
-      :id="id ? id : name"
-      ref="editor"
-      v-model="compVal"
-      :disabled="disabled ? true : null"
-      :placeholder="placeholder"
+   <div
+      class="rich-editor resize-y"
       :class="[
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
@@ -17,18 +13,23 @@
         },
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,
+        theme.default.fontSize,
       ]"
-      :editor-options="editorOptions"
-      :editor-toolbar="editorToolbar"
-      class="rich-editor resize-y"
-      :style="inputStyle"
-    />
-
-    <InputHelp
-      v-if="enableMentions"
-      help="Click @ to use form variables"
-      :help-classes="theme.default.help"
-    />
+      :style="{
+        '--font-size': theme.default.fontSize
+      }"
+    >
+      <QuillyEditor
+        :id="id ? id : name"
+        ref="editor"
+        :key="id+placeholder"
+        v-model="compVal"
+        :options="quillOptions"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :style="inputStyle"
+      />
+    </div>
 
     <template #help>
       <slot name="help" />
@@ -38,7 +39,7 @@
     </template>
 
     <MentionDropdown
-      v-if="enableMentions"
+      v-if="enableMentions && mentionState"
       :state="mentionState"
       :mentions="mentions"
     />
@@ -46,81 +47,63 @@
   </InputWrapper>
 </template>
 
-<script>
-import { Quill, VueEditor } from 'vue3-editor'
+<script setup>
+import Quill from 'quill'
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
+import QuillyEditor from './components/QuillyEditor.vue'
 import MentionDropdown from './components/MentionDropdown.vue'
 import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
-
-Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
-
-export default {
-  name: 'RichTextAreaInput',
-  components: { InputWrapper, VueEditor, MentionDropdown },
-
-  props: {
-    ...inputProps,
-    editorOptions: {
-      type: Object,
-      default: () => ({
-        formats: [
-          'bold',
-          'color',
-          'font',
-          'italic',
-          'link',
-          'underline',
-          'header',
-          'indent',
-          'list',
-          'mention'
-        ],
-        modules: {
-          mention: {
-            mentions: [] // This will be populated with form fields
-          }
-        }
-      })
-    },
-    editorToolbar: {
-      type: Array,
-      default: () => [
-        [{ header: 1 }, { header: 2 }],
-        ['bold', 'italic', 'underline', 'link'],
+const props = defineProps({
+  ...inputProps,
+  editorOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  enableMentions: {
+    type: Boolean,
+    default: false
+  },
+  mentions: {
+    type: Array,
+    default: () => []
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
+const editor = ref(null)
+const mentionState = ref(null)
+// Move the mention extension registration to onMounted
+onMounted(() => {
+  if (props.enableMentions && !Quill.imports['blots/mention']) {
+    mentionState.value = registerMentionExtension(Quill)
+  }
+})
+const quillOptions = computed(() => {
+  const defaultOptions = {
+    theme: 'snow',
+    modules: {
+      toolbar: [
+        [{ 'header': 1 }, { 'header': 2 }],
+        ['bold', 'italic', 'underline', 'strike'],
+        ['link'],
         [{ list: 'ordered' }, { list: 'bullet' }],
-        [{ color: [] }]
+        [{ color: [] }],
       ]
-    },
-    mentions: {
-      type: Array,
-      default: () => []
-    },
-    enableMentions: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  setup(props, context) {
-    const editorOptions = {
-      ...props.editorOptions,
-      modules: { 
-        ...props.editorOptions.modules,
-        mention: props.enableMentions ? { mentions: props.mentions } : undefined
-      }
     }
-    const editorToolbar = props.enableMentions 
-      ? [...props.editorToolbar, ['mention']]
-      : props.editorToolbar
-    return {
-      ...useFormInput(props, context),
-      editorOptions,
-      editorToolbar,
-      mentionState: registerMentionExtension(Quill)
+  }
+  const mergedOptions = { ...defaultOptions, ...props.editorOptions, modules: { ...defaultOptions.modules, ...props.editorOptions.modules } }
+  
+  if (props.enableMentions) {
+    mergedOptions.modules.mention = true
+    if (!mergedOptions.modules.toolbar) {
+      mergedOptions.modules.toolbar = []
     }
+    mergedOptions.modules.toolbar.push(['mention'])
   }
-}
+  
+  return mergedOptions
+})
 </script>
 
 <style lang="scss">
@@ -129,18 +112,22 @@ export default {
     border-bottom: 0px !important;
     border-right: 0px !important;
     border-left: 0px !important;
-
+    font-size: var(--font-size);
     .ql-editor {
       min-height: 100px !important;
     }
   }
-
   .ql-toolbar {
     border-top: 0px !important;
     border-right: 0px !important;
     border-left: 0px !important;
   }
-
+  .ql-header {
+    @apply rounded-md;
+  }
+  .ql-editor.ql-blank:before {
+    @apply text-gray-400 dark:text-gray-500 not-italic;
+  }
   .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
   .ql-snow .ql-toolbar .ql-picker-item:hover,
   .ql-snow .ql-toolbar .ql-picker-label.ql-active,
@@ -158,12 +145,21 @@ export default {
     @apply text-nt-blue;
   }
 }
-
+.ql-mention {
+  padding-top: 0px !important;
+}
 .ql-mention::after {
   content: '@';
-  font-size: 18px;
+  font-size: 16px;
 }
-span[mention] {
-  @apply max-w-[150px] truncate overflow-hidden bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 inline-flex items-center align-baseline leading-tight text-sm relative;
+.rich-editor {
+  span[mention] {
+    @apply inline-flex items-center align-baseline leading-tight text-sm relative bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 py-0.5 mx-0.5;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+  }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/client/components/forms/components/QuillyEditor.vue b/client/components/forms/components/QuillyEditor.vue
new file mode 100644
index 000000000..854cb714c
--- /dev/null
+++ b/client/components/forms/components/QuillyEditor.vue
@@ -0,0 +1,98 @@
+<template>
+    <div
+      ref="container"
+      class="quilly-editor"
+    />
+  </template>
+  
+  <script setup>
+  import Quill from 'quill'
+  import 'quill/dist/quill.snow.css'
+  import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+  
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+  
+  const emit = defineEmits([
+    'update:modelValue',
+    'text-change',
+    'selection-change',
+    'editor-change',
+    'blur',
+    'focus',
+    'ready'
+  ])
+  
+  let quillInstance = null
+  const container = ref(null)
+  let isInternalChange = false
+  
+  const setContents = (content) => {
+    if (!quillInstance) return
+  
+    isInternalChange = true
+    quillInstance.root.innerHTML = content
+    quillInstance.update()
+    isInternalChange = false
+  }
+  
+  const initializeQuill = () => {
+    if (container.value) {
+      quillInstance = new Quill(container.value, props.options)
+  
+      quillInstance.on('selection-change', (range, oldRange, source) => {
+        if (!range) {
+          emit('blur', quillInstance)
+        } else {
+          emit('focus', quillInstance)
+        }
+        emit('selection-change', { range, oldRange, source })
+      })
+  
+      quillInstance.on('text-change', (delta, oldContents, source) => {
+        if (!isInternalChange) {
+          const html = quillInstance.root.innerHTML
+          emit('text-change', { delta, oldContents, source })
+          emit('update:modelValue', html)
+        }
+      })
+  
+      quillInstance.on('editor-change', (eventName, ...args) => {
+        emit('editor-change', eventName, ...args)
+      })
+  
+      if (props.modelValue) {
+        setContents(props.modelValue)
+      }
+  
+      emit('ready', quillInstance)
+    }
+  }
+  
+  onMounted(() => {
+    initializeQuill()
+  })
+  
+  watch(() => props.modelValue, (newValue) => {
+    if (quillInstance && newValue !== quillInstance.root.innerHTML) {
+      setContents(newValue || '')
+    }
+  }, { immediate: true })
+  
+  onBeforeUnmount(() => {
+    if (quillInstance) {
+      quillInstance.off('selection-change')
+      quillInstance.off('text-change')
+      quillInstance.off('editor-change')
+    }
+    quillInstance = null
+  })
+  </script>
\ No newline at end of file
diff --git a/client/composables/lib/vForm/Form.js b/client/composables/lib/vForm/Form.js
index b8e3c384c..cab2744cc 100644
--- a/client/composables/lib/vForm/Form.js
+++ b/client/composables/lib/vForm/Form.js
@@ -89,7 +89,7 @@ class Form {
     Object.keys(this)
       .filter((key) => !Form.ignore.includes(key))
       .forEach((key) => {
-        this[key] = JSON.parse(JSON.stringify(this.originalData[key]))
+        this[key] = cloneDeep(this.originalData[key])
       })
   }
 
diff --git a/client/lib/quill/quillMentionExtension.js b/client/lib/quill/quillMentionExtension.js
index 853fb10a8..ffb28d8d6 100644
--- a/client/lib/quill/quillMentionExtension.js
+++ b/client/lib/quill/quillMentionExtension.js
@@ -1,177 +1,130 @@
+import { reactive } from 'vue'
 import Quill from 'quill'
+const Inline = Quill.import('blots/inline')
 
-import { reactive, nextTick } from 'vue'
-
-
-
-
-const Embed = Quill.import('blots/embed')
-
-
-
-
-class MentionBlot extends Embed {
-
-  static blotName = "mention"
-
-  static tagName = "span"
-
-
-
-
-  static create(data) {
-
-    const node = super.create()
-
-    node.setAttribute('mention-field-id', data.field.id)
-
-    node.setAttribute('mention-field-name', data.field.name)
-
-    node.setAttribute('mention-fallback', data.fallback)
-
-    node.setAttribute('contenteditable', 'false')
-
-    node.setAttribute('mention', true)
-
-
-
-
-    node.textContent = data.field.name.length > 25 ? `${data.field.name.slice(0, 25)}...` : data.field.name
-
-    return node
-
-  }
-
-
-
-
-  static value(node) {
-
-    return {
-
-      field_id: node.getAttribute('mention-field-id'),
-
-      field_name: node.getAttribute('mention-field-name'),
-
-      fallback: node.getAttribute('mention-fallback'),
-
+export default function registerMentionExtension(Quill) {
+  class MentionBlot extends Inline {
+    static blotName = 'mention'
+    static tagName = 'SPAN'
+
+    static create(data) {
+      let node = super.create()
+      MentionBlot.setAttributes(node, data)
+      return node
     }
 
-  }
+    static setAttributes(node, data) {
+      node.setAttribute('contenteditable', 'false')
+      node.setAttribute('mention', 'true')
+
+      if (data && typeof data === 'object') {
+        node.setAttribute('mention-field-id', data.field?.nf_id || '')
+        node.setAttribute('mention-field-name', data.field?.name || '')
+        node.setAttribute('mention-fallback', data.fallback || '')
+        node.textContent = data.field?.name || ''
+      } else {
+        // Handle case where data is not an object (e.g., during undo)
+        node.textContent = data || ''
+      }
+    }
 
+    static formats(domNode) {
+      return {
+        'mention-field-id': domNode.getAttribute('mention-field-id') || '',
+        'mention-field-name': domNode.getAttribute('mention-field-name') || '',
+        'mention-fallback': domNode.getAttribute('mention-fallback') || ''
+      }
+    }
 
+    format(name, value) {
+      if (name === 'mention' && value) {
+        MentionBlot.setAttributes(this.domNode, value)
+      } else {
+        super.format(name, value)
+      }
+    }
 
+    formats() {
+      let formats = super.formats()
+      formats['mention'] = MentionBlot.formats(this.domNode)
+      return formats
+    }
 
-  static formats() {
+    static value(domNode) {
+      return {
+        field: {
+          nf_id: domNode.getAttribute('mention-field-id') || '',
+          name: domNode.getAttribute('mention-field-name') || ''
+        },
+        fallback: domNode.getAttribute('mention-fallback') || ''
+      }
+    }
 
-    return true
+    // Override attach to ensure contenteditable is always set
+    attach() {
+      super.attach()
+      this.domNode.setAttribute('contenteditable', 'false')
+    }
 
+    length() {
+      return 1
+    }
   }
 
-}
-
-
-
-
-export default function registerMentionExtension(Quill) {
+  Quill.register(MentionBlot)
 
   const mentionState = reactive({
-
     open: false,
-
     onInsert: null,
-
     onCancel: null,
-
   })
 
+  class MentionModule {
+    constructor(quill, options) {
+      this.quill = quill
+      this.options = options
 
+      this.setupMentions()
+    }
 
-
-  if (!Quill.imports['modules/mention']) {
-
-    Quill.register(MentionBlot)
-
-
-
-
-    class MentionModule {
-
-      constructor(quill, options) {
-
-        this.quill = quill
-
-        this.options = options
-
-        this.setupMentions()
-
-      }
-
-
-
-
-      setupMentions() {
-
-        this.quill.getModule('toolbar').addHandler('mention', () => {
-
+    setupMentions() {
+      const toolbar = this.quill.getModule('toolbar')
+      if (toolbar) {
+        toolbar.addHandler('mention', () => {
           const range = this.quill.getSelection()
-
           if (range) {
-
             mentionState.open = true
-
             mentionState.onInsert = (mention) => {
-
               this.insertMention(mention, range.index)
-
             }
-
             mentionState.onCancel = () => {
-
               mentionState.open = false
-
             }
-
           }
-
         })
-
       }
-
-
-
-
-      insertMention(mention, index) {
-
-        this.quill.insertEmbed(index, 'mention', mention)
-
-        this.quill.insertText(index + 1, ' ')
-
-        this.quill.setSelection(index + 2)
-
-
-
-
-        nextTick(() => {
-
-          mentionState.open = false
-
-        })
-
-      }
-
     }
 
+    insertMention(mention, index) {
+      mentionState.open = false
 
+      // Insert the mention
+      this.quill.insertEmbed(index, 'mention', mention, Quill.sources.USER)
 
+      // Calculate the length of the inserted mention
+      const mentionLength = this.quill.getLength() - index
 
-    Quill.register('modules/mention', MentionModule)
+      nextTick(() => {
+        // Focus the editor
+        this.quill.focus()
 
+        // Set the selection after the mention
+        this.quill.setSelection(index + mentionLength, 0, Quill.sources.SILENT)
+      })
+    }
   }
 
-
-
+  Quill.register('modules/mention', MentionModule)
 
   return mentionState
-
 }
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index d5ca746c2..ba1c30512 100644
--- a/client/package.json
+++ b/client/package.json
@@ -59,6 +59,7 @@
     "prismjs": "^1.24.1",
     "qrcode": "^1.5.1",
     "query-builder-vue-3": "^1.0.1",
+    "quill": "^2.0.2",
     "tailwind-merge": "^2.3.0",
     "tinymotion": "^0.2.0",
     "v-calendar": "^3.1.2",
@@ -70,7 +71,6 @@
     "vue-json-pretty": "^2.4.0",
     "vue-notion": "^3.0.0-beta.1",
     "vue-signature-pad": "^3.0.2",
-    "vue3-editor": "^0.1.1",
     "vuedraggable": "next",
     "webcam-easy": "^1.1.1"
   },

From f8c2b30a8e09cbd5fddee530ad1a44fe8e46ce71 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 10 Oct 2024 11:14:20 +0100
Subject: [PATCH 6/9] fix lint

---
 api/tests/Unit/Service/Forms/MentionParserTest.php | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/api/tests/Unit/Service/Forms/MentionParserTest.php b/api/tests/Unit/Service/Forms/MentionParserTest.php
index 79ed8667c..908f0bc1b 100644
--- a/api/tests/Unit/Service/Forms/MentionParserTest.php
+++ b/api/tests/Unit/Service/Forms/MentionParserTest.php
@@ -5,9 +5,6 @@
 
 use App\Open\MentionParser;
 
-
-
-
 test('it replaces mention elements with their corresponding values', function () {
 
     $content = '<p>Hello <span mention mention-field-id="123">Placeholder</span></p>';
@@ -193,4 +190,4 @@
 
     expect($result)->toBe('some text replaced text dewde');
 
-});
\ No newline at end of file
+});

From 1e96b468c70258ed077b0c76e64f573a11140f6e Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 10 Oct 2024 12:07:13 +0100
Subject: [PATCH 7/9] apply fixes

---
 client/components/forms/MentionInput.vue      |  1 +
 .../forms/RichTextAreaInput.client.vue        |  3 +-
 client/composables/useParseMention.js         | 39 +++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 client/composables/useParseMention.js

diff --git a/client/components/forms/MentionInput.vue b/client/components/forms/MentionInput.vue
index fd70c464b..3dbb8369f 100644
--- a/client/components/forms/MentionInput.vue
+++ b/client/components/forms/MentionInput.vue
@@ -27,6 +27,7 @@
             },
             'pr-12'
           ]"
+          :placeholder="placeholder"
           @input="onInput"
         />
         <UButton
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index 72ba8a538..4f398b6f4 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -152,14 +152,13 @@ const quillOptions = computed(() => {
   content: '@';
   font-size: 16px;
 }
-.rich-editor {
+.rich-editor, .mention-input {
   span[mention] {
     @apply inline-flex items-center align-baseline leading-tight text-sm relative bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 py-0.5 mx-0.5;
     max-width: 200px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    cursor: default;
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/composables/useParseMention.js b/client/composables/useParseMention.js
new file mode 100644
index 000000000..59494d307
--- /dev/null
+++ b/client/composables/useParseMention.js
@@ -0,0 +1,39 @@
+import { FormSubmissionFormatter } from '~/components/forms/components/FormSubmissionFormatter'
+
+export function useParseMention(content, mentionsAllowed, form, formData) {
+  if (!mentionsAllowed || !form || !formData) {
+    return content
+  }
+
+  const formatter = new FormSubmissionFormatter(form, formData).setOutputStringsOnly()
+  const formattedData = formatter.getFormattedData()
+
+  // Create a new DOMParser
+  const parser = new DOMParser()
+  // Parse the content as HTML
+  const doc = parser.parseFromString(content, 'text/html')
+
+  // Find all elements with mention attribute
+  const mentionElements = doc.querySelectorAll('[mention]')
+
+  mentionElements.forEach(element => {
+    const fieldId = element.getAttribute('mention-field-id')
+    const fallback = element.getAttribute('mention-fallback')
+    const value = formattedData[fieldId]
+
+    if (value) {
+      if (Array.isArray(value)) {
+        element.textContent = value.join(', ')
+      } else {
+        element.textContent = value
+      }
+    } else if (fallback) {
+      element.textContent = fallback
+    } else {
+      element.remove()
+    }
+  })
+
+  // Return the processed HTML content
+  return doc.body.innerHTML
+}
\ No newline at end of file

From 92dc063b186f8edccce351f2da8eff0655095915 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 10 Oct 2024 15:25:06 +0100
Subject: [PATCH 8/9] apply fixes

---
 client/components/forms/TextBlock.vue         | 22 +------------------
 .../forms/components/MentionDropdown.vue      |  2 +-
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/client/components/forms/TextBlock.vue b/client/components/forms/TextBlock.vue
index 71b3218dc..8a2c7c641 100644
--- a/client/components/forms/TextBlock.vue
+++ b/client/components/forms/TextBlock.vue
@@ -5,7 +5,6 @@
   </template>
   
   <script setup>
-  import { FormSubmissionFormatter } from './components/FormSubmissionFormatter'
   const props = defineProps({
     content: {
       type: String,
@@ -25,25 +24,6 @@
     }
   })
   const processedContent = computed(() => {
-    const form = props.form
-    const formData = props.formData
-    if (!props.mentionsAllowed || !form || !formData) {
-      return props.content
-    }
-    const formatter = new FormSubmissionFormatter(form, formData).setOutputStringsOnly()
-    const formattedData = formatter.getFormattedData()
-    console.trace(props.content);
-    return props.content.replace(/<span[^>]*mention-field-id="([^"]*)"[^>]*mention-fallback="([^"]*)"[^>]*>.*?<\/span>/g, (match, fieldId, fallback) => {
-      const value = formattedData[fieldId]
-      if (value) {
-        if(Array.isArray(value)) {
-          return value.map(v => `<span>${v}</span>`).join(' ')
-        }
-        return `<span>${value}</span>`
-      } else if (fallback) {
-        return `<span>${fallback}</span>`
-      }
-      return ''
-    })
+    return useParseMention(props.content, props.mentionsAllowed, props.form, props.formData)
   })
   </script>
\ No newline at end of file
diff --git a/client/components/forms/components/MentionDropdown.vue b/client/components/forms/components/MentionDropdown.vue
index 49dcd0398..1e7b116cc 100644
--- a/client/components/forms/components/MentionDropdown.vue
+++ b/client/components/forms/components/MentionDropdown.vue
@@ -84,7 +84,7 @@
   const selectedField = ref(null)
   const fallbackValue = ref('')
   const filteredMentions = computed(() => {
-    return props.mentions.filter(mention => blocksTypes[mention.type].is_input)
+    return props.mentions.filter(mention => blocksTypes[mention.type]?.is_input ?? false)
   })
   function selectField(field, insert = false) {
     selectedField.value = {...field}

From 5ffec25000d2fe76b3b4b496857f7f1412502cb0 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Thu, 17 Oct 2024 13:51:44 +0530
Subject: [PATCH 9/9] Fix MentionParser

---
 api/app/Open/MentionParser.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/app/Open/MentionParser.php b/api/app/Open/MentionParser.php
index 4b9e4dd7d..01c8e3c80 100644
--- a/api/app/Open/MentionParser.php
+++ b/api/app/Open/MentionParser.php
@@ -86,7 +86,7 @@ private function replaceMentions()
 
     private function getData($fieldId)
     {
-        $value = collect($this->data)->firstWhere('nf_id', $fieldId)['value'] ?? null;
+        $value = collect($this->data)->firstWhere('id', $fieldId)['value'] ?? null;
 
         if (is_object($value)) {
             return (array) $value;