@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.54a8bab

package/src/components/GridSheet/util.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
 import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
 import {
   type GridContentProps,
@@ -16,10 +16,12 @@ import {
   type DxGridCellValue,
   colToA1Notation,
   rowToA1Notation,
+  commentedClassName,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type CellAddress, inRange, cellClassNameForRange } from '../../defs';
+import { type CellAddress, inRange, cellClassNameForRange, rangeFromIndex } from '../../defs';
+import { parseThreadAnchorAsCellRange } from '../../integrations';
 import { type SheetModel } from '../../model';
 
 export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
@@ -57,16 +59,26 @@ const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
 const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
   const address = { col, row };
   const rawValue = model.getValue(address);
-  if (rawValue === undefined || rawValue === null) {
-    return { value: '' };
-  }
-  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
-  const type = model.getValueType(address);
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
+  const threadRefs = model.sheet.threads
+    ?.filter((thread) => {
+      const range = thread?.anchor && parseThreadAnchorAsCellRange(thread!.anchor);
+      return thread && range ? inRange(range, address) : false;
+    })
+    .map((thread) => fullyQualifiedId(thread!))
+    .join(' ');
+
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
 
-  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
+  return {
+    value: parseValue({ type, format, value: rawValue }),
+    className: mx(cellClassesForFieldType({ type, format }), threadRefs && commentedClassName, classNames),
+    dataRefs: threadRefs,
+  };
 };
-
 const gridCellGetter = (model: SheetModel) => {
   // TODO(thure): Actually use the cache.
   const cachedGridCells: DxGridPlaneCells = {};
@@ -115,23 +127,27 @@ const cellGetter = (model: SheetModel) => {
 };
 
 export const useSheetModelDxGridProps = (
-  dxGridRef: MutableRefObject<DxGridElement | null>,
+  dxGrid: DxGridElement | null,
   model: SheetModel,
 ): Pick<GridContentProps, 'columns' | 'rows'> => {
   const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
   const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
-    if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model);
+    if (dxGrid) {
+      dxGrid.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
-      dxGridRef.current?.requestUpdate('initialCells');
+      dxGrid?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
-  }, [model]);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+      unsubscribe();
+    };
+  }, [model, dxGrid]);
 
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
@@ -148,7 +164,7 @@ export const useSheetModelDxGridProps = (
       columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
       rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
     };
-  }, [model]);
+  }, [model, dxGrid]);
 
   return { columns, rows };
 };

package/src/components/RangeList/RangeList.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { useTranslation } from '@dxos/react-ui';
+import { List } from '@dxos/react-ui-list';
+import { ghostHover } from '@dxos/react-ui-theme';
+
+import { rangeFromIndex, rangeToA1Notation } from '../../defs';
+import { SHEET_PLUGIN } from '../../meta';
+import { Range, type SheetType } from '../../types';
+
+export type RangeListProps = {
+  sheet: SheetType;
+};
+
+export const RangeList = ({ sheet }: RangeListProps) => {
+  const { t } = useTranslation(SHEET_PLUGIN);
+  // TODO(thure): Implement similar to comments, #8121
+  const handleSelectRange = (range: Range) => {};
+  const handleDeleteRange = useCallback(
+    (range: Range) => {
+      const index = sheet.ranges.findIndex((sheetRange) => sheetRange === range);
+      sheet.ranges.splice(index, 1);
+    },
+    [sheet],
+  );
+  return (
+    <>
+      <h2 className='p-2 text-sm font-semibold'>{t('range list heading')}</h2>
+      <List.Root<Range> items={sheet.ranges} isItem={S.is(Range)}>
+        {({ items: ranges }) =>
+          ranges.map((range, i) => (
+            <List.Item key={i} item={range} classNames={['p-2', ghostHover]}>
+              <List.ItemDragHandle />
+              <List.ItemTitle onClick={() => handleSelectRange(range)}>
+                {t('range title', {
+                  position: rangeToA1Notation(rangeFromIndex(sheet, range.range)),
+                  key: t(`range key ${range.key} label`),
+                  value: t(`range value ${range.value} label`),
+                })}
+              </List.ItemTitle>
+              <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />
+            </List.Item>
+          ))
+        }
+      </List.Root>
+    </>
+  );
+};

