You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: index.html
+37-41
Original file line number
Diff line number
Diff line change
@@ -57,12 +57,9 @@
57
57
58
58
<body>
59
59
<sectionid='abstract'>
60
-
<p>The {{EditContext}} is a new API that allows authors to more directly participate in the text input process.</p>
61
-
</section>
62
-
<sectionid='sotd'>
63
-
<p>
64
-
</p>
60
+
<p>{{EditContext}} is an API that allows authors to more directly participate in the text input process.</p>
65
61
</section>
62
+
<sectionid='sotd'></section>
66
63
<section>
67
64
<h2>Introduction</h2>
68
65
<sectionid="background" class="informative">
@@ -110,7 +107,7 @@ <h4>EditContext state</h4>
110
107
<li><dfn>selection start</dfn> which refers to the offset in [=text=] where the selection starts. The initial value is 0.</li>
111
108
<li><dfn>selection end</dfn> which refers to the offset in [=text=] where the selection ends. The initial value is 0. [=selection end=] may be less than [=selection start=] in the case of a "backwards" selection (in reverse of document order).</li>
112
109
<li><dfn>is composing</dfn> which indicates if there is an active composition. The initial value is false.</li>
113
-
<li><dfn>composition start</dfn> which refers to the offset in [=text=] representing the start position of the text being actively composed. The initial value is 0.</p></li>
110
+
<li><dfn>composition start</dfn> which refers to the offset in [=text=] representing the start position of the text being actively composed. The initial value is 0.</li>
114
111
<li><dfn>composition end</dfn> which refers to the offset in [=text=] representing the end position of the text being actively composed. The initial value is 0. [=composition end=] must always be greater than or equal to [=composition start=].</li>
115
112
<li><dfn>text formats</dfn> which is an array of [=text format=]. The array is initially empty.</li>
116
113
<li><dfn>control bounds</dfn> is a {{DOMRect}} describing the area of the viewport in which [=text=] is displayed. It is in the [=client coordinate system=] and the initial x, y, width, and height are all 0.</li>
@@ -178,7 +175,6 @@ <h4>Association and activation</h4>
178
175
{{HTMLElement/editContext}} property will prevent the element from being garbage
179
176
collected until the property is cleared or the {{EditContext}} is garbage collected.
180
177
</p>
181
-
</p>
182
178
<p>
183
179
If an {{EditContext}}'s <a>associated element</a>'s
184
180
<ahref="https://dom.spec.whatwg.org/#concept-tree-parent">parent</a> is not
@@ -228,7 +224,7 @@ <h4>Association and activation</h4>
228
224
[=Handle Input for EditContext=] given the [=EditContext editing host=] .
229
225
</p>
230
226
<h4id="edit-context-differences">Differences for an EditContext editing host</h4>
231
-
<p>
227
+
<div>
232
228
<p>
233
229
In many ways, an <a>EditContext editing host</a> behaves in the same way as other types of [=editing host=],
234
230
e.g. for a [^html-global/contenteditable^] element. Notable similarities include:
@@ -262,7 +258,7 @@ <h4 id="edit-context-differences">Differences for an EditContext editing host</h
262
258
event as specified in [[uievents]].
263
259
</li>
264
260
</ul>
265
-
</p>
261
+
</div>
266
262
267
263
<h4>EditContext events</h4>
268
264
<p>
@@ -321,18 +317,18 @@ <h4>Event loop changes</h4>
321
317
<h4>Examples</h4>
322
318
<p>Using an {{EditContext}}, an author can mark a region of the document editable by <adata-lt="associated element">associating</a> an {{EditContext}} object with an element as shown in the example below: </p>
323
319
<asideclass="example" title="Associate an EditContext with an Element">
324
-
<pre><xmp><scripttype="module">
325
-
letcanvas=document.querySelector("canvas")
326
-
canvas.editContext=newEditContext()
327
-
// When the associated element is focused, the EditContext is automatically activated.
328
-
canvas.focus();
329
-
</script>
330
-
<canvas></canvas></xmp></pre></aside>
320
+
<pre><script type="module">
321
+
let canvas = document.querySelector("canvas")
322
+
canvas.editContext = new EditContext()
323
+
// When the associated element is focused, the EditContext is automatically activated.
324
+
canvas.focus();
325
+
</script>
326
+
<canvas></canvas></pre></aside>
331
327
332
328
<p>In the example below, the author is using a canvas to draw an editable region that allows the user to input a single line of text rendered with a monospace font. The text for the editable region is maintained by the author as a String. The text offsets for the selection in the editable region are maintained by the author as a pair of Numbers: selectionStart and selectionEnd. The Numbers refer to the count of the number of UTF-16 codepoints to the left of the start and end of the selection respectively. For the sake of communicating the bounding boxes for the current selection and the editable region of the document to Text Input Services, the author also computes the bounding rectangle in CSS pixels for the selection and the editable region of the document. The offset of the rectangle is expressed relative to the origin of the canvas element since that is the element to which the author has <adata-lt="associated element">associated</a> an EditContext. Since the model for the author’s representation of text and selection location matches the form expected by the EditContext API, the author can simply assign those properties to the EditContext <adata-lt="associated element">associated</a> with the canvas whenever those values change. </p>
333
329
334
330
<asideclass="example" title="Using EditContext with editing model, view, and controller">
335
-
<pre><xmp><scripttype="module">
331
+
<pre><script type="module">
336
332
// This example is built on top of example 1.
337
333
// Only the added logic is shown here for brevity.
338
334
class EditingModel {
@@ -400,8 +396,8 @@ <h4>Examples</h4>
400
396
editingView, canvas.editContext);
401
397
402
398
editingController.render()
403
-
</script>
404
-
<canvas></canvas></xmp></pre>
399
+
</script>
400
+
<canvas></canvas></pre>
405
401
</aside>
406
402
407
403
<p>Building on the previous example, in response to user input, authors should handle the events of both the editable element (in this case a canvas) and the EditContext.</p>
@@ -410,7 +406,7 @@ <h4>Examples</h4>
410
406
411
407
<p>The below example shows how to handle {{TextUpdateEvent}}, {{TextFormatUpdateEvent}}, and {{CharacterBoundsUpdateEvent}} to update the model and render the result to the canvas.</p>
412
408
<asideclass="example" title="Event handlers for TextUpdateEvent, TextFormatUpdateEvent, and CharacterBoundsUpdateEvent">
413
-
<pre><xmp><script>
409
+
<pre><script>
414
410
// This example is built on top of example 1 and example 2.
415
411
// Only the added logic is shown here for brevity.
416
412
class EditingModel {
@@ -495,7 +491,7 @@ <h4>Examples</h4>
495
491
editContext.addEventListener("characterboundsupdate", e => {
@@ -504,8 +500,8 @@ <h3>Interactions with Other Editing Primitives </h3>
504
500
<p>An author doesn’t have to use a canvas element with an EditContext. In the example below the author uses a div to establish an editable region of the document and renders the contents into that editable region using various other styled elements, images and text. This allows the author to leverage other built-in editing primitives from the user agent such as selection and spellcheck. </p>
505
501
506
502
<asideclass="example" title="How native selection can be leveraged to handle caret navigation.">
507
-
<pre><xmp><div></div>
508
-
<script>
503
+
<pre><div></div>
504
+
<script>
509
505
// This example reuses EditModel and EditController in Example 2 and 3.
510
506
let div = document.querySelector("div")
511
507
div.editContext = new EditContext()
@@ -562,11 +558,11 @@ <h3>Interactions with Other Editing Primitives </h3>
562
558
document.addEventListener("selectionchange", e => {
563
559
editingController.handleSelectionChange()
564
560
});
565
-
</script></xmp></pre>
561
+
</script></pre>
566
562
</aside>
567
563
568
564
<asideclass="example" title="How beforeinput can be used to catch insertReplacementText to apply spelling changes">
569
-
<pre><xmp><script>
565
+
<pre><script>
570
566
// This example is built on top of example 4.
571
567
// Only the added logic is shown here for brevity.
572
568
class EditingController {
@@ -591,11 +587,11 @@ <h3>Interactions with Other Editing Primitives </h3>
0 commit comments