WWDC2004 Session 426

Transcript

Kind: captions Language: en welcome welcome to session for 26 HTML editing with WebKit I am kenka shenda and I work on Safari team working on HTML editing this year and so the first question you may have when thinking about editing and looking at it as well how did we do it how did we add editing to WebKit well we extended the WebKit AP is that we introduced here at the developer conference last year very very simple very very straightforward we just took those api's and extended them adding and editing so then the next question is maybe you're asking is well why did we do this well you know of all the things that we could possibly do with web technology you know why did we choose editing as the as the thing to focus on next well answer is very simple we want mail app to use HTML as its format for rich text Steve Jobs make glad glad you glad you like that and as Steve Jobs mentioned in in the keynote on Monday this is a feature to really really help us interoperate out there in the internet with with folks using mailers on variety of platforms and so thanks that's that's all I have today where is Friday you know you've seen a lot of slides lots of transitions and things you know probably six tickets are that well you know really you know nice WWE see slide well anyway wait is the developer conference so I figure well well what about the developers right way you just hold the editing whatever so I figured we could do a little Q a yeah well okay so now the real the real content to your HTML editing and important thing I want to I want to say before I get into the real the real guts of it is that HTML editing will be available on tiger that's with safari 2 point 0 and it will be available in Safari 1 dot 3 on Panther so everything that I'm talking about here today will be available on the 222 releases there's no this if re 1 dot 3 is already available for you to download there's a Developer Preview i think is what we're calling it on you know through year your developer account okay so that's really really important everything that you see here today will be available on tiger and Panther now really starting to get into it here when we when we thought about HTML editing we figure we have really two audiences there are application developers people who want to take you know take you know of you slap it in their application and do editing in that application and have the result the HTML when you're all done and then there's also web page developers taking an application like Safari it already exists and then developing content that can be viewed in Safari and then including editing in that content so there's really two audiences and as you see as we go as I'll go through the presentation there will be something for something for each of you you know depending on which audience your many of you may be both so in that case there's no falling asleep then okay so now for application developers we want you to be able to use a web view just like in ms text view okay and and then you will go forward in program with that with Objective C now for web developers use an application as I said like Safari and and your your focus will really be much more in JavaScript who know what can you do with JavaScript to kind of get in there and and start doing need editing things and without really having again direct access to the host application so something in there for for both of you now as that last slide shows the real the core of this is is Safari the Safari technology you've probably seen this slide a whole bunch of times the WebKit is really the engine inside of Safari that makes everything go but what you probably haven't seen is that behind this oh yeah I hate that guy yo that's me right yeah yeah anyway so um so yeah so I'm going to leave that up there a little bit so you get a little more footage on that one okay okay so now so now dears there's a bunch of cool stuff they're all seriousness there's a bunch of cool stuff that we're doing in HTML editing and and really a good way to think about it there's three different areas where there is this cool stuff where that cool stuff lips there's webview in WebKit there's JavaScript and then there's document object model the Dom ok so now in webview just as a very very high level as you may have sort of god no gotten ahold of this idea by now web you can now edit and there's lots of new API in webview that allows you to control that editing process and then something which you as of course developers are going to be using this in your app I hope will be really interested in is that there's a WebKit editing delegates so that you can get control of the of the editing process and make it make it do what you want for your for your program there's also a lot of interesting new stuff in javascript is a new selection object i know that's already been asked for by folks coming up and asking questions in other sessions there are other editing extensions which will go into and there's also improved the Dom underneath when you when you call into it with lots of bug fixes and new things in the Dom speaking of the Dom there is full Dom level two support now available to you okay I know that's something that a lot of you asked about last year at the developer conference I want access to the Dom well now you have it and you have it through an objective-c binding and there's we've also included support for many many popular extensions I'll go into this in more detail and tell you really what's in there later in the talk okay so now with that as a sort of an introduction before the rest of the talk really what I'd like to do is step through a number of HTML editing scenarios things that you may want to do as developers of apps and as web pages and getting all that stuff working to and so again you're going to step through a bunch of these scenarios throughout the rest of the talk and really spend a lot of time looking at code so now the first one I'd like to talk about is is editing with with web view now there's a new method on web view that if you're an application developer k one of those two audiences is really now speaking to you as application developers there's a new method on web view set editable you pass in yet and in every every page that then will be loaded in that web view will be editable this is very very simple as just like one big switch could chunk every page will then be editable so let's take a quick look at that let's look at the demo machine okay so that's up yes good okay so I have a little program here that that I'll be using a bunch to to demo editing and I tell you what why don't we even just start that up and let you see what this is going to do before we get into the code so now here's a very very simple application and all this has in it is web view that that's it it's the simplest little nymph I'll you could have basically and let's see here I as you'll see what I'm going to try to type I cannot type a very bad typist so you know it starts to you know the behavior of the application is very very much like a text editor I can come back here and undo yeah you know bring up the font panel bring up the color panel and I mean my selection there I cannot yes it's true I I really cannot let so let's make that a little bit figure I cannot type so you see very very very very simple so now let's um let's you know to sort of like even do a little undoing there and even just save this out just to show that this is actually actually truly HTML so it's just putting in HTML putting in some spans you see the style they're making it read and so forth very very simple very very straightforward and the output of course is HTML now as I said in that slide before I transitioned over to the over to the demo here is this for that for this at the the call out for the for the you know the the document framework and a nap kit will call out to this code here window controller did load nib and all I'm doing right there is home right webview said edible yes every page that then is loaded into that application will will be editable and as an example of that it's not just you know creating a new document and typing in it I can also just come over here and you know load a page off the off the web and and as you can see I could just start coming in here and start editing start editing yahoo which i think is pretty neat so now so now I'm going to take a walk in the wild side I I don't actually know that this one hundred percent gonna work but let's just to show you that that this really is this is not just a parlor trick folks I'm going to select all and change the font so this isn't as you know fully you know sir optimizes we would like it yet so I've still got a little job security going here but as you can see just select all yahoo changes the font and every file every font and the chain on the page changes I can just go out back and undo it and there you go okay so this is real real stuff here real real editing okay so now this is the point here however it's just very very simply one line of code every page that's loaded then is becomes editable okay so let's go back to the slides if you will so it's really really simple to get up and running with this and go and try it out see what to see what the features are now sort of the next step is that now you've got that web view in your app and it can load content and you can start editing with it well what are some of the things that you can do with it as a developer to start changing that content around and these I'd like to start talking about all of those and and I'd like to call it a webview editing methods right these high level editing methods available on on web view and these these methods operate on the current selection and they're undoable there's there's some work that we did to hook in these methods into the undo system and I think in a way that I think you'll find very very convenient to use as a programmer so now here's an example of one web view replace selection with markup string and you could just pass a little hunk of HTML on that string and the web you will go and hand that string off to the parser n puts that content right into the document in the place where you have a selection now beneath there are sort of the steps that again a really pretty high level of what is actually going on on your behalf when you make a call like that selection is saves off the selection is removed markup this parse insert new content and you could just then very very quickly undo that and all of that will get undone and put back now here is some of those high level editing methods that really looks like all of them that are available to you on web view and so how many people are paying attention right you're here you are having fun now no okay well anyway so now let's take a little bit of look at how these guys work okay so now what I'm going to do is just close that down and create a new document show you how this works before we go in and take a look at the code so I've got this little demo menu here that I put in the app and and I'm just going to start jabbering so and I've got a keyboard come in there so I can just start jabbering and all it's going to do is just put nonsense content into the document and then I've got another one here is a jabber in style and until i can do that a couple times and get some stuff in there and you know just undo I'm just going to undo that I can I can redo so I'm at number five there now I had a bunch more than that so now i'm at 13 and I'm doing you say go back to five so the whole undo thing works just very very simple very very straightforward thing to do so now let's take a look at how that works in the code so that menu command is just hooked up to this one liner there I just have this dysfunction here to just go and pick out you know make this little random jabber string out of a dictionary that I put it program I put into the app and it's just very very simple there's one little call you'll see the one beneath it I just make a little mark up string just right there it's just hard coded color red font style italic just get that jabber string in there and then I make that other call replace selection with markup train string so again it's just really really simple to now to you know put make the webview editable on as a first step and then as the second step start getting in there and start modifying the content around it's very very simple you'll see that there's no code in here to actually make those things undoable that's just done for you so again you know go back to this app you know go and go and Jabbar and undo you didn't need to do anything to make that work it's just a nice convenience for you if your if your needs are simple of course as I said that operates on the current selection so I have select all you know I can just come in here and it just operates on each one of these operate on the current selection so again just a very very simple straightforward way to start getting into the into the code and start making things happening in in editing okay let's go back to the slides please okay so now we started kind of doing some simple things with with editing now let's get into something that's you know some stuff that's starting to get a little bit more interesting and that's using the Dom from objective-c okay so now this is really using the Dom again we're still on that sort of application developer in stuff right now okay so this is again using the Dom from objective-c as an application developer now the dumb of course for those of you who aren't quite so familiar whether it's a document object model at the web standard put forward by the w3c same folks that do xml and HTML and so forth and it's just a programmatic interface to documents now before tiger and really before of course everything is is both going to be available in Safari 1 dot 3 and Safari 20 so it's really just before those you know the new work that we've done this year this one method in blue there is really the only way from web kit that you could get in and and get into the dom and that was through a little sort of sideways door there by executing some javascript and using using the dom from javascript and passing that string off to be evaluated by by WebKit it was really the only way to get into the dom now as I said before WebKit web kid 444 tiger covers all of Dom level two and here are all of the Dom level two pieces all of them little two modules that were supporting and we've done as sort of taken a pretty light touch on bringing this code over into objective-c it's just a very very simple mapping there were a couple of things we needed to do in order to know to resolve name conflicts and things like that with some constants but you'll see that you know it's a very very simple straightforward mapping of the w3c IDL files that you can get off their website into Objective C so now can you see all that now these are are all of the classes that we've added it's really all of those classes from all of the dawn modules so it's over a hundred new classes that you can use from objective-c let's search a lot of stuff you can get into and start manipulating documents now not only that now all of that stuff on that last slide with all of the stuff from the standard IDL okay as the w3c put it out but of course we you know if you've done any you know programming on the web at all you know that there are non-standard extensions there Dom level zero stuff and things that have come in even after that and we're supporting some of those as well and there's a listing of those on the on the screen there's lots and lots of good Dom stuff to get into now he's just a you know a very very small you know look at you know what we're doing you know taking the source of a document you know going over and making you know the Dom tree out of it and that's really all the DOM is a tree made up of nodes and I just want to introduce a little bit of terminology that i'll be using again for those of you who might not be so familiar with it don was a tree up of nodes and some of those nodes are elements okay now what is an element well in element is a node that can have attributes and attributes customize the elements just like the image tags has a source attribute and an alt attribute and of course many others are available to you again so to just introduce some terminology there that i'll be using quite a lot and then also sort of this this first object that you know if you want to get into the dom you start using it from web kids this is the object that you really really need to get a handle on first the domdocument because it's a bridge into the rest of the dom you know the Dom being a tree of course the document is going to be at the root of that tree and it's just going to be your way to get in and start interacting with the DOM and of course that line of code underneath there is the way that you do that web views mainframes get the domdocument off of that okay so now here's just a little code snippet and we'll be looking at our real-world version of this but just to give you a little bit of an idea of what you can do get the Dom document their create a node iterator just a way to just iterate over all of the nodes in the Dom and then sort of do something with each node so really really simple just a few lines of code you start doing some pretty neat things so let's take a look at a demo of that okay quitting don't eat that okay so let's take a look at an example of this i'm just going to go back and i got a good example here I think let's go look at the pic stars website I can't really wait for this movie to come out okay so now all right then get rid of the font and color stuff alright so now back in my demo menu what I've got here is a little lint link inspector and what this what this thing does it just iterates over all over the DOM and it goes you'll actually see that some of the text is I selected here in the in the inspector is highlighting I'll actually even highlight the images in the document I didn't really do to put the images in the link menu there I'm sorry I just didn't get around to it but you see there though that the content is selecting as you as you go in there and let's take a look at how how that's done so now using the Dom ok so now if we go and look at that code example that I had up there on the screen before this chunk of co here is is really very very much like it it's very very similar to what was on the screen before very very simple to go in and get a hold of domdocument create a node iterator with it you see that there I've got a couple of parameters I only want to see elements only elements with attributes because obviously a dom node is if it's a link it's gotta have an HR appt so it's an element nature of being an attribute and now i have this little thing here it's a it's a a dom node filter a very very simple little part of the code that we're making available this will this filter will be consulted for each Dom node that the iterator returns to see whether or not the note is accepted or not and you see here that all I'm doing is asking whether or not the node name again part of the API where we're making available with an a tag and if it is I accept it if not well then not I probably should have even check to see that the a had an H f to make it really correct as a link instead of just an anchor we see that's really pretty simple to get to get going and then of course it just reloads the table now to do to do the business of selecting the Dom node that I select in the table there's this little guy here and why I wrote the code but I don't even remember where I put it I think I put that in in this this one here yeah there it is okay every time I click in the table again just a little hunk of dumb go in there and create a Dom range and again one of the objects were making available select that note and now call one of the one of the webview methods that sort of again sort of bridges the world of WebKit in the Dom just go in and say pass off that range and select that Dom range it's very very simple sort of stuff it just takes a few lines of code to make these things happen and again kind of the interesting ways that you know the Dom starts getting glued together to the world of objective-c and and WebKit there's one other thing that I would like to point out to you before we move on and that you'll notice here in this call to create the Dom node iterator that that we have these bare colons and this was the strategy that we took for mapping the w3c IDL interfaces into WebKit of course now naturally the the IDL is really sort of more of a you know it would probably Matt pretty well into a language like C++ or Java or something like that just because of the you know the way the arguments are listed in Objective C as sort of another way of doing that with the labels and the colons and so we just decided to to leave that off so that's just one thing that you should kind of be aware of when you're looking at the API when you're starting to go and look at all of the headers that well just be aware of that it's not really very complicated but just something we you've known okay good can we have the slides back then okay so looked a little bit of a DOM and now let's look at a little bit at using using the DOM and using using all this code to start styling text now all of the styles in editing and WebKit are all based on CSS okay and here's the jersey okay thanks so now so now here is the object that we use to to interact with the styles and CSS Dom CSS style declaration it's used to both get and set styles so now here's a little example you'll see the the text in the boxes this is some styled text and here's a little snippet of CSS that was used to style that text and taken together that would be a CSS style declaration and now you'll see that in the CSS style declaration we have properties and values we have font family would be a CSS property and the value of course would be x see that font weight bold properties and values okay so now here's another little example and I'd like to introduce another idea something that probably a lot of you are familiar with but maybe not everyone and this is the you know the notion of how CSS you know styles are inherited as you go down the Dom tree so we have the divs which this was it surrounds this entire piece of text is providing the font and the font weight but the span just on the blues text itself that's providing the the color blue so now I'd like to talk about a little bit about computed style so now we can use CSS to set a style to say well you're going to be bold but you don't know really exactly how those styles are going to work out until you actually compute everything you compute the whole the whole style tree and so that text Blues is taking its style again from two different two different little snippets of CSS there and so just very very simply put the computed style of this file you see on the screen okay so we're going to provide you access to get into that as well with this method so you can get a dial Don CSS style declaration computed style four elements and it will return it to you and then you can query that style and find out exactly what the text looks like on the screen okay and then here's another example of one of those high level editing methods very very simple to to work with the Sol system you want to make some text blue well you just build up that little CSS style snippet style declaration with text little methods create a style declaration and then just go and apply that style and it'll operate on the selection as I said okay you could also as an alternative use the dome to access style attributes so again this is just now going in and using straight up Dom element getattribute style and set attribute the style attribute is just setting it directly so you have a bunch of options for working with that and now let's do a demo of this ok okie dokie okie okay so i have a very simple document here and i have in my demo window I have a little style inspector so you can see that the idea is very very similar to what we had before which is going to go through all of the all the elements in the document and start telling me some styling for information about it so now if you see that as I go and I select this span of course you can't see the span in the document there is actually a span just around that little bit of text in the document and so if now if I just go and type in here a little bit of CSS this is all hooked up to just go and make that go and make that read I can take this span here and say font family times and that will update and become time so it's very very simple again CSS is the is the way that we're going to be styling things in in the document so now you can also see that if I come over here and make something bold well I get a new bold elements in the and the style inspector so again there's it's kind of this interesting combination in a way of of using CSS but there is sin some other things and this is something that really we would like some feedback on it's just that you know in order to be fully compatible you know we want to be able to you know use this in mail and write up a mail message and send this mail message off and have other HTML renderers other HTML engines work with it so instead of saying font-weight bold there we're thinking that for some things we want to use sort of the more traditional their old style way of styling things and so we you know starting to make some choices on this but of course as you'll see in a little bit a little bit later is that with our delegates code you you can exercise some control over this so let's just take a little bit of a look at how this is done in the in the code itself okay really pretty really pretty simple it's just going in when I typed into the table itself i was using just the straight-up Dom to just set the style attribute you can see and ah there's one more thing I can show you here so now if i come down here you'll you'll you'll see that this sort of little text area on the bottom here is is starting to show you can see that the color is changing and that's all about computed style so as you can see now this is the hunk of code that is doing that you see computed style for element and now I am just going and getting the property value from the style and then just building up a string not particularly elegant programming but you can see that it is just pretty simple to get in there and start working with the computed style from it for an element based on something like it's selected in the table pretty simple to get in there and start working with that okay okay good can we have the slides back please okay so now as I just mentioned you know we you know we're going to be making some choices about how to apply markup you know based on based on some things that you that you asked when you particularly when you use one of these high-level editing functions so now this is going to be some information about how you can get in there and start modifying what it is that we we choose to do so that it can really work for you in the way that you want and there's two kinds of editing that editing delegate methods ones that are going to ask you should i do this and then you can answer and those that are just going to tell you about things that happen like for instance when the selection changes so now ask methods are again are all about pending changes will call out to you and put you in control of whether or not the change will actually take place and here's just a little diagram the webview will go and come over and ask you as the editing delegate now of course you have the option to do nothing and not implement anything and then we'll just again go forward into a default behavior so the editing delegate is you can just implement as much as much or as little as you want in sort of standard Coco fashion now if you do choose to implement an editing delegate method you can do one of three things you can say well yes go ahead i approve that change go ahead and make it you can say no it's just basically a straight up Vito don't do that or you can do take an alternative action and return though so we'll present to you a kind of a change that we want to make and you can actually go and make a sort of a different change rejecting the change that we we propose to you so now here are the is a listing of things that we're going to be asking you whether editing should begin and end so forth changing the typing style whether the selection should change off of a particular Dom range whether we should insert a node or should insert a markup string and so forth whether certain content should be deleted so there's quite a number of things you can get a lot of a lot of work done with that stuff and let's take a little bit of a look at that now okay okay so actually I need to lips return yes return though okay so now you'll see here now that what I've done is there is a delegate call for whether you should insert text and all this is called this is called when you type you can see on such a good typist and very very simple if you would like to make change the apt to be a read-only very very simple eyes you no no no typing now so now it's actually kind of kind of better for me no bugs no bugs this way one hundred percent perfect okay so now let's say that's pretty simple and straightforward now let's let's let's let's do take an alternative action so now you'll see that what I'm going to do is we you know return this alternative action and all I'm going to do is do something very very simple I'm going to look at the text that's passed in see if it's either the number one two or three and just replace that with text instead and return know so we'll see that lets compile that up and see that see that work look and so you see you know typing goes on as as usual but if i type a number one that does one two or three i'm todd todd faster the typist just look one finger and and so that's just very very simple so so is that for the code or for the typing whatever i don't know and again just really really important to you know we feel to give you the kind of control that you need to actually make this so that if you think we're dumb and the kind of choices we make it you can kind of fix it so so lots and lots of delegate methods available CLE go back to the slides please so again you know lots and lots of control for you selection changes whether style should be applied you could apply I an alternative style if you don't want any D tags if you want to make a document that is only using the latest web standards that would be your opportunity to get in there and say I don't like the way Apple is applying styles by default here's how I want you to apply the style instead okay lots of good stuff there okay not another demo we're going to go on to the little bit more information about the editing delegate so you may be asking when do these asked methods get called and we've made a design decision to call them only when the user initiates action so it's when you as a developer using the WebKit API to say replace node we're not going to call the delegate that's the presumption being well you just made this call why are we going to call you to ask you whether or not it's okay to do this thing you just asked to do however when you're just responding to events keyboard events and you know menu events you know user interface gestures things like that well you will not have had an opportunity to look at what might be done yet so we're going to you no respond to those events and sort of generate some stuff to do and then give you an opportunity to look at it okay so that's when those asking methods gets called now those towel methods they are always sent and we use the NS notification system to do that and again it's a standard Coco fashion if you set a delegate on the web view you get auto registered for the notifications that we that we send and here's what we have for that so begin editing and editing changing typing changing the selection and so forth okay and so let's do a little demo of that it's actually to be honest really already did it do a little demo of that back when back when I was looking at the at the computed style for for an element the you know when come in here and you know make something bold and then go over and and and select this well it's actually that's that's not not a hundred percent true ah yes this is excuse me so now when you arrow through the through the document you'll see that i'm not in bold text so what i've done here is i've made a little a little window for textile sort of mimicking the basic sort of bold italic thing that you'd see in just a text that array so you'll see as I as I arrow through the document that the that's a little bold button update so now if I kind of select some of this and make that italic you see that you know that the buttons are updating just as I'm so going through and through the through the document and again all this is happening is as the selection is changing it's throwing off a notification that little text window is listening to that notification looking at the computed style of the content and updating the button accordingly so it's in many ways you'd stuff that we've already looked at in code before and it just is you know another little way to show you how to hook in and start getting the kind of basic behaviors that you're probably going to want to probably going to want to do in your application okay kind of the slides back please okay okay so now you've seen in the beginning of the talk where I talked about the high level editing operations about how it just really took care of setting up undo for you so now I think a pretty one one of the interesting things that that we thought of along the line is that it should be possible for you to put together a bunch of Dom calls and make them easily undoable as well so that's what this section is about and kind of just going over again what what I've already said these methods used to DOM and their compound operations more than one Dom call and that they're undoable again just very very simple a code example of how you could do it you could call webview delete selection and then just call undo manager and tells you undo so now when you want to start making your own undoable Dom operation it's really really important this is really really important for you to know is that you have to put the Dom back exactly as it was before making the dump equivalent is just not good enough and again this is just part of the part of the reason you know the DOM is a tree and lots of links between elements in the Dom if you want to make undo work right you have to put things back exactly as they were you can't just save off the text for instance of a selection that you're deleted create a new Dom node for that later and reinsert that when you undo you have to put back that same Dom node so let's have a demo of this sounds like it might be sort of complicated and odious to do but in practice it's really not so bad as you as I hope you will see all righty so let's look at an example of this right I give somebody a dollar if they can name the song but so now you'll see that I have a little menu command there that just delete the node so I can just go and delete a node and all this does it's just a very very simple operation all it's going to do is go and look for a particular element in the Dom and just delete the last node from it just very very simple stuff but you see that the undo is is working and this is done just using straight up Dom calls so let's take a look at the at the code to make that happen so I've got this little class here that's called undoable delete note operation where do I get the name from that from okay and so you see this class all but it does is hangs on to the web view and it's going to hang on to the node that it actually went and deleted and what I call the menu command it just creates one of these things and says do your action and the action just goes and gets the container again this is kind of a canned example it just goes and gets an element by ID in that document that says container and it's going to look and get the last node last child of that container and retain it this is again and so that I can put it back just the way that it was before now I remove it I retain it because the document is probably the only thing hanging on to it it's probably the only thing that is rest that node so I retain it and then make it undoable by just saying okay well just go and register an end do with with target in just as sort of standard Coco fashion undo action so that when i go and undo i just go in and put that thing back just a pen node again just using the objective-c dom and register for redo the redo itself it just takes a note out again it's already got a reference to it so it's just even simple in the action itself and go and do that so now that you know the kind of you know the neat thing is you can you can delete and you know you can go and you know do other things and it just all just works with the with the undo system as you would as you would expect just very very simple and very very straightforward to start now wrapping your own custom Dom operations and getting them to work with undo look I even deleted it when I was done wow that's careful programming huh even that's just you we just you know it just could we do it because we care okay okay great that's what what I have for that let's go back to the slides okay so now is a bunch of scenarios you've gone through that are all about you as an application developer getting you interested giving you some of the you know a little bit of a taste of what's available in a fork in taking this new technology and putting it into your application so now going to switch gears a little bit and start talking about what you can do is a web developer to start working with this technology it's all about making web pages editable okay so now just stepping back a little bit to do a little dumb terminology HTML and Dom terminology so that little HTML snippet there we have a block that div is a block of course P tags or blocks body is a block then we have an inline that little D tag that's making that text bold that's an inline right so now as we looked at before attributes customize elements ok so now content editable is in editing attribute that you can apply to a block to make that block editable ok it doesn't apply to in line so you can put it on spans you can't put it on beat eggs or image tags I guess it's kind of need to maybe making image editable but we're not doing that not this time around and so content editable is the the little HTML attribute that you need to put on an element of blah block level elements like the body in this example this whole document is editable content editable equals true so here's just another example the first line of text in the body's not editable of course that text inside that content editable div is ok let's take a look at that okay so in order to do this I have to use my favorite web browser which is Safari you may have used that before okay that's actually a let me even do this one first okay so this is a pretty simple example looks just like the slide really you'll see that the the foo is editable and the bar is not poor bar okay so now I come up here I can I can start typing and the wonderful way that I do and of course the bar is not editable okay so now if I were to just grab that content editable out and put it on the body instead then lo and behold of course everything is editable including the including the bar text where's the build button maybe I can build that software here type that in ok so again just a really really pretty simple example so now let's say let's let me save that example yeah let me let me let me save that example for a second we go back to the slides for sir ok so now you may be asking about content editable and said editable well as a developer which one which one do you want to use which what's you know and it kind of a very simple way of thinking about it is that said editable is for you if you're an app developer and content editable is for you if you're a web developer it's just sort of your hook you're sort of one line hook to get into the features that editing makes available ok so if you're an app developer you're probably not going to be interested in contenteditable because you're going to be doing things in ivy and writing objective-c code but as a web developer content editable is really sort of important for you now one one interesting note about said editable look actually three interesting notes about said edible is that the setting last for the life of the webview you throw that switch once that's all done you don't have to do anything else an interesting thing about it too is it doesn't alter the Dom you might think that it's sort of a naive sort of first cut at first at said editable just goes in and sticks contenteditable in on the body tag of the document but it doesn't do that it's sort of those things sort of and you know underneath the covers in WebKit okay so the idea behind that is that we want you to be able to load documents you know from the net for instance into an editable webview and then save it out and then not have it be editable by everybody who might load that in some other app which maybe is not an editor but just a viewer okay one last thing is that said editable overrides any document attribute that may set contenteditable for instance to false okay so senator ball is again is a big switch and again is yours primarily for use for you as app developers okay so let's do a talk a little bit about editing with JavaScript so now we do have a new selection object available in JavaScript and we support these these editing commands these JavaScript editing commands which you may have seen before these were made available first i believe by by microsoft the documentation that that we used to figure out what we're going to do with this feature is the microsoft documentation on on editing commands for javascript now the first one there that exec command is one that we're going to look at a little bit further in the in the demo and here's an example of 11 use of it so now in JavaScript of course you just get an element by ID using the Dom you get a selection you set the position and now you just a document exact command insert text and there you go now the interesting send one of the interesting things about this is that this works just like the high level editing commands that we looked at in WebKit it just operates on the current selection okay so that selection object is really essential in many ways to making this work okay and so these are the command identifiers that we support by command identify insert text in this exact command example is a command identifier so these are the command identifiers that we support you will note if you were to go and do a comparison with the command identifiers that Microsoft makes available on the web their website that this is only a selection of them but these are the ones that we found for right now the ones that are going to be most useful to us and sort of getting to where we want to go for this release okay there's a bunch of neat things that you can do there and let's have a little demo of it oh no I don't want to close huh or maybe you do maybe it's kind of run away where you just go to the closing now okay so okay so let's take a look at this well that's really exciting isn't it well well what this is doing is this actually start as a much sort of simpler document let's take a look at this and I set this up so that I can make each one of the JavaScript editing commands that I issue wait a little bit before issuing the next one and so that document as you can see is completely built up using the JavaScript editing commands as you see here down on the bottom you can make this even a little bit bigger yeah I can only make it bigger good good size all right so you can see the document starts with just an empty div there's nothing in it at all and the onload handler in the document just goes and says you know run editing demo and all but it does is you know starts going and you know I've got these character you know type character command it's really you know it's a it's a little bit takes a little bit of looking to see here let me just take off the rap to see how that all works there's some stuff in there to make the delay work correctly but as you can see it's just document exec command insert text and then there's not got a can string that I'm inserting so that's all it does there you see the bold command I've got it selecting all and making everything bold and blue document get it open by D you can see that not only can you use the new JavaScript editing commands that we're making available the exec command and family but you can also use just the straight-up sort of javascript javascript dumb here's nothing JavaScript CSS support to just go in and just set the style on an element's just by using the JavaScript support that we have available setting something blue and that's it so you see that I just go in here and you know type of command make it bold and then make it blue and that's all that it does but I think you can see that with the command with the support for going in and making selections bold it'd be pretty simple to go in and make that sort of that little you know to just bar you know bold italic underline maybe some fonts information up in there and pretty simple to make a editor in a web browser that can support rich that's rich text editing so now going back to that other demo that I skipped before you know something that you know may be interesting to you is to say well okay so now I've got an editable widget in my document now how do I get that content out let's say you want to make a little blog poster or something and you want to have rich text post for your blog so now you've got a content editable div I mean this is just the simplest example that you can imagine so I know aight aight foo a foo in there and now i just hit a button and now i've got that content got that content out so just really really simple to do that let's just go and take a look at that no not that one simple it can be you see that that that little submit button is not even a buzz is well it's a button on click Submit and so submit all that it really does is it gets the gets the document and by ID the widget and then the result and then just sets the inner HTML from one to another so again this new inner HTML support just allows you to just go and get the HTML that's inside one of your editing elements and you could of course I didn't do so here but really just go forth and then do a post and submit that up to up to a web server somewhere really really just simple and easy to do and of course that's the innerhtml of whatever is in that content editable widget as you can see right that widget with content editable okay good can we have the slides back okay clothing I think we've got a lot of interesting stuff available in webview JavaScript and in the Dom lots and lots of new interesting stuff for you to start using again I want to say to you that all of the things that you've got all of the things that you've seen demo today available safari 2 dot 0 and tiger safari 13 on Panther that Safari one not three release is already available to you as a developer preview from the ADC site and in the end I think well I think HTML editing is is good so now for more information about all of this see how how fast can you type that well really to just step through this here a little bit there's a lots of good information available on on editing you'll see that last note there is using a web kit with with the scripting some interesting stuff going gone on and talks earlier this week is using the document object model API there's just a ton of new API available there for you if you've not used it on before and you want to start getting into this for there's a lot of neat stuff and then there's a simple code the examples that I've used up here on stage you'll be working with some of our friends to make this available to you so that you can download it and see what a bad quarter i am so as you can to rate me next year yeah yeah that's my managers managers clapping for the bed coating so there's my grand manager right so now if you have if you have questions here's a point of contact for you if you have apps that you want to start using this you want to start getting into their you want to really really get involved with what what we're doing here's a good point of contact for you and you know maybe we can you know hear some of your valuable feedback