@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.12",
+  "version": "0.6.13-main.548ca8d",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "imports": {
+    "#hyperformula": {
+      "types": "hyperformula",
+      "default": "./dist/vendor/hyperformula.mjs"
+    }
+  },
   "exports": {
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "default": "./dist/lib/node/index.cjs"
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "default": "./dist/lib/node/meta.cjs"
+        "require": "./dist/lib/node/meta.cjs",
+        "default": "./dist/lib/node-esm/meta.mjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
-    "./testing": {
-      "browser": "./dist/lib/browser/testing.mjs",
-      "node": {
-        "default": "./dist/lib/node/testing.cjs"
-      },
-      "types": "./dist/types/src/testing.d.ts"
-    },
     "./types": {
       "browser": "./dist/lib/browser/types.mjs",
       "node": {
-        "default": "./dist/lib/node/types.cjs"
+        "require": "./dist/lib/node/types.cjs",
+        "default": "./dist/lib/node-esm/types.mjs"
       },
       "types": "./dist/types/src/types.d.ts"
     }
@@ -42,9 +44,6 @@
       "meta": [
         "dist/types/src/meta.d.ts"
       ],
-      "testing": [
-        "dist/types/src/testing.d.ts"
-      ],
       "types": [
         "dist/types/src/types.d.ts"
       ]
@@ -55,50 +54,56 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.29.1",
+    "@codemirror/view": "^6.34.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0",
+    "@effect/schema": "^0.75.1",
+    "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-context": "^1.0.0",
     "@tanstack/react-virtual": "^3.9.0",
     "codemirror-lang-spreadsheet": "^1.3.0",
+    "date-fns": "^3.3.1",
     "hyperformula": "^2.7.1",
     "lodash.defaultsdeep": "^4.6.1",
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.12",
-    "@dxos/async": "0.6.12",
-    "@dxos/client": "0.6.12",
-    "@dxos/context": "0.6.12",
-    "@dxos/crypto": "0.6.12",
-    "@dxos/echo-schema": "0.6.12",
-    "@dxos/debug": "0.6.12",
-    "@dxos/invariant": "0.6.12",
-    "@dxos/keys": "0.6.12",
-    "@dxos/log": "0.6.12",
-    "@dxos/plugin-client": "0.6.12",
-    "@dxos/plugin-script": "0.6.12",
-    "@dxos/plugin-graph": "0.6.12",
-    "@dxos/plugin-space": "0.6.12",
-    "@dxos/plugin-stack": "0.6.12",
-    "@dxos/react-client": "0.6.12",
-    "@dxos/react-ui-attention": "0.6.12",
-    "@dxos/util": "0.6.12",
-    "@dxos/react-ui-editor": "0.6.12"
+    "@dxos/app-framework": "0.6.13-main.548ca8d",
+    "@dxos/async": "0.6.13-main.548ca8d",
+    "@dxos/context": "0.6.13-main.548ca8d",
+    "@dxos/client": "0.6.13-main.548ca8d",
+    "@dxos/crypto": "0.6.13-main.548ca8d",
+    "@dxos/debug": "0.6.13-main.548ca8d",
+    "@dxos/invariant": "0.6.13-main.548ca8d",
+    "@dxos/keys": "0.6.13-main.548ca8d",
+    "@dxos/echo-schema": "0.6.13-main.548ca8d",
+    "@dxos/log": "0.6.13-main.548ca8d",
+    "@dxos/plugin-client": "0.6.13-main.548ca8d",
+    "@dxos/plugin-attention": "0.6.13-main.548ca8d",
+    "@dxos/plugin-graph": "0.6.13-main.548ca8d",
+    "@dxos/plugin-markdown": "0.6.13-main.548ca8d",
+    "@dxos/plugin-space": "0.6.13-main.548ca8d",
+    "@dxos/plugin-script": "0.6.13-main.548ca8d",
+    "@dxos/plugin-stack": "0.6.13-main.548ca8d",
+    "@dxos/react-client": "0.6.13-main.548ca8d",
+    "@dxos/react-hooks": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-attention": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-editor": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-grid": "0.6.13-main.548ca8d",
+    "@dxos/schema": "0.6.13-main.548ca8d",
+    "@dxos/util": "0.6.13-main.548ca8d"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
-    "@phosphor-icons/react": "^2.1.5",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
@@ -106,20 +111,20 @@
     "@types/react-window": "^1.8.8",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.12",
-    "@dxos/random": "0.6.12",
-    "@dxos/react-ui": "0.6.12",
-    "@dxos/react-ui-theme": "0.6.12",
-    "@dxos/react-ui-types": "0.6.12",
-    "@dxos/storybook-utils": "0.6.12"
+    "vite": "5.4.7",
+    "@dxos/echo-generator": "0.6.13-main.548ca8d",
+    "@dxos/random": "0.6.13-main.548ca8d",
+    "@dxos/react-ui": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-types": "0.6.13-main.548ca8d",
+    "@dxos/storybook-utils": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-syntax-highlighter": "0.6.13-main.548ca8d"
   },
