Rename "inserted-marks" drawing mode to "mark-elements"

Author: samuelbradshaw

README.md

@@ -70,15 +70,15 @@ Options can be provided when Highlight Helper is initialized. They can also be s
 - **containerSelector** – CSS selector for the section of the page that should be annotatable. Default: `body`.
 - **paragraphSelector** – CSS selector for the paragraphs (or other block elements) on the page that should be annotatable. Each paragraph is expected to have an ID attribute in the HTML, which is used to keep track of where a highlight starts and ends. Default: `h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], p[id], ol[id], ul[id], dl[id], tr[id]`.
 - **colors** – Object that describes available highlight colors. Keys are color names, and values are [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default: red, orange, yellow, green, blue (see full default values at the bottom of highlight-helper.js).
-- **styles** – Object that describes available highlight styles. Keys are style names, and there are two properties for each style: `css` and `svg`. `css` is a CSS string used for styling highlights in `highlight-api` and `inserted-marks` drawing modes, as well as for read-only highlights. `svg` is an SVG string used in `svg` drawing mode. The CSS custom property `var(--hh-color)` can be used to reference the highlight color value. For SVG highlights, the following variables (if present) will be replaced with relevant values from the highlight’s DOMRect: `{x}`, `{y}`, `{width}`, `{height}`, `{top}`, `{bottom}`, `{left}`, `{right}`. Default: fill, single-underline, double-underline, colored-text, redacted (see full default values at the bottom of highlight-helper.js).
+- **styles** – Object that describes available highlight styles. Keys are style names, and there are two properties for each style: `css` and `svg`. `css` is a CSS string used for styling highlights in `highlight-api` and `mark-elements` drawing modes, as well as for read-only highlights. `svg` is an SVG string used in `svg` drawing mode. The CSS custom property `var(--hh-color)` can be used to reference the highlight color value. For SVG highlights, the following variables (if present) will be replaced with relevant values from the highlight’s DOMRect: `{x}`, `{y}`, `{width}`, `{height}`, `{top}`, `{bottom}`, `{left}`, `{right}`. Default: fill, single-underline, double-underline, colored-text, redacted (see full default values at the bottom of highlight-helper.js).
 - **wrappers** – Object that describes available highlight wrappers. Keys are wrapper names, and values are objects with two optional properties: `start` (HTML string to be inserted at the beginning of the highlight), and `end` (HTML string to be inserted at the end of the highlight). Only read-only highlights support wrappers. To avoid problems when calculating ranges and offsets, all [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) in the start and end wrappers will be removed (if text is needed, it should be rendered with CSS). `var(--hh-color)` can be used to reference the highlight color value. Variables surrounded by curly brackets will be replaced with variables stored in the `wrapperVariables` attribute of the highlight, if applicable. See default values at the bottom of highlight-helper.js.
 - **selectionHandles** – Object that describes custom selection handles that a user can drag to resize a selection or highlight. Because most touch devices have built-in selection handles, custom selection handles will only show when using a mouse or trackpad. There are two properties: `left` (HTML string to be used for the left selection handle) and `right` (HTML string to be used for the right selection handle). `var(--hh-color)` can be used to reference the highlight color value. See default values at the bottom of highlight-helper.js.
 - **rememberStyle** – Whether the most recent color, style, and wrapper should be remembered and used by default the next time the user creates a highlight. Boolean. Default: `true`.
 - **snapToWord** – Whether highlights should snap to the nearest word boundary. Spaces and dashes are considered word boundaries (this option may not work correctly in all languages). Boolean. Default: `false`.
 - **autoTapToActivate** – Whether Highlight Helper should automatically activate highlights and hyperlinks when they’re tapped. If set to false, you’ll need to listen for the `hh:tap` event and call `activateHighlight()` or `activateHyperlink()` manually when needed. Boolean. Default: `true`.
 - **longPressTimeout** – Duration in milliseconds before a tap turns into a long-press. On long-press, Highlight Helper will send an `hh:tap` event with `isLongPress: true`. If this option is set to 0, Highlight Helper will treat long-presses the same as regular taps, sending the `hh:tap` event after the user lifts their finger. If you have access to system APIs (such as in a mobile app), you may be able to get the system long-press duration to use for this value (which may vary based on accessibility settings). For example, Android has a [getLongPressTimeout()](https://developer.android.com/reference/kotlin/android/view/ViewConfiguration#getlongpresstimeout) method and iOS has a [minimumPressDuration](https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer/minimumpressduration) property. Default: `500`.
 - **pointerMode** – Mode for responding to pointer events. Options are `simple` (create highlights by selecting text, then tapping a color or style); `live` (create highlights immediately when selecting text, without needing to tap a button); and `auto` (`simple` for touch and mouse input, but `live` when a stylus or Apple Pencil is detected). Default: `auto`.
-- **drawingMode** – Mode for drawing highlights on the page. Options are `svg` (SVG shapes), `highlight-api` (Custom Highlight API), and `inserted-marks` (inserted HTML mark elements). For faster performance, read-only highlights will always be drawn as inserted mark elements, even if a different drawing mode is set. Default: `svg`.
+- **drawingMode** – Mode for drawing highlights on the page. Options are `svg` (SVG shapes), `highlight-api` (Custom Highlight API), and `mark-elements` (inserted HTML mark elements). For faster performance, read-only highlights will always be drawn as mark elements, even if a different drawing mode is set. Default: `svg`.
 - **defaultColor** – Key of the default highlight color. Default: `yellow`.
 - **defaultStyle** – Key of the default highlight style. Default: `fill`.
 - **defaultWrapper** – Key of the default highlight wrapper. Default: `none`.

demo.html

@@ -142,7 +142,7 @@ <h1 id="title1">Highlight Helper Demo</h1>
         Drawing mode:<br>
         <label><input type="radio" name="hh-drawing-mode" value="svg" checked> SVG shapes</label><br>
         <label><input type="radio" name="hh-drawing-mode" value="highlight-api"> Custom Highlight API</label><br>
-        <label><input type="radio" name="hh-drawing-mode" value="inserted-marks"> Inserted mark elements</label><br>
+        <label><input type="radio" name="hh-drawing-mode" value="mark-elements"> HTML mark elements</label><br>
       </p>
       <b>Active highlight:</b>
       <div id="snippet-container">

highlight-helper.js

@@ -223,7 +223,7 @@ function Highlighter(options = hhDefaultOptions) {
       // Remove old highlight elements and styles
       if (!wasDrawnAsReadOnly || (wasDrawnAsReadOnly && !highlightInfo.readOnly)) undrawHighlight(highlightInfo);
 
-      if (highlightInfo.readOnly || options.drawingMode === 'inserted-marks') {
+      if (highlightInfo.readOnly || options.drawingMode === 'mark-elements') {
         // Don't redraw a read-only highlight
         if (wasDrawnAsReadOnly) continue;
 
@@ -449,7 +449,7 @@ function Highlighter(options = hhDefaultOptions) {
       changes: appearanceChanges.concat(boundsChanges),
     }
 
-    if (highlightId !== activeHighlightId || options.drawingMode !== 'inserted-marks') {
+    if (highlightId !== activeHighlightId || options.drawingMode !== 'mark-elements') {
       this.drawHighlights([highlightId]);
     }
 
@@ -514,7 +514,7 @@ function Highlighter(options = hhDefaultOptions) {
     }
     updateSelectionUi('appearance');
     if (deactivatedHighlight) {
-      if (options.drawingMode === 'inserted-marks') {
+      if (options.drawingMode === 'mark-elements') {
         this.drawHighlights([deactivatedHighlight.highlightId]);
       }
       this.annotatableContainer.dispatchEvent(new CustomEvent('hh:highlightdeactivate', { detail: {

test-load.html

@@ -39,7 +39,7 @@ <h1><span id="highlights-count"></span> Highlights <small id="time-to-load"></sm
   Drawing mode:<br>
   <label><input type="radio" name="hh-drawing-mode" value="svg" checked> SVG shapes</label><br>
   <label><input type="radio" name="hh-drawing-mode" value="highlight-api"> Custom Highlight API</label><br>
-  <label><input type="radio" name="hh-drawing-mode" value="inserted-marks"> HTML mark elements</label><br>
+  <label><input type="radio" name="hh-drawing-mode" value="mark-elements"> HTML mark elements</label><br>
 </p>
 
 <main>