renderDom() {
		// Clear existing content
		[this.offsets, this.hexview, this.textview].forEach(view => view.innerHTML = '');
		const lineHeight = 16; // Approximate line height in pixels
		const totalLines = Math.ceil(this.data.length / this.bytesPerRow);

		// Set the height of the content area to simulate the total height
		const contentHeight = totalLines * lineHeight;
		[this.offsets, this.hexview, this.textview].forEach(view => view.style.height = `${contentHeight}px`);
		// Create fragments to hold the visible content
		const offsetsFragment = document.createDocumentFragment();
		const hexviewFragment = document.createDocumentFragment();
		const textviewFragment = document.createDocumentFragment();

		// Calculate the start and end lines to render
		const startLine = Math.floor(this.startIndex / this.bytesPerRow);
		const endIndex = Math.min(this.startIndex + this.visibleByteCount, this.data.length);
		const endLine = Math.ceil(endIndex / this.bytesPerRow);

		const paddingTop = startLine * lineHeight;

		// Apply padding to offset the content to the correct vertical position
		this.offsets.style.paddingTop = paddingTop + 'px';
		this.hexview.style.paddingTop = paddingTop + 'px';
		this.textview.style.paddingTop = paddingTop + 'px';

		// Render only the visible lines
		for (let line = startLine; line < endLine; line++) {
			const i = line * this.bytesPerRow;

			// Offsets
			const offsetSpan = document.createElement("span");
			offsetSpan.innerText = i.toString(16).padStart(8, '0');
			offsetsFragment.appendChild(offsetSpan);

			// Hexview line
			const hexLine = document.createElement('div');
			hexLine.classList.add('hex-line');

			// Textview line
			const textLine = document.createElement('div');
			textLine.classList.add('text-line');

			for (let j = 0; j < this.bytesPerRow && i + j < this.data.length; j++) {
				const index = i + j;
				const byte = this.data[index];

				// Create hex span
				const hexSpan = document.createElement('span');
				hexSpan.textContent = byte.toString(16).padStart(2, '0');
				hexSpan.dataset.byteIndex = index;

				// Apply search highlights based on search type
				this.matches.forEach(match => {
					if (index >= match.index && index < match.index + match.length) {
						hexSpan.classList.add('search-highlight');
					}
				});

				hexLine.appendChild(hexSpan);

				// Create text span
				const charSpan = document.createElement('span');
				let text = _byteToChar(byte);
				if (text === " ") text = "\u00A0";
				else if (text === "-") text = "\u2011";
				charSpan.textContent = text;
				charSpan.dataset.byteIndex = index;
				if (text === _NON_PRINTABLE_CHAR) {
					charSpan.classList.add("non-printable");
				}

				// Apply search highlights based on search type
				this.matches.forEach(match => {
					if (index >= match.index && index < match.index + match.length) {
						charSpan.classList.add('search-highlight');
					}
				});

				textLine.appendChild(charSpan);
			}

			hexviewFragment.appendChild(hexLine);
			textviewFragment.appendChild(textLine);
		}

		this.offsets.appendChild(offsetsFragment);
		this.hexview.appendChild(hexviewFragment);
		this.textview.appendChild(textviewFragment);

		this.updateSelection();
	}
Renders the visible portion of the hex editor based on the current scroll position.