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

package/src/components/Sheet/threads.tsx

@@ -0,0 +1,205 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+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 { type Decoration } from './decorations';
+import { useSheetContext } from './sheet-context';
+import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../../defs';
+import { SHEET_PLUGIN } from '../../meta';
+
+// TODO(burdon): Move into folder; split hooks.
+
+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 = ({ children }: PropsWithChildren) => {
+  const dispatch = useIntentDispatcher();
+  const [isHovered, setIsHovered] = React.useState(false);
+  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='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} />,
+  };
+};
+
+// TODO(burdon): Factor out hooks.
+
+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 }: 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',
-      )}
-    >
-      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
-        <Sheet.Main />
+    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
+      <Sheet.Root space={space} sheet={sheet}>
+        <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 { 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;
 };