Repository: h2oai/wave
File: ui/src/text_annotator.tsx (TypeScript)

Code before:
            styles={{ root: { alignItems: 'center', paddingLeft: 8, paddingRight: 8 } }}
          />
          <Fluent.CommandBar styles={{ root: { padding: 0 } }} items={[
            {
              key: 'remove-all',
              text: 'Remove all selections',
              onClick: removeAllAnnotations,
              disabled: !tokens.find(token => token.tag),
              iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
            },
          ]}
          />
        </div>
        <div className={clas(css.content, 'wave-s16 wave-t7 wave-w3')}>{
          tokens.map(({ start, end, text, tag }, idx) => {
            const activeColor = activeTag ? tagColorMap.get(activeTag) : undefined
            return (
              // Use paragraph instead of span to support text highlight.
              <p
                key={idx}
                onMouseDown={handleMouseDown({ key: idx, start, end })}
                onMouseUp={handleMouseUp({ key: idx, start, end })}
                onMouseLeave={handleMouseLeave({ key: idx, start, end })}
                style={{ display: 'inline' }}
                className={activeColor ? style({ $nest: { '&::selection': { background: activeColor, color: getContrast(activeColor) } } }) : undefined}
              >
                {tag ? getMark(text, idx, tag) : text}
              </p>
            )
          })
        }</div>
      </div>
    )
  }

Review comment (suggestion):
Wouldn't this work?

```suggestion
                data-keys={{ idx, start, end }}
```

Code after:
            label='Smart selection'
            checked={smartSelection}
            onChange={() => setSmartSelection(prevSelection => !prevSelection)}
            className={css.checkbox}
            styles={{ root: { alignItems: 'center', paddingLeft: 8, paddingRight: 8 } }}
          />
          <Fluent.CommandBar styles={{ root: { padding: 0 } }} items={[
            {
              key: 'remove-all',
              text: 'Remove all selections',
              onClick: removeAllAnnotations,
              disabled: !tokens.find(token => token.tag),
              iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
            },
          ]}
          />
        </div>
        <div className={clas(css.content, 'wave-s16 wave-t7 wave-w3')} onMouseUp={handleSelectionFinish}>{
          tokens.map(({ start, end, text, tag }, idx) => {
            const activeColor = activeTag ? tagColorMap.get(activeTag) : undefined
            return (
              // Use paragraph instead of span to support text highlight.
              <p
                key={idx}
                // data-keys keeps state in DOM to access it via window.getSelection() API in case mouse up event is fired when cursor is not above <p/> element
                data-keys={`{ "key": ${idx}, "start": ${start}, "end": ${end} }`}
                onMouseDown={handleMouseDown({ key: idx, start, end })}
                onMouseUp={handleMouseUp({ key: idx, start, end })}
                style={{ display: 'inline', padding: '4px 0px' }}
                className={activeColor ? style({ $nest: { '&::selection': { background: activeColor, color: getContrast(activeColor) } } }) : undefined}
              >
                {tag ? getMark(text, idx, tag) : text}
              </p>
            )
          })
        }</div>
      </div>
    )
  }