sanitize improvements (#79)

* Add test for blocking multiple elements

* Fix sanitizer for nested blocked elements

* Add new `unblockElements` option to sanitizer

* Add bug fix changeset

* Add feature changeset

* Refactor

* Cleanup

---------

Co-authored-by: Nate Moore <[email protected]>

Author: delucis

.changeset/clean-pugs-learn.md

@@ -0,0 +1,25 @@
+---
+'ultrahtml': patch
+---
+
+Fixes sanitization of nested elements.
+
+For example, the following code:
+
+```js
+const output = await transform('<h1>Hello <strong>world!</strong></h1>', [
+	sanitize({ blockElements: ['h1', 'strong'] }),
+]);
+```
+
+produced the following output before this fix:
+
+```html
+Hello <strong>world!</strong>
+```
+
+and now correctly produces:
+
+```html
+Hello world!
+```

.changeset/sharp-bears-cheat.md

@@ -0,0 +1,5 @@
+---
+"ultrahtml": minor
+---
+
+Adds a new `unblockElements` option to the `sanitize` transformer. This option makes it easier to remove all or most HTML from a string without dropping child content.

README.md

@@ -105,6 +105,7 @@ console.log(output); // <h2>Hello world!</h2>
 | ------------------- | -------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | allowElements       | `string[]`                 | `undefined`  | An array of strings indicating elements that the sanitizer should not remove. All elements not in the array will be dropped.                                                                                                              |
 | blockElements       | `string[]`                 | `undefined`  | An array of strings indicating elements that the sanitizer should remove, but keep their child elements.                                                                                                                                  |
+| unblockElements     | `string[]`                 | `undefined`  | An array of strings indicating elements that the sanitizer should not remove. All elements not in the array will be removed, but keep their child content.                                                                                |
 | dropElements        | `string[]`                 | `["script"]` | An array of strings indicating elements (including nested elements) that the sanitizer should remove.                                                                                                                                     |
 | allowAttributes     | `Record<string, string[]>` | `undefined`  | An object where each key is the attribute name and the value is an Array of allowed tag names. Matching attributes will not be removed. All attributes that are not in the array will be dropped.                                         |
 | dropAttributes      | `Record<string, string[]>` | `undefined`  | An object where each key is the attribute name and the value is an Array of dropped tag names. Matching attributes will be removed.                                                                                                       |

src/transformers/sanitize.ts

@@ -3,6 +3,8 @@ import { ElementNode, ELEMENT_NODE, Node, walkSync } from '../index.js';
 export interface SanitizeOptions {
 	/** An Array of strings indicating elements that the sanitizer should not remove. All elements not in the array will be dropped. */
 	allowElements?: string[];
+	/** An Array of strings indicating elements that the sanitizer should not remove. All elements not in the array will be removed while keeping their child content. */
+	unblockElements?: string[];
 	/** An Array of strings indicating elements that the sanitizer should remove, but keeping their child elements. */
 	blockElements?: string[];
 	/** An Array of strings indicating elements (including nested elements) that the sanitizer should remove. */
@@ -73,7 +75,9 @@ function getAction(
 	}
 	if (kind === 'component' && !sanitize.allowComponents) return 'drop';
 	if (kind === 'custom-element' && !sanitize.allowCustomElements) return 'drop';
-
+	if (sanitize.unblockElements) {
+		return sanitize.unblockElements.some((n) => n === name) ? 'allow' : 'block';
+	}
 	return sanitize.allowElements?.length > 0 ? 'drop' : 'allow';
 }
 
@@ -141,8 +145,9 @@ export default function sanitize(opts?: SanitizeOptions) {
 					return;
 			}
 		});
-		for (const action of actions) {
-			action();
+		// Execute actions in reverse order so that children are mutated before parents.
+		for (let i = actions.length - 1; i >= 0; i--) {
+			actions[i]();
 		}
 		return doc;
 	};

test/transformers/sanitize.test.ts

@@ -15,13 +15,36 @@ describe('sanitize', () => {
 		]);
 		expect(output).toEqual('Hello world!');
 	});
+	it('block with multiple elements', async () => {
+		const input = `<h1>Hello <strong>world!</strong></h1>`;
+		const output = await transform(input, [
+			sanitize({ blockElements: ['h1', 'strong'] }),
+		]);
+		expect(output).toEqual('Hello world!');
+	});
 	it('allow', async () => {
 		const input = `<script>console.log("pwnd")</script>`;
 		const output = await transform(input, [
 			sanitize({ allowElements: ['script'] }),
 		]);
 		expect(output).toEqual('<script>console.log("pwnd")</script>');
 	});
+	describe('unblock', () => {
+		it('empty unblock array blocks all elements', async () => {
+			const input = `<h1>Hello <strong>world!</strong></h1>`;
+			const output = await transform(input, [
+				sanitize({ unblockElements: [] }),
+			]);
+			expect(output).toEqual('Hello world!');
+		});
+		it('unblock array blocks unlisted elements', async () => {
+			const input = `<h1>Hello <strong>world!</strong></h1>`;
+			const output = await transform(input, [
+				sanitize({ unblockElements: ['strong'] }),
+			]);
+			expect(output).toEqual('Hello <strong>world!</strong>');
+		});
+	});
 	it('allow drops everything else', async () => {
 		const input = `<h1>Hello world!</h1><h4>This is not allowed</h4>`;
 		const output = await transform(input, [