From cd52a0bbda67b3f944045b51657c6c6e96a64509 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 23 Jun 2026 11:46:29 +0100
Subject: [PATCH] fixed

---
 Modules/Helpdesk/Livewire/TicketCreate.php    |   8 --
 Modules/Helpdesk/README.md                    |  17 +++
 .../views/components/html-editor.blade.php    |   6 +-
 .../views/livewire/ticket-create.blade.php    | 132 ++----------------
 .../views/livewire/ticket-show.blade.php      |  39 ++++--
 .../views/partials/ticket-controls.blade.php  |  79 +++++++----
 Modules/Helpdesk/changelog.yaml               |  10 ++
 Modules/Helpdesk/module.json                  |   2 +-
 8 files changed, 127 insertions(+), 166 deletions(-)

diff --git a/Modules/Helpdesk/Livewire/TicketCreate.php b/Modules/Helpdesk/Livewire/TicketCreate.php
index 5ee2e5d1..ff4e2f4d 100644
--- a/Modules/Helpdesk/Livewire/TicketCreate.php
+++ b/Modules/Helpdesk/Livewire/TicketCreate.php
@@ -139,14 +139,6 @@ final class TicketCreate extends Component
 
         $this->subject = '';
         $this->body = '';
-        $this->company_id = null;
-        $this->board_id = null;
-        $this->priority_id = null;
-        $this->category_id = null;
-        $this->project_id = null;
-        $this->product_id = null;
-        $this->team_id = null;
-        $this->due_at = null;
         $this->tag_ids = [];
         $this->attachments = [];
 
diff --git a/Modules/Helpdesk/README.md b/Modules/Helpdesk/README.md
index 0e859673..7b53a062 100644
--- a/Modules/Helpdesk/README.md
+++ b/Modules/Helpdesk/README.md
@@ -302,3 +302,20 @@ The module should keep tests around:
 - Reference sequence collision prevention.
 - Browser spellcheck attributes on writable fields.
 
+
+## Rich Editor, Spellcheck, Clear and Close Workflow
+
+The ticket create and reply forms use rich HTML editing controls. Do not replace the rich editor with a plain `<textarea>` to enable spelling suggestions. Spellcheck must be enabled on the actual `contenteditable` editor surface using `spellcheck="true"`, `lang="en-GB"`, `autocorrect="on"` and `autocomplete="on"`.
+
+Browser spell suggestions appear inline as red underlines and are selected from the browser context menu by right-clicking or Ctrl-clicking the misspelled word.
+
+The create-ticket **Clear** action must only clear transient user-entered content:
+
+- subject
+- details/body
+- tags
+- attachments
+
+It must preserve configured routing defaults such as company, board, priority, category, project, team and due-date defaults.
+
+When a user selects a closed ticket status, the professional closure modal must open on the first interaction. A closure comment remains mandatory, and the user can choose whether the closure comment is public or internal.
diff --git a/Modules/Helpdesk/Resources/views/components/html-editor.blade.php b/Modules/Helpdesk/Resources/views/components/html-editor.blade.php
index d955c550..69cfc6fb 100644
--- a/Modules/Helpdesk/Resources/views/components/html-editor.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/html-editor.blade.php
@@ -2,6 +2,7 @@
     'label' => 'Details',
     'rows' => 10,
     'placeholder' => 'Write your message...',
+    'editorDusk' => null,
 ])
 
 @php
@@ -65,8 +66,9 @@
                 class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Clear</button>
         </div>
 
