`;
document.body.appendChild(modal);
modal.showModal();
const input = modal.querySelector('input');
input.focus();
// Handle save
modal.querySelector('.save').addEventListener('click', () => {
const url = input.value;
if (url) {
this.quill.format('link', url);
}
modal.remove();
});
// Handle remove if link exists
const removeBtn = modal.querySelector('.remove');
if (removeBtn) {
removeBtn.addEventListener('click', () => {
this.quill.format('link', false);
modal.remove();
});
}
// Handle cancel
modal.querySelector('.cancel').addEventListener('click', () => {
modal.remove();
});
// Handle Enter key
input.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
const url = input.value;
if (url) {
this.quill.format('link', url);
}
modal.remove();
}
});
}
},
'jvb_image': function() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/jpeg,image/png,image/gif,image/webp');
input.style.display = 'none';
document.body.appendChild(input);
input.onchange = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
// Validate file
const maxSize = 5242880; // 5MB
if (file.size > maxSize) {
this.quill.insertText(range.index, 'File too large. Maximum size is 5MB', {
'color': '#f00',
'italic': true
}, true);
input.remove();
return;
}
const range = this.quill.getSelection(true);
const formData = new FormData();
formData.append('image', file);
if (objectID) {
formData.append('post_id', objectID);
}
try {
const response = await fetch(
`${jvbSettings.api}uploads/`,
{
method: 'POST',
headers: {
'X-WP-Nonce': window.auth.getNonce()
},
body: formData
}
);
if (!response.ok) {
throw new Error('Upload failed');
}
const result = await response.json();
// Insert the image at cursor position
this.quill.insertEmbed(range.index, 'image', result.url);
} catch (error) {
this.handleError('Upload error:', error);
this.quill.insertText(range.index, 'Failed to upload image. Please try again.', {
'color': '#f00',
'italic': true
}, true);
} finally {
input.remove();
}
};
input.click();
}
}
},
history: {
delay: 2000,
maxStack: 500
},
clipboard: {
matchVisual: false
}
}
});
instances.push(quill);
quill.on('selection-change', function(range) {
const alignmentTools = toolbar.querySelector('.ql-align');
if (alignmentTools) {
if (range && range.length === 0) {
// Get the focused element
const [leaf] = this.quill.getLeaf(range.index);
if (leaf && leaf.domNode && leaf.domNode.tagName === 'IMG') {
alignmentTools.style.display = 'inline-block';
return;
}
}
alignmentTools.style.display = 'none';
}
});
// Update hidden textarea and trigger form change
quill.on('text-change', () => {
textarea.value = quill.root.innerHTML;
textarea.dispatchEvent(new Event('change', { bubbles: true }));
});
});
return instances;
};