Merge pull request #423 from AppQuality/develop

Add start - end attrs to observation

src/stories/buttons/split-button/index.tsx

@@ -1,7 +1,14 @@
 import { SplitButton as ZendeskSplitButton } from "@zendeskgarden/react-buttons";
 import { forwardRef } from "react";
+import styled from "styled-components";
 import { SplitButtonArgs } from "./_types";
 
+const SplitButtonWrapper = styled.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>
@@ -10,7 +17,11 @@ Used for this:
 - To reduce visual complexity when there are multiple actions a user can take
 **/
 const SplitButton = forwardRef<HTMLDivElement, SplitButtonArgs>(
-  (props, ref) => <ZendeskSplitButton ref={ref} {...props} />
+  (props, ref) => (
+    <SplitButtonWrapper>
+      <ZendeskSplitButton ref={ref} {...props} />
+    </SplitButtonWrapper>
+  )
 );
 
 export { SplitButton };

src/stories/transcript/extensions/theme/index.tsx

@@ -20,12 +20,22 @@ const DefaultObservationWrapper = ({
   title: string;
   color: string;
   children: ReactNode;
-  observations: { id: number; title: string; color: string }[];
+  observations: { start: number; id: number; title: string; color: string }[];
 }) => {
   const background = color + "50";
   return (
     <span data-title={title} style={{ background }}>
-      <Tooltip content={observations.map((o) => o.title).join(" and ")}>
+      <Tooltip
+        content={observations.map((o) => (
+          <div
+            onClick={() => {
+              alert(`Clicked on observation ${o.id} - start: ${o.start}`);
+            }}
+          >
+            {o.title}
+          </div>
+        ))}
+      >
         <span>{children}</span>
       </Tooltip>
     </span>

src/stories/transcript/getParsedContent.tsx

@@ -62,6 +62,8 @@ class ContentParser {
         {
           type: "Observation",
           attrs: {
+            start: observation.start,
+            end: observation.end,
             id: observation.id,
             title: observation.text,
             color: observation.color,

src/stories/transcript/nodes/observation/Component.tsx

@@ -71,6 +71,7 @@ export const Component = ({
         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"],

src/stories/transcript/nodes/observation/index.tsx

@@ -1,6 +1,7 @@
 import { Node } from "@tiptap/core";
 import { Fragment } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer, mergeAttributes } from "@tiptap/react";
+import { Node as PMNode } from "prosemirror-model";
 import { Component } from "./Component";
 
 export const Observation = Node.create({
@@ -10,6 +11,12 @@ export const Observation = Node.create({
 
   addAttributes() {
     return {
+      start: {
+        default: 0,
+      },
+      end: {
+        default: 0,
+      },
       id: {
         default: 0,
       },
@@ -36,10 +43,21 @@ export const Observation = Node.create({
         ({ id, title, color }: { id: number; title: string; color?: string }) =>
         ({ tr, state, view }) => {
           const { from, to } = state.selection;
+          let firstWord: PMNode, lastWord: PMNode;
+          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,