-        <div x-ref="editor" contenteditable="true" spellcheck="true" lang="en-GB" x-on:input.debounce.150ms="sync" x-on:keyup="sync"
-            x-on:paste="$nextTick(() => sync())" x-on:blur="sync"
+        <div x-ref="editor" contenteditable="true" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on"
+            @if ($editorDusk) data-dusk="{{ $editorDusk }}" dusk="{{ $editorDusk }}" @endif
+            x-on:input.debounce.150ms="sync" x-on:keyup="sync" x-on:paste="$nextTick(() => sync())" x-on:blur="sync"
             class="prose prose-sm min-h-[{{ (int) $rows * 28 }}px] max-w-none bg-white p-4 text-sm text-zinc-900 outline-none dark:prose-invert dark:bg-zinc-950 dark:text-zinc-100"
             data-placeholder="{{ $placeholder }}"></div>
     </div>
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 326649bc..f3ffdcf5 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -220,42 +220,18 @@
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
-                    <label class="block text-sm font-semibold text-zinc-200" for="body-editor">
-                        Details <span class="helpdesk-required-star">*</span>
-                    </label>
-
-                    <div class="mt-2 rounded-xl border border-zinc-700 bg-zinc-950 shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40">
-                        <div class="flex flex-col gap-2 border-b border-zinc-700 bg-zinc-900 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                            <div>
-                                <p class="text-sm font-semibold text-zinc-100">Spellcheck writing area</p>
-                                <p class="mt-1 text-xs text-zinc-400">
-                                    Misspelled words are underlined by the browser. Right-click or Ctrl-click an underlined word to choose a suggestion.
-                                </p>
-                            </div>
-
-                            <span class="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200"
-                                title="Use your browser context menu on underlined words to view spelling suggestions.">
-                                <i class="fa-solid fa-spell-check" aria-hidden="true"></i>
-                                Suggestions available
-                            </span>
-                        </div>
-
-                        <textarea id="body-editor" spellcheck="true" lang="en-GB" data-helpdesk-details-editor
-                            data-dusk="ticket-body-editor" dusk="ticket-body-editor" rows="12"
-                            class="block min-h-[18rem] w-full resize-y rounded-b-xl border-0 bg-zinc-950 px-4 py-3 text-sm leading-6 text-zinc-100 shadow-none outline-none placeholder:text-zinc-500 focus:ring-0"
-                            placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context...">{{ $body ?? '' }}</textarea>
-                    </div>
-
-                    <textarea id="body" spellcheck="true" lang="en-GB" wire:model="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
+                    <x-helpdesk::html-editor
+                        label="Details"
+                        rows="12"
+                        placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
+                        wire:model="body"
+                        editor-dusk="ticket-body-editor"
+                    />
 
                     <p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-400">
                         <i class="fa-solid fa-circle-info text-blue-400" aria-hidden="true"></i>
-                        Use right-click or Ctrl-click on a red-underlined word to see browser spelling suggestions.
+                        Rich formatting is available. Browser spelling suggestions appear by right-clicking or Ctrl-clicking red-underlined words.
                     </p>
-
-                    @error('body')
-                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
@@ -323,97 +299,17 @@
     </form>
     <script>
         (() => {
-            const initialisedEditors = window.helpdeskTicketCreateEditors ??= new WeakSet();
-
-            const syncEditorToLivewire = (form, editor, bodyField) => {
-                const value = (editor.value ?? editor.textContent ?? '').trim();
-
-                bodyField.value = value;
-                bodyField.dispatchEvent(new Event('input', { bubbles: true }));
-                bodyField.dispatchEvent(new Event('change', { bubbles: true }));
-
-                const livewireRoot = form.closest('[wire\:id]');
-                const livewireId = livewireRoot?.getAttribute('wire:id');
-
-                if (livewireId && window.Livewire?.find(livewireId)) {
-                    window.Livewire.find(livewireId).set('body', value, false);
-                }
-            };
-
-            const resetTicketCreateFormDom = () => {
-                document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
-                    const editor = form.querySelector('[data-helpdesk-details-editor]');
-                    const bodyField = form.querySelector('#body');
-                    const subjectField = form.querySelector('#subject');
-                    const attachmentField = form.querySelector('#attachments');
-
-                    if (editor) {
-                        editor.value = '';
-                    }
-
-                    if (bodyField) {
-                        bodyField.value = '';
-                        bodyField.dispatchEvent(new Event('input', { bubbles: true }));
-                        bodyField.dispatchEvent(new Event('change', { bubbles: true }));
-                    }
-
-                    if (subjectField) {
-                        subjectField.value = '';
-                        subjectField.dispatchEvent(new Event('input', { bubbles: true }));
-                        subjectField.dispatchEvent(new Event('change', { bubbles: true }));
-                    }
-
-                    if (attachmentField) {
-                        attachmentField.value = '';
-                    }
-
-                    if (window.clearHelpdeskFormControls) {
-                        window.clearHelpdeskFormControls();
-                    }
-
-                    const livewireRoot = form.closest('[wire\:id]');
-                    const livewireId = livewireRoot?.getAttribute('wire:id');
-                    const component = livewireId && window.Livewire?.find(livewireId);
-
-                    if (component) {
-                        component.set('subject', '', false);
-                        component.set('body', '', false);
-                    }
+            const resetTicketCreateFiles = () => {
+                document.querySelectorAll('.helpdesk-ticket-form #attachments').forEach((input) => {
+                    input.value = '';
                 });
             };
 
-            const initialiseTicketCreateEditor = () => {
-                document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
-                    const editor = form.querySelector('[data-helpdesk-details-editor]');
-                    const bodyField = form.querySelector('#body');
-
-                    if (!editor || !bodyField || initialisedEditors.has(editor)) {
-                        return;
-                    }
-
-                    initialisedEditors.add(editor);
-
-                    const syncBody = () => syncEditorToLivewire(form, editor, bodyField);
-
-                    editor.addEventListener('input', syncBody);
-                    editor.addEventListener('keyup', syncBody);
-                    editor.addEventListener('paste', () => window.setTimeout(syncBody, 0));
-                    editor.addEventListener('blur', syncBody);
-                    form.addEventListener('submit', syncBody, { capture: true });
-                });
-            };
-
-            document.addEventListener('helpdesk-form-cleared', resetTicketCreateFormDom);
-            document.addEventListener('helpdesk-editor-reset', resetTicketCreateFormDom);
+            document.addEventListener('helpdesk-form-cleared', resetTicketCreateFiles);
 
             if (window.Livewire?.on) {
-                window.Livewire.on('helpdesk-form-cleared', resetTicketCreateFormDom);
-                window.Livewire.on('helpdesk-editor-reset', resetTicketCreateFormDom);
+                window.Livewire.on('helpdesk-form-cleared', resetTicketCreateFiles);
             }
-
-            document.addEventListener('DOMContentLoaded', initialiseTicketCreateEditor);
-            document.addEventListener('livewire:navigated', initialiseTicketCreateEditor);
-            initialiseTicketCreateEditor();
         })();
     </script>
