2023-08-08 21:17:09 +02:00
|
|
|
import type EditorJS from '../../../types/index';
|
|
|
|
import { OutputData } from '../../../types/index';
|
2022-11-25 18:56:50 +01:00
|
|
|
|
2021-04-08 20:17:23 +02:00
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2024-04-01 11:29:47 +02:00
|
|
|
describe('Sanitizing', () => {
|
2021-04-08 20:17:23 +02:00
|
|
|
context('Output should save inline formatting', () => {
|
|
|
|
it('should save initial formatting for paragraph', () => {
|
|
|
|
cy.createEditor({
|
|
|
|
data: {
|
|
|
|
blocks: [ {
|
|
|
|
type: 'paragraph',
|
|
|
|
data: { text: '<b>Bold text</b>' },
|
|
|
|
} ],
|
|
|
|
},
|
2023-08-08 21:17:09 +02:00
|
|
|
})
|
|
|
|
.then(async editor => {
|
|
|
|
cy.wrap<OutputData>(await editor.save())
|
|
|
|
.then((output) => {
|
|
|
|
const boldText = output.blocks[0].data.text;
|
2021-04-08 20:17:23 +02:00
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
expect(boldText).to.eq('<b>Bold text</b>');
|
|
|
|
});
|
|
|
|
});
|
2021-04-08 20:17:23 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should save formatting for paragraph', () => {
|
2023-08-08 21:17:09 +02:00
|
|
|
cy.createEditor({})
|
|
|
|
.as('editorInstance');
|
|
|
|
|
2021-04-08 20:17:23 +02:00
|
|
|
cy.get('[data-cy=editorjs]')
|
|
|
|
.get('div.ce-block')
|
|
|
|
.click()
|
|
|
|
.type('This text should be bold.{selectall}');
|
|
|
|
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
|
|
.get('button.ce-inline-tool--bold')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
|
|
.get('div.ce-block')
|
|
|
|
.click();
|
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
cy.get<EditorJS>('@editorInstance')
|
|
|
|
.then(async editorInstance => {
|
|
|
|
cy.wrap(await editorInstance.save())
|
|
|
|
.then((output) => {
|
|
|
|
const text = output.blocks[0].data.text;
|
2021-04-08 20:17:23 +02:00
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
expect(text).to.match(/<b>This text should be bold\.(<br>)?<\/b>/);
|
|
|
|
});
|
|
|
|
});
|
2021-04-08 20:17:23 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should save formatting for paragraph on paste', () => {
|
2023-08-08 21:17:09 +02:00
|
|
|
cy.createEditor({})
|
|
|
|
.as('editorInstance');
|
|
|
|
|
2021-04-08 20:17:23 +02:00
|
|
|
cy.get('[data-cy=editorjs]')
|
|
|
|
.get('div.ce-block')
|
2022-11-25 18:56:50 +01:00
|
|
|
.paste({
|
|
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
|
|
'text/html': '<p>Text</p><p><b>Bold text</b></p>',
|
|
|
|
});
|
2021-04-08 20:17:23 +02:00
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
cy.get<EditorJS>('@editorInstance')
|
|
|
|
.then(async editorInstance => {
|
|
|
|
cy.wrap<OutputData>(await editorInstance.save())
|
|
|
|
.then((output) => {
|
|
|
|
const boldText = output.blocks[1].data.text;
|
2021-04-08 20:17:23 +02:00
|
|
|
|
2023-08-08 21:17:09 +02:00
|
|
|
expect(boldText).to.eq('<b>Bold text</b>');
|
|
|
|
});
|
|
|
|
});
|
2021-04-08 20:17:23 +02:00
|
|
|
});
|
|
|
|
});
|
2024-04-01 11:29:47 +02:00
|
|
|
|
|
|
|
it('should sanitize unwanted html on blocks merging', function () {
|
|
|
|
cy.createEditor({
|
|
|
|
data: {
|
|
|
|
blocks: [
|
|
|
|
{
|
|
|
|
id: 'block1',
|
|
|
|
type: 'paragraph',
|
|
|
|
data: {
|
|
|
|
text: 'First block',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'paragraph',
|
|
|
|
type: 'paragraph',
|
|
|
|
data: {
|
|
|
|
/**
|
|
|
|
* Tool does not support spans in its sanitization config
|
|
|
|
*/
|
|
|
|
text: 'Second <span id="taint-html">XSS<span> block',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
}).as('editorInstance');
|
|
|
|
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
|
|
.find('.ce-paragraph')
|
|
|
|
.last()
|
|
|
|
.click()
|
|
|
|
.type('{home}')
|
|
|
|
.type('{backspace}');
|
|
|
|
|
|
|
|
cy.get<EditorJS>('@editorInstance')
|
|
|
|
.then(async (editor) => {
|
|
|
|
const { blocks } = await editor.save();
|
|
|
|
|
|
|
|
expect(blocks[0].data.text).to.eq('First blockSecond XSS block'); // text has been merged, span has been removed
|
|
|
|
});
|
|
|
|
});
|
2021-04-08 20:17:23 +02:00
|
|
|
});
|
2024-04-01 11:29:47 +02:00
|
|
|
|