@dxos/plugin-sheet 0.6.12-main.5cc132e → 0.6.12-main.c4a728f

package/src/components/Sheet/sheet-context.tsx

@@ -2,22 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useState, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type FunctionType } from '@dxos/plugin-script';
-import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 
 import { createDecorations } from './decorations';
-import { FormattingModel } from './formatting';
-import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
+import { type CellAddress, type CellRange } from '../../defs';
+import { useSheetModel, useFormattingModel } from '../../hooks';
+import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
-import { type FunctionContextOptions } from '../ComputeGraph';
-// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
-import { useComputeGraph } from '../ComputeGraph/graph-context';
-
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 
 export type SheetContextType = {
   model: SheetModel;
@@ -54,49 +48,7 @@ export type SheetContextProps = {
   sheet: SheetType;
   space: Space;
   readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'> &
-  Partial<FunctionContextOptions>;
-
-/**
- * Map from binding to fully qualified ECHO ID.
- */
-const mapFormulaBindingToId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-      if (defaultFunctions.find((fn) => fn.name === binding) || binding === 'EDGE') {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fn.binding === binding);
-      if (fn) {
-        return `${fullyQualifiedId(fn)}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
-
-/**
- * Map from fully qualified ECHO ID to binding.
- */
-const mapFormulaBindingFromId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
-      const id = `${spaceId}:${objectId}`;
-      if (id.length !== OBJECT_ID_LENGTH) {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fullyQualifiedId(fn) === id);
-      if (fn?.binding) {
-        return `${fn.binding}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
+} & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
@@ -104,39 +56,17 @@ export const SheetContextProvider = ({
   space,
   readonly,
   onInfo,
-  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const graph = useComputeGraph(space, options);
+  const model = useSheetModel(space, sheet, { readonly });
+  const formatting = useFormattingModel(model);
 
-  // TODO(Zan): We should offer a version of set range and set cursor that scrolls to
-  // that cell or range if it is not visible.
+  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
   const decorations = useMemo(() => createDecorations(), []);
 
-  const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
-  useEffect(() => {
-    let model: SheetModel | undefined;
-    let formatting;
-    const t = setTimeout(async () => {
-      model = new SheetModel(graph, sheet, space, { readonly, mapFormulaBindingToId, mapFormulaBindingFromId });
-      await model.initialize();
-      formatting = new FormattingModel(model);
-      setModels([model, formatting]);
-    });
-
-    return () => {
-      clearTimeout(t);
-      void model?.destroy();
-    };
-  }, [graph, readonly]);
-
-  if (!model || !formatting) {
-    return null;
-  }
-
-  return (
+  return !model || !formatting ? null : (
     <SheetContext.Provider
       value={{
         model,

package/src/components/Sheet/threads.tsx

@@ -3,18 +3,19 @@
 //
 
 import { effect } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
 
 import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { Icon, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 import { type Decoration } from './decorations';
 import { useSheetContext } from './sheet-context';
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../model';
+
+// TODO(burdon): Move into folder; split hooks.
 
 const CommentIndicator = () => {
   return (
@@ -25,9 +26,9 @@ const CommentIndicator = () => {
   );
 };
 
-const ThreadedCellWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const ThreadedCellWrapper = ({ children }: PropsWithChildren) => {
   const dispatch = useIntentDispatcher();
-  const [isHovered, setIsHovered] = React.useState(true);
+  const [isHovered, setIsHovered] = React.useState(false);
   const { t } = useTranslation(SHEET_PLUGIN);
 
   const handleClick = React.useCallback(
@@ -40,7 +41,7 @@ const ThreadedCellWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   return (
     <div
       role='none'
-      className={mx('relative h-full is-full')}
+      className='relative h-full is-full'
       onMouseEnter={() => {
         setIsHovered(true);
       }}
@@ -73,6 +74,8 @@ const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: st
   };
 };
 
+// TODO(burdon): Factor out hooks.
+
 const useUpdateCursorOnThreadSelection = () => {
   const { setCursor, model } = useSheetContext();
 
@@ -190,6 +193,7 @@ const useThreadDecorations = () => {
         }
       }
     });
+
     return () => unsubscribe();
   });
 };

package/src/components/SheetContainer.tsx

@@ -22,7 +22,7 @@ const attentionFragment = mx(
 export const sectionToolbarLayout =
   'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
 
-const SheetContainer = ({ sheet, space, role, remoteFunctionUrl }: SheetRootProps & { role?: string }) => {
+const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {
   const dispatch = useIntentDispatcher();
 
   const id = fullyQualifiedId(sheet);
@@ -50,7 +50,7 @@ const SheetContainer = ({ sheet, space, role, remoteFunctionUrl }: SheetRootProp
 
   return (
     <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
+      <Sheet.Root space={space} sheet={sheet}>
         <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
           <Toolbar.Root
             onAction={handleAction}

package/src/components/Toolbar/Toolbar.tsx

@@ -26,8 +26,8 @@ import {
 import { nonNullable } from '@dxos/util';
 
 import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
-import { addressToIndex } from '../../model';
 import { type Formatting } from '../../types';
 import { useSheetContext } from '../Sheet/sheet-context';
 
@@ -179,7 +179,6 @@ const Styles = () => {
 // Actions
 //
 
-// TODO(Zan): Instead of taking props, can we access the state from sheet context?
 const Actions = () => {
   const { onAction } = useToolbarContext('Actions');
   const { cursor, range, model } = useSheetContext();

package/src/components/index.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 
 export * from './ComputeGraph';
+export * from './Sheet';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/defs/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './types';
+export * from './util';

package/src/{model → defs}/types.test.ts

@@ -9,8 +9,8 @@ import { inRange, addressFromA1Notation, addressToA1Notation, rangeFromA1Notatio
 
 describe('cell', () => {
   test('posToA1Notation', () => {
-    expect(addressToA1Notation({ column: 0, row: 0 })).to.eq('A1');
-    expect(addressFromA1Notation('C2')).to.deep.eq({ column: 2, row: 1 });
+    expect(addressToA1Notation({ col: 0, row: 0 })).to.eq('A1');
+    expect(addressFromA1Notation('C2')).to.deep.eq({ col: 2, row: 1 });
   });
 
   test('rangeToA1Notation', () => {
@@ -55,19 +55,19 @@ describe('cell', () => {
     // Values.
     const cells: Record<string, any> = {};
     const setCell = (cell: string, value: any) => {
-      const { column, row } = addressFromA1Notation(cell);
+      const { col, row } = addressFromA1Notation(cell);
       // Reallocate if > current bounds.
-      if (column >= columns.length) {
-        insertIndex(columns, column);
+      if (col >= columns.length) {
+        insertIndex(columns, col);
       }
       if (row >= rows.length) {
         insertIndex(rows, row);
       }
-      const index = `${columns[column]}@${rows[row]}`;
+      const index = `${columns[col]}@${rows[row]}`;
       cells[index] = value;
     };
 
-    expect(addressFromA1Notation('A1')).to.deep.eq({ column: 0, row: 0 });
+    expect(addressFromA1Notation('A1')).to.deep.eq({ col: 0, row: 0 });
 
     expect(columns).to.deep.eq(['a1', 'a2', 'a3', 'a4', 'a5']);
     insertIndex(columns, 7);

package/src/{model → defs}/types.ts

@@ -4,25 +4,34 @@
 
 import { invariant } from '@dxos/invariant';
 
-export const MAX_COLUMNS = 26 * 26;
+export const DEFAULT_ROWS = 50;
+export const DEFAULT_COLUMNS = 26;
+
+export const MAX_ROWS = 500;
+export const MAX_COLUMNS = 26 * 2;
+
+export type CellAddress = { col: number; row: number };
 
-export type CellAddress = { column: number; row: number };
 export type CellRange = { from: CellAddress; to?: CellAddress };
 
+export type CellIndex = string;
+
+export type CellContentValue = number | string | boolean | null;
+
 export const posEquals = (a: CellAddress | undefined, b: CellAddress | undefined) => {
-  return a?.column === b?.column && a?.row === b?.row;
+  return a?.col === b?.col && a?.row === b?.row;
 };
 
-export const columnLetter = (column: number): string => {
-  invariant(column < MAX_COLUMNS, `Invalid column: ${column}`);
+export const columnLetter = (col: number): string => {
+  invariant(col < MAX_COLUMNS, `Invalid column: ${col}`);
   return (
-    (column >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(column / 26) - 1) : '') +
-    String.fromCharCode('A'.charCodeAt(0) + (column % 26))
+    (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +
+    String.fromCharCode('A'.charCodeAt(0) + (col % 26))
   );
 };
 
-export const addressToA1Notation = ({ column, row }: CellAddress): string => {
-  return `${columnLetter(column)}${row + 1}`;
+export const addressToA1Notation = ({ col, row }: CellAddress): string => {
+  return `${columnLetter(col)}${row + 1}`;
 };
 
 export const addressFromA1Notation = (ref: string): CellAddress => {
@@ -30,7 +39,7 @@ export const addressFromA1Notation = (ref: string): CellAddress => {
   invariant(match, `Invalid notation: ${ref}`);
   return {
     row: parseInt(match[2], 10) - 1,
-    column: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
+    col: match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1,
   };
 };
 
@@ -59,13 +68,13 @@ export const inRange = (range: CellRange | undefined, cell: CellAddress): boolea
     return false;
   }
 
-  const { column: c1, row: r1 } = from;
-  const { column: c2, row: r2 } = to;
+  const { col: c1, row: r1 } = from;
+  const { col: c2, row: r2 } = to;
   const cMin = Math.min(c1, c2);
   const cMax = Math.max(c1, c2);
   const rMin = Math.min(r1, r2);
   const rMax = Math.max(r1, r2);
 
-  const { column, row } = cell;
-  return column >= cMin && column <= cMax && row >= rMin && row <= rMax;
+  const { col, row } = cell;
+  return col >= cMin && col <= cMax && row >= rMin && row <= rMax;
 };

package/src/{model → defs}/util.ts

@@ -3,13 +3,16 @@
 //
 
 import { randomBytes } from '@dxos/crypto';
+import { create } from '@dxos/echo-schema';
 
-import { type CellRange, type CellAddress } from '.';
-import { type SheetType } from '../types';
+import { type CellAddress, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS, MAX_COLUMNS, MAX_ROWS } from './types';
+import { type CreateSheetOptions, type SheetSize, SheetType } from '../types';
 
 // TODO(burdon): Factor out from dxos/protocols to new common package.
 export class ApiError extends Error {}
+
 export class ReadonlyException extends ApiError {}
+
 export class RangeException extends ApiError {
   constructor(n: number) {
     super();
@@ -28,11 +31,47 @@ export const createIndex = (length = 8): string => {
 
 export const createIndices = (length: number): string[] => Array.from({ length }).map(() => createIndex());
 
+export const insertIndices = (indices: string[], i: number, n: number, max: number) => {
+  if (i + n > max) {
+    throw new RangeException(i + n);
+  }
+
+  const idx = createIndices(n);
+  indices.splice(i, 0, ...idx);
+};
+
+export const initialize = (
+  sheet: SheetType,
+  { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS }: Partial<SheetSize> = {},
+) => {
+  if (!sheet.rows.length) {
+    insertIndices(sheet.rows, 0, rows, MAX_ROWS);
+  }
+  if (!sheet.columns.length) {
+    insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
+  }
+};
+
+export const createSheet = ({ title, ...size }: CreateSheetOptions = {}): SheetType => {
+  const sheet = create(SheetType, {
+    title,
+    cells: {},
+    rows: [],
+    columns: [],
+    rowMeta: {},
+    columnMeta: {},
+    formatting: {},
+  });
+
+  initialize(sheet, size);
+  return sheet;
+};
+
 /**
  * E.g., "A1" => "CA2@CB3".
  */
 export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
-  return `${sheet.columns[cell.column]}@${sheet.rows[cell.row]}`;
+  return `${sheet.columns[cell.col]}@${sheet.rows[cell.row]}`;
 };
 
 /**
@@ -41,7 +80,7 @@ export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
 export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
   const [column, row] = idx.split('@');
   return {
-    column: sheet.columns.indexOf(column),
+    col: sheet.columns.indexOf(column),
     row: sheet.rows.indexOf(row),
   };
 };
@@ -61,22 +100,15 @@ export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
   return { from, to };
 };
 
-// TODO(burdon): Factor out.
-export const pickOne = <T>(values: T[]): T => values[Math.floor(Math.random() * values.length)];
-export const pickSome = <T>(values: T[], n = 1): T[] => {
-  const result = new Set<T>();
-  while (result.size < n) {
-    result.add(pickOne(values));
-  }
-  return Array.from(result.values());
-};
-
+/**
+ * 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.column - cursor.column);
+    const distance = Math.abs(cell.row - cursor.row) + Math.abs(cell.col - cursor.col);
     if (distance < closestDistance) {
       closestCell = cell;
       closestDistance = distance;
@@ -91,8 +123,8 @@ export const closest = (cursor: CellAddress, cells: CellAddress[]): CellAddress
  * Sorts primarily by row, then by column if rows are equal.
  */
 export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB: string): number => {
-  const { row: rowA, column: columnA } = addressFromIndex(sheet, indexA);
-  const { row: rowB, column: columnB } = addressFromIndex(sheet, indexB);
+  const { row: rowA, col: columnA } = addressFromIndex(sheet, indexA);
+  const { row: rowB, col: columnB } = addressFromIndex(sheet, indexB);
 
   // Sort by row first, then by column.
   if (rowA !== rowB) {

package/src/extensions/compute.stories.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+import React, { useEffect, useState } from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { nonNullable } from '@dxos/util';
+
+import { compute } from './compute';
+import { Sheet } from '../components';
+import { type ComputeNode } from '../graph';
+import { useComputeGraph, useSheetModel } from '../hooks';
+import { useTestSheet, withGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const str = (...lines: string[]) => lines.join('\n');
+
+type EditorProps = {
+  text?: string;
+};
+
+// TODO(burdon): Implement named expressions.
+//  https://hyperformula.handsontable.com/guide/cell-references.html
+
+const DOC_NAME = 'Test Doc';
+const SHEET_NAME = 'Test Sheet';
+
+const Editor = ({ text }: EditorProps) => {
+  const { themeMode } = useThemeContext();
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const [node, setNode] = useState<ComputeNode>();
+  // TODO(burdon): Virtualize SheetModel.
+  useEffect(() => {
+    if (graph) {
+      setNode(graph.getOrCreateNode(DOC_NAME));
+    }
+  }, [graph]);
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({
+      initialValue: text,
+      extensions: [
+        createBasicExtensions(),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        node && compute(node),
+        decorateMarkdown(),
+      ].filter(nonNullable),
+    }),
+    [node, themeMode],
+  );
+
+  return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
+};
+
+const Grid = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { title: SHEET_NAME });
+  const model = useSheetModel(space, sheet);
+  useEffect(() => {
+    if (model) {
+      model.setValues({ A1: { value: 100 }, A2: { value: 200 }, A3: { value: 300 }, A5: { value: '=SUM(A1:A3)' } });
+    }
+  }, [model]);
+
+  if (!space || !sheet) {
+    return null;
+  }
+
+  return (
+    <div className='flex w-[40rem] overflow-hidden'>
+      <Sheet.Root space={space} sheet={sheet}>
+        <Sheet.Main classNames='border border-separator' />
+      </Sheet.Root>
+    </div>
+  );
+};
+
+const Story = (props: EditorProps) => {
+  return (
+    <div className='grid grid-rows-2'>
+      <Editor {...props} />
+      <Grid />
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/extensions',
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
+    withGraphDecorator,
+    withTheme,
+    withLayout({ fullscreen: true, classNames: 'justify-center' }),
+  ],
+  parameters: { layout: 'fullscreen' },
+};
+
+export const Default = {
+  render: Editor,
+  args: {
+    text: str(
+      //
+      '# Compute Graph',
+      '',
+      'This is a compute expression:',
+      '',
+      '```dx',
+      '=SUM(1, 2)',
+      '```',
+      '',
+      'It should change in realtime.',
+      '',
+      '```dx',
+      '=SUM(3, 5)',
+      '```',
+      '',
+      '',
+    ),
+  },
+};
+
+export const Graph = {
+  render: Story,
+  args: {
+    text: str(
+      //
+      '# Compute Graph',
+      '',
+      'The total projected cost is:',
+      '',
+      '```dx',
+      `="${SHEET_NAME}"!A5`,
+      '```',
+      '',
+    ),
+  },
+};