Skip to content

Commit

Permalink
Fix warnings from tidy-html (#113)
Browse files Browse the repository at this point in the history 
This change is editorial.
Fix warnings reported by [Tidy](https://github.com/w3c/edit-context/actions/workflows/tidy.yml).
Slightly change wording in Abstract.
  • Loading branch information
@dandclark
dandclark authored Dec 21, 2024
1 parent 2632c28 commit 3dedc6e
Showing 1 changed file with 37 additions and 41 deletions.
78 changes: 37 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,9 @@

<body>
<section id='abstract'>
<p>The {{EditContext}} is a new API that allows authors to more directly participate in the text input process.</p>
</section>
<section id='sotd'>
<p>
</p>
<p>{{EditContext}} is an API that allows authors to more directly participate in the text input process.</p>
</section>
<section id='sotd'></section>
<section>
<h2>Introduction</h2>
<section id="background" class="informative">
Expand Down Expand Up @@ -110,7 +107,7 @@ <h4>EditContext state</h4>
<li><dfn>selection start</dfn> which refers to the offset in [=text=] where the selection starts. The initial value is 0.</li>
<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>
<li><dfn>is composing</dfn> which indicates if there is an active composition. The initial value is false.</li>
<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>
<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>
<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>
<li><dfn>text formats</dfn> which is an array of [=text format=]. The array is initially empty.</li>
<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>
Expand Down Expand Up @@ -178,7 +175,6 @@ <h4>Association and activation</h4>
{{HTMLElement/editContext}} property will prevent the element from being garbage
collected until the property is cleared or the {{EditContext}} is garbage collected.
</p>
</p>
<p>
If an {{EditContext}}'s <a>associated element</a>'s
<a href="https://dom.spec.whatwg.org/#concept-tree-parent">parent</a> is not
Expand Down Expand Up @@ -228,7 +224,7 @@ <h4>Association and activation</h4>
[=Handle Input for EditContext=] given the [=EditContext editing host=] .
</p>
<h4 id="edit-context-differences">Differences for an EditContext editing host</h4>
<p>
<div>
<p>
In many ways, an <a>EditContext editing host</a> behaves in the same way as other types of [=editing host=],
e.g. for a [^html-global/contenteditable^] element. Notable similarities include:
Expand Down Expand Up @@ -262,7 +258,7 @@ <h4 id="edit-context-differences">Differences for an EditContext editing host</h
event as specified in [[uievents]].
</li>
</ul>
</p>
</div>

<h4>EditContext events</h4>
<p>
Expand Down Expand Up @@ -321,18 +317,18 @@ <h4>Event loop changes</h4>
<h4>Examples</h4>
<p>Using an {{EditContext}}, an author can mark a region of the document editable by <a data-lt="associated element">associating</a> an {{EditContext}} object with an element as shown in the example below: </p>
<aside class="example" title="Associate an EditContext with an Element">
<pre><xmp><script type="module">
let canvas = document.querySelector("canvas")
canvas.editContext = new EditContext()
// When the associated element is focused, the EditContext is automatically activated.
canvas.focus();
</script>
<canvas></canvas></xmp></pre></aside>
<pre>&lt;script type="module"&gt;
let canvas = document.querySelector("canvas")
canvas.editContext = new EditContext()
// When the associated element is focused, the EditContext is automatically activated.
canvas.focus();
&lt;/script&gt;
&lt;canvas&gt;&lt;/canvas&gt;</pre></aside>

<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 <a data-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 <a data-lt="associated element">associated</a> with the canvas whenever those values change. </p>

<aside class="example" title="Using EditContext with editing model, view, and controller">
<pre><xmp><script type="module">
<pre>&lt;script type="module"&gt;
// This example is built on top of example 1.
// Only the added logic is shown here for brevity.
class EditingModel {
Expand Down Expand Up @@ -400,8 +396,8 @@ <h4>Examples</h4>
editingView, canvas.editContext);

editingController.render()
</script>
<canvas></canvas></xmp></pre>
&lt;/script&gt;
&lt;canvas&gt;&lt;/canvas&gt;</pre>
</aside>

<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>
Expand All @@ -410,7 +406,7 @@ <h4>Examples</h4>

<p>The below example shows how to handle {{TextUpdateEvent}}, {{TextFormatUpdateEvent}}, and {{CharacterBoundsUpdateEvent}} to update the model and render the result to the canvas.</p>
<aside class="example" title="Event handlers for TextUpdateEvent, TextFormatUpdateEvent, and CharacterBoundsUpdateEvent">
<pre><xmp><script>
<pre>&lt;script&gt;
// This example is built on top of example 1 and example 2.
// Only the added logic is shown here for brevity.
class EditingModel {
Expand Down Expand Up @@ -495,7 +491,7 @@ <h4>Examples</h4>
editContext.addEventListener("characterboundsupdate", e => {
editingcontroller.handleCharacterBoundsUpdate(e.rangeStart, e.rangeEnd);
});
</script></xmp></pre>
&lt;/script&gt;</pre>
</aside>
</section>
</section>
Expand All @@ -504,8 +500,8 @@ <h3>Interactions with Other Editing Primitives </h3>
<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>

<aside class="example" title="How native selection can be leveraged to handle caret navigation.">
<pre><xmp><div></div>
<script>
<pre>&lt;div&gt;&lt;/div&gt;
&lt;script&gt;
// This example reuses EditModel and EditController in Example 2 and 3.
let div = document.querySelector("div")
div.editContext = new EditContext()
Expand Down Expand Up @@ -562,11 +558,11 @@ <h3>Interactions with Other Editing Primitives </h3>
document.addEventListener("selectionchange", e => {
editingController.handleSelectionChange()
});
</script></xmp></pre>
&lt;/script&gt;</pre>
</aside>

<aside class="example" title="How beforeinput can be used to catch insertReplacementText to apply spelling changes">
<pre><xmp><script>
<pre>&lt;script&gt;
// This example is built on top of example 4.
// Only the added logic is shown here for brevity.
class EditingController {
Expand All @@ -591,11 +587,11 @@ <h3>Interactions with Other Editing Primitives </h3>
editingController.handleSpellCheck(newText, range)
}
})
</script></xmp></pre>
&lt;/script&gt;</pre>
</aside>

<aside class="example" title="How beforeinput can be used to catch deleteByDrag and insertFromDrop to apply drag and drop changes">
<pre><xmp><script>
<pre>&lt;script&gt;
// This example is built on top of example 4.
// Only the added logic is shown here for brevity.
class EditingController {
Expand Down Expand Up @@ -628,7 +624,7 @@ <h3>Interactions with Other Editing Primitives </h3>
editingController.handleInsertFromDrop(newText, caretPosition)
}
})
</script></xmp></pre>
&lt;/script&gt;</pre>
</aside>

