Merge pull request #17581 from calixteman/editor_highlight_cursor

[Editor] Change the cursors for highlighting (bug 1876588)

gulpfile.mjs

@@ -1089,7 +1089,8 @@ function buildComponents(defines, dir) {
     "web/images/loading-icon.gif",
     "web/images/altText_*.svg",
     "web/images/editor-toolbar-*.svg",
-    "web/images/toolbarButton-menuArrow.svg",
+    "web/images/toolbarButton-{editorHighlight,menuArrow}.svg",
+    "web/images/cursor-*.svg",
   ];
 
   return merge([

src/display/editor/annotation_editor_layer.js

@@ -334,7 +334,7 @@ class AnnotationEditorLayer {
         "pointerdown",
         this.#boundTextLayerPointerDown
       );
-      this.#textLayer.div.classList.add("drawing");
+      this.#textLayer.div.classList.add("highlighting");
     }
   }
 
@@ -345,7 +345,7 @@ class AnnotationEditorLayer {
         "pointerdown",
         this.#boundTextLayerPointerDown
       );
-      this.#textLayer.div.classList.remove("drawing");
+      this.#textLayer.div.classList.remove("highlighting");
     }
   }
 
@@ -359,11 +359,19 @@ class AnnotationEditorLayer {
         // Do nothing on right click.
         return;
       }
+      this.#textLayer.div.classList.add("free");
       HighlightEditor.startHighlighting(
         this,
         this.#uiManager.direction === "ltr",
         event
       );
+      this.#textLayer.div.addEventListener(
+        "pointerup",
+        () => {
+          this.#textLayer.div.classList.remove("free");
+        },
+        { once: true }
+      );
       event.preventDefault();
     }
   }

web/annotation_editor_layer_builder.css

@@ -38,19 +38,31 @@
       var(--outline-around-width)
   );
   --editorFreeText-editing-cursor: text;
-  /*#if COMPONENTS*/
-  --editorInk-editing-cursor: pointer;
-  /*#else*/
   --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
-  /*#endif*/
+  --editorHighlight-editing-cursor: url(images/cursor-editorTextHighlight.svg)
+      23 23,
+    text;
+  --editorFreeHighlight-editing-cursor: url(images/toolbarButton-editorHighlight.svg)
+      0 16,
+    pointer;
+}
+
+.textLayer.highlighting {
+  cursor: var(--editorFreeHighlight-editing-cursor);
+
+  &:not(.free) span {
+    cursor: var(--editorHighlight-editing-cursor);
+  }
+
+  &.free span {
+    cursor: var(--editorFreeHighlight-editing-cursor);
+  }
 }
 
 @media (min-resolution: 1.1dppx) {
   :root {
-    /*#if !COMPONENTS*/
     --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16,
       text;
-    /*#endif*/
   }
 }
 

web/images/cursor-editorTextHighlight.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1743 5.20761L14.1743 5.20757L14.1691 5.2127L7.41914 11.9627C7.37184 12.01 7.30858 12.0362 7.2427 12.0362C7.17681 12.0362 7.11355 12.01 7.06625 11.9627L6.47126 11.3677L6.11771 11.0142L5.76415 11.3677L5.04559 12.0863H2.21734L4.34746 9.95L4.7 9.59644L4.34695 9.2434L3.75625 8.6527C3.66151 8.55796 3.66151 8.39454 3.75625 8.2998L10.5063 1.5498C10.7563 1.29979 11.0906 1.15625 11.4427 1.15625C11.801 1.15625 12.1306 1.29401 12.3741 1.54464L12.374 1.54468L12.3791 1.5498L14.1691 3.3398L14.1691 3.33984L14.1743 3.34489C14.4249 3.58836 14.5627 3.91791 14.5627 4.27625C14.5627 4.63459 14.4249 4.96414 14.1743 5.20761ZM4.4927 8.47625V8.68336L4.63914 8.8298L6.88914 11.0798L7.2427 11.4334L7.59625 11.0798L10.0769 8.59918L10.4304 8.24563L10.0769 7.89207L7.82187 5.63707L7.46832 5.28352L7.11477 5.63707L4.63914 8.1127L4.4927 8.25914V8.46625V8.47625ZM10.4304 7.53852L10.784 7.89207L11.1375 7.53852L13.8162 4.8598C14.1415 4.53454 14.1415 4.01796 13.8162 3.6927L12.0262 1.9027C11.8313 1.70771 11.5919 1.65625 11.4427 1.65625H11.426L11.4094 1.65736L11.4427 2.15625C11.4094 1.65736 11.4093 1.65737 11.4092 1.65737L11.4089 1.65739L11.4084 1.65742L11.4074 1.6575L11.4051 1.65767L11.3997 1.65809L11.3859 1.65936C11.3755 1.66041 11.3624 1.66192 11.3473 1.66409C11.3176 1.66833 11.2769 1.6755 11.2305 1.68771C11.1523 1.70827 10.9924 1.75942 10.8591 1.8927L8.17543 4.57641L7.82187 4.92997L8.17543 5.28352L10.4304 7.53852ZM0.512695 16.1562V15.1562H14.5127V16.1562H0.512695Z" stroke="#15141A"/>
+<path d="M23.6377 17.9742C23.6377 17.7572 23.7477 17.5592 23.9307 17.4442L25.0387 16.7522C25.1387 16.6902 25.2527 16.6572 25.3707 16.6572H27.0127V15.4072H25.3707C25.0187 15.4072 24.6757 15.5062 24.3767 15.6922L23.2687 16.3852C23.1737 16.4442 23.0937 16.5202 23.0127 16.5942C22.9307 16.5202 22.8517 16.4442 22.7567 16.3852L21.6477 15.6922C21.3487 15.5062 21.0057 15.4072 20.6547 15.4072H19.0127V16.6572H20.6547C20.7717 16.6572 20.8867 16.6902 20.9867 16.7522L22.0947 17.4442C22.2787 17.5592 22.3887 17.7572 22.3887 17.9742V23.0322V28.0902C22.3887 28.3072 22.2787 28.5052 22.0947 28.6202L20.9857 29.3122C20.8857 29.3742 20.7717 29.4072 20.6537 29.4072H19.0127V30.6572H20.6547C21.0067 30.6572 21.3497 30.5582 21.6487 30.3722L22.7567 29.6802C22.8527 29.6202 22.9317 29.5442 23.0127 29.4712C23.0937 29.5442 23.1737 29.6202 23.2687 29.6802L24.3777 30.3732C24.6767 30.5592 25.0197 30.6582 25.3717 30.6582H27.0127V29.4082H25.3707C25.2537 29.4082 25.1387 29.3752 25.0387 29.3132L23.9307 28.6212C23.7467 28.5062 23.6377 28.3082 23.6377 28.0912V23.0322V17.9742Z" fill="black"/>
+</svg>

web/text_layer_builder.css

@@ -26,7 +26,7 @@
   z-index: 2;
   caret-color: CanvasText;
 
-  &.drawing {
+  &.highlighting {
     touch-action: none;
   }