From e8c8dc72ba934c39680257faa24525cd551215da Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 23 Jun 2026 11:38:22 +0100
Subject: [PATCH] semi breakign changes lost html contrrols and close ussies
 also clear removes the defauklts

---
 Modules/Helpdesk/README.md                    |   2 +
 .../views/livewire/ticket-create.blade.php    | 121 +++---------------
 .../views/livewire/ticket-show.blade.php      |  48 +++----
 Modules/Helpdesk/changelog.yaml               |  12 ++
 Modules/Helpdesk/module.json                  |   2 +-
 5 files changed, 52 insertions(+), 133 deletions(-)

diff --git a/Modules/Helpdesk/README.md b/Modules/Helpdesk/README.md
index b5a3dc27..0e859673 100644
--- a/Modules/Helpdesk/README.md
+++ b/Modules/Helpdesk/README.md
@@ -285,6 +285,8 @@ Ticket references must be generated from `helpdesk_ticket_sequences` when the mi
 
 Browser-native spell checking is enabled on ticket subjects, details, public replies, threaded replies, timer notes and closure comments using `spellcheck="true"` and `lang="en-GB"`.
 
+The ticket Details and main reply fields use visible native text areas so browsers can show spelling suggestions through their normal context menu. When a word is underlined, right-click or Ctrl-click it to choose a suggested correction. Browser spell checking does not usually open a separate application popup, and the exact suggestion menu is controlled by the user’s browser and operating system dictionary settings.
+
 ### Regression coverage expected
 
 The module should keep tests around:
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index df64c0aa..326649bc 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -224,67 +224,33 @@
                         Details <span class="helpdesk-required-star">*</span>
                     </label>
 
-                    <div class="mt-2 overflow-hidden 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"
-                        wire:ignore>
-                        <div class="flex flex-wrap items-center gap-1 border-b border-zinc-700 bg-zinc-900 px-3 py-2">
-                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="bold"
-                                aria-label="Bold">
-                                <i class="fa-solid fa-bold" aria-hidden="true"></i>
-                            </button>
+                    <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>
 
-                            <button type="button" class="helpdesk-editor-button"
-                                data-helpdesk-editor-command="italic" aria-label="Italic">
-                                <i class="fa-solid fa-italic" aria-hidden="true"></i>
-                            </button>
-
-                            <button type="button" class="helpdesk-editor-button"
-                                data-helpdesk-editor-command="underline" aria-label="Underline">
-                                <i class="fa-solid fa-underline" aria-hidden="true"></i>
-                            </button>
-
-                            <span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
-
-                            <button type="button" class="helpdesk-editor-button"
-                                data-helpdesk-editor-command="insertUnorderedList" aria-label="Bullet list">
-                                <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
-                            </button>
-
-                            <button type="button" class="helpdesk-editor-button"
-                                data-helpdesk-editor-command="insertOrderedList" aria-label="Numbered list">
-                                <i class="fa-solid fa-list-ol" aria-hidden="true"></i>
-                            </button>
-
-                            <span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
-
-                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-format="pre"
-                                aria-label="Code block">
-                                <i class="fa-solid fa-code" aria-hidden="true"></i>
-                            </button>
-
-                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-link
-                                aria-label="Insert link">
-                                <i class="fa-solid fa-link" aria-hidden="true"></i>
-                            </button>
-
-                            <span class="ml-auto 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="Browser spellcheck is enabled. Misspelled words will be underlined by your browser.">
+                            <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>
-                                Spellcheck on
+                                Suggestions available
                             </span>
                         </div>
 
-                        <div id="body-editor"
-                            class="min-h-[18rem] w-full px-4 py-3 text-sm leading-6 text-zinc-100 outline-none empty:before:text-zinc-500 empty:before:content-[attr(data-placeholder)]"
-                            contenteditable="true" spellcheck="true" lang="en-GB" data-helpdesk-details-editor
-                            data-placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
-                            data-dusk="ticket-body-editor" dusk="ticket-body-editor">{!! $body ?? '' !!}</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>
 
                     <p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-400">
-                        <i class="fa-solid fa-spell-check text-emerald-400" aria-hidden="true"></i>
-                        Browser spellcheck is enabled for Details. Misspelled words are underlined while you type.
+                        <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.
                     </p>
 
                     @error('body')
@@ -355,31 +321,12 @@
             </div>
         </div>
     </form>