</section>
Expand Down Expand Up @@ -999,7 +995,7 @@ <h4><dfn>Determine the active EditContext</dfn></h4>

</section>
<h3 id="editcontext-interface">EditContext Interface</h3>
<pre class="idl"><xmp>dictionary EditContextInit {
<pre class="idl">dictionary EditContextInit {
DOMString text;
unsigned long selectionStart;
unsigned long selectionEnd;
Expand All @@ -1014,22 +1010,22 @@ <h3 id="editcontext-interface">EditContext Interface</h3>
undefined updateSelection(unsigned long start, unsigned long end);
undefined updateControlBounds(DOMRect controlBounds);
undefined updateSelectionBounds(DOMRect selectionBounds);
undefined updateCharacterBounds(unsigned long rangeStart, sequence<DOMRect> characterBounds);
undefined updateCharacterBounds(unsigned long rangeStart, sequence&lt;DOMRect&gt; characterBounds);

sequence<HTMLElement> attachedElements();
sequence&lt;HTMLElement&gt; attachedElements();

readonly attribute DOMString text;
readonly attribute unsigned long selectionStart;
readonly attribute unsigned long selectionEnd;
readonly attribute unsigned long characterBoundsRangeStart;
sequence<DOMRect> characterBounds();
sequence&lt;DOMRect&gt; characterBounds();

attribute EventHandler ontextupdate;
attribute EventHandler ontextformatupdate;
attribute EventHandler oncharacterboundsupdate;
attribute EventHandler oncompositionstart;
attribute EventHandler oncompositionend;
};</xmp></pre>
};</pre>
<dl>
<dt>text</dt>
<dd>The {{EditContext/text}} getter steps are to return [=this=]'s [=text=].</dd>
Expand Down Expand Up @@ -1179,7 +1175,7 @@ <h3 id="editcontext-interface">EditContext Interface</h3>
<h2>EditContext Events</h2>
<section>
<h3>TextUpdateEvent</h3>
<pre class="idl"><xmp>dictionary TextUpdateEventInit : EventInit {
<pre class="idl">dictionary TextUpdateEventInit : EventInit {
unsigned long updateRangeStart;
unsigned long updateRangeEnd;
DOMString text;
Expand All @@ -1197,7 +1193,7 @@ <h3>TextUpdateEvent</h3>
readonly attribute DOMString text;
readonly attribute unsigned long selectionStart;
readonly attribute unsigned long selectionEnd;
};</xmp></pre>
};</pre>
<dl>
<dt>{{TextUpdateEvent/updateRangeStart}}, of type unsigned long, readonly</dt>
<dd>The start position of the range that is to be replaced.</dd>
Expand All @@ -1217,7 +1213,7 @@ <h3>TextUpdateEvent</h3>
</section>
<section>
<h3>TextFormatUpdateEvent</h3>
<pre class="idl"><xmp>enum UnderlineStyle { "none", "solid", "dotted", "dashed", "wavy" };
<pre class="idl">enum UnderlineStyle { "none", "solid", "dotted", "dashed", "wavy" };
enum UnderlineThickness { "none", "thin", "thick" };

