I would like to experiment with the following user interface:
1. The content consists of quotes followed by comments.
2. The comments are editable, while the quotes are not. However, quotes should be able to have parts of the quote highlighted, bolded, etc.
3. The entire text (including quotations and comments) should be able to be selected and copied out as rich text. Preferably it would be possible to delete the selection including any quotations within it (though that might be interesting if the selection stops in the middle of a quotation).
4. Preferably highlighting functionality, etc. should be similar for the quotations and for the comments (probably a toolbar with bold, italic, etc. icons above the text area).
I tried doing this using a contenteditable div and surrounding quotations with a contenteditable=false element. An example is below
<div id="editor" contenteditable="true"
style="height:200px; border:1px solid black">
This is some editable content.
<p><div contenteditable="false">This content should not be editable
<i contenteditable="true">(but this is)</i>.
</div></p>
</div>
However, I discovered that while Chrome (and so presumably WebKit) allows you to select text within a readonly part of the contenteditable element, Firefox only allows you to treat the contenteditable as one big block and select it all at once. Is there any way around this? Is there a better way to do what I am suggesting?