-
Notifications
You must be signed in to change notification settings - Fork 6
Description
Okay strange bug but when I define some tailwindcss utility classes on a parent div of the livewire:jodit-text-editor it will break listening to the specifics that i have defined.
For example:
<div class="w-[900px] max-h-[40rem] overflow-auto border rounded-md"> <div class="relative "> <livewire:jodit-text-editor wire:model.live="content" :buttons="['bold', 'italic', 'underline', 'strikeThrough', '|', 'left', 'center', 'right', '|', 'link', 'image', 'video']" /> </div> </div>
This will make the editor not take the :buttons that i have defined into account.
When i remove the utility classes 'border' and 'rounded-md' it will for some reason only show the buttons that i have defined.
My published vendor/jodit-text-editor file:
`
@script
<script>
let buttons = @JSON($buttons);
const editor = Jodit.make('#' + @js($joditId), {
"autofocus": true,
"toolbarSticky": true,
"uploader": {
"insertImageAsBase64URI": true
},
"toolbarButtonSize": "medium",
"showCharsCounter": false,
"showWordsCounter": false,
"showXPathInStatusbar": false,
"defaultActionOnPaste": "insert_clear_html",
"buttons": buttons,
"height": '8000px',
"styleValues": {
colorBorder: 'white',
}
});
document.getElementById(@js($joditId)).addEventListener('change', function() {
@this.set('value', this.value);
});
window.addEventListener('update-jodit-content', (event) => {
// Check if this is an array with [editorId, content]
if (Array.isArray(event.detail) && event.detail.length === 2) {
const [targetId, newContent] = event.detail;
// Only update if the editor ID matches this instance
if (targetId === @js($identifier)) {
editor.value = newContent;
}
} else {
// Original behavior: update all editors (backward compatibility)
editor.value = event.detail[0];
}
});
</script>