package/src/components/RangeList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './RangeList';

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -10,19 +10,20 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
-import { useComputeGraph } from '../../hooks';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 
 export const Basic = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
-  if (!sheet || !graph) {
+  if (!sheet || !space) {
     return null;
   }
 
-  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+  return <SheetContainer space={space} sheet={sheet} role='article' />;
 };
 
 const meta: Meta = {
@@ -38,6 +39,7 @@ const meta: Meta = {
       classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
     }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -4,13 +4,19 @@
 
 import React from 'react';
 
+import { type Space } from '@dxos/react-client/echo';
+
+import { type SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
 import { FunctionEditor } from '../FunctionEditor';
 import { GridSheet } from '../GridSheet';
-import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { SheetProvider } from '../SheetContext';
 import { Toolbar } from '../Toolbar';
 
-export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
-  return (
+export const SheetContainer = ({ space, sheet, role }: { space: Space; sheet: SheetType; role?: string }) => {
+  const graph = useComputeGraph(space);
+
+  return graph ? (
     <SheetProvider sheet={sheet} graph={graph}>
       <Toolbar.Root role={role}>
         <Toolbar.Styles />
@@ -23,5 +29,5 @@ export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { ro
         <FunctionEditor />
       </div>
     </SheetProvider>
-  );
+  ) : null;
 };

package/src/components/SheetContext/SheetContext.tsx

@@ -2,16 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Grid, useGridContext, type GridScopedProps, type GridEditing } from '@dxos/react-ui-grid';
-
-import { type CellAddress, type CellRange } from '../../defs';
-import { type ComputeGraph } from '../../graph';
-import { useSheetModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
-import { type SheetModel, createDecorations } from '../../model';
+import {
+  Grid,
+  type GridContentProps,
+  type GridEditing,
+  type GridScopedProps,
+  useGridContext,
+} from '@dxos/react-ui-grid';
+
+import { type ComputeGraph } from '../../compute-graph';
+import { type CellAddress, type CellRange, type CompleteCellRange } from '../../defs';
+import { type SheetModel, useSheetModel } from '../../model';
 import { type SheetType } from '../../types';
 
 export type SheetContextValue = {
@@ -25,17 +30,19 @@ export type SheetContextValue = {
   setCursor: (cell: CellAddress | undefined) => void;
   range?: CellRange;
   setRange: (range: CellRange | undefined) => void;
+  cursorFallbackRange?: CompleteCellRange;
 
   // Editing state (undefined if not editing).
   editing: GridEditing;
   setEditing: (editing: GridEditing) => void;
 
+  // Active refs
+  activeRefs: GridContentProps['activeRefs'];
+  setActiveRefs: (activeRefs: GridContentProps['activeRefs']) => void;
+
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
-
-  // Decorations.
-  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextValue | undefined>(undefined);
@@ -54,15 +61,29 @@ const SheetProviderImpl = ({
 }: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
-  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
-  const decorations = useMemo(() => createDecorations(), []);
-
-  // TODO(thure): Reconnect these.
-  const [cursor, setCursor] = useState<CellAddress>();
-  const [range, setRange] = useState<CellRange>();
-
-  useSelectThreadOnCellFocus(model, cursor);
-  useThreadDecorations(model, decorations);
+  const [cursor, setCursorInternal] = useState<CellAddress>();
+  const [range, setRangeInternal] = useState<CellRange>();
+  const [cursorFallbackRange, setCursorFallbackRange] = useState<CompleteCellRange>();
+  const [activeRefs, setActiveRefs] = useState<GridContentProps['activeRefs']>('');
+
+  const setCursor = useCallback(
+    (nextCursor?: CellAddress) => {
+      setCursorInternal(nextCursor);
+      setCursorFallbackRange(
+        range?.to ? (range as CompleteCellRange) : nextCursor ? { from: nextCursor!, to: nextCursor! } : undefined,
+      );
+    },
+    [range],
+  );
+  const setRange = useCallback(
+    (nextRange?: CellRange) => {
+      setRangeInternal(nextRange);
+      setCursorFallbackRange(
+        nextRange?.to ? (nextRange as CompleteCellRange) : cursor ? { from: cursor!, to: cursor! } : undefined,
+      );
+    },
+    [cursor],
+  );
 
   return (
     <SheetContext.Provider
@@ -75,9 +96,11 @@ const SheetProviderImpl = ({
         setCursor,
         range,
         setRange,
+        cursorFallbackRange,
+        activeRefs,
+        setActiveRefs,
         // TODO(burdon): Change to event.
         onInfo,
-        decorations,
       }}
     >
       {children}

package/src/components/Toolbar/Toolbar.tsx

@@ -3,32 +3,36 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import {
   Icon,
+  type ThemedClassName,
   Toolbar as NaturalToolbar,
-  useTranslation,
-  Tooltip,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarToggleProps as NaturalToolbarToggleProps,
-  type ThemedClassName,
+  Tooltip,
+  useTranslation,
 } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
 import {
-  addressToIndex,
+  alignKey,
   type AlignKey,
   type AlignValue,
   type CommentKey,
   type CommentValue,
   inRange,
+  rangeFromIndex,
+  rangeToIndex,
+  styleKey,
   type StyleKey,
   type StyleValue,
 } from '../../defs';
+import { completeCellRangeToThreadCursor } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
 import { type SheetType } from '../../types';
 import { useSheetContext } from '../SheetContext';
@@ -86,10 +90,11 @@ type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: strin
 type StyleAction = { key: StyleKey; value: StyleValue };
 
 export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+export type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };
 
 export type ToolbarActionType = ToolbarAction['key'];
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -97,9 +102,9 @@ export type ToolbarProps = ThemedClassName<
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
-  'Toolbar',
-);
+const [ToolbarContextProvider, useToolbarContext] = createContext<{
+  onAction: (action: ToolbarActionAnnotated) => void;
+}>('Toolbar');
 
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 const sectionToolbarLayout =
@@ -108,42 +113,50 @@ const sectionToolbarLayout =
 type Range = SheetType['ranges'][number];
 
 const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
-  const { id, model, range, cursor } = useSheetContext();
+  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
   const { hasAttention } = useAttention(id);
   const dispatch = useIntentDispatcher();
 
-  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
   const handleAction = useCallback(
-    (action: ToolbarAction) => {
+    (action: ToolbarActionAnnotated) => {
       switch (action.key) {
-        case 'align':
-          if (cursor) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(range.range, cursor),
-            );
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+        case 'alignment':
+          if (cursorFallbackRange) {
+            const index =
+              model.sheet.ranges?.findIndex(
+                (range) =>
+                  range.key === action.key &&
+                  inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+              ) ?? -1;
             const nextRangeEntity = {
-              range: nextRange as Range['range'],
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
               value: action.value,
             };
             if (index < 0) {
               model.sheet.ranges?.push(nextRangeEntity);
+            } else if (model.sheet.ranges![index].value === action.value) {
+              model.sheet.ranges?.splice(index, 1);
             } else {
               model.sheet.ranges?.splice(index, 1, nextRangeEntity);
             }
           }
           break;
         case 'style':
-          if (action.value === 'unset') {
-            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
+          if (action.unset) {
+            const index = model.sheet.ranges?.findIndex(
+              (range) =>
+                range.key === action.key &&
+                cursorFallbackRange &&
+                inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+            );
             if (index >= 0) {
               model.sheet.ranges?.splice(index, 1);
             }
-          } else if (range || cursor) {
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+          } else if (cursorFallbackRange) {
             model.sheet.ranges?.push({
-              range: nextRange as Range['range'],
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
               value: action.value,
             });
@@ -151,24 +164,27 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
           break;
         case 'comment': {
           // TODO(Zan): We shouldn't hardcode the action ID.
-          void dispatch({
-            action: 'dxos.org/plugin/thread/action/create',
-            data: {
-              cursor: action.value,
-              name: action.cellContent,
-              subject: model.sheet,
-            },
-          });
+          if (cursorFallbackRange) {
+            void dispatch({
+              action: 'dxos.org/plugin/thread/action/create',
+              data: {
+                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
+                name: action.cellContent,
+                subject: model.sheet,
+              },
+            });
+          }
         }
       }
     },
-    [model.sheet, range, cursor, dispatch],
+    [model.sheet, cursorFallbackRange, cursor, dispatch],
   );
 
   return (
     <ToolbarContextProvider onAction={handleAction}>
       <NaturalToolbar.Root
         classNames={[
+          'pli-0.5',
           ...(role === 'section'
             ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
             : ['attention-surface']),
@@ -204,48 +220,55 @@ const Alignment = () => {
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const value = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const value = cursor
+    ? model.sheet.ranges?.findLast(
+        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+      )?.value
+    : undefined;
 
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      value={value}
-      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
+      value={
+        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
+        value ?? 'never'
+      }
+      onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
     >
       {alignmentOptions.map(({ value, icon }) => (
         <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${alignKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular' },
+  { value: 'softwrap', icon: 'ph--paragraph--regular' },
+];
 
 const Styles = () => {
-  const { cursor, model } = useSheetContext();
+  const { cursorFallbackRange, model } = useSheetContext();
   const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const activeValues = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))
-            .reduce((acc, { value }) => {
-              acc.add(value);
-              return acc;
-            }, new Set())
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const activeValues = cursorFallbackRange
+    ? model.sheet.ranges
+        ?.filter(
+          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+        )
+        .reduce((acc, { value }) => {
+          acc.add(value);
+          return acc;
+        }, new Set())
+    : undefined;
 
   return (
     <>
@@ -254,10 +277,15 @@ const Styles = () => {
           itemType='toggle'
           key={value}
           pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
+          onPressedChange={(nextPressed: boolean) => {
+            onAction?.({ key: 'style', value, unset: !nextPressed });
+          }}
           icon={icon}
         >
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${styleKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </>
@@ -270,29 +298,25 @@ const Styles = () => {
 
 const Actions = () => {
   const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // TODO(thure): Can this O(n) call be memoized?
   const overlapsCommentAnchor = (model.sheet.threads ?? [])
     .filter(nonNullable)
     .filter((thread) => thread.status !== 'resolved')
     .some((thread) => {
-      if (!cursor) {
+      if (!cursorFallbackRange) {
         return false;
       }
-      return addressToIndex(model.sheet, cursor) === thread.anchor;
+      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
     });
 
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-
-  const tooltipLabelKey = !hasCursor
+  const tooltipLabelKey = !cursor
     ? 'no cursor label'
     : overlapsCommentAnchor
       ? 'selection overlaps existing comment label'
-      : range
-        ? 'comment ranges not supported label'
-        : 'comment label';
+      : 'comment label';
 
   return (
     <ToolbarItem
@@ -301,16 +325,16 @@ const Actions = () => {
       icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
-        if (!cursor) {
+        if (!cursorFallbackRange) {
           return;
         }
         return onAction?.({
           key: 'comment',
-          value: addressToIndex(model.sheet, cursor),
-          cellContent: model.getCellText(cursor),
+          value: rangeToIndex(model.sheet, cursorFallbackRange),
+          cellContent: model.getCellText(cursorFallbackRange.from),
         });
       }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      disabled={!cursorFallbackRange || overlapsCommentAnchor}
     >
       {t(tooltipLabelKey)}
     </ToolbarItem>

package/src/components/index.ts

@@ -6,6 +6,7 @@ import { lazy } from 'react';
 
 export * from './ComputeGraph';
 export * from './GridSheet';
+export * from './RangeList';
 export * from './SheetContext';
 
 export const SheetContainer = lazy(() => import('./SheetContainer'));