-    <style>
-        .helpdesk-editor-button {
-            display: inline-flex;
-            height: 2rem;
-            width: 2rem;
-            align-items: center;
-            justify-content: center;
-            border-radius: 0.625rem;
-            color: rgb(212 212 216);
-            transition: background-color 150ms ease, color 150ms ease;
-        }
-
-        .helpdesk-editor-button:hover,
-        .helpdesk-editor-button:focus {
-            background: rgb(37 99 235);
-            color: white;
-            outline: none;
-        }
-    </style>
     <script>
         (() => {
             const initialisedEditors = window.helpdeskTicketCreateEditors ??= new WeakSet();
 
             const syncEditorToLivewire = (form, editor, bodyField) => {
-                const value = editor.innerHTML.trim();
+                const value = (editor.value ?? editor.textContent ?? '').trim();
 
                 bodyField.value = value;
                 bodyField.dispatchEvent(new Event('input', { bubbles: true }));
@@ -401,7 +348,7 @@
                     const attachmentField = form.querySelector('#attachments');
 
                     if (editor) {
-                        editor.innerHTML = '';
+                        editor.value = '';
                     }
 
                     if (bodyField) {
@@ -448,36 +395,6 @@
 
                     const syncBody = () => syncEditorToLivewire(form, editor, bodyField);
 
-                    form.querySelectorAll('[data-helpdesk-editor-command]').forEach((button) => {
-                        button.addEventListener('click', () => {
-                            editor.focus();
-                            document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
-                            syncBody();
-                        });
-                    });
-
-                    form.querySelectorAll('[data-helpdesk-editor-format]').forEach((button) => {
-                        button.addEventListener('click', () => {
-                            editor.focus();
-                            document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
-                            syncBody();
-                        });
-                    });
-
-                    form.querySelectorAll('[data-helpdesk-editor-link]').forEach((button) => {
-                        button.addEventListener('click', () => {
-                            const url = window.prompt('Enter link URL');
-
-                            if (!url) {
-                                return;
-                            }
-
-                            editor.focus();
-                            document.execCommand('createLink', false, url);
-                            syncBody();
-                        });
-                    });
-
                     editor.addEventListener('input', syncBody);
                     editor.addEventListener('keyup', syncBody);
                     editor.addEventListener('paste', () => window.setTimeout(syncBody, 0));
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
index a2573e8f..9f1402ad 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
@@ -403,40 +403,28 @@
                     </div>
 
                     <div>
-                        <label for="ticket-comment-body-editor"
+                        <label for="ticket-comment-body"
                                class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
 
-                        <div class="mb-2 flex flex-wrap gap-2"
-                             data-helpdesk-html-toolbar="ticket-comment-body-editor">
-                            <button type="button" data-helpdesk-command="bold"
-                                    class="rounded-lg border px-2 py-1 text-xs font-black">B
-                            </button>
-                            <button type="button" data-helpdesk-command="italic"
-                                    class="rounded-lg border px-2 py-1 text-xs italic">I
-                            </button>
-                            <button type="button" data-helpdesk-command="underline"
-                                    class="rounded-lg border px-2 py-1 text-xs underline">U
-                            </button>
-                            <button type="button" data-helpdesk-command="insertUnorderedList"
-                                    class="rounded-lg border px-2 py-1 text-xs">List
-                            </button>
-                            <button type="button" data-helpdesk-block="blockquote"
-                                    class="rounded-lg border px-2 py-1 text-xs">Quote
-                            </button>
-                            <button type="button" data-helpdesk-block="code"
-                                    class="rounded-lg border px-2 py-1 text-xs">Code
-                            </button>
+                        <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>
+
+                            <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>
 
-                        <div id="ticket-comment-body-editor" dusk="ticket-comment-editor" contenteditable="true" spellcheck="true" lang="en-GB"
-                             role="textbox" aria-multiline="true" data-helpdesk-rich-editor
-                             data-helpdesk-sync-target="ticket-comment-body"
-                             class="prose block min-h-[12rem] w-full max-w-none rounded-xl border border-zinc-300 bg-white p-4 text-sm leading-6 text-zinc-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:prose-invert">
-                            {!! $oldCommentBody !!}</div>
-
-                        <textarea dusk="comment-body" spellcheck="true" lang="en-GB" data-dusk="comment-body" id="ticket-comment-body"
-                                  name="commentBody" required
-                                  class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
+                        <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.
+                        </p>
                     </div>
 
                     @can('update', $ticket)
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index 94c07002..ac68fc05 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -162,3 +162,15 @@
     - Added inline reset handling for the rich-text editor, hidden body field, subject field, attachments, Select2 controls and date picker controls after the Livewire clear event.
     - Added regression coverage to prevent the visible spellcheck marker and clear-form reset wiring from being removed accidentally.
     - Preserved append-only changelog history.
+
+- version: 1.9.45
+  date: 2026-06-23
+  type: bugfix
+  summary: Make Helpdesk spellcheck suggestions available through native text areas.
+  changes:
+    - Replaced the ticket create Details rich contenteditable surface with a native spellcheck text area so browser spelling suggestions are available from the context menu.
+    - Replaced the main ticket reply rich contenteditable surface with a native spellcheck text area for consistent right-click and Ctrl-click spelling suggestions.
+    - Kept hidden Livewire body synchronisation for ticket creation so submit-only validation and single-click create behaviour are preserved.
+    - Updated README guidance to explain how browser spellcheck suggestions are accessed.
+    - Updated regression coverage for visible spellcheck suggestion guidance.
+    - Preserved append-only changelog history.
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index f8653f7d..9b4eb0ce 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.9.44"
+    "version": "1.9.45"
 }