@dxos/plugin-sheet 0.6.13 → 0.6.14-main.1366248

package/src/extensions/compute.ts

@@ -0,0 +1,147 @@
+//
+// 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 UnsubscribeCallback, debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
+
+import { type ComputeGraph, type ComputeNode, createSheetName } from '../compute-graph';
+import { type CellAddress } from '../defs';
+import { type CellScalarValue } from '../types';
+
+const LANGUAGE_TAG = 'dx';
+
+// TODO(burdon): Create marker just for our decorator?
+const updateAllDecorations = StateEffect.define<void>();
+
+export const computeGraphFacet = singleValueFacet<ComputeGraph>();
+
+export type ComputeOptions = {};
+
+export const compute = (options: ComputeOptions = {}): Extension => {
+  let computeNode: ComputeNode | undefined;
+
+  const update = (state: EditorState, current?: RangeSet<Decoration>) => {
+    const builder = new RangeSetBuilder<Decoration>();
+    if (computeNode) {
+      computeNode.clear();
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case '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 formula = state.sliceDoc(text.from, text.to);
+
+                    const iter = current?.iter(node.node.from);
+                    if (iter?.value && iter?.value.spec.formula === formula) {
+                      // Add existing widget.
+                      builder.add(node.from, node.to, iter.value);
+                    } else {
+                      // TODO(burdon): Create ordered list of cells on each decoration run.
+                      const cell: CellAddress = { col: node.node.from, row: 0 };
+                      invariant(computeNode);
+                      // NOTE: This triggers re-render (below).
+                      computeNode.setValue(cell, formula);
+                      const value = computeNode.getValue(cell);
+                      builder.add(
+                        node.from,
+                        node.to,
+                        Decoration.replace({
+                          widget: new ComputeWidget(formula, value),
+                          formula,
+                        }),
+                      );
+                    }
+                  }
+                }
+              }
+
+              break;
+            }
+          }
+        },
+      });
+    }
+
+    return builder.finish();
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        // Graph subscription.
+        private _subscription?: UnsubscribeCallback;
+        constructor(view: EditorView) {
+          const id = view.state.facet(documentId);
+          const computeGraph = view.state.facet(computeGraphFacet);
+          if (id && computeGraph) {
+            queueMicrotask(async () => {
+              computeNode = computeGraph.getOrCreateNode(createSheetName({ type: '', id }));
+              await computeNode.open();
+
+              // Trigger re-render if values updated.
+              // TODO(burdon): Trigger only if formula value updated (currently triggered during render).
+              this._subscription = computeNode.update.on(
+                debounce(({ type, ...rest }) => {
+                  if (type === 'valuesUpdated') {
+                    view.dispatch({
+                      effects: updateAllDecorations.of(),
+                    });
+                  }
+                }, 250),
+              );
+            });
+          }
+        }
+
+        destroy() {
+          this._subscription?.();
+          void computeNode?.close();
+          computeNode = undefined;
+        }
+      },
+    ),
+
+    StateField.define<RangeSet<Decoration>>({
+      create: (state) => update(state),
+      update: (rangeSet: RangeSet<Decoration>, tr: Transaction) => update(tr.state, rangeSet),
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Click to edit.
+class ComputeWidget extends WidgetType {
+  constructor(
+    private readonly formula: string,
+    private readonly value: CellScalarValue,
+  ) {
+    super();
+  }
+
+  override toDOM(_view: EditorView) {
+    const div = document.createElement('div');
+    div.setAttribute('title', this.formula);
+    div.innerText = String(this.value);
+    return div;
+  }
+}

package/src/{components/CellEditor → extensions/editor}/extension.test.ts

@@ -4,14 +4,12 @@
 
 import { CompletionContext, type CompletionSource } from '@codemirror/autocomplete';
 import { EditorState } from '@codemirror/state';
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
-import { expect } from 'chai';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model/functions';
+import { defaultFunctions } from '../../compute-graph';
 
 describe('formula parser', () => {
   const {
@@ -37,8 +35,8 @@ describe('formula parser', () => {
       extensions: sheetExtension({ functions }),
     });
 
-    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
-    const result = await f(new CompletionContext(state, text.length, true));
+    const [fn] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await fn(new CompletionContext(state, text.length, true));
     expect(result?.options).to.have.length(1);
   });
 });

package/src/{components/CellEditor → extensions/editor}/extension.ts

@@ -12,15 +12,17 @@ import {
   startCompletion,
 } from '@codemirror/autocomplete';
 import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
-import { type Extension, Facet } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 import { tags } from '@lezer/highlight';
 import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
+import { singleValueFacet } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type FunctionDefinition } from '../../model';
+import { type FunctionDefinition } from '../../compute-graph';
+import { RANGE_NOTATION } from '../../defs';
 
 /**
  * https://codemirror.net/examples/styling
@@ -59,7 +61,7 @@ const highlightStyles = HighlightStyle.define([
   },
 ]);
 
-const languageFacet = Facet.define<Language>();
+const languageFacet = singleValueFacet<Language>();
 
 export type SheetExtensionOptions = {
   functions?: FunctionDefinition[];
@@ -165,8 +167,6 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
       icons: false,
       tooltipClass: () =>
         mx(
-          // TODO(burdon): Factor out fragments.
-          // TODO(burdon): Size to make width same as column.
           '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
           '[&>ul>li[aria-selected]]:!bg-accentSurface',
           'border-separator',
@@ -196,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) {
@@ -231,22 +250,20 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
 
         // Find first Range or cell at cursor.
         activeRange = undefined;
-        const [language] = view.state.facet(languageFacet);
+        const language = view.state.facet(languageFacet);
         const { topNode } = language.parser.parse(view.state.doc.toString());
         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':
@@ -260,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/{components/CellEditor → extensions/editor}/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './CellEditor';
 export * from './extension';

package/src/extensions/index.ts

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

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';

package/src/integrations/thread-ranges.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { 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 { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
+
+import { useSheetContext } from '../components';
+import { type CellAddress, type CompleteCellRange, inRange } from '../defs';
+import { SHEET_PLUGIN } from '../meta';
+
+export const completeCellRangeToThreadCursor = (range: CompleteCellRange): string => {
+  return `${range.from.col},${range.from.row},${range.to.col},${range.to.row}`;
+};
+
+export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange | null => {
+  const coords = cursor.split(',');
+  if (coords.length !== 4) {
+    return null;
+  } else {
+    const [fromCol, fromRow, toCol, toRow] = coords;
+    return {
+      from: { col: parseInt(fromCol), row: parseInt(fromRow) },
+      to: { col: parseInt(toCol), row: parseInt(toRow) },
+    };
+  }
+};
+
+export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
+  const { model, setActiveRefs } = useSheetContext();
+  const handleScrollIntoView: IntentResolver = useCallback(
+    ({ action, data }) => {
+      switch (action) {
+        case LayoutAction.SCROLL_INTO_VIEW: {
+          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
+            return;
+          }
+          setActiveRefs(data.thread);
+          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+          const range = parseThreadAnchorAsCellRange(data.cursor);
+          range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+        }
+      }
+    },
+    [model.sheet, setActiveRefs],
+  );
+
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+
+export const useSelectThreadOnCellFocus = () => {
+  const { model, cursor } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+
+  const threads = useMemo(
+    () => model.sheet.threads?.filter((thread): thread is NonNullable<typeof thread> => !!thread) ?? [],
+    [
+      // TODO(thure): Surely we can find a better dependency for this…
+      JSON.stringify(model.sheet.threads),
+    ],
+  );
+
+  const selectClosestThread = useCallback(
+    (cellAddress: CellAddress) => {
+      if (!cellAddress || !threads) {
+        return;
+      }
+
+      const closestThread = threads?.find(({ anchor }) => {
+        if (anchor) {
+          const range = parseThreadAnchorAsCellRange(anchor);
+          return range ? inRange(range, cellAddress) : false;
+        } else {
+          return false;
+        }
+      });
+
+      if (closestThread) {
+        void dispatch([
+          { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
+        ]);
+      }
+    },
+    [dispatch, threads],
+  );
+
+  const debounced = useMemo(() => {
+    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
+  }, [selectClosestThread]);
+
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [cursor, debounced]);
+};

package/src/meta.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
+
+export default {
+  id: SHEET_PLUGIN,
+  name: 'Sheet',
+  description: 'A simple spreadsheet plugin.',
+  icon: 'ph--grid-nine--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
+} satisfies PluginMeta;

package/src/model/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './functions';
-export * from './model';
-export * from './types';
+export * from './sheet-model';
+export * from './useSheetModel';

package/src/model/sheet-model.test.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { SheetModel } from './sheet-model';
+import { TestBuilder, testFunctionPlugins } from '../compute-graph/testing';
+import { addressFromA1Notation, createSheet } from '../defs';
+import { type CellScalarValue } from '../types';
+
+describe('SheetModel', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType], plugins: testFunctionPlugins });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('async function', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
+
+    // TODO(burdon): Create via factory.
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+    testBuilder.ctx.onDispose(() => model.close());
+
+    // Trigger waits for function invocation.
+    const trigger = new Trigger<CellScalarValue>();
+    model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
+    // TODO(wittjosiah): Currently this fires twice, once for the binding loading & once for the function invocation.
+    const unsubscribe = model.update.on((update) => {
+      const { type } = update;
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        value && trigger.wake(value);
+      }
+    });
+    onTestFinished(() => unsubscribe());
+
+    // Initial value will be null.
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).not.to.exist;
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).to.eq(100);
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});