@appquality/unguess-design-system 3.1.96 → 3.1.97

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# v3.1.97 (Tue May 28 2024)
+
+#### 🐛 Bug Fix
+
+- Add highlight support to unselectable [#377](https://github.com/AppQuality/unguess-design-system/pull/377) ([@cannarocks](https://github.com/cannarocks))
+- "Improve styling and functionality for transcript diarization in highlight component" [#376](https://github.com/AppQuality/unguess-design-system/pull/376) ([@cannarocks](https://github.com/cannarocks))
+- Fix obs player [#375](https://github.com/AppQuality/unguess-design-system/pull/375) ([@marcbon](https://github.com/marcbon))
+- 🎨 style(bookmark.tsx): improve styling for active bookmarks in player parts [#374](https://github.com/AppQuality/unguess-design-system/pull/374) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.96 (Mon May 27 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4037,6 +4037,9 @@ const StyledGrabber = styled.styled.div `
 const activeBookMark = styled.css `
   height: 250%;
   transform: translateY(-30%);
+  cursor: pointer;
+  z-index: 2;
+  border-radius: 4px;
 
   ${StyledGrabber} {
     display: block;
@@ -4048,17 +4051,15 @@ const Rect = styled.styled.div `
   background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
+  color: white;
+  transition: width 0.1s ease;
+
   &:hover {
-    ${activeBookMark}
-    border-radius: 4px;
     background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
-    cursor: pointer;
-    z-index: 2;
+    ${activeBookMark}
   }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
 
-  transition: width 0.1s ease;
+  ${({ isActive }) => isActive && activeBookMark}
 `;
 const StyledTooltip$1 = styled.styled(Tooltip) `
   margin-bottom: ${({ theme }) => theme.space.sm};
@@ -5649,13 +5650,29 @@ const WordsContainer = styled__default["default"].div `
  */
 const Highlight = (props) => {
     const ref = React.useRef(null);
+    const extractText = (selection) => {
+        var range = selection.getRangeAt(0);
+        var tempDiv = document.createElement("div");
+        tempDiv.appendChild(range.cloneContents());
+        var items = tempDiv.querySelectorAll("div");
+        items.forEach(function (item) {
+            if (item.getAttribute("data-unselectable")) {
+                item.remove();
+            }
+        });
+        var filteredText = tempDiv.textContent || tempDiv.innerText;
+        return filteredText.length ? filteredText.trim() : selection.toString();
+    };
     const handleSelectionChange = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const activeSelection = document.getSelection();
-        const text = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.toString();
-        if (!activeSelection || !text) {
+        if (!activeSelection) {
             return;
         }
+        // Extract the text from the selection cleaning unselectable items
+        const text = extractText(activeSelection);
+        if (!text)
+            return;
         const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
         const focusNode = (_b = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.focusNode) === null || _b === void 0 ? void 0 : _b.parentElement;
         if (anchorNode &&
@@ -5686,7 +5703,7 @@ const Word = (props) => {
         props.currentTime >= props.start &&
         props.currentTime < props.end;
     // Are there any observations containing this word?
-    const foundObservations = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.map((obs) => (props.start >= obs.start && props.end <= obs.end) ? obs : null);
+    const foundObservations = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.map((obs) => props.start >= obs.start && props.end <= obs.end ? obs : null);
     // Get the closer observation to the word
     const observation = foundObservations === null || foundObservations === void 0 ? void 0 : foundObservations.reduce((prev, current) => {
         if (!prev)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.96",
+  "version": "3.1.97",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",