How to update field on selection change

Hi, I have an extension which toggles heading levels. I made a button with text inside which indicates which heading level is currently active for the selection (so it changes when I change the selection). Currently I did that by using onSelectionChange, like follows:

	let HeadingExtension = Heading.extend({
		onSelectionUpdate() {
			let button = document.querySelector(
				'[data-key^="heading-dropdown"]'
			) as HTMLElement;

			if (button) {
				let span = button.querySelector(
					'[data-key="innerText"]'
				) as HTMLSpanElement;

				if (span) {
					if (this.editor.isActive("paragraph")) {
						span.innerText = "Paragraph";
					} else {
						let levels: number[] = [1, 2, 3, 4, 5, 6];
						for (let level of levels) {
							if (this.editor.isActive("heading", { level: level })) {
								span.innerText = "Heading " + level;
								return;
							}
						}
						span.innerText = "Paragraph";
					}
				}
			}
		},
	});

Is it the correct way or there is more elegant one?