dictionary TextFormatInit {
Expand All @@ -1237,14 +1233,14 @@ <h3>TextFormatUpdateEvent</h3>
};

dictionary TextFormatUpdateEventInit : EventInit {
sequence<TextFormat> textFormats;
sequence&lt;TextFormat&gt; textFormats;
};

[Exposed=Window]
interface TextFormatUpdateEvent : Event {
constructor(DOMString type, optional TextFormatUpdateEventInit options = {});
sequence<TextFormat> getTextFormats();
};</xmp></pre>
sequence&lt;TextFormat&gt; getTextFormats();
};</pre>
<dl>
<dt>{{TextFormat/rangeStart}}, of type unsigned long, readonly</dt>
<dd>An offset that respresents the position before the first codepoint that should be decorated.</dd>
Expand All @@ -1262,7 +1258,7 @@ <h3>TextFormatUpdateEvent</h3>
</section>
<section>
<h3>CharacterBoundsUpdateEvent</h3>
<pre class="idl"><xmp>dictionary CharacterBoundsUpdateEventInit : EventInit {
<pre class="idl">dictionary CharacterBoundsUpdateEventInit : EventInit {
unsigned long rangeStart;
unsigned long rangeEnd;
};
Expand All @@ -1272,7 +1268,7 @@ <h3>CharacterBoundsUpdateEvent</h3>
constructor(DOMString type, optional CharacterBoundsUpdateEventInit options = {});
readonly attribute unsigned long rangeStart;
readonly attribute unsigned long rangeEnd;
};</xmp></pre>
};</pre>
<dl>
<dt>{{CharacterBoundsUpdateEvent/rangeStart}}, of type unsigned long, readonly
</dt>
Expand Down

0 comments on commit 3dedc6e

Please sign in to comment.