@dxos/plugin-sheet 0.6.13 → 0.6.14-staging.9e90729

package/src/components/SheetContext/SheetContext.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import {
+  Grid,
+  type GridContentProps,
+  type GridEditing,
+  type GridScopedProps,
+  useGridContext,
+} from '@dxos/react-ui-grid';
+
+import { type ComputeGraph } from '../../compute-graph';
+import { type CellAddress, type CellRange, type CompleteCellRange } from '../../defs';
+import { type SheetModel, useSheetModel } from '../../model';
+import { type SheetType } from '../../types';
+
+export type SheetContextValue = {
+  id: string;
+
+  model: SheetModel;
+
+  // Cursor state.
+  // TODO(burdon): Cursor and range should use indices.
+  cursor?: CellAddress;
+  setCursor: (cell: CellAddress | undefined) => void;
+  range?: CellRange;
+  setRange: (range: CellRange | undefined) => void;
+  cursorFallbackRange?: CompleteCellRange;
+
+  // Editing state (undefined if not editing).
+  editing: GridEditing;
+  setEditing: (editing: GridEditing) => void;
+
+  // Active refs
+  activeRefs: GridContentProps['activeRefs'];
+  setActiveRefs: (activeRefs: GridContentProps['activeRefs']) => void;
+
+  // Events.
+  // TODO(burdon): Generalize.
+  onInfo?: () => void;
+};
+
+const SheetContext = createContext<SheetContextValue | undefined>(undefined);
+
+export const useSheetContext = (): SheetContextValue => {
+  const context = useContext(SheetContext);
+  invariant(context);
+  return context;
+};
+
+const SheetProviderImpl = ({
+  model,
+  onInfo,
+  children,
+  __gridScope,
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
+  const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
+
+  const [cursor, setCursorInternal] = useState<CellAddress>();
+  const [range, setRangeInternal] = useState<CellRange>();
+  const [cursorFallbackRange, setCursorFallbackRange] = useState<CompleteCellRange>();
+  const [activeRefs, setActiveRefs] = useState<GridContentProps['activeRefs']>('');
+
+  const setCursor = useCallback(
+    (nextCursor?: CellAddress) => {
+      setCursorInternal(nextCursor);
+      setCursorFallbackRange(
+        range?.to ? (range as CompleteCellRange) : nextCursor ? { from: nextCursor!, to: nextCursor! } : undefined,
+      );
+    },
+    [range],
+  );
+  const setRange = useCallback(
+    (nextRange?: CellRange) => {
+      setRangeInternal(nextRange);
+      setCursorFallbackRange(
+        nextRange?.to ? (nextRange as CompleteCellRange) : cursor ? { from: cursor!, to: cursor! } : undefined,
+      );
+    },
+    [cursor],
+  );
+
+  return (
+    <SheetContext.Provider
+      value={{
+        id,
+        model,
+        editing,
+        setEditing,
+        cursor,
+        setCursor,
+        range,
+        setRange,
+        cursorFallbackRange,
+        activeRefs,
+        setActiveRefs,
+        // TODO(burdon): Change to event.
+        onInfo,
+      }}
+    >
+      {children}
+    </SheetContext.Provider>
+  );
+};
+
+export type SheetProviderProps = {
+  graph: ComputeGraph;
+  sheet: SheetType;
+  readonly?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetProvider = ({ children, graph, sheet, readonly, onInfo }: PropsWithChildren<SheetProviderProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+
+  return !model ? null : (
+    <Grid.Root id={fullyQualifiedId(sheet)}>
+      <SheetProviderImpl model={model} onInfo={onInfo}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
+};

package/src/components/SheetContext/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './SheetContext';

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
 import { textBlockWidth } from '@dxos/react-ui-theme';
@@ -12,7 +13,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { Toolbar } from './Toolbar';
 import translations from '../../translations';
 
-const Story = () => {
+const DefaultStory = () => {
   return (
     <Toolbar.Root classNames={textBlockWidth}>
       <Toolbar.Alignment />
@@ -20,12 +21,14 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'plugin-sheet/Toolbar',
-  component: Toolbar,
+export const Default = {};
+
+const meta: Meta<typeof Toolbar.Root> = {
+  title: 'plugins/plugin-sheet/Toolbar',
+  component: Toolbar.Root,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
-  render: (args: any) => <Story {...args} />,
 };
 
-export const Default = {};
+export default meta;

package/src/components/Toolbar/Toolbar.tsx

@@ -2,167 +2,269 @@
 // Copyright 2024 DXOS.org
 //
 
-import {
-  type Icon,
-  Calendar,
-  ChatText,
-  CurrencyDollar,
-  Eraser,
-  HighlighterCircle,
-  TextAlignCenter,
-  TextAlignLeft,
-  TextAlignRight,
-} from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import {
-  DensityProvider,
-  ElevationProvider,
+  Icon,
   Toolbar as NaturalToolbar,
+  Tooltip,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleProps as NaturalToolbarToggleProps,
   type ThemedClassName,
   useTranslation,
 } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { nonNullable } from '@dxos/util';
 
-import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
+import {
+  type AlignKey,
+  type AlignValue,
+  type CommentKey,
+  type CommentValue,
+  inRange,
+  rangeFromIndex,
+  rangeToIndex,
+  type StyleKey,
+  type StyleValue,
+} from '../../defs';
+import { completeCellRangeToThreadCursor } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
-import { type Formatting } from '../../types';
+import { type SheetType } from '../../types';
+import { useSheetContext } from '../SheetContext';
 
 //
-// Root
+// Buttons
 //
 
-export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
+const buttonStyles = 'min-bs-0 p-2';
+const tooltipProps = { side: 'bottom' as const, classNames: 'z-10' };
+
+const ToolbarSeparator = () => <div role='separator' className='grow' />;
+
+//
+// ToolbarItem
+//
 
-export type ToolbarAction = {
-  type: ToolbarActionType;
+type ToolbarItemProps =
+  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })
+  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })
+  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });
+
+export const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemProps) => {
+  const Invoker =
+    itemType === 'toggleGroupItem'
+      ? NaturalToolbar.ToggleGroupItem
+      : itemType === 'toggle'
+        ? NaturalToolbar.Toggle
+        : NaturalToolbar.Button;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        {/* TODO(thure): type the props spread better. */}
+        <Invoker variant='ghost' {...(props as any)} classNames={buttonStyles}>
+          <Icon icon={icon} size={5} />
+          <span className='sr-only'>{children}</span>
+        </Invoker>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
 };
 