-  "optionalDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.12",
-    "@dxos/react-ui-theme": "0.6.12"
+  "peerDependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-theme": "0.6.13-main.548ca8d"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -2,84 +2,71 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps, GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import {
-  NavigationAction,
-  parseIntentPlugin,
-  resolvePlugin,
-  type PluginDefinition,
-  type LayoutCoordinate,
-} from '@dxos/app-framework';
-import { create } from '@dxos/echo-schema';
+import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
+import { Icon } from '@dxos/react-ui';
 
-import {
-  createComputeGraph,
-  CustomPlugin,
-  CustomPluginTranslations,
-  SheetContainer,
-  type ComputeGraph,
-} from './components';
-// TODO(wittjosiah): Refactor. These are not exported from ./components due to depending on ECHO.
-import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './components/ComputeGraph/edge-function';
-import { ComputeGraphContextProvider } from './components/ComputeGraph/graph-context';
+import { ComputeGraphContextProvider, SheetContainer } from './components';
+import { compareIndexPositions, createSheet } from './defs';
+import { computeGraphFacet } from './extensions';
+import { type ComputeGraphRegistry } from './graph';
+import { useComputeGraph } from './hooks';
 import meta, { SHEET_PLUGIN } from './meta';
-import { SheetModel } from './model';
 import translations from './translations';
-import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
+import { SheetAction, SheetType, type SheetPluginProvides } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let remoteFunctionUrl: string | undefined;
-
-  const graphs = create<Record<string, ComputeGraph>>({});
-  const setGraph = (key: string, graph: ComputeGraph) => {
-    graphs[key] = graph;
-  };
+  let computeGraphRegistry: ComputeGraphRegistry | undefined;
 
   return {
     meta,
     ready: async (plugins) => {
       const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      if (!client) {
-        return;
-      }
-
+      invariant(client);
+      let remoteFunctionUrl: string | undefined;
       if (client.config.values.runtime?.services?.edge?.url) {
         const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
         url.protocol = 'https';
         remoteFunctionUrl = url.toString();
       }
+
+      // Async import removes direct dependency on hyperformula.
+      const { ComputeGraphRegistry } = await import('./graph');
+      computeGraphRegistry = new ComputeGraphRegistry({ remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
-        return (
-          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
-            {children}
-          </ComputeGraphContextProvider>
-        );
+        invariant(computeGraphRegistry);
+        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
-            icon: (props: IconProps) => <GridNine {...props} />,
-            iconSymbol: 'ph--grid-nine--regular',
+            icon: 'ph--grid-nine--regular',
           },
         },
       },
       translations,
       echo: {
         // TODO(wittjosiah): Factor out to common package/plugin.
-        //   FunctionType is currently registered here in case script plugin isn't enabled.
+        //  FunctionType is currently registered here in case script plugin isn't enabled.
         schema: [SheetType, FunctionType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create sheet label', { ns: SHEET_PLUGIN }],
+          action: SheetAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -113,8 +100,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
                   },
                   properties: {
                     label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: (props: IconProps) => <GridNine {...props} />,
-                    iconSymbol: 'ph--grid-nine--regular',
+                    icon: 'ph--grid-nine--regular',
                     testId: 'sheetPlugin.createObject',
                   },
                 },
@@ -123,6 +109,16 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           });
         },
       },
