Skip to content

Commit

Permalink
fix(rich-text-body): realiza sanitização do texto colado
Browse files Browse the repository at this point in the history
O componente po-rich-text ao receber um texto colado, não sanitiza o css do mesmo, gravando informações desnecessárias na model.
Realiza a sanitização da model, para que receba apenas o valor, deixando a estilização a cargo do usuário, através das ferramentas disponibilizadas no componente.

Fixes #1872
  • Loading branch information
bpereiraalmeida7 committed Jun 11, 2024
1 parent 8df247e commit e803a36
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -1170,4 +1170,36 @@ describe('PoRichTextBodyComponent:', () => {
expect(nativeElement.querySelector('.po-rich-text-body')).toBeTruthy();
});
});

it('sanitizeHtmlContent: should sanitize HTML content and extract text content', () => {
const htmlContent = '<div>Hello <a href="https://example.com">world</a>!</div>';
const sanitizedContent = component['sanitizeHtmlContent'](htmlContent);
expect(sanitizedContent).toBe('Hello world!');
});

it('extractTextContent: should extract text content from a node', () => {
const htmlContent = '<div>Hello <a href="https://example.com">world</a>!</div>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, 'text/html');
const textContent = component['extractTextContent'](doc.body);
expect(textContent).toBe('Hello world!');
});

it('sanitizeHtmlContent: should handle nested HTML elements correctly', () => {
const htmlContent = '<div>Hello <div>beautiful <span>world</span></div>!</div>';
const sanitizedContent = component['sanitizeHtmlContent'](htmlContent);
expect(sanitizedContent).toBe('Hello beautiful world!');
});

it('sanitizeHtmlContent: should return empty string for empty HTML content', () => {
const htmlContent = '';
const sanitizedContent = component['sanitizeHtmlContent'](htmlContent);
expect(sanitizedContent).toBe('');
});

it('sanitizeHtmlContent: should return text content for text nodes only', () => {
const htmlContent = 'Just plain text';
const sanitizedContent = component['sanitizeHtmlContent'](htmlContent);
expect(sanitizedContent).toBe('Just plain text');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@ export class PoRichTextBodyComponent implements OnInit, OnDestroy {
}

private updateModel() {
this.modelValue = this.bodyElement.nativeElement.innerHTML;
this.modelValue = this.sanitizeHtmlContent(this.bodyElement.nativeElement.innerHTML);

this.value.emit(this.modelValue);
}
Expand Down Expand Up @@ -371,4 +371,22 @@ export class PoRichTextBodyComponent implements OnInit, OnDestroy {

return isLink;
}

private sanitizeHtmlContent(htmlContent: string): string {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, 'text/html');
return this.extractTextContent(doc.body);
}

private extractTextContent(node: Node): string {
let textContent = '';
node.childNodes.forEach(childNode => {
if (childNode.nodeType === Node.TEXT_NODE) {
textContent += childNode.textContent;
} else if (childNode.nodeType === Node.ELEMENT_NODE) {
textContent += this.extractTextContent(childNode);
}
});
return textContent;
}
}

0 comments on commit e803a36

Please sign in to comment.