This commit is contained in:
Mark Gregory
2026-06-23 11:46:29 +01:00
parent e8c8dc72ba
commit cd52a0bbda
8 changed files with 127 additions and 166 deletions
@@ -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>