{"id":696,"date":"2010-02-27T05:04:58","date_gmt":"2010-02-27T05:04:58","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=696"},"modified":"2010-02-27T05:04:58","modified_gmt":"2010-02-27T05:04:58","slug":"contenteditable-hopesdashed","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/02\/27\/contenteditable-hopesdashed\/","title":{"rendered":"contenteditable hopesdashed"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/svgedit.svgz\">[clipart]<\/object>See that new SVG-edit icon made by some Opera dude who converted <a href=\"http:\/\/svg-edit.googlecode.com\/\">SVG-edit<\/a> into a <a href=\"http:\/\/my.opera.com\/ODIN\/blog\/2010\/02\/18\/svg-edit-standalone-widget\">standalone widget<\/a>?  Pretty awesome huh?  We'll be using that icon in <a href=\"http:\/\/code.google.com\/p\/svg-edit\/wiki\/Roadmap\">SVG-edit 2.5, Bicorn<\/a>.  Kudos to those browser folk for helping spread the word.<\/p>\n<p>Speaking of SVG-edit 2.5, I had this great idea awhile back to make text editing more awesomer:  instead of using svg:text elements, I'd use HTML elements living inside foreignObject inside SVG.  That would instantly give you wrapping rich text, bulleted lists, heading styles - because those browsers, they're getting pretty good at displaying plain ol' HTML.<\/p>\n<p>I then had a much cooler idea. <!--more--><\/p>\n<p>With the <a href=\"http:\/\/www.w3.org\/TR\/html5\/editing.html#attr-contenteditable\">contenteditable attribute<\/a> I could let the user edit her HTML directly in the browser inside SVG-edit just by relying on the browsers which supposedly <a href=\"http:\/\/a.deveria.com\/caniuse\/#feat=contenteditable\">already support contenteditable<\/a>.<\/p>\n<p>Over the last couple months it's becoming plain to me that we've reached the current frontier \/ bleeding edge of interoperable SVG within SVG-edit.  Adding features might be harder for a little while.  Hey, when things only work in one browser engine, you know that's where you are.<\/p>\n<p>Here's <a href=\"http:\/\/codedread.com\/browser-tests\/foce.svg\">the test case<\/a>.<\/p>\n<p>Chrome\/Safari indeed lets me edit the first list item just fine, but Firefox and Opera do not.  \ud83d\ude41<\/p>\n<p>Firefox \"almost\" lets me edit it by showing a dashed border around it.  Their bug is <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=549048\">549048<\/a>.<\/p>\n<p>Opera does not even allow me to select the HTML text, for goodness sakes.  Kudos given, kudos taken away \ud83d\ude1b<\/p>\n<p>Too bad - that would have been really cool.<\/p>\n<p>I might still do that, but I'll have to be clever about it.  Maybe when the user clicks on a text element in the editor we'll have to pop up a div at the HTML root instead.  Supposedly contenteditable does quite well in HTML-land.  Won't quite be the beautiful, seamless experience it could be though.<\/p>\n<p>Unless you have any other bright ideas, chief.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[clipart]See that new SVG-edit icon made by some Opera dude who converted SVG-edit into a standalone widget? Pretty awesome huh? We&#8217;ll be using that icon in SVG-edit 2.5, Bicorn. Kudos to those browser folk for helping spread the word. Speaking of SVG-edit 2.5, I had this great idea awhile back to make text editing more [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-696","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=696"}],"version-history":[{"count":8,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/696\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/696\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}