@appquality/unguess-design-system 3.1.114 → 3.1.115

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v3.1.115 (Thu Oct 10 2024)
+
+#### 🐛 Bug Fix
+
+- Add start - end attrs to observation [#423](https://github.com/AppQuality/unguess-design-system/pull/423) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
 # v3.1.114 (Mon Oct 07 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -782,6 +782,11 @@ Used for this
 **/
 const IconButton = React.forwardRef((props, ref) => jsxRuntime.jsx(reactButtons.IconButton, Object.assign({ ref: ref }, props)));
 
+const SplitButtonWrapper = styled__default["default"].div `
+  [data-garden-id="buttons.button"] {
+    margin-right: -1px;
+  }
+`;
 /**
 A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
 <hr>
@@ -789,7 +794,7 @@ Used for this:
 - To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
 - To reduce visual complexity when there are multiple actions a user can take
 **/
-const SplitButton = React.forwardRef((props, ref) => jsxRuntime.jsx(reactButtons.SplitButton, Object.assign({ ref: ref }, props)));
+const SplitButton = React.forwardRef((props, ref) => (jsxRuntime.jsx(SplitButtonWrapper, { children: jsxRuntime.jsx(reactButtons.SplitButton, Object.assign({ ref: ref }, props)) })));
 
 /**
  * Use Span to style and format inline text elements.
@@ -7363,7 +7368,9 @@ const DefaultWordWrapper = ({ children }) => {
 };
 const DefaultObservationWrapper = ({ title, color, children, observations, }) => {
     const background = color + "50";
-    return (jsxRuntime.jsx("span", Object.assign({ "data-title": title, style: { background } }, { children: jsxRuntime.jsx(Tooltip, Object.assign({ content: observations.map((o) => o.title).join(" and ") }, { children: jsxRuntime.jsx("span", { children: children }) })) })));
+    return (jsxRuntime.jsx("span", Object.assign({ "data-title": title, style: { background } }, { children: jsxRuntime.jsx(Tooltip, Object.assign({ content: observations.map((o) => (jsxRuntime.jsx("div", Object.assign({ onClick: () => {
+                    alert(`Clicked on observation ${o.id} - start: ${o.start}`);
+                } }, { children: o.title })))) }, { children: jsxRuntime.jsx("span", { children: children }) })) })));
 };
 const DefaultParagraphWrapper = ({ children }) => {
     return jsxRuntime.jsx("p", Object.assign({ style: { marginBottom: "20px" } }, { children: children }));
@@ -7525,6 +7532,8 @@ class ContentParser {
             {
                 type: "Observation",
                 attrs: {
+                    start: observation.start,
+                    end: observation.end,
                     id: observation.id,
                     title: observation.text,
                     color: observation.color,
@@ -7698,6 +7707,7 @@ const Component$2 = ({ node, editor, }) => {
     const ancestors = findAllAncestorsOfType(editor.state, nodePos, editor.state.schema.nodes.Observation);
     const observationsNodes = ancestors.length ? [node, ...ancestors] : [node];
     return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ as: "div", style: { display: "inline" } }, { children: jsxRuntime.jsx(ObservationWrapper, Object.assign({ title: node.attrs["title"], color: node.attrs["color"], observations: observationsNodes.map((o) => ({
+                start: o.attrs["start"],
                 id: o.attrs["id"],
                 title: o.attrs["title"],
                 color: o.attrs["color"],
@@ -7710,6 +7720,12 @@ const Observation = core.Node.create({
     inline: true,
     addAttributes() {
         return {
+            start: {
+                default: 0,
+            },
+            end: {
+                default: 0,
+            },
             id: {
                 default: 0,
             },
@@ -7732,9 +7748,20 @@ const Observation = core.Node.create({
         return {
             addObservation: ({ id, title, color }) => ({ tr, state, view }) => {
                 const { from, to } = state.selection;
+                let firstWord, lastWord;
+                state.doc.nodesBetween(from, to, (node, pos) => {
+                    if (node.type.name === "Word") {
+                        if (!firstWord) {
+                            firstWord = node;
+                        }
+                        lastWord = node;
+                    }
+                });
                 state.doc.nodesBetween(from, to, (node, pos) => {
                     if (node.type.name === "Word") {
                         const annotationNode = state.schema.nodes.Observation.create({
+                            start: firstWord.attrs["data-start"],
+                            end: lastWord.attrs["data-end"],
                             id,
                             title,
                             color,

package/build/stories/transcript/extensions/theme/index.d.ts

@@ -12,6 +12,7 @@ declare const DefaultObservationWrapper: ({ title, color, children, observations
     color: string;
     children: ReactNode;
     observations: {
+        start: number;
         id: number;
         title: string;
         color: string;

package/package.json

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