+      markdown: {
+        extensions: ({ document: doc }) => {
+          invariant(computeGraphRegistry);
+          const space = getSpace(doc);
+          if (space) {
+            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+            return computeGraphFacet.of(computeGraph);
+          }
+        },
+      },
       stack: {
         creators: [
           {
@@ -130,7 +126,8 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             testId: 'sheetPlugin.createSection',
             type: ['plugin name', { ns: SHEET_PLUGIN }],
             label: ['create sheet section label', { ns: SHEET_PLUGIN }],
-            icon: (props: any) => <GridNine {...props} />,
+            // TODO(thure): Refactor to use strings
+            icon: (props: any) => <Icon icon='ph--grid-nine--regular' {...props} />,
             intent: {
               plugin: SHEET_PLUGIN,
               action: SheetAction.CREATE,
@@ -138,23 +135,20 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           },
         ],
       },
+      thread: {
+        predicate: (data) => data instanceof SheetType,
+        createSort: (sheet) => (indexA, indexB) =>
+          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
+      },
       surface: {
-        component: ({ data, role = 'never' }) => {
-          // TODO(burdon): Standardize wrapper (with room for toolbar).
-          const space = isEchoObject(data.object) && getSpace(data.object);
-          if (space && data.object instanceof SheetType) {
+        component: ({ data, role }) => {
+          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
+          const graph = useComputeGraph(space);
+          if (graph && data.object instanceof SheetType) {
             switch (role) {
               case 'article':
               case 'section': {
-                return (
-                  <SheetContainer
-                    sheet={data.object}
-                    space={space}
-                    role={role}
-                    coordinate={data.coordinate as LayoutCoordinate}
-                    remoteFunctionUrl={remoteFunctionUrl}
-                  />
-                );
+                return <SheetContainer graph={graph} sheet={data.object} role={role} />;
               }
             }
           }
@@ -166,23 +160,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case SheetAction.CREATE: {
-              const space = intent.data?.space;
-              const sheet = createSheet();
-              const graph =
-                graphs[space.id] ??
-                createComputeGraph(
-                  [
-                    { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
-                    // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
-                    { plugin: CustomPlugin, translations: CustomPluginTranslations },
-                  ],
-                  space,
-                  { remoteFunctionUrl },
-                );
-              const model = new SheetModel(graph, sheet);
-              await model.initialize();
-              await model.destroy();
-              return { data: sheet };
+              return { data: createSheet() };
             }
           }
         },

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren } from 'react';
+
+import { type ComputeGraphRegistry } from '../../graph';
+
+export type ComputeGraphContextType = {
+  registry: ComputeGraphRegistry;
+};
+
+/**
+ * The compute graph context manages a ComputeGraph for each space.
+ */
+export const ComputeGraphContext = createContext<ComputeGraphContextType | undefined>(undefined);
+
+export const ComputeGraphContextProvider = ({ registry, children }: PropsWithChildren<ComputeGraphContextType>) => {
+  return <ComputeGraphContext.Provider value={{ registry }}>{children}</ComputeGraphContext.Provider>;
+};

package/src/components/ComputeGraph/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './async-function';
-export * from './custom';
-export * from './graph';
+export * from './ComputeGraphContextProvider';

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { addressToA1Notation, rangeToA1Notation } from '../../defs';
+import { useSheetContext } from '../SheetContext';
+
+export const FunctionEditor = () => {
+  const { model, cursor, range } = useSheetContext();
+
+  let value;
+  let isFormula = false;
+  if (cursor) {
+    value = model.getCellValue(cursor);
+    if (typeof value === 'string' && value.charAt(0) === '=') {
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
+      isFormula = true;
+    } else if (value != null) {
+      value = String(value);
+    }
+  }
+
+  return (
+    <div
+      className={mx(
+        'flex shrink-0 justify-between items-center px-4 py-1 text-sm border-bs !border-separator attention-surface',
+      )}
+    >
+      <div className='flex gap-4 items-center'>
+        <div className='flex w-16 items-center font-mono'>
+          {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
+        </div>
+        <div className='flex gap-2 items-center'>
+          <Icon icon='ph--function--regular' classNames={['text-greenText', isFormula ? 'visible' : 'invisible']} />
+          <span className='font-mono'>{value}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/FunctionEditor/index.ts

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

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { GridSheet } from './GridSheet';
+import { useComputeGraph } from '../../hooks';
+import { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
+import { SheetProvider } from '../SheetContext';
+
+export default {
+  title: 'plugin-sheet/GridSheet',
+  component: GridSheet,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return (
+    <SheetProvider graph={graph} sheet={sheet}>
+      <GridSheet />
+    </SheetProvider>
+  );
+};

package/src/components/GridSheet/GridSheet.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useRef, type FocusEvent, type WheelEvent } from 'react';
+
+import { useAttention } from '@dxos/react-ui-attention';
+import {
+  type DxGridElement,
+  Grid,
+  type GridContentProps,
+  editorKeys,
+  type EditorKeysProps,
+  GridCellEditor,
+  closestCell,
+} from '@dxos/react-ui-grid';
+
+import { colLabelCell, dxGridCellIndexToSheetCellAddress, rowLabelCell, useSheetModelDxGridProps } from './util';
+import { rangeToA1Notation, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS } from '../../defs';
+import { rangeExtension, sheetExtension, type CellRangeNotifier } from '../../extensions';
+import { useUpdateFocusedCellOnThreadSelection } from '../../hooks';
+import { useSheetContext } from '../SheetContext';
+
+const initialCells = {
+  grid: {},
+  frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
+    acc[`0,${i}`] = rowLabelCell(i);
+    return acc;
+  }, {}),
+  frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
+    acc[`${i},0`] = colLabelCell(i);
+    return acc;
+  }, {}),
+};
+
+const frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1,
+};
+
+const sheetRowDefault = { grid: { size: 32, resizeable: true } };
+const sheetColDefault = { frozenColsStart: { size: 48 }, grid: { size: 180, resizeable: true } };
+
+export const GridSheet = () => {
+  const { id, model, formatting, editing, setEditing, setCursor, setRange } = useSheetContext();
+  const dxGrid = useRef<DxGridElement | null>(null);
+  const rangeNotifier = useRef<CellRangeNotifier>();
+  const { hasAttention } = useAttention(id);
+
+  const handleFocus = useCallback(
+    (event: FocusEvent) => {
+      if (!editing) {
+        const cell = closestCell(event.target);
+        setCursor(cell && cell.plane === 'grid' ? { col: cell.col, row: cell.row } : undefined);
+      }
+    },
+    [editing],
+  );
+
+  // TODO(burdon): Validate formula before closing: hf.validateFormula();
+  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
+    (value, { key, shift }) => {
+      if (value !== undefined) {
+        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
+      }
+      setEditing(null);
+      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
+        ? 'row'
+        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
+          ? 'col'
+          : undefined;
+      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
+      dxGrid.current?.refocus(axis, delta);
+    },
+    [model, editing, setEditing],
+  );
+
+  const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+    ({ axis, size, index: numericIndex }) => {
+      if (axis === 'row') {
+        const rowId = model.sheet.rows[parseInt(numericIndex)];
+        model.sheet.rowMeta[rowId] ??= {};
+        model.sheet.rowMeta[rowId].size = size;
+      } else {
+        const columnId = model.sheet.columns[parseInt(numericIndex)];
+        model.sheet.columnMeta[columnId] ??= {};
+        model.sheet.columnMeta[columnId].size = size;
+      }
+    },
+    [model],
+  );
+
+  const handleSelect = useCallback<NonNullable<GridContentProps['onSelect']>>(
+    ({ minCol, maxCol, minRow, maxRow }) => {
+      const range: CellRange = { from: { col: minCol, row: minRow } };
+      if (minCol !== maxCol || minRow !== maxRow) {
+        range.to = { col: maxCol, row: maxRow };
+      }
+      if (editing) {
+        // Update range selection in formula.
+        rangeNotifier.current?.(rangeToA1Notation(range));
+      } else {
+        // Setting range while editing causes focus to move to null, avoid doing so.
+        setRange(range.to ? range : undefined);
+      }
+    },
+    [editing],
+  );
+
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      if (!hasAttention) {
+        event.stopPropagation();
+      }
+    },
+    [hasAttention],
+  );
+
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
+
+  const extension = useMemo(
+    () => [
+      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
+      rangeExtension((fn) => (rangeNotifier.current = fn)),
+    ],
+    [model, handleClose, editing],
+  );
+
+  const getCellContent = useCallback(
+    (index: string) => {
+      const cell = dxGridCellIndexToSheetCellAddress(index);
+      return model.getCellText(cell);
+    },
+    [model],
+  );
+
+  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
+
+  return (
+    <>
+      <GridCellEditor getCellContent={getCellContent} extension={extension} />
+      <Grid.Content
+        initialCells={initialCells}
+        limitColumns={DEFAULT_COLUMNS}
+        limitRows={DEFAULT_ROWS}
+        columns={columns}
+        rows={rows}
+        onAxisResize={handleAxisResize}
+        onSelect={handleSelect}
+        rowDefault={sheetRowDefault}
+        columnDefault={sheetColDefault}
+        frozen={frozen}
+        onFocus={handleFocus}
+        onWheelCapture={handleWheel}
+        className='[--dx-grid-base:var(--surface-bg)]'
+        ref={dxGrid}
+      />
+    </>
+  );
+};