From 3dedc6e4d24e6cdf8c4c97d5d6af33346e44608d Mon Sep 17 00:00:00 2001 From: Dan Clark Date: Fri, 20 Dec 2024 17:01:07 -0800 Subject: [PATCH] Fix warnings from tidy-html (#113) This change is editorial. Fix warnings reported by [Tidy](https://github.com/w3c/edit-context/actions/workflows/tidy.yml). Slightly change wording in Abstract. --- index.html | 78 ++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index d4e5bab..cce9947 100644 --- a/index.html +++ b/index.html @@ -57,12 +57,9 @@
-

The {{EditContext}} is a new API that allows authors to more directly participate in the text input process.

-
-
-

-

+

{{EditContext}} is an API that allows authors to more directly participate in the text input process.

+

Introduction

@@ -110,7 +107,7 @@

EditContext state

  • selection start which refers to the offset in [=text=] where the selection starts. The initial value is 0.
  • selection end 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).
  • is composing which indicates if there is an active composition. The initial value is false.
    • -
  • composition start which refers to the offset in [=text=] representing the start position of the text being actively composed. The initial value is 0.

    • +
  • composition start which refers to the offset in [=text=] representing the start position of the text being actively composed. The initial value is 0.
  • composition end 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=].
  • text formats which is an array of [=text format=]. The array is initially empty.
  • control bounds 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.
    • @@ -178,7 +175,6 @@

    Association and activation

    {{HTMLElement/editContext}} property will prevent the element from being garbage collected until the property is cleared or the {{EditContext}} is garbage collected.

    -

    If an {{EditContext}}'s associated element's parent is not @@ -228,7 +224,7 @@

    Association and activation

    [=Handle Input for EditContext=] given the [=EditContext editing host=] .

    Differences for an EditContext editing host

    -

    +

    In many ways, an EditContext editing host behaves in the same way as other types of [=editing host=], e.g. for a [^html-global/contenteditable^] element. Notable similarities include: @@ -262,7 +258,7 @@

    Differences for an EditContext editing host -

    +

    EditContext events

    @@ -321,18 +317,18 @@

    Event loop changes

    Examples

    Using an {{EditContext}}, an author can mark a region of the document editable by associating an {{EditContext}} object with an element as shown in the example below:

    + 
    <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>

    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 associated 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 associated with the canvas whenever those values change.

    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.

    @@ -410,7 +406,7 @@

    Examples

    The below example shows how to handle {{TextUpdateEvent}}, {{TextFormatUpdateEvent}}, and {{CharacterBoundsUpdateEvent}} to update the model and render the result to the canvas.

    @@ -504,8 +500,8 @@

    Interactions with Other Editing Primitives

    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.

    @@ -999,7 +995,7 @@

    Determine the active EditContext

    EditContext Interface

    - 
    dictionary EditContextInit {
+    <pre class="idl">dictionary EditContextInit {
     DOMString text;
     unsigned long selectionStart;
     unsigned long selectionEnd;
@@ -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;
-};
    +};
    text
    The {{EditContext/text}} getter steps are to return [=this=]'s [=text=].
    @@ -1179,7 +1175,7 @@

    EditContext Interface

    EditContext Events

    TextUpdateEvent

    - 
    dictionary TextUpdateEventInit : EventInit {
+            <pre class="idl">dictionary TextUpdateEventInit : EventInit {
     unsigned long updateRangeStart;
     unsigned long updateRangeEnd;
     DOMString text;
@@ -1197,7 +1193,7 @@ <h3>TextUpdateEvent</h3>
     readonly attribute DOMString text;
     readonly attribute unsigned long selectionStart;
     readonly attribute unsigned long selectionEnd;
-};
    +};
    {{TextUpdateEvent/updateRangeStart}}, of type unsigned long, readonly
    The start position of the range that is to be replaced.
    @@ -1217,7 +1213,7 @@

    TextUpdateEvent

    TextFormatUpdateEvent

    - 
    enum UnderlineStyle { "none", "solid", "dotted", "dashed", "wavy" };
+            <pre class="idl">enum UnderlineStyle { "none", "solid", "dotted", "dashed", "wavy" };
 enum UnderlineThickness { "none", "thin", "thick" };
 
 dictionary TextFormatInit {
@@ -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();
-};
    + sequence<TextFormat> getTextFormats(); +};
    {{TextFormat/rangeStart}}, of type unsigned long, readonly
    An offset that respresents the position before the first codepoint that should be decorated.
    @@ -1262,7 +1258,7 @@

    TextFormatUpdateEvent

    CharacterBoundsUpdateEvent

    - 
    dictionary CharacterBoundsUpdateEventInit : EventInit {
+            <pre class="idl">dictionary CharacterBoundsUpdateEventInit : EventInit {
     unsigned long rangeStart;
     unsigned long rangeEnd;
 };
@@ -1272,7 +1268,7 @@ <h3>CharacterBoundsUpdateEvent</h3>
     constructor(DOMString type, optional CharacterBoundsUpdateEventInit options = {});
     readonly attribute unsigned long rangeStart;
     readonly attribute unsigned long rangeEnd;
-};
    +};
    {{CharacterBoundsUpdateEvent/rangeStart}}, of type unsigned long, readonly