@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-staging.3e2eaca

package/src/components/SheetContext/SheetContext.tsx

@@ -2,16 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { Grid, useGridContext, type GridScopedProps, type GridEditing } from '@dxos/react-ui-grid';
-
-import { type CellAddress, type CellRange } from '../../defs';
-import { type ComputeGraph } from '../../graph';
-import { useSheetModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
-import { type SheetModel, createDecorations } from '../../model';
+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 = {
@@ -25,17 +30,19 @@ export type SheetContextValue = {
   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;
-
-  // Decorations.
-  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextValue | undefined>(undefined);
@@ -54,15 +61,29 @@ const SheetProviderImpl = ({
 }: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
-  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
-  const decorations = useMemo(() => createDecorations(), []);
-
-  // TODO(thure): Reconnect these.
-  const [cursor, setCursor] = useState<CellAddress>();
-  const [range, setRange] = useState<CellRange>();
-
-  useSelectThreadOnCellFocus(model, cursor);
-  useThreadDecorations(model, decorations);
+  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
@@ -75,9 +96,11 @@ const SheetProviderImpl = ({
         setCursor,
         range,
         setRange,
+        cursorFallbackRange,
+        activeRefs,
+        setActiveRefs,
         // TODO(burdon): Change to event.
         onInfo,
-        decorations,
       }}
     >
       {children}

package/src/components/Toolbar/Toolbar.tsx

@@ -3,32 +3,36 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import {
   Icon,
+  type ThemedClassName,
   Toolbar as NaturalToolbar,
-  useTranslation,
-  Tooltip,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarToggleProps as NaturalToolbarToggleProps,
-  type ThemedClassName,
+  Tooltip,
+  useTranslation,
 } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
 import {
-  addressToIndex,
+  alignKey,
   type AlignKey,
   type AlignValue,
   type CommentKey,
   type CommentValue,
   inRange,
+  rangeFromIndex,
+  rangeToIndex,
+  styleKey,
   type StyleKey,
   type StyleValue,
 } from '../../defs';
+import { completeCellRangeToThreadCursor } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
 import { type SheetType } from '../../types';
 import { useSheetContext } from '../SheetContext';
@@ -86,10 +90,11 @@ type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: strin
 type StyleAction = { key: StyleKey; value: StyleValue };
 
 export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+export type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };
 
 export type ToolbarActionType = ToolbarAction['key'];
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -97,53 +102,57 @@ export type ToolbarProps = ThemedClassName<
   }>
 >;
 
-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';
+const [ToolbarContextProvider, useToolbarContext] = createContext<{
+  onAction: (action: ToolbarActionAnnotated) => void;
+}>('Toolbar');
 
 type Range = SheetType['ranges'][number];
 
 const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
-  const { id, model, range, cursor } = useSheetContext();
+  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
   const { hasAttention } = useAttention(id);
   const dispatch = useIntentDispatcher();
 
-  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
   const handleAction = useCallback(
-    (action: ToolbarAction) => {
+    (action: ToolbarActionAnnotated) => {
       switch (action.key) {
-        case 'align':
-          if (cursor) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(range.range, cursor),
-            );
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+        case 'alignment':
+          if (cursorFallbackRange) {
+            const index =
+              model.sheet.ranges?.findIndex(
+                (range) =>
+                  range.key === action.key &&
+                  inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+              ) ?? -1;
             const nextRangeEntity = {
-              range: nextRange as Range['range'],
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
               value: action.value,
             };
             if (index < 0) {
               model.sheet.ranges?.push(nextRangeEntity);
+            } else if (model.sheet.ranges![index].value === action.value) {
+              model.sheet.ranges?.splice(index, 1);
             } 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 (action.unset) {
+            const index = model.sheet.ranges?.findIndex(
+              (range) =>
+                range.key === action.key &&
+                cursorFallbackRange &&
+                inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),
+            );
             if (index >= 0) {
               model.sheet.ranges?.splice(index, 1);
             }
-          } else if (range || cursor) {
-            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };
+          } else if (cursorFallbackRange) {
             model.sheet.ranges?.push({
-              range: nextRange as Range['range'],
+              range: rangeToIndex(model.sheet, cursorFallbackRange),
               key: action.key,
               value: action.value,
             });
@@ -151,30 +160,25 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
           break;
         case 'comment': {
           // TODO(Zan): We shouldn't hardcode the action ID.
-          void dispatch({
-            action: 'dxos.org/plugin/thread/action/create',
-            data: {
-              cursor: action.value,
-              name: action.cellContent,
-              subject: model.sheet,
-            },
-          });
+          if (cursorFallbackRange) {
+            void dispatch({
+              action: 'dxos.org/plugin/thread/action/create',
+              data: {
+                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
+                name: action.cellContent,
+                subject: model.sheet,
+              },
+            });
+          }
         }
       }
     },
-    [model.sheet, range, cursor, dispatch],
+    [model.sheet, cursorFallbackRange, cursor, dispatch],
   );
 
   return (
     <ToolbarContextProvider onAction={handleAction}>
-      <NaturalToolbar.Root
-        classNames={[
-          ...(role === 'section'
-            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
-            : ['attention-surface']),
-          classNames,
-        ]}
-      >
+      <NaturalToolbar.Root classNames={['pli-0.5', !hasAttention && 'opacity-20', classNames]}>
         {children}
       </NaturalToolbar.Root>
     </ToolbarContextProvider>
@@ -204,48 +208,55 @@ const Alignment = () => {
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const value = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const value = cursor
+    ? model.sheet.ranges?.findLast(
+        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+      )?.value
+    : undefined;
 
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      value={value}
-      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}
+      value={
+        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
+        value ?? 'never'
+      }
+      onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
     >
       {alignmentOptions.map(({ value, icon }) => (
         <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${alignKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular' },
+  { value: 'softwrap', icon: 'ph--paragraph--regular' },
+];
 
 const Styles = () => {
-  const { cursor, model } = useSheetContext();
+  const { cursorFallbackRange, model } = useSheetContext();
   const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const activeValues = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))
-            .reduce((acc, { value }) => {
-              acc.add(value);
-              return acc;
-            }, new Set())
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const activeValues = cursorFallbackRange
+    ? model.sheet.ranges
+        ?.filter(
+          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
+        )
+        .reduce((acc, { value }) => {
+          acc.add(value);
+          return acc;
+        }, new Set())
+    : undefined;
 
   return (
     <>
@@ -254,10 +265,15 @@ const Styles = () => {
           itemType='toggle'
           key={value}
           pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
+          onPressedChange={(nextPressed: boolean) => {
+            onAction?.({ key: 'style', value, unset: !nextPressed });
+          }}
           icon={icon}
         >
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${styleKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </>
@@ -270,29 +286,25 @@ const Styles = () => {
 
 const Actions = () => {
   const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // TODO(thure): Can this O(n) call be memoized?
   const overlapsCommentAnchor = (model.sheet.threads ?? [])
     .filter(nonNullable)
     .filter((thread) => thread.status !== 'resolved')
     .some((thread) => {
-      if (!cursor) {
+      if (!cursorFallbackRange) {
         return false;
       }
-      return addressToIndex(model.sheet, cursor) === thread.anchor;
+      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
     });
 
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-
-  const tooltipLabelKey = !hasCursor
+  const tooltipLabelKey = !cursor
     ? 'no cursor label'
     : overlapsCommentAnchor
       ? 'selection overlaps existing comment label'
-      : range
-        ? 'comment ranges not supported label'
-        : 'comment label';
+      : 'comment label';
 
   return (
     <ToolbarItem
@@ -301,16 +313,16 @@ const Actions = () => {
       icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
-        if (!cursor) {
+        if (!cursorFallbackRange) {
           return;
         }
         return onAction?.({
           key: 'comment',
-          value: addressToIndex(model.sheet, cursor),
-          cellContent: model.getCellText(cursor),
+          value: rangeToIndex(model.sheet, cursorFallbackRange),
+          cellContent: model.getCellText(cursorFallbackRange.from),
         });
       }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      disabled={!cursorFallbackRange || overlapsCommentAnchor}
     >
       {t(tooltipLabelKey)}
     </ToolbarItem>

package/src/components/index.ts

@@ -6,6 +6,7 @@ import { lazy } from 'react';
 
 export * from './ComputeGraph';
 export * from './GridSheet';
+export * from './RangeList';
 export * from './SheetContext';
 
 export const SheetContainer = lazy(() => import('./SheetContainer'));

package/src/{graph → compute-graph}/compute-graph.stories.tsx

@@ -15,8 +15,9 @@ import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { testFunctionPlugins } from './testing';
+import { useComputeGraph } from '../components';
 import { createSheet } from '../defs';
-import { useComputeGraph, useSheetModel } from '../hooks';
+import { useSheetModel } from '../model';
 import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 

package/src/{graph → compute-graph}/compute-graph.ts

@@ -6,6 +6,7 @@ import { type Listeners } from 'hyperformula/typings/Emitter';
 
 import { Event } from '@dxos/async';
 import { type Space, Filter, fullyQualifiedId } from '@dxos/client/echo';
+import { FQ_ID_LENGTH } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -24,8 +25,9 @@ import {
   EDGE_FUNCTION_NAME,
 } from './functions';
 
-// TODO(wittjosiah): Factor out.
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 1 (separator) + 26 (object id).
+// TODO(burdon): Factor out compute-graph.
+
+const UNKNOWN_BINDING = '__UNKNOWN__';
 
 // TODO(burdon): Factory.
 // export type ComputeNodeGenerator = <T>(obj: T) => ComputeNode;
@@ -42,7 +44,7 @@ export const parseSheetName = (name: string): Partial<ObjectRef> => {
   return id ? { type, id } : { id: type };
 };
 
-export type ComputeGraphEvent = 'functionsUpdated';
+export type ComputeGraphEvent = 'functionsUpdated' | 'valuesUpdated';
 
 /**
  * Per-space compute and dependency graph.
@@ -62,7 +64,7 @@ export class ComputeGraph extends Resource {
   public readonly update = new Event<{ type: ComputeGraphEvent }>();
 
   // The context is passed to all functions.
-  public readonly context = new FunctionContext(this._hf, this._space, this._options);
+  public readonly context: FunctionContext;
 
   constructor(
     private readonly _hf: HyperFormula,
@@ -70,7 +72,17 @@ export class ComputeGraph extends Resource {
     private readonly _options?: Partial<FunctionContextOptions>,
   ) {
     super();
+
+    const contextOptions = {
+      ...this._options,
+      onUpdate: (update) => {
+        this._options?.onUpdate?.(update);
+        this.update.emit({ type: 'valuesUpdated' });
+      },
+    } satisfies Partial<FunctionContextOptions>;
+    this.context = new FunctionContext(this._hf, this._space, contextOptions);
     this._hf.updateConfig({ context: this.context });
+
     // TODO(burdon): If debounce then aggregate changes.
     const onValuesUpdate: Listeners['valuesUpdated'] = (changes) => {
       for (const change of changes) {
@@ -116,7 +128,7 @@ export class ComputeGraph extends Resource {
   getOrCreateNode(name: string): ComputeNode {
     invariant(name.length);
     if (!this._hf.doesSheetExist(name)) {
-      log.info('created node', { space: this._space?.id, sheet: name });
+      log('created node', { space: this._space?.id, sheet: name });
       this._hf.addSheet(name);
     }
 
@@ -130,7 +142,7 @@ export class ComputeGraph extends Resource {
 
   /**
    * Map bound value to custom function invocation.
-   * E.g., "HELLO(...args)" => "EDGE("HELLO", ...args)".
+   * E.g., "HELLO(...args)" => "DX("HELLO", ...args)".
    */
   mapFormulaToNative(formula: string): string {
     return (
@@ -206,9 +218,9 @@ export class ComputeGraph extends Resource {
    * E.g., spaceId:objectId() => HELLO()
    */
   mapFunctionBindingFromId(formula: string) {
-    return formula.replace(/(\w+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
+    const binding = formula.replace(/(\w+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
       const id = `${spaceId}:${objectId}`;
-      if (id.length !== OBJECT_ID_LENGTH) {
+      if (id.length !== FQ_ID_LENGTH) {
         return match;
       }
 
@@ -216,9 +228,15 @@ export class ComputeGraph extends Resource {
       if (fn?.binding) {
         return `${fn.binding}(${args})`;
       } else {
-        return match;
+        return UNKNOWN_BINDING;
       }
     });
+
+    if (binding.startsWith(`=${UNKNOWN_BINDING}`)) {
+      return undefined;
+    } else {
+      return binding;
+    }
   }
 
   protected override async _open() {

package/src/{graph → compute-graph}/compute-node.ts

@@ -10,7 +10,7 @@ import { Resource } from '@dxos/context';
 
 import { DetailedCellError } from '#hyperformula';
 import { type ComputeGraph } from './compute-graph';
-import { type CellAddress } from '../defs';
+import { type CellAddress, isFormula } from '../defs';
 import { type CellScalarValue } from '../types';
 
 export type ComputeNodeEvent = {
@@ -50,8 +50,7 @@ export class ComputeNode extends Resource {
   }
 
   setValue(cell: CellAddress, value: CellScalarValue) {
-    const mappedValue =
-      typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value;
+    const mappedValue = isFormula(value) ? this._graph.mapFormulaToNative(value) : value;
     this._graph.hf.setCellContents({ sheet: this.sheetId, row: cell.row, col: cell.col }, [[mappedValue]]);
   }
 

package/src/{graph → compute-graph}/functions/async-function.ts

@@ -83,6 +83,7 @@ export class FunctionContext {
   ) {
     this._options = defaultsDeep(_options ?? {}, defaultFunctionContextOptions);
     this._onUpdate = debounce((update) => {
+      log('update', update);
       // TODO(burdon): Better way to trigger recalculation? (NOTE: rebuildAndRecalculate resets the undo history.)
       this._hf.resumeEvaluation();
       this._options.onUpdate?.(update);

package/src/{graph → compute-graph}/functions/edge-function.ts

@@ -44,7 +44,7 @@ export class EdgeFunctionPlugin extends AsyncFunctionPlugin {
 
         if (subscribe) {
           const unsubscribe = effect(() => {
-            log.info('function changed', { fn });
+            log('function changed', { fn });
             const _ = fn?.version;
 
             // TODO(wittjosiah): `ttl` should be 0 to force a recalculation when a new version is deployed.
@@ -56,13 +56,15 @@ export class EdgeFunctionPlugin extends AsyncFunctionPlugin {
         }
 
         const path = getUserFunctionUrlInMetadata(getMeta(fn));
-        const result = await fetch(`${this.context.remoteFunctionUrl}${path}`, {
+        const response = await fetch(`${this.context.remoteFunctionUrl}${path}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ args: args.filter(nonNullable) }),
         });
+        const result = await response.text();
+        log('function executed', { result });
 
-        return await result.text();
+        return result;
       };
 
     return this.runAsyncFunction(ast, state, handler(true), { ttl: FUNCTION_TTL });

package/src/defs/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './sheet-range-types';
 export * from './types';
 export * from './util';
-export * from './sheet-range-types';

package/src/defs/sheet-range-types.ts

@@ -6,7 +6,7 @@ import { type ClassNameValue } from '@dxos/react-ui';
 
 import { type SheetType } from '../types';
 
-export const alignKey = 'align';
+export const alignKey = 'alignment';
 export type AlignKey = typeof alignKey;
 export type AlignValue = 'start' | 'center' | 'end' | 'unset';
 
@@ -16,11 +16,12 @@ export type CommentValue = string;
 
 export const styleKey = 'style';
 export type StyleKey = typeof styleKey;
-export type StyleValue = 'highlight' | 'unset';
+export type StyleValue = 'highlight' | 'softwrap';
 
+// TODO(burdon): Reconcile with plugin-table.
 export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number]): ClassNameValue => {
   switch (key) {
-    case 'align':
+    case alignKey:
       switch (value) {
         case 'start':
           return 'text-start';
@@ -31,12 +32,14 @@ export const cellClassNameForRange = ({ key, value }: SheetType['ranges'][number
         default:
           return undefined;
       }
-    case 'comment':
+    case commentKey:
       return 'bg-gridComment';
-    case 'style':
+    case styleKey:
       switch (value) {
         case 'highlight':
-          return 'bg-gridHighlight';
+          return '!bg-gridHighlight';
+        case 'softwrap':
+          return '!whitespace-normal';
         default:
           return undefined;
       }