-export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
+//
+// Root
+//
+
+type AlignAction = { key: AlignKey; value: AlignValue };
+type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };
+type StyleAction = { key: StyleKey; value: StyleValue };
+
+export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+
+export type ToolbarActionType = ToolbarAction['key'];
+
+export type ToolbarActionHandler = (action: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
+    role?: string;
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
+  'Toolbar',
+);
+
+// TODO(Zan): Factor out, copied this from MarkdownPlugin.
+const sectionToolbarLayout =
+  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
+
+type Range = SheetType['ranges'][number];
+
+const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
+  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
+  const { hasAttention } = useAttention(id);
+  const dispatch = useIntentDispatcher();
+
+  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
+  const handleAction = useCallback(
+    (action: ToolbarAction) => {
+      switch (action.key) {
+        case 'align':
+          if (cursor && cursorFallbackRange) {
+            const index = model.sheet.ranges?.findIndex(
+              (range) => range.key === action.key && inRange(rangeFromIndex(model.sheet, range.range), cursor),
+            );
+            const nextRangeEntity = {
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
+              key: action.key,
+              value: action.value,
+            };
+            if (index < 0) {
+              model.sheet.ranges?.push(nextRangeEntity);
+            } else {
+              model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+            }
+          }
+          break;
+        case 'style':
+          if (action.value === 'unset') {
+            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
+            if (index >= 0) {
+              model.sheet.ranges?.splice(index, 1);
+            }
+          } else if (cursorFallbackRange) {
+            model.sheet.ranges?.push({
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
+              key: action.key,
+              value: action.value,
+            });
+          }
+          break;
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          if (cursorFallbackRange) {
+            void dispatch({
+              action: 'dxos.org/plugin/thread/action/create',
+              data: {
+                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
+                name: action.cellContent,
+                subject: model.sheet,
+              },
+            });
+          }
+        }
+      }
+    },
+    [model.sheet, cursorFallbackRange, cursor, dispatch],
+  );
 
-const ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={onAction}>
-      <DensityProvider density='fine'>
-        <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
-            {children}
-          </NaturalToolbar.Root>
-        </ElevationProvider>
-      </DensityProvider>
+    <ToolbarContextProvider onAction={handleAction}>
+      <NaturalToolbar.Root
+        classNames={[
+          ...(role === 'section'
+            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
+            : ['attention-surface']),
+          classNames,
+        ]}
+      >
+        {children}
+      </NaturalToolbar.Root>
     </ToolbarContextProvider>
   );
 };
 
 // TODO(burdon): Generalize.
 // TODO(burdon): Detect and display current state.
