explanation.md

Editable Text for Srcbook

This might be a reasonable MVP for making your page content editable.

In the Iframe

1. find all the elements that contain text
2. make them editable with contentEditable = 'true'
3. listen for text changes and pass those changes to the parent window

In the parent window (srcbook.com)

1. listen for text changes from the iframe
2. pass those changes as prompts
3. the LLM makes the changes

Proof of Concept Gif:

(you might need to click play)

I built this typesafe RPC library to make it easy to talk with Iframes. It's' great for situations like this.

npmjs.com/package/@mike.pete/bime

main.js

// NOTE: this needs to be pasted in the iframe's console

function getElementsWithTextNodes() {
	const elements = []

	function traverse(node) {
		if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
			elements.push(node.parentNode)
		} else if (node.nodeType === Node.ELEMENT_NODE) {
			for (let i = 0; i < node.childNodes.length; i++) {
				traverse(node.childNodes[i])
			}
		}
	}

	traverse(document.body)
	return elements
}

function debounce(func, wait) {
	let timeout
	return function executedFunction(...args) {
		const later = () => {
			clearTimeout(timeout)
			func.apply(this, args)
		}
		clearTimeout(timeout)
		timeout = setTimeout(later, wait)
	}
}

getElementsWithTextNodes().forEach((element) => {
	element.contentEditable = 'true'

	const initialValue = element.textContent.trim()

	const debouncedHandler = debounce(function (e) {
		console.log(
			`PROMPT: Please change the text from "${initialValue}" to "${this.textContent.trim()}"`
		)
	}, 1000)

	element.addEventListener('input', debouncedHandler)
})

srcbook.gif