♻️(frontend) improve html for pdf
Blocknote json to html is not perfect, so we need to improve it to provide a better html for the pdf generation. It is the first step to improve the html, we will continue to improve it in the future. We have now the break line. It is e2e tested so if blocknote change the conversion we will know it.
This commit is contained in:
@@ -47,6 +47,45 @@ test.describe('Pad Tools', () => {
|
||||
expect(pdfText).toContain('Hello World'); // This is the pad text
|
||||
});
|
||||
|
||||
test('it converts the blocknote json in correct html for the pdf', async ({
|
||||
page,
|
||||
browserName,
|
||||
}) => {
|
||||
const [randomPad] = await createPad(page, 'pad-editor', browserName, 1);
|
||||
let body = '';
|
||||
|
||||
await page.route('**/templates/*/generate-document/', async (route) => {
|
||||
const request = route.request();
|
||||
body = request.postDataJSON().body;
|
||||
|
||||
await route.continue();
|
||||
});
|
||||
|
||||
await expect(page.locator('h2').getByText(randomPad)).toBeVisible();
|
||||
|
||||
await page.locator('.bn-block-outer').last().fill('Hello World');
|
||||
await page.locator('.bn-block-outer').last().click();
|
||||
await page.keyboard.press('Enter');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.locator('.bn-block-outer').last().fill('Break');
|
||||
|
||||
await page.getByLabel('Open the document options').click();
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: 'Generate PDF',
|
||||
})
|
||||
.click();
|
||||
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: 'Download',
|
||||
})
|
||||
.click();
|
||||
|
||||
// Empty paragraph should be replaced by a <br/>
|
||||
expect(body).toContain('<br/><br/>');
|
||||
});
|
||||
|
||||
test('it updates the pad', async ({ page, browserName }) => {
|
||||
const [randomPad] = await createPad(
|
||||
page,
|
||||
|
||||
@@ -15,7 +15,7 @@ import { usePadStore } from '@/features/pads/pad-editor/';
|
||||
import { Pad } from '@/features/pads/pad-management';
|
||||
|
||||
import { useCreatePdf } from '../api/useCreatePdf';
|
||||
import { downloadFile } from '../utils';
|
||||
import { adaptBlockNoteHTML, downloadFile } from '../utils';
|
||||
|
||||
interface ModalPDFProps {
|
||||
onClose: () => void;
|
||||
@@ -84,7 +84,8 @@ export const ModalPDF = ({ onClose, templateOptions, pad }: ModalPDFProps) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const body = await editor.blocksToHTMLLossy(editor.document);
|
||||
let body = await editor.blocksToHTMLLossy(editor.document);
|
||||
body = adaptBlockNoteHTML(body);
|
||||
|
||||
createPdf({
|
||||
templateId: templateIdSelected,
|
||||
|
||||
@@ -9,3 +9,7 @@ export function downloadFile(blob: Blob, filename: string) {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export const adaptBlockNoteHTML = (html: string) => {
|
||||
return html.replaceAll('<p class="bn-inline-content"></p>', '<br/>');
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user