fix: LEAP-2009: Respect granularity when resizing NER spans

web/libs/editor/src/tags/object/RichText/view.jsx

@@ -5,7 +5,7 @@ import * as xpath from "xpath-range";
 import { inject, observer } from "mobx-react";
 import { STATE_CLASS_MODS } from "../../../mixins/HighlightMixin";
 import Utils from "../../../utils";
-import { fixCodePointsInRange, rangeToGlobalOffset } from "../../../utils/selection-tools";
+import { applyTextGranularity, fixCodePointsInRange, rangeToGlobalOffset, trimSelection } from "../../../utils/selection-tools";
 import "./RichText.scss";
 import { isAlive } from "mobx-state-tree";
 import { LoadingOutlined } from "@ant-design/icons";
@@ -177,19 +177,32 @@ class RichTextPieceView extends Component {
     if (item.initializedDrag) {
       const area = this.draggableRegion;
       const selection = window.getSelection();
-      const range = selection.getRangeAt(0);
 
       // don't collapse region into nothing
       if (selection.isCollapsed) return false;
 
-      // so no visual glitches on the screen, selection was just a helper here, we don't need it anymore
-      selection.removeAllRanges();
+      let range = selection.getRangeAt(0);
 
       // @todo would be more convenient to try to reduce the range to be within the root,
       // @todo so for example if we drag to the left and the range is outside of the root, we would
       // @todo just reduce it to the left edge of the root,
       // @todo but that would be a bit more complicated, so let's just check if the range is within the root for now.
-      if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return false;
+      if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) {
+        selection.removeAllRanges();
+        return false;
+      }
+
+      // we need this to properly apply the granularity; it fixes selection to point only to text nodes
+      if (item.granularity !== "symbol") {
+        trimSelection(selection);
+      }
+
+      // update range to respect granularity
+      applyTextGranularity(selection, item.granularity);
+      range = selection.getRangeAt(0);
+
+      // so no visual glitches on the screen, selection was just a helper here, we don't need it anymore
+      selection.removeAllRanges();
       if (!area) return false;
 
       area._range = range;
@@ -223,10 +236,6 @@ class RichTextPieceView extends Component {
       return true;
     }
 
-    if (this.draggableRegion) {
-      this._resetDragParams();
-    }
-
     return false;
   };
 
@@ -266,6 +275,10 @@ class RichTextPieceView extends Component {
     const root = rootEl?.contentDocument?.body ?? rootEl;
 
     this._checkDragAndAdjustRegion(root);
+
+    if (this.draggableRegion) {
+      this._resetDragParams();
+    }
   };
 
   _onMouseUp = (ev) => {

web/libs/editor/src/utils/selection-tools.js

@@ -66,7 +66,13 @@ const trimSelectionRight = (selection) => {
   selection.removeAllRanges();
   selection.addRange(resultRange);
 };
-const trimSelection = (selection) => {
+/**
+ * Trims selection until both start and end are text nodes. We need this to make selection.move()
+ * work properly. With non-text nodes it jumps into inner/outer blocks instead of actually moving.
+ * Also removes leading and trailing spaces from selection.
+ * @param {Selection} selection
+ */
+export const trimSelection = (selection) => {
   trimSelectionLeft(selection);
   trimSelectionRight(selection);
 };
@@ -233,7 +239,7 @@ export const captureSelection = (
  * @param {Selection} selection
  * @param {string} granularity
  */
-const applyTextGranularity = (selection, granularity) => {
+export const applyTextGranularity = (selection, granularity) => {
   if (!selection.modify || !granularity || granularity === "symbol") return;
 
   try {