Notes

export const getHtml = content => {
if (!content) return '';
DOMPurify.addHook('afterSanitizeAttributes', function(node) {
if ('target' in node && node.querySelectorAll('img').length == 0) {
const element = document.createElement('img');
element.setAttribute('src', LinkImage);
element.setAttribute('alt', node.text);
element.setAttribute('title', node.text);
element.style.width = '36px';
element.style.height = '36px';
node.textContent = '';
node.appendChild(element);
node.setAttribute('target', '_blank');
node.setAttribute('rel', 'noopener noreferrer');
const hrefValue = node.getAttribute('href');
console.log(hrefValue, 'hrefValue');
if (hrefValue === 'undefined') {
node.setAttribute('data-type', 'image');
}
}
});
const convertInlineToClassStyles = html => {
return html.replace(/style="[a-z-:;]*"/g, replacer => {
let classNames = replacer
.replace(/style=|"/g, '')
.replace(/:/g, '-')
.replace(/;/g, ' ');
return `class="${classNames}"`;
});
};
let html = draftToHtml(content);
html = convertInlineToClassStyles(html);
html = DOMPurify.sanitize(html);
return html;
};
const handler = async e => {
if ((e.target.tagName === 'A' && e.target.getAttribute('data-type') === 'image') || e.target.tagName === 'IMG') {
e.preventDefault();
e.stopImmediatePropagation?.();
e.stopPropagation();
const fileName = e.target.textContent || e.target.alt;
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
try {
e.target.classList.add('disabled');
e.target.style.pointerEvents = 'none';
const res = (await api.fetchImage(appId, pageId, fileName)).data;
const base64String = arrayBufferToBase64(res);
const imageUrl = `data:image/png;base64,${base64String}`;
const img = document.createElement('img');
img.src = imageUrl;
img.alt = fileName;
img.style.display = 'block';
img.style.marginTop = '10px';
img.style.maxWidth = '100%';
img.style.maxHeight = '300px';
e.target.parentNode.insertBefore(img, e.target.nextSibling);
img.addEventListener('click', () => openModal(imageUrl));
} catch (err) {
e.target.classList.remove('disabled');
e.target.style.pointerEvents = 'initial';
window.__notification.addNotification({
position: 'tc',
message: err?.response?.data || 'Failed to fetch image, please try again.',
level: 'error'
});
}
}
};