{
$wire.upload(`componentFileAttachments.{{ $statePath }}`, file, () => {
$wire
.getFormComponentFileAttachmentUrl('{{ $statePath }}')
.then((url) => {
if (! url) {
return onError()
}
onSuccess(url)
})
})
},
})
"
x-init="
$nextTick(() => {
const imageButton = $el.querySelector('.editor-toolbar .upload-image');
if (imageButton) {
imageButton.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
Livewire.dispatch('open-modal', { id: '{{ $getId() }}-image-picker-modal' });
};
}
const linkButton = $el.querySelector('.editor-toolbar .link');
if (linkButton) {
linkButton.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
const editorInstance = editor.codemirror;
if (editorInstance) {
// Save current scroll position
const scrollInfo = editorInstance.getScrollInfo();
const currentScrollTop = scrollInfo.top;
// Save cursor position
const selectionRange = {
from: editorInstance.getCursor('from'),
to: editorInstance.getCursor('to')
};
const selectedText = editorInstance.getSelection();
const htmlLink = `
${selectedText}`;
editorInstance.replaceRange(htmlLink, selectionRange.from, selectionRange.to);
// Restore scroll position after a brief delay to ensure DOM updates
setTimeout(() => {
editorInstance.scrollTo(null, currentScrollTop);
// Also restore cursor position to the end of the inserted link
editorInstance.setCursor(selectionRange.to);
}, 10);
}
};
}
});
"
x-on:insert-content.window="
const content= $event.detail[0];
if (content.path === '{{ $statePath }}') {
const mediaData = content.media;
const imageUrl = mediaData.url;
const altText = mediaData.altText || mediaData.name;
const imageMd = ``;
editor.codemirror.replaceSelection(imageMd);
$dispatch('close-modal', { id: '{{ $getId() }}-image-picker-modal' });
}
"
x-on:close-media-library-modal.window="
$dispatch('close-modal', { id: '{{ $getId() }}-image-picker-modal' });
"
x-ignore
{{ $getExtraAlpineAttributeBag() }}
>