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

package/src/components/Sheet/decorations.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { create } from '@dxos/echo-schema';
+
+export type Decoration = {
+  type: string;
+  /**
+   * A wrapping render function to encapsulate cell content. This function is applied between
+   * the cell's border and its padding/layout/content, allowing for custom rendering or
+   * additional elements to be inserted around the cell's main content.
+   */
+  decorate?: (props: { children: React.ReactNode }) => React.ReactNode;
+  /**
+   * An array of CSS class names to be applied to the content of the SheetCell.
+   * These classes can be used to style the cell's content independently of its structure.
+   */
+  classNames?: string[];
+  cellIndex: string;
+};
+
+export const createDecorations = () => {
+  // Reactive object to hold decorations
+  // TODO(Zan): Use CELL ID's to key the decoration map.
+  // TODO(Zan): Consider maintaining an index of decorations by type.
+  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
+
+  const addDecoration = (cellIndex: string, decorator: Decoration) => {
+    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
+  };
+
+  const removeDecoration = (cellIndex: string, type?: string) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+
+  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
+  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
+    return decorations[cellIndex];
+  };
+
+  const getAllDecorations = (): Decoration[] => {
+    const result: Decoration[] = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations,
+  } as const;
+};

package/src/components/Sheet/grid.ts

@@ -4,7 +4,7 @@
 
 import { type MouseEvent, useEffect, useState } from 'react';
 
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../model';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
 
 // export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 // export type Dimension = Pick<DOMRect, 'width' | 'height'>;
@@ -12,7 +12,7 @@ import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Not
 export type SizeMap = Record<string, number>;
 
 export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { column: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
 
 export const axisWidth = 'calc(var(--rail-size)-2px)';
 export const axisHeight = 34;
@@ -88,7 +88,7 @@ export const useGridLayout = ({
         const width = columnSizes?.[idx] ?? defaultWidth;
         const left = x;
         x += width - 1;
-        return { column: i, left, width };
+        return { col: i, left, width };
       }),
     );
   }, [columns, columnSizes]);

package/src/components/Sheet/nav.ts

@@ -5,11 +5,11 @@
 import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
 
 import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../model';
+import { type CellAddress, type CellRange, posEquals } from '../../defs';
 
 export type GridSize = {
   numRows: number;
-  numColumns: number;
+  numCols: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
+        if (opposite.col > 0) {
+          opposite.col -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
+        if (opposite.col < size.numCols - 1) {
+          opposite.col += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numColumns }: GridSize,
+  { numRows, numCols }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column > 0) {
-        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col > 0) {
+        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column < numColumns - 1) {
-        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col < numCols - 1) {
+        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, column: 0 };
+      return { row: 0, col: 0 };
     case 'End':
-      return { row: numRows - 1, column: numColumns - 1 };
+      return { row: numRows - 1, col: numCols - 1 };
   }
 };
 

package/src/components/Sheet/sheet-context.tsx

@@ -2,21 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type FunctionType } from '@dxos/plugin-script';
-import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 
-import { FormattingModel } from './formatting';
-import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
+import { createDecorations } from './decorations';
+import { type CellAddress, type CellRange } from '../../defs';
+import { useSheetModel, useFormattingModel } from '../../hooks';
+import { type FormattingModel, type SheetModel } from '../../model';
 import { type SheetType } from '../../types';
-import { type FunctionContextOptions } from '../ComputeGraph';
-// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
-import { useComputeGraph } from '../ComputeGraph/graph-context';
-
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 
 export type SheetContextType = {
   model: SheetModel;
@@ -36,6 +31,9 @@ export type SheetContextType = {
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
+
+  // Decorations.
+  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextType | null>(null);
@@ -50,49 +48,7 @@ export type SheetContextProps = {
   sheet: SheetType;
   space: Space;
   readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'> &
-  Partial<FunctionContextOptions>;
-
-/**
- * Map from binding to fully qualified ECHO ID.
- */
-const mapFormulaBindingToId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
-      if (defaultFunctions.find((fn) => fn.name === binding) || binding === 'EDGE') {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fn.binding === binding);
-      if (fn) {
-        return `${fullyQualifiedId(fn)}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
-
-/**
- * Map from fully qualified ECHO ID to binding.
- */
-const mapFormulaBindingFromId =
-  (functions: FunctionType[]) =>
-  (formula: string): string => {
-    return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
-      const id = `${spaceId}:${objectId}`;
-      if (id.length !== OBJECT_ID_LENGTH) {
-        return match;
-      }
-
-      const fn = functions.find((fn) => fullyQualifiedId(fn) === id);
-      if (fn?.binding) {
-        return `${fn.binding}(${args})`;
-      } else {
-        return match;
-      }
-    });
-  };
+} & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
@@ -100,36 +56,17 @@ export const SheetContextProvider = ({
   space,
   readonly,
   onInfo,
-  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const graph = useComputeGraph(space, options);
+  const model = useSheetModel(space, sheet, { readonly });
+  const formatting = useFormattingModel(model);
 
+  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
+  const decorations = useMemo(() => createDecorations(), []);
 
-  const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
-  useEffect(() => {
-    let model: SheetModel | undefined;
-    let formatting;
-    const t = setTimeout(async () => {
-      model = new SheetModel(graph, sheet, space, { readonly, mapFormulaBindingToId, mapFormulaBindingFromId });
-      await model.initialize();
-      formatting = new FormattingModel(model);
-      setModels([model, formatting]);
-    });
-
-    return () => {
-      clearTimeout(t);
-      void model?.destroy();
-    };
-  }, [graph, readonly]);
-
-  if (!model || !formatting) {
-    return null;
-  }
-
-  return (
+  return !model || !formatting ? null : (
     <SheetContext.Provider
       value={{
         model,
@@ -142,6 +79,7 @@ export const SheetContextProvider = ({
         setEditing,
         // TODO(burdon): Change to event.
         onInfo,
+        decorations,
       }}
     >
       {children}

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