semi breakign changes lost html contrrols and close ussies also clear removes the defauklts
This commit is contained in:
Mark Gregory
@@ -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:
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -22,5 +22,5 @@
|
||||
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
|
||||
],
|
||||
"files": [],
|
||||
"version": "1.9.44"
|
||||
"version": "1.9.45"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user