@dxos/plugin-sheet 0.6.11 → 0.6.12-main.15a606f

package/src/components/Toolbar/Toolbar.tsx

@@ -23,22 +23,31 @@ import {
   type ThemedClassName,
   useTranslation,
 } from '@dxos/react-ui';
+import { nonNullable } from '@dxos/util';
 
 import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
 import { type Formatting } from '../../types';
+import { useSheetContext } from '../Sheet/sheet-context';
 
 //
 // Root
 //
 
-export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
+export type ToolbarAction =
+  | { type: 'clear' }
+  | { type: 'highlight' }
+  | { type: 'left' }
+  | { type: 'center' }
+  | { type: 'right' }
+  | { type: 'date' }
+  | { type: 'currency' }
+  | { type: 'comment'; anchor: string; cellContent?: string };
 
-export type ToolbarAction = {
-  type: ToolbarActionType;
-};
+export type ToolbarActionType = ToolbarAction['type'];
 
-export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
+export type ToolbarActionHandler = (action: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -96,7 +105,7 @@ const Format = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
+          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -127,7 +136,7 @@ const Alignment = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
+          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -157,7 +166,7 @@ const Styles = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
+          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -171,17 +180,49 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  // const { onAction } = useToolbarContext('Actions');
+  const { onAction } = useToolbarContext('Actions');
+  const { cursor, range, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
+
+  const overlapsCommentAnchor = (model.sheet.threads ?? [])
+    .filter(nonNullable)
+    .filter((thread) => thread.status !== 'resolved')
+    .some((thread) => {
+      if (!cursor) {
+        return false;
+      }
+      return addressToIndex(model.sheet, cursor) === thread.anchor;
+    });
+
+  const hasCursor = !!cursor;
+  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
+
+  const tooltipLabelKey = !hasCursor
+    ? 'no cursor label'
+    : overlapsCommentAnchor
+      ? 'selection overlaps existing comment label'
+      : range
+        ? 'comment ranges not supported label'
+        : 'comment label';
+
   return (
     <ToolbarButton
       value='comment'
       Icon={ChatText}
       data-testid='editor.toolbar.comment'
-      // onClick={() => onAction?.({ type: 'comment' })}
-      // disabled={!state || state.comment || !state.selection}
+      onClick={() => {
+        if (!cursor) {
+          return;
+        }
+        return onAction?.({
+          type: 'comment',
+          anchor: addressToIndex(model.sheet, cursor),
+          cellContent: model.getCellText(cursor),
+        });
+      }}
+      disabled={!cursorOnly || overlapsCommentAnchor}
     >
-      {t('comment label')}
+      {t(tooltipLabelKey)}
     </ToolbarButton>
   );
 };

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

@@ -3,15 +3,14 @@
 //
 
 import { getIndices, sortByIndex, getIndicesBelow, getIndicesAbove, getIndicesBetween } from '@tldraw/indices';
-import { expect } from 'chai';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { inRange, addressFromA1Notation, addressToA1Notation, rangeFromA1Notation, rangeToA1Notation } from './types';
 
 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', () => {
@@ -56,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/defs/util.ts

@@ -0,0 +1,135 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { randomBytes } from '@dxos/crypto';
+import { create } from '@dxos/echo-schema';
+
+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();
+  }
+}
+
+/**
+ * With a string length of 8, the chance of a collision is 0.02% for a sheet with 10,000 strings.
+ */
+export const createIndex = (length = 8): string => {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  const randomBuffer = randomBytes(length);
+  return Array.from(randomBuffer, (byte) => characters[byte % charactersLength]).join('');
+};
+
+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.col]}@${sheet.rows[cell.row]}`;
+};
+
+/**
+ * E.g., "CA2@CB3" => "A1".
+ */
+export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
+  const [column, row] = idx.split('@');
+  return {
+    col: sheet.columns.indexOf(column),
+    row: sheet.rows.indexOf(row),
+  };
+};
+
+/**
+ * E.g., "A1:B2" => "CA2@CB3:CC4@CD5".
+ */
+export const rangeToIndex = (sheet: SheetType, range: CellRange): string => {
+  return [range.from, range.to ?? range.from].map((cell) => addressToIndex(sheet, cell)).join(':');
+};
+
+/**
+ * E.g., "CA2@CB3:CC4@CD5" => "A1:B2".
+ */
+export const rangeFromIndex = (sheet: SheetType, idx: string): CellRange => {
+  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.
+ */
+export const compareIndexPositions = (sheet: SheetType, indexA: string, indexB: string): number => {
+  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) {
+    return rowA - rowB;
+  } else {
+    return columnA - columnB;
+  }
+};

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`,
+      '```',
+      '',
+    ),
+  },
+};

package/src/extensions/compute.ts

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateEffect,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
+
+import { type ComputeNode } from '../graph';
+
+const LANGUAGE_TAG = 'dx';
+
+// TODO(burdon): Create marker just for our decorator?
+const updateAllDecorations = StateEffect.define<void>();
+
+export type ComputeOptions = {};
+
+export const compute = (computeNode: ComputeNode, options: ComputeOptions = {}): Extension => {
+  const update = (state: EditorState) => {
+    const builder = new RangeSetBuilder();
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'FencedCode') {
+          const cursor = state.selection.main.head;
+          if (state.readOnly || cursor < node.from || cursor > node.to) {
+            const info = node.node.getChild('CodeInfo');
+            if (info) {
+              const type = state.sliceDoc(info.from, info.to);
+              const text = node.node.getChild('CodeText');
+              if (type === LANGUAGE_TAG && text) {
+                const content = state.sliceDoc(text.from, text.to);
+                // TODO(burdon): Map unique reference onto cell; e.g., track ordered list?
+                computeNode.setValue({ col: 0, row: 0 }, content);
+                const value = computeNode.getValue({ col: 0, row: 0 });
+                builder.add(
+                  node.from,
+                  node.to,
+                  Decoration.replace({
+                    widget: new DxWidget(String(value)),
+                  }),
+                );
+              }
+            }
+          }
+        }
+      },
+    });
+
+    return builder.finish();
+  };
+
+  return [
+    // Graph subscription.
+    ViewPlugin.fromClass(
+      class {
+        private readonly _subscription: any;
+        constructor(view: EditorView) {
+          this._subscription = computeNode.graph.update.on(() => {
+            view.dispatch({
+              effects: updateAllDecorations.of(),
+            });
+          });
+        }
+
+        destroy() {
+          this._subscription();
+        }
+      },
+    ),
+
+    // Decorations.
+    StateField.define<RangeSet<any>>({
+      create: (state) => update(state),
+      update: (_: RangeSet<any>, tr: Transaction) => update(tr.state),
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+class DxWidget extends WidgetType {
+  constructor(private readonly value: string) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const div = document.createElement('div');
+    div.innerText = this.value;
+    return div;
+  }
+}

package/src/extensions/index.ts

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

package/src/{components/ComputeGraph → graph}/async-function.ts

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
@@ -12,6 +11,8 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { type Space } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 
+import { CellError, ErrorType, EmptyValue, FunctionPlugin, type HyperFormula } from '#hyperformula';
+
 // TODO(burdon): API gateways!
 //  https://publicapis.io
 //  https://api-ninjas.com/api/cryptoprice
@@ -82,6 +83,7 @@ export class FunctionContext {
     }, this._options.recalculationDelay);
   }
 
+  // TODO(burdon): Remove?
   get space() {
     return this._space;
   }