proper closer status
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user