@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.9e90729

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

@@ -9,26 +9,28 @@ import { useIntentDispatcher } from '@dxos/app-framework';
 import {
   Icon,
   Toolbar as NaturalToolbar,
-  useTranslation,
   Tooltip,
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   type ToolbarToggleProps as NaturalToolbarToggleProps,
   type ThemedClassName,
+  useTranslation,
 } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
 import {
-  addressToIndex,
   type AlignKey,
   type AlignValue,
   type CommentKey,
   type CommentValue,
   inRange,
+  rangeFromIndex,
+  rangeToIndex,
   type StyleKey,
   type StyleValue,
 } from '../../defs';
+import { completeCellRangeToThreadCursor } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
 import { type SheetType } from '../../types';
 import { useSheetContext } from '../SheetContext';
@@ -108,22 +110,21 @@ 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) => {
       switch (action.key) {
         case 'align':
-          if (cursor) {
+          if (cursor && cursorFallbackRange) {
             const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(range.range, cursor),
+              (range) => range.key === action.key && inRange(rangeFromIndex(model.sheet, range.range), cursor),
             );
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
             const nextRangeEntity = {
-              range: nextRange as Range['range'],
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
               value: action.value,
             };
@@ -140,10 +141,9 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
             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,18 +151,20 @@ 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 (
@@ -207,7 +209,9 @@ const Alignment = () => {
   const value = useMemo(
     () =>
       cursor
-        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value
+        ? model.sheet.ranges?.find(
+            ({ range, key }) => key === 'alignment' && inRange(rangeFromIndex(model.sheet, range), cursor),
+          )?.value
         : undefined,
     [cursor, model.sheet.ranges],
   );
@@ -238,7 +242,7 @@ const Styles = () => {
     () =>
       cursor
         ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))
+            ?.filter(({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursor))
             .reduce((acc, { value }) => {
               acc.add(value);
               return acc;
@@ -270,29 +274,24 @@ const Styles = () => {
 
 const Actions = () => {
   const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
 
   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 +300,16 @@ const Actions = () => {
       icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
-        if (!cursor) {
+        if (!(cursorFallbackRange && cursor)) {
           return;
         }
         return onAction?.({
           key: 'comment',
-          value: addressToIndex(model.sheet, cursor),
+          value: rangeToIndex(model.sheet, cursorFallbackRange),
           cellContent: model.getCellText(cursor),
         });
       }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      disabled={!cursor || 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'));

package/src/{graph → compute-graph}/compute-graph.stories.tsx

@@ -15,8 +15,9 @@ import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { testFunctionPlugins } from './testing';
+import { useComputeGraph } from '../components';
 import { createSheet } from '../defs';
-import { useComputeGraph, useSheetModel } from '../hooks';
+import { useSheetModel } from '../model';
 import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/{graph → compute-graph}/compute-graph.ts

@@ -24,6 +24,8 @@ import {
   EDGE_FUNCTION_NAME,
 } from './functions';
 
+// TODO(burdon): Factor out compute-graph.
+
 // TODO(wittjosiah): Factor out.
 const OBJECT_ID_LENGTH = 60; // 33 (space id) + 1 (separator) + 26 (object id).
 
@@ -71,6 +73,7 @@ export class ComputeGraph extends Resource {
   ) {
     super();
     this._hf.updateConfig({ context: this.context });
+
     // TODO(burdon): If debounce then aggregate changes.
     const onValuesUpdate: Listeners['valuesUpdated'] = (changes) => {
       for (const change of changes) {
@@ -116,7 +119,7 @@ export class ComputeGraph extends Resource {
   getOrCreateNode(name: string): ComputeNode {
     invariant(name.length);
     if (!this._hf.doesSheetExist(name)) {
-      log.info('created node', { space: this._space?.id, sheet: name });
+      log('created node', { space: this._space?.id, sheet: name });
       this._hf.addSheet(name);
     }
 
@@ -130,7 +133,7 @@ export class ComputeGraph extends Resource {
 
   /**
    * Map bound value to custom function invocation.
-   * E.g., "HELLO(...args)" => "EDGE("HELLO", ...args)".
+   * E.g., "HELLO(...args)" => "DX("HELLO", ...args)".
    */
   mapFormulaToNative(formula: string): string {
     return (

package/src/{graph → compute-graph}/compute-node.ts

@@ -10,7 +10,7 @@ import { Resource } from '@dxos/context';
 
 import { DetailedCellError } from '#hyperformula';
 import { type ComputeGraph } from './compute-graph';
-import { type CellAddress } from '../defs';
+import { type CellAddress, isFormula } from '../defs';
 import { type CellScalarValue } from '../types';
 
 export type ComputeNodeEvent = {
@@ -50,8 +50,7 @@ export class ComputeNode extends Resource {
   }
 
   setValue(cell: CellAddress, value: CellScalarValue) {
-    const mappedValue =
-      typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value;
+    const mappedValue = isFormula(value) ? this._graph.mapFormulaToNative(value) : value;
     this._graph.hf.setCellContents({ sheet: this.sheetId, row: cell.row, col: cell.col }, [[mappedValue]]);
   }
 

package/src/defs/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './sheet-range-types';
 export * from './types';
 export * from './util';
-export * from './sheet-range-types';

package/src/defs/sheet-range-types.ts

@@ -18,6 +18,7 @@ export const styleKey = 'style';
 export type StyleKey = typeof styleKey;
 export type StyleValue = 'highlight' | 'unset';
 
+// TODO(burdon): Reconcile with plugin-table.
 export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number]): ClassNameValue => {
   switch (key) {
     case 'align':

package/src/defs/types.ts

@@ -13,11 +13,16 @@ export const MAX_COLUMNS = 26 * 2;
 export type CellAddress = { col: number; row: number };
 
 export type CellRange = { from: CellAddress; to?: CellAddress };
+export type CompleteCellRange = { from: CellAddress; to: CellAddress };
 
 export type CellIndex = string;
 
 export type CellContentValue = number | string | boolean | null;
 
+export const RANGE_NOTATION = /^[A-Z]+[0-9]+(:[A-Z]+[0-9]+)?$/;
+
+export const isFormula = (value: any): value is string => typeof value === 'string' && value.charAt(0) === '=';
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
   return a?.col === b?.col && a?.row === b?.row;
 };
@@ -34,7 +39,7 @@ export const addressToA1Notation = ({ col, row }: CellAddress): string => {
   return `${columnLetter(col)}${row + 1}`;
 };
 
-// TODO(burdon): See simpleCellAddressFromString
+// TODO(burdon): See (HF) simpleCellAddressFromString.
 export const addressFromA1Notation = (ref: string): CellAddress => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`);

package/src/defs/util.ts

@@ -9,6 +9,7 @@ import {
   addressFromA1Notation,
   type CellAddress,
   type CellRange,
+  type CompleteCellRange,
   DEFAULT_COLUMNS,
   DEFAULT_ROWS,
   MAX_COLUMNS,
@@ -69,6 +70,7 @@ export const createSheet = ({ name, cells, ...size }: CreateSheetOptions = {}):
     rowMeta: {},
     columnMeta: {},
     ranges: [],
+    threads: [],
   });
 
   initialize(sheet, size);
@@ -111,29 +113,11 @@ export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
 /**
  * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
  */
-export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
+export const rangeFromIndex = (sheet: SheetType, idx: string): CompleteCellRange => {
   const [from, to] = idx.split(':').map((index) => addressFromIndex(sheet, index));
   return { from, to };
 };
 
-/**
- * Find closest cell to cursor.
- */
-export const closest = (cursor: CellAddress, cells: CellAddress[]): CellAddress | undefined => {
-  let closestCell: CellAddress | undefined;
-  let closestDistance = Number.MAX_SAFE_INTEGER;
-
-  for (const cell of cells) {
-    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.col - cursor.col);
-    if (distance < closestDistance) {
-      closestCell = cell;
-      closestDistance = distance;
-    }
-  }
-
-  return closestCell;
-};
-
 /**
  * Compares the positions of two cell indexes in a sheet.
  * Sorts primarily by row, then by column if rows are equal.

package/src/extensions/compute.stories.tsx

@@ -23,8 +23,8 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { nonNullable } from '@dxos/util';
 
 import { compute, computeGraphFacet } from './compute';
-import { GridSheet, SheetProvider } from '../components';
-import { useComputeGraph, useSheetModel } from '../hooks';
+import { GridSheet, SheetProvider, useComputeGraph } from '../components';
+import { useSheetModel } from '../model';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/extensions/compute.ts

@@ -16,10 +16,10 @@ import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view
 
 import { type UnsubscribeCallback, debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { documentId, singleValueFacet } from '@dxos/react-ui-editor/state';
+import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
 
+import { type ComputeGraph, type ComputeNode, createSheetName } from '../compute-graph';
 import { type CellAddress } from '../defs';
-import { type ComputeGraph, type ComputeNode, createSheetName } from '../graph';
 import { type CellScalarValue } from '../types';
 
 const LANGUAGE_TAG = 'dx';

package/src/extensions/editor/extension.test.ts

@@ -9,7 +9,7 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../graph';
+import { defaultFunctions } from '../../compute-graph';
 
 describe('formula parser', () => {
   const {

package/src/extensions/editor/extension.ts

@@ -18,10 +18,11 @@ import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
-import { singleValueFacet } from '@dxos/react-ui-editor/state';
+import { singleValueFacet } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../graph';
+import { type FunctionDefinition } from '../../compute-graph';
+import { RANGE_NOTATION } from '../../defs';
 
 /**
  * https://codemirror.net/examples/styling
@@ -195,34 +196,53 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
   ];
 };
 
-export type CellRangeNotifier = (range: string) => void;
-
-type Range = { from: number; to: number };
+export type SelectionRange = { from: number; to: number };
+
+export interface RangeController {
+  setRange(range: string): void;
+}
+
+export type RangeExtensionOptions = {
+  /**
+   * Provides controller callback when extension is initialized.
+   */
+  onInit?: (controller: RangeController) => void;
+  /**
+   * Called when the active range changes.
+   * @param state The current state.
+   * @param state.activeRange undefined if no range is active, otherwise a possibly partially defined range.
+   */
+  onStateChange?: (state: { activeRange: string | undefined }) => void;
+};
 
 /**
  * Tracks the currently active cell within a formula and provides a callback to modify it.
  */
-export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): Extension => {
+export const rangeExtension = ({ onInit, onStateChange }: RangeExtensionOptions): Extension => {
   let view: EditorView;
-  let activeRange: Range | undefined;
-  const provider: CellRangeNotifier = (range: string) => {
-    if (activeRange) {
-      view.dispatch(
-        view.state.update({
-          changes: { ...activeRange, insert: range.toString() },
-          selection: { anchor: activeRange.from + range.length },
-        }),
-      );
-    }
+  let activeRange: SelectionRange | undefined;
 
-    view.focus();
+  // Called externally to provide current range.
+  const notifier: RangeController = {
+    setRange: (range: string) => {
+      if (activeRange) {
+        view.dispatch(
+          view.state.update({
+            changes: { ...activeRange, insert: range.toString() },
+            selection: { anchor: activeRange.from + range.length },
+          }),
+        );
+      }
+
+      view.focus();
+    },
   };
 
   return ViewPlugin.fromClass(
     class {
       constructor(_view: EditorView) {
         view = _view;
-        onInit(provider);
+        onInit?.(notifier);
       }
 
       update(view: ViewUpdate) {
@@ -235,17 +255,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
         visitTree(topNode, ({ type, from, to }) => {
           if (from <= anchor && to >= anchor) {
             switch (type.name) {
-              case 'Function': {
+              case 'Function':
                 // Mark but keep looking.
                 activeRange = { from: to, to };
                 break;
-              }
 
-              case 'CloseParen': {
+              case 'CloseParen':
                 // Mark but keep looking.
                 activeRange = { from, to: from };
                 break;
-              }
 
               case 'RangeToken':
               case 'CellToken':
@@ -259,8 +277,15 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Allow start of formula.
         if (!activeRange && view.state.doc.toString()[0] === '=') {
-          activeRange = { from: 1, to: view.state.doc.toString().length };
+          const str = view.state.doc.sliceString(1);
+          if (RANGE_NOTATION.test(str)) {
+            activeRange = { from: 1, to: str.length + 1 };
+          }
         }
+
+        onStateChange?.({
+          activeRange: activeRange ? view.state.doc.sliceString(activeRange.from, activeRange.to) : undefined,
+        });
       }
     },
   );

package/src/index.ts

@@ -4,6 +4,6 @@
 
 import { SheetPlugin } from './SheetPlugin';
 
-export default SheetPlugin;
-
 export * from './SheetPlugin';
+
+export default SheetPlugin;

package/src/integrations/index.ts

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