Forums
New posts
Search forums
News
Security News
Technology News
Giveaways
Giveaways, Promotions and Contests
Discounts & Deals
Reviews
Users Reviews
Video Reviews
Support
Windows Malware Removal Help & Support
Inactive Support Threads
Mac Malware Removal Help & Support
Mobile Malware Removal Help & Support
Blog
Log in
Register
What's new
Search
Search titles only
By:
Search titles only
By:
Reply to thread
Menu
Install the app
Install
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Forums
Software
Browsers
Microsoft Edge
Improving text editing on the web, one feature at a time
Message
<blockquote data-quote="Microsoft Edge Team" data-source="post: 1084370"><p>The web’s success is due, in big parts, to its ability to support text entry and form submissions. In other words, entering text on webpages is a fundamental part of the web, which we've all used. But today's modern web applications go even further and let you edit entire documents, spreadsheets, or presentations. Other applications let you write code, chat with friends, or write emails. Even though the use cases are very diverse, the underlying technology hasn't changed much since the early days of the web. the HTML [ICODE]input[/ICODE] and [ICODE]textarea[/ICODE] elements are still the primary ways to enter text, and they work great. For more advanced use cases, web developers often rely on the [ICODE]contenteditable[/ICODE] HTML attribute, which lets you capture rich text input. These text editing primitives are powerful, but building advanced experiences still comes with a lot of challenges and sometimes requires less than ideal workarounds. On the Microsoft Edge team, we’re very familiar with these challenges and work hand in hand with our partners to make text editing on the web a better experience for everyone. In this article, we’ll share a few important improvements that we’ve recently made to Microsoft Edge and to the web platform, which we’re very excited about:</p><ul> <li data-xf-list-type="ul">Rewriting text with AI.</li> <li data-xf-list-type="ul">Writing with digital pens directly on web pages.</li> <li data-xf-list-type="ul">Building text editors that support advanced text-editing surfaces.</li> <li data-xf-list-type="ul">Improving clipboard access APIs.</li> <li data-xf-list-type="ul">And controlling text prediction features.</li> </ul><h2>Rewrite text with Copilot</h2><p>Starting with version 124, Microsoft Edge’s AI <a href="https://www.microsoft.com/en-us/edge/features/compose?form=MA13FJ" target="_blank">Compose</a> feature becomes available inline, within editable text areas of a document. Select a section of text that’s displayed in an editable field and click the Copilot icon to start rewriting that section, by iterating through different AI-generated proposals. <a href="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/compose-inline.png" target="_blank"><img src="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/compose-inline-1024x690.png" alt="The inline Compose dialog, being used to re-write part of an email." class="fr-fic fr-dii fr-draggable " style="" /></a> You can change the tone, format, or length settings to your needs. Being able to access Copilot directly within input fields can save time and avoid context switching. But we also realize that not all text editable surfaces on the web need this capability, so we’re also introducing the [ICODE]writingsuggestions[/ICODE] HTML attribute to disable it. More on this attribute at the end of this article.</p><h2>Write in any text field with a digital pen</h2><p>Windows Ink allows you to write with a digital pen directly into an input field on Windows touch devices. This helps you stay in your workflow by reducing the need to switch back and forth between your keyboard and digital pen. Microsoft Edge now also supports Windows Ink in places such as [ICODE]textarea[/ICODE] elements, [ICODE]input[/ICODE] elements, elements with the [ICODE]contenteditable[/ICODE] attribute, or the browser address bar. With Windows Ink support in Microsoft Edge, you can:</p><ul> <li data-xf-list-type="ul">Enter text by writing with a pen in, or near an input field.</li> <li data-xf-list-type="ul">Delete text by scribbling over words to delete them.</li> <li data-xf-list-type="ul">Add or remove spaces by drawing vertical lines in the text.</li> <li data-xf-list-type="ul">Add line breaks by drawing horizontal lines.</li> </ul><p><a href="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/windows-ink-1.png" target="_blank"><img src="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/windows-ink-1-1024x431.png" alt="Examples of hand-written text and separators, and the effect that they have on the text in input fields" class="fr-fic fr-dii fr-draggable " style="" /></a> Windows Ink can save a lot of time when interacting with webpages with a digital pen, and we would love to hear what you think and how we can improve the feature. Note that you can toggle the feature in Microsoft Edge by going to [ICODE]edge://settings/content/HandwritingToText[/ICODE] in a browser window.</p><h2>Build rich text editors that support advanced input methods</h2><p>Today’s text editing techniques on the web make it hard to truly decouple the text input logic from the text rendering logic. Custom text editors often must use a hidden element that uses the [ICODE]contenteditable[/ICODE] attribute to capture text input events, and then render the text separately, which often comes with accessibility issues. To help with this, we shipped the EditContext API in Chromium to make it possible to create custom web text editors that support advanced input methods and avoid hacky solutions. The API is available in Microsoft Edge starting with 121, and in other Chromium-based browsers. With the EditContext API, web developers can receive text input events directly through the API surface, which removes unnecessary complexity in the code, enhances accessibility, and lets developers create their own custom view of the edited text. For example, you can use the API to render the edited text in a [ICODE]<canvas>[/ICODE] element if you want. The API supports text-editing UI surfaces that a user might be composing text with at the operating system level, such as IME composition dialogs. It even supports Windows Ink. <a href="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/edit-context.png" target="_blank"><img src="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/edit-context-1024x629.png" alt="Example of a Japanese IME composition window, made possible by using the EditContext API" class="fr-fic fr-dii fr-draggable " style="" /></a> To learn more about the EditContext API, check out <a href="https://blogs.windows.com/msedgedev/2024/02/13/custom-web-editing-experiences-with-editcontext/" target="_blank">our previous announcement</a>, and the API’s <a href="https://developer.mozilla.org/docs/Web/API/EditContext_API" target="_blank">reference documentation on MDN</a>.</p><h2>Copy & paste HTML</h2><p>Text editing webapps often encounter clipboard issues when copying and pasting HTML formatted content. Sometimes, the format is lost, other times, the clipboard payload is much more complicated than it should. To address this, we introduced the [ICODE]unsanitized[/ICODE] option to the [ICODE]navigator.clipboard.read()[/ICODE] method, allowing web applications to choose when they want to receive the full HTML content, rather than a browser-sanitized version of the HTML. To learn more about how to use the option, check out the <a href="https://developer.mozilla.org/docs/Web/API/Clipboard/read" target="_blank">Clipboard read() method documentation on MDN</a>. This API has already helped us improve Excel Online by addressing several top copy-paste issues affecting the app. We shipped the API in Chromium, making it available to all Chromium-based browsers, including Microsoft Edge starting with version 122.</p><h2>Detect supported clipboard formats</h2><p>When writing data to the system clipboard, by using the <a href="https://developer.mozilla.org/docs/Web/API/Clipboard_API" target="_blank">Clipboard API</a>, web developers have no way of knowing if the data they’re trying to write is supported. This means that they must first attempt to write the data to the clipboard and then check whether the write operation failed due to an unsupported data format. This leads to more complex code and unnecessary cost in terms of CPU cycles. To fix this, we’ve added a new static method to the [ICODE]ClipboardItem[/ICODE] interface called [ICODE]supports()[/ICODE], which makes it possible to detect supported clipboard formats before attempting to write data. For example, to test if the [ICODE]text/html[/ICODE] mime-type is supported, use [ICODE]ClipboardItem.supports("text/html")[/ICODE]. This new method shipped with Microsoft Edge 121, and is available in other Chromium browsers too.</p><h2>Control the browser’s text prediction feature</h2><p>As mentioned before, Microsoft Edge lets you rewrite text with the inline Compose feature. Edge can also predict text as you type, with the <a href="https://www.microsoft.com/edge/features/text-prediction" target="_blank">text prediction feature</a>. Text prediction makes writing much faster by completing sentences. <a href="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/text-prediction.png" target="_blank"><img src="https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/text-prediction-1024x576.png" alt="Text prediction in Edge, completing a sentence in an input field" class="fr-fic fr-dii fr-draggable " style="" /></a> However, we realize that not all text editing surfaces on the web want the text prediction or inline Compose features available at all times. So, starting with version 124, we’re introducing a new HTML attribute called [ICODE]writingsuggestions[/ICODE]. The new attribute can be used to turn off text prediction and inline Compose on any editor element. To learn more, check out our <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WritingSuggestions/explainer.md" target="_blank">explainer document</a>, and the attribute’s <a href="https://html.spec.whatwg.org/multipage/interaction.html#writing-suggestions" target="_blank">specification</a>. The new [ICODE]writingsuggestions[/ICODE] attribute is now part of the Chromium codebase, making it available to all Chromium-based browsers. However, because Microsoft Edge is currently the only browser to have access to these text prediction and rewriting features, the attribute doesn’t have any effect in other browsers.</p><hr /><p>Text editing on the web is more important than ever, and we can continue making the user and developer experience better with new APIs and browser features that address specific challenges. We hope the improvements described in this article are useful to you. As always, we'd love to know what you think or if you spot any issues! To reach out, click the <strong>...</strong> button in the top-right corner of Microsoft Edge, and then go to <strong>Help and feedback</strong> > <strong>Send feedback</strong>.</p><p></p><p>Source: <a href="https://blogs.windows.com/msedgedev/2024/04/23/improving-text-editing-on-the-web/" target="_blank">Improving text editing on the web, one feature at a time</a></p></blockquote><p></p>
[QUOTE="Microsoft Edge Team, post: 1084370"] The web’s success is due, in big parts, to its ability to support text entry and form submissions. In other words, entering text on webpages is a fundamental part of the web, which we've all used. But today's modern web applications go even further and let you edit entire documents, spreadsheets, or presentations. Other applications let you write code, chat with friends, or write emails. Even though the use cases are very diverse, the underlying technology hasn't changed much since the early days of the web. the HTML [ICODE]input[/ICODE] and [ICODE]textarea[/ICODE] elements are still the primary ways to enter text, and they work great. For more advanced use cases, web developers often rely on the [ICODE]contenteditable[/ICODE] HTML attribute, which lets you capture rich text input. These text editing primitives are powerful, but building advanced experiences still comes with a lot of challenges and sometimes requires less than ideal workarounds. On the Microsoft Edge team, we’re very familiar with these challenges and work hand in hand with our partners to make text editing on the web a better experience for everyone. In this article, we’ll share a few important improvements that we’ve recently made to Microsoft Edge and to the web platform, which we’re very excited about: [LIST] [*]Rewriting text with AI. [*]Writing with digital pens directly on web pages. [*]Building text editors that support advanced text-editing surfaces. [*]Improving clipboard access APIs. [*]And controlling text prediction features. [/LIST] [HEADING=1]Rewrite text with Copilot[/HEADING] Starting with version 124, Microsoft Edge’s AI [URL='https://www.microsoft.com/en-us/edge/features/compose?form=MA13FJ']Compose[/URL] feature becomes available inline, within editable text areas of a document. Select a section of text that’s displayed in an editable field and click the Copilot icon to start rewriting that section, by iterating through different AI-generated proposals. [URL='https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/compose-inline.png'][IMG alt="The inline Compose dialog, being used to re-write part of an email."]https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/compose-inline-1024x690.png[/IMG][/URL] You can change the tone, format, or length settings to your needs. Being able to access Copilot directly within input fields can save time and avoid context switching. But we also realize that not all text editable surfaces on the web need this capability, so we’re also introducing the [ICODE]writingsuggestions[/ICODE] HTML attribute to disable it. More on this attribute at the end of this article. [HEADING=1]Write in any text field with a digital pen[/HEADING] Windows Ink allows you to write with a digital pen directly into an input field on Windows touch devices. This helps you stay in your workflow by reducing the need to switch back and forth between your keyboard and digital pen. Microsoft Edge now also supports Windows Ink in places such as [ICODE]textarea[/ICODE] elements, [ICODE]input[/ICODE] elements, elements with the [ICODE]contenteditable[/ICODE] attribute, or the browser address bar. With Windows Ink support in Microsoft Edge, you can: [LIST] [*]Enter text by writing with a pen in, or near an input field. [*]Delete text by scribbling over words to delete them. [*]Add or remove spaces by drawing vertical lines in the text. [*]Add line breaks by drawing horizontal lines. [/LIST] [URL='https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/windows-ink-1.png'][IMG alt="Examples of hand-written text and separators, and the effect that they have on the text in input fields"]https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/windows-ink-1-1024x431.png[/IMG][/URL] Windows Ink can save a lot of time when interacting with webpages with a digital pen, and we would love to hear what you think and how we can improve the feature. Note that you can toggle the feature in Microsoft Edge by going to [ICODE]edge://settings/content/HandwritingToText[/ICODE] in a browser window. [HEADING=1]Build rich text editors that support advanced input methods[/HEADING] Today’s text editing techniques on the web make it hard to truly decouple the text input logic from the text rendering logic. Custom text editors often must use a hidden element that uses the [ICODE]contenteditable[/ICODE] attribute to capture text input events, and then render the text separately, which often comes with accessibility issues. To help with this, we shipped the EditContext API in Chromium to make it possible to create custom web text editors that support advanced input methods and avoid hacky solutions. The API is available in Microsoft Edge starting with 121, and in other Chromium-based browsers. With the EditContext API, web developers can receive text input events directly through the API surface, which removes unnecessary complexity in the code, enhances accessibility, and lets developers create their own custom view of the edited text. For example, you can use the API to render the edited text in a [ICODE]<canvas>[/ICODE] element if you want. The API supports text-editing UI surfaces that a user might be composing text with at the operating system level, such as IME composition dialogs. It even supports Windows Ink. [URL='https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/edit-context.png'][IMG alt="Example of a Japanese IME composition window, made possible by using the EditContext API"]https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/edit-context-1024x629.png[/IMG][/URL] To learn more about the EditContext API, check out [URL='https://blogs.windows.com/msedgedev/2024/02/13/custom-web-editing-experiences-with-editcontext/']our previous announcement[/URL], and the API’s [URL='https://developer.mozilla.org/docs/Web/API/EditContext_API']reference documentation on MDN[/URL]. [HEADING=1]Copy & paste HTML[/HEADING] Text editing webapps often encounter clipboard issues when copying and pasting HTML formatted content. Sometimes, the format is lost, other times, the clipboard payload is much more complicated than it should. To address this, we introduced the [ICODE]unsanitized[/ICODE] option to the [ICODE]navigator.clipboard.read()[/ICODE] method, allowing web applications to choose when they want to receive the full HTML content, rather than a browser-sanitized version of the HTML. To learn more about how to use the option, check out the [URL='https://developer.mozilla.org/docs/Web/API/Clipboard/read']Clipboard read() method documentation on MDN[/URL]. This API has already helped us improve Excel Online by addressing several top copy-paste issues affecting the app. We shipped the API in Chromium, making it available to all Chromium-based browsers, including Microsoft Edge starting with version 122. [HEADING=1]Detect supported clipboard formats[/HEADING] When writing data to the system clipboard, by using the [URL='https://developer.mozilla.org/docs/Web/API/Clipboard_API']Clipboard API[/URL], web developers have no way of knowing if the data they’re trying to write is supported. This means that they must first attempt to write the data to the clipboard and then check whether the write operation failed due to an unsupported data format. This leads to more complex code and unnecessary cost in terms of CPU cycles. To fix this, we’ve added a new static method to the [ICODE]ClipboardItem[/ICODE] interface called [ICODE]supports()[/ICODE], which makes it possible to detect supported clipboard formats before attempting to write data. For example, to test if the [ICODE]text/html[/ICODE] mime-type is supported, use [ICODE]ClipboardItem.supports("text/html")[/ICODE]. This new method shipped with Microsoft Edge 121, and is available in other Chromium browsers too. [HEADING=1]Control the browser’s text prediction feature[/HEADING] As mentioned before, Microsoft Edge lets you rewrite text with the inline Compose feature. Edge can also predict text as you type, with the [URL='https://www.microsoft.com/edge/features/text-prediction']text prediction feature[/URL]. Text prediction makes writing much faster by completing sentences. [URL='https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/text-prediction.png'][IMG alt="Text prediction in Edge, completing a sentence in an input field"]https://blogs.windows.com/wp-content/uploads/prod/sites/33/2024/04/text-prediction-1024x576.png[/IMG][/URL] However, we realize that not all text editing surfaces on the web want the text prediction or inline Compose features available at all times. So, starting with version 124, we’re introducing a new HTML attribute called [ICODE]writingsuggestions[/ICODE]. The new attribute can be used to turn off text prediction and inline Compose on any editor element. To learn more, check out our [URL='https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WritingSuggestions/explainer.md']explainer document[/URL], and the attribute’s [URL='https://html.spec.whatwg.org/multipage/interaction.html#writing-suggestions']specification[/URL]. The new [ICODE]writingsuggestions[/ICODE] attribute is now part of the Chromium codebase, making it available to all Chromium-based browsers. However, because Microsoft Edge is currently the only browser to have access to these text prediction and rewriting features, the attribute doesn’t have any effect in other browsers. [HR][/HR] Text editing on the web is more important than ever, and we can continue making the user and developer experience better with new APIs and browser features that address specific challenges. We hope the improvements described in this article are useful to you. As always, we'd love to know what you think or if you spot any issues! To reach out, click the [B]...[/B] button in the top-right corner of Microsoft Edge, and then go to [B]Help and feedback[/B] > [B]Send feedback[/B]. Source: [URL="https://blogs.windows.com/msedgedev/2024/04/23/improving-text-editing-on-the-web/"]Improving text editing on the web, one feature at a time[/URL] [/QUOTE]
Insert quotes…
Verification
Post reply
Top