-</div>
+</div>
\ No newline at end of file
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
index 9f1402ad..f41022a7 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
@@ -403,27 +403,40 @@
                     </div>
 
                     <div>
-                        <label for="ticket-comment-body"
+                        <label for="ticket-comment-body-editor"
                                class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
 
-                        <div class="rounded-xl border border-zinc-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950">
-                            <div class="flex flex-col gap-1 border-b border-zinc-200 px-4 py-3 dark:border-zinc-700 sm:flex-row sm:items-center sm:justify-between">
-                                <p class="text-xs font-bold uppercase tracking-[0.16em] text-zinc-500 dark:text-zinc-400">Spellcheck reply</p>
-                                <span class="inline-flex items-center gap-2 rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/60 dark:text-emerald-100">
-                                    <i class="fa-solid fa-spell-check" aria-hidden="true"></i>
-                                    Right-click suggestions
-                                </span>
+                        <div class="overflow-hidden rounded-xl border border-zinc-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950">
+                            <div class="flex flex-wrap items-center gap-1 border-b border-zinc-200 bg-zinc-50 p-2 dark:border-zinc-700 dark:bg-zinc-900"
+                                 data-helpdesk-html-toolbar="ticket-comment-body-editor">
+                                <button type="button" data-helpdesk-command="bold"
+                                        class="rounded-lg px-2 py-1 text-sm font-bold hover:bg-zinc-200 dark:hover:bg-zinc-800">B</button>
+                                <button type="button" data-helpdesk-command="italic"
+                                        class="rounded-lg px-2 py-1 text-sm italic hover:bg-zinc-200 dark:hover:bg-zinc-800">I</button>
+                                <button type="button" data-helpdesk-command="underline"
+                                        class="rounded-lg px-2 py-1 text-sm underline hover:bg-zinc-200 dark:hover:bg-zinc-800">U</button>
+                                <button type="button" data-helpdesk-command="insertUnorderedList"
+                                        class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">• List</button>
+                                <button type="button" data-helpdesk-command="insertOrderedList"
+                                        class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">1. List</button>
+                                <button type="button" data-helpdesk-block="blockquote"
+                                        class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Quote</button>
+                                <button type="button" data-helpdesk-block="code"
+                                        class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Code</button>
                             </div>
 
-                            <textarea dusk="comment-body" spellcheck="true" lang="en-GB" data-dusk="comment-body" id="ticket-comment-body"
-                                      name="commentBody" required rows="8"
-                                      class="block min-h-[12rem] w-full resize-y rounded-b-xl border-0 bg-white p-4 text-sm leading-6 text-zinc-900 shadow-none focus:outline-none focus:ring-0 dark:bg-zinc-950 dark:text-zinc-100"
-                                      placeholder="Write a public reply or internal note. Right-click or Ctrl-click underlined words for spelling suggestions.">{{ strip_tags($oldCommentBody) }}</textarea>
+                            <div id="ticket-comment-body-editor" dusk="comment-body" data-dusk="comment-body"
+                                 data-helpdesk-rich-editor data-helpdesk-sync-target="ticket-comment-body"
+                                 contenteditable="true" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on"
+                                 class="prose prose-sm min-h-[12rem] max-w-none bg-white p-4 text-sm leading-6 text-zinc-900 outline-none dark:prose-invert dark:bg-zinc-950 dark:text-zinc-100"
+                                 data-placeholder="Write a public reply or internal note. Right-click or Ctrl-click underlined words for spelling suggestions.">{!! $oldCommentBody !!}</div>
+
+                            <textarea id="ticket-comment-body" name="commentBody" required class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
                         </div>
 
                         <p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">
                             <i class="fa-solid fa-circle-info text-blue-500" aria-hidden="true"></i>