-type ButtonProps = {
-  type: ToolbarActionType;
-  Icon: Icon;
-  getState: (state: Formatting) => boolean;
-  disabled?: (state: Formatting) => boolean;
+type ButtonProps<T> = {
+  value: T;
+  icon: string;
+  disabled?: (state: Range) => boolean;
 };
 
 //
 // Alignment
 //
 
-const formatOptions: ButtonProps[] = [
-  { type: 'date', Icon: Calendar, getState: (state) => false },
-  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },
-];
-
-const Format = () => {
-  const { onAction } = useToolbarContext('Format');
-  const { t } = useTranslation(SHEET_PLUGIN);
-
-  return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {formatOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
-        >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
-      ))}
-    </NaturalToolbar.ToggleGroup>
-  );
-};
-
-const alignmentOptions: ButtonProps[] = [
-  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },
-  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },
-  { type: 'right', Icon: TextAlignRight, getState: (state) => false },
+const alignmentOptions: ButtonProps<AlignValue>[] = [
+  { value: 'start', icon: 'ph--text-align-left--regular' },
+  { value: 'center', icon: 'ph--text-align-center--regular' },
+  { value: 'end', icon: 'ph--text-align-right--regular' },
 ];
 
 const Alignment = () => {
+  const { cursor, model } = useSheetContext();
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  const value = useMemo(
+    () =>
+      cursor
+        ? model.sheet.ranges?.find(
+            ({ range, key }) => key === 'alignment' && inRange(rangeFromIndex(model.sheet, range), cursor),
+          )?.value
+        : undefined,
+    [cursor, model.sheet.ranges],
+  );
+
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+      value={value}
+      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
     >
-      {alignmentOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
-        >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+      {alignmentOptions.map(({ value, icon }) => (
+        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps[] = [
-  { type: 'clear', Icon: Eraser, getState: (state) => false },
-  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },
-];
+const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
 
 const Styles = () => {
-  const { onAction } = useToolbarContext('Alignment');
+  const { cursor, model } = useSheetContext();
+  const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  const activeValues = useMemo(
+    () =>
+      cursor
+        ? model.sheet.ranges
+            ?.filter(({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursor))
+            .reduce((acc, { value }) => {
+              acc.add(value);
+              return acc;
+            }, new Set())
+        : undefined,
+    [cursor, model.sheet.ranges],
+  );
+
   return (
-    <NaturalToolbar.ToggleGroup
-      type='single'
-      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    >
-      {styleOptions.map(({ type, getState, Icon }) => (
-        <ToolbarToggleButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          // disabled={state?.blockType === 'codeblock'}
-          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type })}
+    <>
+      {styleOptions.map(({ value, icon }) => (
+        <ToolbarItem
+          itemType='toggle'
+          key={value}
+          pressed={activeValues?.has(value)}
+          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
+          icon={icon}
         >
-          {t(`toolbar ${type} label`)}
-        </ToolbarToggleButton>
+          {t(`toolbar ${value} label`)}
+        </ToolbarItem>
       ))}
-    </NaturalToolbar.ToggleGroup>
+    </>
   );
 };
 
@@ -171,18 +273,46 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  // const { onAction } = useToolbarContext('Actions');
+  const { onAction } = useToolbarContext('Actions');
+  const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
+
+  const overlapsCommentAnchor = (model.sheet.threads ?? [])
+    .filter(nonNullable)
+    .filter((thread) => thread.status !== 'resolved')
+    .some((thread) => {
+      if (!cursorFallbackRange) {
+        return false;
+      }
+      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
+    });
+
+  const tooltipLabelKey = !cursor
+    ? 'no cursor label'
+    : overlapsCommentAnchor
+      ? 'selection overlaps existing comment label'
+      : 'comment label';
+
   return (
-    <ToolbarButton
+    <ToolbarItem
+      itemType='button'
       value='comment'
-      Icon={ChatText}
+      icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
-      // onClick={() => onAction?.({ type: 'comment' })}
-      // disabled={!state || state.comment || !state.selection}
+      onClick={() => {
+        if (!(cursorFallbackRange && cursor)) {
+          return;
+        }
+        return onAction?.({
+          key: 'comment',
+          value: rangeToIndex(model.sheet, cursorFallbackRange),
+          cellContent: model.getCellText(cursor),
+        });
+      }}
+      disabled={!cursor || overlapsCommentAnchor}
     >
-      {t('comment label')}
-    </ToolbarButton>
+      {t(tooltipLabelKey)}
+    </ToolbarItem>
   );
 };
 
@@ -190,7 +320,6 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
-  Format,
   Styles,
   Actions,
 };

package/src/components/index.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
 export * from './ComputeGraph';
+export * from './GridSheet';
+export * from './RangeList';
+export * from './SheetContext';
 
-// Lazily load components for content surfaces.
-export const SheetContainer = React.lazy(() => import('./SheetContainer'));
+export const SheetContainer = lazy(() => import('./SheetContainer'));