ContentEditable - more API needed? Someone from Apple please read?

Subject: ContentEditable - more API needed? Someone from Apple please read?

From: Tom Bunch <email@hidden>

Date: Wed, 18 May 2005 13:57:47 -0700

Delivered-to: email@hidden

Hey guys. I hope John Louch or even Darin Adler or Dave Hyatt will have something to say here.

Now that we have HTML editing via the contenteditable attribute, I'm playing with some things that seem like they should be straightforward, but, well, I'm not finding them so.

If you have a setup exactly like the Scroller.wdgt example but with editable content, there's really no practical way to implement scrollSelectionToVisible. To see what I mean, patch the Scroller example like so:

in Scroller.css, to .mainContent, add:

-khtml-user-modify:read;

-khtml-user-select:text;

-apple-dashboard-region: dashboard-region(control rectangle 0 0 0 0);

in Scroller.html, in each of the three <div class='mainContent'...> tags add contentEditable='true'. (You should be able to do this in the CSS, but I haven't figured out how)

You can now amend the constitution without an act of Congress. What you can't do is keep the user's typing in the visible region of the parentDiv. Click near the bottom of the visible region and type until you wander off the bottom and you'll see what I mean.

window.getSelection() provides some useful information, such as baseNode and baseOffset, but it seems that once you've entered text, the baseNode need not be your editable div, but may be an implicitly created child of it instead. getComputedStyle() doesn't seem to be supported for these nodes. I can find no incantation that will get me any geometry information for these nodes.

Also, documentation for the selection object would be very much appreciated. Since nodes are added implicitly as you add lines of text, it's not completely clear to me that I'm using setBaseAndExtent() correctly. If your contents are "a\ba", you wind up with the following dom nodes:

<#text>a</#text>

<div>

<#text>a</#text>

</div>

("#text" is a DOMText object)

So I'm a little unsure if selectAll() should be:

function selectAll(event)

{

var myDiv = document.getElementById(' iMadeThisMyself');

window.getSelection().setBaseAndExtent(myDiv, 0, myDiv, myDiv.innerText.length - 1);

}

function selectAll(event)

{

var myDiv = document.getElementById('iMadeThisMyself');

window.getSelection().setBaseAndExtent(myDiv, 0, myDiv.lastChild, myDiv.lastChild.innerText.length - 1)

}

They both seem to work, but I think I may be getting lucky with one of them.

Sorry this turned into such a novel. Main point is "is there a way to implement scrollSelectionToVisible() on a div contained in an overflow:hidden div, presumably by assigning to style.top, and if not, can we fix it?". I hope I've not missed something obvious.

Thanks much,

-Tom

_______________________________________________ Do not post admin requests to the list. They will be ignored. Dashboard-dev mailing list (email@hidden) Help/Unsubscribe/Update your Subscription: http://lists.apple.com/mailman/options/dashboard-dev/email@hidden This email sent to email@hidden