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

package/src/components/SheetContainer.tsx

@@ -2,30 +2,84 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { type LayoutCoordinate } from '@dxos/app-framework';
-import { mx } from '@dxos/react-ui-theme';
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
+import { focusRing, mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
+import { Toolbar, type ToolbarAction } from './Toolbar';
+
+// TODO(Zan): Factor out, copied this from MarkdownPlugin.
+const attentionFragment = mx(
+  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
+  'group-focus-within/editor:border-separator',
+);
+
+// TODO(Zan): Factor out, copied this from MarkdownPlugin.
+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 dispatch = useIntentDispatcher();
+
+  const id = fullyQualifiedId(sheet);
+  const isDirectlyAttended = useIsDirectlyAttended(id);
+
+  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  const handleAction = useCallback(
+    (action: ToolbarAction) => {
+      switch (action.type) {
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          void dispatch({
+            action: 'dxos.org/plugin/thread/action/create',
+            data: {
+              cursor: action.anchor,
+              name: action.cellContent,
+              subject: sheet,
+            },
+          });
+        }
+      }
+    },
+    [sheet, dispatch],
+  );
 
-const SheetContainer = ({
-  sheet,
-  space,
-  role,
-  remoteFunctionUrl,
-}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
-    <div
-      role='none'
-      className={mx(
-        'flex',
-        role === 'article' && 'row-span-2',
-        role === 'section' && 'aspect-square border-y border-is border-separator',
-      )}
-    >
+    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
       <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
-        <Sheet.Main />
+        <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
+          <Toolbar.Root
+            onAction={handleAction}
+            classNames={mx(
+              role === 'section'
+                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
+                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
+            )}
+          >
+            {/* TODO(Zan): Restore some of this functionality */}
+            {/* <Toolbar.Styles /> */}
+            {/* <Toolbar.Format /> */}
+            {/* <Toolbar.Alignment /> */}
+            <Toolbar.Separator />
+            <Toolbar.Actions />
+          </Toolbar.Root>
+        </div>
+        <div
+          role='none'
+          className={mx(
+            role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
+            role === 'article' &&
+              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
+            focusRing,
+            attentionFragment,
+          )}
+        >
+          <Sheet.Main />
+        </div>
       </Sheet.Root>
     </div>
   );

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 { SHEET_PLUGIN } from '../../meta';
+import { addressToIndex } from '../../model';
 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>