-                            Browser suggestions appear from the context menu on underlined words.
+                            Rich formatting is available. Browser suggestions appear from the context menu on underlined words.
                         </p>
                     </div>
 
diff --git a/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php b/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
index 991480f6..a7e13032 100644
--- a/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
+++ b/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
@@ -211,34 +211,65 @@
     </details>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelectorAll('[data-helpdesk-status-form]').forEach(function (form) {
-                const statusSelect = form.querySelector('[data-dusk="ticket-show-status"]');
-                const dialog = form.querySelector('[data-helpdesk-close-ticket-dialog]');
-                const comment = form.querySelector('[data-helpdesk-closure-comment]');
-                const cancel = form.querySelector('[data-helpdesk-close-dialog-cancel]');
-
-                if (!statusSelect || !dialog || !comment) {
-                    return;
-                }
-
-                form.addEventListener('submit', function (event) {
-                    const selectedOption = statusSelect.options[statusSelect.selectedIndex];
-                    const isClosing = selectedOption?.dataset?.isClosed === '1';
-
-                    if (!isClosing || comment.value.trim().length >= 10) {
+        (() => {
+            const initialiseCloseTicketDialogs = () => {
+                document.querySelectorAll('[data-helpdesk-status-form]').forEach((form) => {
+                    if (form.dataset.helpdeskCloseDialogInitialised === '1') {
                         return;
                     }
 
-                    event.preventDefault();
-                    dialog.showModal();
-                    comment.focus();
-                });
+                    form.dataset.helpdeskCloseDialogInitialised = '1';
 
-                cancel?.addEventListener('click', function () {
-                    dialog.close();
+                    const statusSelect = form.querySelector('[data-dusk="ticket-show-status"]');
+                    const dialog = form.querySelector('[data-helpdesk-close-ticket-dialog]');
+                    const comment = form.querySelector('[data-helpdesk-closure-comment]');
+                    const cancel = form.querySelector('[data-helpdesk-close-dialog-cancel]');
+                    const originalStatus = statusSelect?.value || '';
+
+                    if (!statusSelect || !dialog || !comment) {
+                        return;
+                    }
+
+                    const selectedStatusIsClosed = () => {
+                        const selectedOption = statusSelect.options[statusSelect.selectedIndex];
+
+                        return selectedOption?.dataset?.isClosed === '1';
+                    };
+
+                    const openDialog = () => {
+                        if (!dialog.open) {
+                            dialog.showModal();
+                        }
+
+                        window.setTimeout(() => comment.focus(), 50);
+                    };
+
+                    statusSelect.addEventListener('change', () => {
+                        if (selectedStatusIsClosed()) {
+                            openDialog();
+                        }
+                    });
+
+                    form.addEventListener('submit', (event) => {
+                        if (!selectedStatusIsClosed() || comment.value.trim().length >= 10) {
+                            return;
+                        }
+
+                        event.preventDefault();
+                        openDialog();
+                    });
+
+                    cancel?.addEventListener('click', () => {
+                        dialog.close();
+                        statusSelect.value = originalStatus;
+                        statusSelect.dispatchEvent(new Event('change', { bubbles: true }));
+                    });
                 });
-            });
-        });
+            };
+
+            document.addEventListener('DOMContentLoaded', initialiseCloseTicketDialogs);
+            document.addEventListener('livewire:navigated', initialiseCloseTicketDialogs);
+            initialiseCloseTicketDialogs();
+        })();
     </script>
 @endcan
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index ac68fc05..edb5aea7 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -174,3 +174,13 @@
     - Updated README guidance to explain how browser spellcheck suggestions are accessed.
     - Updated regression coverage for visible spellcheck suggestion guidance.
     - Preserved append-only changelog history.
+
+- version: 1.9.46
+  date: 2026-06-23
+  changes:
+    - Restored rich text HTML controls for ticket details and main ticket replies.
+    - Enabled inline browser spellcheck on contenteditable rich editor areas without replacing the editor with plain textareas.
+    - Fixed ticket create clear action so configured defaults are preserved while subject, details, tags and attachments are cleared.
+    - Fixed close-ticket modal so selecting a closed status opens the professional closure prompt on the first interaction.
+    - Preserved the mandatory closure comment workflow and public/internal closure visibility behaviour.
+    - Added regression coverage notes for rich editor, clear defaults and close-modal workflow.
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index 9b4eb0ce..4bfa2d10 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.9.45"
+    "version": "1.9.46"
 }