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

package/src/components/Sheet/threads.tsx

@@ -0,0 +1,201 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+import React, { 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 { SHEET_PLUGIN } from '../../meta';
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../model';
+
+const CommentIndicator = () => {
+  return (
+    <div
+      role='none'
+      className='absolute top-0 right-0 w-0 h-0 border-t-8 border-l-8 border-t-cmCommentSurface border-l-transparent'
+    />
+  );
+};
+
+const ThreadedCellWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const dispatch = useIntentDispatcher();
+  const [isHovered, setIsHovered] = React.useState(true);
+  const { t } = useTranslation(SHEET_PLUGIN);
+
+  const handleClick = React.useCallback(
+    (_event: React.MouseEvent) => {
+      void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'complementary', state: true } });
+    },
+    [dispatch],
+  );
+
+  return (
+    <div
+      role='none'
+      className={mx('relative h-full is-full')}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      <CommentIndicator />
+      {isHovered && (
+        <div className='absolute inset-0 flex items-center justify-end pr-1'>
+          <button
+            className='ch-button text-xs min-bs-0 p-1'
+            onClick={handleClick}
+            aria-label={t('open comment for sheet cell')}
+          >
+            <Icon icon='ph--chat--regular' aria-hidden={true} />
+          </button>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
+  return {
+    type: 'comment',
+    cellIndex,
+    decorate: (props) => <ThreadedCellWrapper {...props} />,
+  };
+};
+
+const useUpdateCursorOnThreadSelection = () => {
+  const { setCursor, model } = 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;
+          }
+
+          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+          const cellAddress = addressFromIndex(model.sheet, data.cursor);
+          setCursor(cellAddress);
+        }
+      }
+    },
+    [model.sheet, setCursor],
+  );
+
+  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
+};
+
+const useSelectThreadOnCursorChange = () => {
+  const { cursor, model } = useSheetContext();
+  const dispatch = useIntentDispatcher();
+
+  const activeThreads = useMemo(
+    () =>
+      model.sheet.threads?.filter(
+        (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
+      ) ?? [],
+    [JSON.stringify(model.sheet.threads)],
+  );
+
+  const activeThreadAddresses = useMemo(
+    () =>
+      activeThreads
+        .map((thread) => thread.anchor)
+        .filter((anchor): anchor is NonNullable<typeof anchor> => anchor !== undefined)
+        .map((anchor) => addressFromIndex(model.sheet, anchor)),
+    [activeThreads, model.sheet],
+  );
+
+  const selectClosestThread = useCallback(
+    (cellAddress: CellAddress) => {
+      if (!cellAddress || !activeThreads) {
+        return;
+      }
+
+      const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
+      if (closestThreadAnchor) {
+        const closestThread = activeThreads.find(
+          (thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor),
+        );
+
+        if (closestThread) {
+          void dispatch([
+            { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
+          ]);
+        }
+      }
+    },
+    [dispatch, activeThreads, activeThreadAddresses, model.sheet],
+  );
+
+  const debounced = useMemo(() => {
+    return debounce((cursor: CellAddress) => requestAnimationFrame(() => selectClosestThread(cursor)), 50);
+  }, [selectClosestThread]);
+
+  useEffect(() => {
+    if (!cursor) {
+      return;
+    }
+    debounced(cursor);
+  }, [cursor, selectClosestThread]);
+};
+
+const useThreadDecorations = () => {
+  const { decorations, model } = useSheetContext();
+  const sheet = useMemo(() => model.sheet, [model.sheet]);
+  const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
+
+  useEffect(() => {
+    const unsubscribe = effect(() => {
+      const activeThreadAnchors = new Set<string>();
+      if (!sheet.threads) {
+        return;
+      }
+
+      // Process active threads
+      for (const thread of sheet.threads) {
+        if (!thread || thread.anchor === undefined || thread.status === 'resolved') {
+          continue;
+        }
+
+        activeThreadAnchors.add(thread.anchor);
+        const index = thread.anchor;
+
+        // Add decoration only if it doesn't already exist
+        const existingDecorations = decorations.getDecorationsForCell(index);
+        if (!existingDecorations || !existingDecorations.some((d) => d.type === 'comment')) {
+          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
+        }
+      }
+
+      // Remove decorations for resolved or deleted threads
+      for (const decoration of decorations.getAllDecorations()) {
+        if (decoration.type !== 'comment') {
+          continue;
+        }
+
+        if (!activeThreadAnchors.has(decoration.cellIndex)) {
+          decorations.removeDecoration(decoration.cellIndex, 'comment');
+        }
+      }
+    });
+    return () => unsubscribe();
+  });
+};
+
+export const useThreads = () => {
+  useUpdateCursorOnThreadSelection();
+  useSelectThreadOnCursorChange();
+  useThreadDecorations();
+};

package/src/components/SheetContainer.tsx

@@ -2,32 +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,
-  coordinate = { part: 'main', entryId: '' },
-  remoteFunctionUrl,
-}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
-    <div
-      role='none'
-      className={mx(
-        'flex',
-        role === 'article' && 'row-span-2', // TODO(burdon): Container with toolbar.
-        role === 'section' && 'aspect-square border-y border-is border-separator',
-        coordinate.part !== 'solo' && '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.stories.tsx

@@ -6,29 +6,24 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Tooltip } from '@dxos/react-ui';
 import { textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import translations from '../../translations';
 
 const Story = () => {
   return (
-    <Tooltip.Provider>
-      <div role='none' className='fixed inset-0 flex flex-col'>
-        <Toolbar.Root classNames={textBlockWidth}>
-          <Toolbar.Alignment />
-        </Toolbar.Root>
-      </div>
-    </Tooltip.Provider>
+    <Toolbar.Root classNames={textBlockWidth}>
+      <Toolbar.Alignment />
+    </Toolbar.Root>
   );
 };
 
 export default {
   title: 'plugin-sheet/Toolbar',
   component: Toolbar,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
   render: (args: any) => <Story {...args} />,
 };

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,13 +17,12 @@ 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';
 
-// TODO(burdon): Defaults or Max?
-const DEFAULT_ROWS = 500;
-const DEFAULT_COLUMNS = 26 * 2;
+const DEFAULT_ROWS = 100;
+const DEFAULT_COLUMNS = 26;
 
 export type CellIndex = string;
 
@@ -187,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)));
       }
@@ -221,7 +220,6 @@ export class SheetModel {
   // Undoable actions.
   // TODO(burdon): Group undoable methods; consistently update hf/sheet.
   //
-
   /**
    * Clear range of values.
    */
@@ -230,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];
     });
   }
@@ -238,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];
     });
   }
@@ -253,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 };
         }
       }
@@ -279,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;
   }
 
@@ -357,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 {
@@ -427,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")".
    */
@@ -509,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));
     });
   }
 
@@ -519,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';