@@ -170,18 +179,51 @@ const Styles = () => {
 // Actions
 //
 
+// TODO(Zan): Instead of taking props, can we access the state from sheet context?
 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/model/index.ts

@@ -5,3 +5,4 @@
 export * from './functions';
 export * from './model';
 export * from './types';
+export * from './util';

package/src/model/model.browser.test.ts

@@ -2,8 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { expect } from 'chai';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import { SheetModel } from './model';
 import { addressFromA1Notation, rangeFromA1Notation } from './types';

package/src/model/model.ts

@@ -17,7 +17,7 @@ import { type FunctionType } from '@dxos/plugin-script/types';
 
 import { defaultFunctions, type FunctionDefinition } from './functions';
 import { addressFromA1Notation, addressToA1Notation, type CellAddress, type CellRange } from './types';
-import { createIndices, RangeException, ReadonlyException } from './util';
+import { addressFromIndex, addressToIndex, createIndices, RangeException, ReadonlyException } from './util';
 import { type ComputeGraph } from '../components';
 import { type CellScalarValue, type CellValue, type SheetType, ValueTypeEnum } from '../types';
 
@@ -186,7 +186,7 @@ export class SheetModel {
   reset() {
     this._graph.hf.clearSheet(this._sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
-      const { column, row } = this.addressFromIndex(key);
+      const { column, row } = addressFromIndex(this._sheet, key);
       if (typeof value === 'string' && value.charAt(0) === '=') {
         value = this.mapFormulaBindingToFormula(this.mapFormulaBindingFromId(this.mapFormulaIndicesToRefs(value)));
       }
@@ -220,7 +220,6 @@ export class SheetModel {
   // Undoable actions.
   // TODO(burdon): Group undoable methods; consistently update hf/sheet.
   //
-
   /**
    * Clear range of values.
    */
@@ -229,7 +228,7 @@ export class SheetModel {
     const values = this._iterRange(range, () => null);
     this._graph.hf.setCellContents(toSimpleCellAddress(this._sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
-      const idx = this.addressToIndex(cell);
+      const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
@@ -237,7 +236,7 @@ export class SheetModel {
   cut(range: CellRange) {
     this._graph.hf.cut(toModelRange(this._sheetId, range));
     this._iterRange(range, (cell) => {
-      const idx = this.addressToIndex(cell);
+      const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
@@ -252,7 +251,7 @@ export class SheetModel {
       for (const change of changes) {
         if (change instanceof ExportedCellChange) {
           const { address, newValue } = change;
-          const idx = this.addressToIndex({ row: address.row, column: address.col });
+          const idx = addressToIndex(this._sheet, { row: address.row, column: address.col });
           this._sheet.cells[idx] = { value: newValue };
         }
       }
@@ -278,7 +277,7 @@ export class SheetModel {
    * Get value from sheet.
    */
   getCellValue(cell: CellAddress): CellScalarValue {
-    const idx = this.addressToIndex(cell);
+    const idx = addressToIndex(this._sheet, cell);
     return this._sheet.cells[idx]?.value ?? null;
   }
 
@@ -356,7 +355,7 @@ export class SheetModel {
     ]);
 
     // Insert into sheet.
-    const idx = this.addressToIndex(cell);
+    const idx = addressToIndex(this._sheet, cell);
     if (value === undefined || value === null) {
       delete this._sheet.cells[idx];
     } else {
@@ -426,39 +425,6 @@ export class SheetModel {
   // Indices.
   //
 
-  /**
-   * E.g., "A1" => "x1@y1".
-   */
-  addressToIndex(cell: CellAddress): CellIndex {
-    return `${this._sheet.columns[cell.column]}@${this._sheet.rows[cell.row]}`;
-  }
-
-  /**
-   * E.g., "x1@y1" => "A1".
-   */
-  addressFromIndex(idx: CellIndex): CellAddress {
-    const [column, row] = idx.split('@');
-    return {
-      column: this._sheet.columns.indexOf(column),
-      row: this._sheet.rows.indexOf(row),
-    };
-  }
-
-  /**
-   * E.g., "A1:B2" => "x1@y1:x2@y2".
-   */
-  rangeToIndex(range: CellRange): string {
-    return [range.from, range.to ?? range.from].map((cell) => this.addressToIndex(cell)).join(':');
-  }
-
-  /**
-   * E.g., "x1@y1:x2@y2" => "A1:B2".
-   */
-  rangeFromIndex(idx: string): CellRange {
-    const [from, to] = idx.split(':').map((idx) => this.addressFromIndex(idx));
-    return { from, to };
-  }
-
   /**
    * E.g., "HELLO()" => "EDGE("HELLO")".
    */
@@ -508,7 +474,7 @@ export class SheetModel {
   mapFormulaRefsToIndices(formula: string): string {
     invariant(formula.charAt(0) === '=');
     return formula.replace(/([a-zA-Z]+)([0-9]+)/g, (match) => {
-      return this.addressToIndex(addressFromA1Notation(match));
+      return addressToIndex(this._sheet, addressFromA1Notation(match));
     });
   }
 
@@ -518,7 +484,7 @@ export class SheetModel {
   mapFormulaIndicesToRefs(formula: string): string {
     invariant(formula.charAt(0) === '=');
     return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
-      return addressToA1Notation(this.addressFromIndex(idx));
+      return addressToA1Notation(addressFromIndex(this._sheet, idx));
     });
   }
 

package/src/model/types.test.ts

@@ -3,8 +3,7 @@
 //
 
 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';
 

package/src/model/util.ts

@@ -4,6 +4,9 @@
 
 import { randomBytes } from '@dxos/crypto';
 
+import { type CellRange, type CellAddress } from '.';
+import { type SheetType } from '../types';
+
 // TODO(burdon): Factor out from dxos/protocols to new common package.
 export class ApiError extends Error {}
 export class ReadonlyException extends ApiError {}
@@ -25,6 +28,39 @@ export const createIndex = (length = 8): string => {
 
 export const createIndices = (length: number): string[] => Array.from({ length }).map(() => createIndex());
 
+/**
+ * E.g., "A1" => "CA2@CB3".
+ */
+export const addressToIndex = (sheet: SheetType, cell: CellAddress): string => {
+  return `${sheet.columns[cell.column]}@${sheet.rows[cell.row]}`;
+};
+
+/**
+ * E.g., "CA2@CB3" => "A1".
+ */
+export const addressFromIndex = (sheet: SheetType, idx: string): CellAddress => {
+  const [column, row] = idx.split('@');
+  return {
+    column: 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 };
+};
+
 // 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[] => {
@@ -34,3 +70,34 @@ export const pickSome = <T>(values: T[], n = 1): T[] => {
   }
   return Array.from(result.values());
 };
+
+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);
+    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, column: columnA } = addressFromIndex(sheet, indexA);
+  const { row: rowB, column: columnB } = addressFromIndex(sheet, indexB);
+
+  // Sort by row first, then by column.
+  if (rowA !== rowB) {
+    return rowA - rowB;
+  } else {
+    return columnA - columnB;
+  }
+};

package/src/translations.ts

@@ -16,7 +16,12 @@ export default [
         'toolbar left label': 'Align left',
         'toolbar left center': 'Align center',
         'toolbar left right': 'Align right',
+        'selection overlaps existing comment label': 'Selected cell already has a comment',
+        'comment label': 'Add comment',
+        'comment ranges not supported label': 'Commenting on ranges is not yet supported',
+        'no cursor label': 'Select a cell to comment',
+        'open comment for sheet cell': 'View comments for cell',
       },
     },
   },
-];
+] as const;

package/src/types.ts

@@ -9,8 +9,9 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
-import { create, S, TypedObject } from '@dxos/echo-schema';
+import { create, ref, S, TypedObject } from '@dxos/echo-schema';
 import { type SchemaProvides } from '@dxos/plugin-client';
+import { ThreadType } from '@dxos/plugin-space/types';
 import { type StackProvides } from '@dxos/plugin-stack';
 
 import { SHEET_PLUGIN } from './meta';
@@ -21,13 +22,24 @@ export enum SheetAction {
   CREATE = `${SHEET_ACTION}/create`,
 }
 
+// TODO(Zan): Move this to the plugin-space plugin or another common location
+// when we implement comments in sheets.
+// This is currently duplicated in a few places.
+type ThreadProvides<T> = {
+  thread: {
+    predicate: (obj: any) => obj is T;
+    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
+  };
+};
+
 export type SheetPluginProvides = SurfaceProvides &
   IntentResolverProvides &
   GraphBuilderProvides &
   MetadataRecordsProvides &
   TranslationsProvides &
   SchemaProvides &
-  StackProvides;
+  StackProvides &
+  ThreadProvides<SheetType>;
 
 export type CellScalarValue = number | string | boolean | null;
 
@@ -105,8 +117,19 @@ export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType'
 
   // Cell formatting referenced by indexed range.
   formatting: S.mutable(S.Record(S.String, S.mutable(Formatting))),
+
+  // Threads associated with the sheet
+  threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),
 }) {}
 
 // TODO(burdon): Fix defaults.
 export const createSheet = (title?: string): SheetType =>
-  create(SheetType, { title, cells: {}, rows: [], columns: [], rowMeta: {}, columnMeta: {}, formatting: {} });
+  create(SheetType, {
+    title,
+    cells: {},
+    rows: [],
+    columns: [],
+    rowMeta: {},
+    columnMeta: {},
+    formatting: {},
+  });