How can I give some basic text editing functionality to a firefox plugin?

Question

Hello. I'm writing a plugin to Firefox, which is basically a sidebar, that is filled with yaml-formatted information based on what user does on the page (just another web testing solution). I want to enable user to change generated text manually right in the sidebar and:

1. Add code-folding (folding click: \n text: some text to a single line)
2. Add highlighting of registered actions (click, fill and so on) and unregistered actions (syntax errors)

Adding new nodes to the text after user has made something will be done by simple appending.

How do I do that? Is placing an iframe to the sidebar and trying to do that with html/js the best solution (seen it in a similar one)?

As you may have noticed, I'm a newbie in plugin writing, so please excuse if anything.