{"id":953,"date":"2024-02-19T16:21:44","date_gmt":"2024-02-19T22:21:44","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=953"},"modified":"2024-02-19T16:21:44","modified_gmt":"2024-02-19T22:21:44","slug":"the-editcontext-api","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-editcontext-api\/","title":{"rendered":"The EditContext API"},"content":{"rendered":"\n<p>I hadn&#8217;t heard of <a href=\"https:\/\/w3c.github.io\/edit-context\/\">the EditContext API<\/a> at all, but apparently it&#8217;s <a href=\"https:\/\/caniuse.com\/mdn-api_editcontext\">landed in Chrome<\/a> already. <a href=\"https:\/\/twitter.com\/aaroniker_me\/status\/1739371710812422248\">Aaron Iker has a nice thread<\/a> on it. Using a <code>&lt;textarea><\/code> or the <code>contenteditable<\/code> attribute on HTML elements offers a pretty limited text editing experience. Some fancy text editing components actually hide the original editable element, which is part of their <a href=\"https:\/\/github.com\/w3c\/edit-context\/blob\/gh-pages\/explainer.md#motivation\">motivation<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This contradiction of needing an editable element, but not wanting it to be visible, leads web-based editors to create hidden editable elements to facilitate text input. This approach negatively impacts accessibility and increases complexity, leading to buggy behavior.<\/p>\n<\/blockquote>\n\n\n\n<p>I wanted to be excited about it, <a href=\"https:\/\/github.com\/w3c\/edit-context\/blob\/gh-pages\/explainer.md#interaction-with-other-browser-editing-features\">but this list of things that it breaks<\/a> has me scratching my head a little. That feels like <em>a lot<\/em> to give up. If I needed a nice text editor right now, my first stop would be <a href=\"https:\/\/prosemirror.net\/\">ProseMirror<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I hadn&#8217;t heard of the EditContext API at all, but apparently it&#8217;s landed in Chrome already. Aaron Iker has a nice thread on it. Using a &lt;textarea> or the contenteditable attribute on HTML elements offers a pretty limited text editing experience. Some fancy text editing components actually hide the original editable element, which is part [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":954,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[111,112],"class_list":["post-953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-editcontext","tag-rich-text-editing"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/02\/edit-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/953\/revisions\/955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/954"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}