proper closer status

This commit is contained in:
Mark Gregory
2026-06-23 11:01:55 +01:00
parent e12ab543e8
commit a6148f9bfd
8 changed files with 329 additions and 50 deletions
@@ -274,7 +274,7 @@
data-dusk="ticket-body-editor" dusk="ticket-body-editor">{!! $body ?? '' !!}</div>
</div>
<textarea id="body" wire:model.defer="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
<textarea id="body" wire:model.live="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
@error('body')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@@ -361,57 +361,78 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('.helpdesk-ticket-form');
const editor = document.querySelector('[data-helpdesk-details-editor]');
const bodyField = document.getElementById('body');
(() => {
const initialisedEditors = window.helpdeskTicketCreateEditors ??= new WeakSet();
if (!form || !editor || !bodyField) {
return;
}
const syncEditorToLivewire = (form, editor, bodyField) => {
const value = editor.innerHTML.trim();
const syncBody = function() {
bodyField.value = editor.innerHTML.trim();
bodyField.dispatchEvent(new Event('input', {
bubbles: true
}));
bodyField.dispatchEvent(new Event('change', {
bubbles: true
}));
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);
}
};
document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function(button) {
button.addEventListener('click', function() {
editor.focus();
document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
syncBody();
});
});
const initialiseTicketCreateEditor = () => {
document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
const editor = form.querySelector('[data-helpdesk-details-editor]');
const bodyField = form.querySelector('#body');
document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function(button) {
button.addEventListener('click', function() {
editor.focus();
document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
syncBody();
});
});
document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function(button) {
button.addEventListener('click', function() {
const url = window.prompt('Enter link URL');
if (!url) {
if (!editor || !bodyField || initialisedEditors.has(editor)) {
return;
}
editor.focus();
document.execCommand('createLink', false, url);
syncBody();
});
});
initialisedEditors.add(editor);
editor.addEventListener('blur', syncBody);
form.addEventListener('submit', syncBody);
});
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));
editor.addEventListener('blur', syncBody);
form.addEventListener('submit', syncBody, { capture: true });
});
};
document.addEventListener('DOMContentLoaded', initialiseTicketCreateEditor);
document.addEventListener('livewire:navigated', initialiseTicketCreateEditor);
initialiseTicketCreateEditor();
})();
</script>
</div>