@dxos/plugin-sheet 0.6.8-main.046e6cf

package/src/SheetPlugin.tsx

@@ -0,0 +1,150 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, GridNine } from '@phosphor-icons/react';
+import React from 'react';
+
+import {
+  NavigationAction,
+  parseIntentPlugin,
+  resolvePlugin,
+  type PluginDefinition,
+  type LayoutCoordinate,
+} from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
+import { parseClientPlugin } from '@dxos/plugin-client';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { getSpace, isEchoObject } from '@dxos/react-client/echo';
+
+import { ComputeGraphContextProvider, createComputeGraph, SheetContainer, type ComputeGraph } from './components';
+import meta, { SHEET_PLUGIN } from './meta';
+import { SheetModel } from './model';
+import translations from './translations';
+import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
+
+export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
+  const graphs = create<Record<string, ComputeGraph>>({});
+  const setGraph = (key: string, graph: ComputeGraph) => {
+    graphs[key] = graph;
+  };
+
+  return {
+    meta,
+    provides: {
+      context: ({ children }) => {
+        return (
+          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
+            {children}
+          </ComputeGraphContextProvider>
+        );
+      },
+      metadata: {
+        records: {
+          [SheetType.typename]: {
+            placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
+            icon: (props: IconProps) => <GridNine {...props} />,
+            iconSymbol: 'ph--grid-nine--regular',
+          },
+        },
+      },
+      translations,
+      echo: {
+        schema: [SheetType],
+      },
+      graph: {
+        builder: (plugins) => {
+          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!client || !dispatch) {
+            return [];
+          }
+
+          return createExtension({
+            id: SheetAction.CREATE,
+            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
+            actions: ({ node }) => {
+              const id = node.id.split('/').at(-1);
+              const [spaceId, objectId] = id?.split(':') ?? [];
+              const space = client.spaces.get().find((space) => space.id === spaceId);
+              const object = objectId && space?.db.getObjectById(objectId);
+              const target = objectId ? object : space;
+              if (!target) {
+                return;
+              }
+
+              return [
+                {
+                  id: `${SHEET_PLUGIN}/create/${node.id}`,
+                  data: async () => {
+                    await dispatch([
+                      { plugin: SHEET_PLUGIN, action: SheetAction.CREATE, data: { space } },
+                      { action: SpaceAction.ADD_OBJECT, data: { target } },
+                      { action: NavigationAction.OPEN },
+                    ]);
+                  },
+                  properties: {
+                    label: ['create sheet label', { ns: SHEET_PLUGIN }],
+                    icon: (props: IconProps) => <GridNine {...props} />,
+                    iconSymbol: 'ph--grid-nine--regular',
+                    testId: 'sheetPlugin.createObject',
+                  },
+                },
+              ];
+            },
+          });
+        },
+      },
+      stack: {
+        creators: [
+          {
+            id: 'create-stack-section-sheet',
+            testId: 'sheetPlugin.createSectionSpaceSheet',
+            type: ['plugin name', { ns: SHEET_PLUGIN }],
+            label: ['create sheet section label', { ns: SHEET_PLUGIN }],
+            icon: (props: any) => <GridNine {...props} />,
+            intent: [
+              {
+                plugin: SHEET_PLUGIN,
+                action: SheetAction.CREATE,
+              },
+            ],
+          },
+        ],
+      },
+      surface: {
+        component: ({ data, role = 'never' }) => {
+          if (!['article', 'section'].includes(role) || !isEchoObject(data.object)) {
+            return null;
+          }
+
+          const space = getSpace(data.object);
+          return space && data.object instanceof SheetType ? (
+            <SheetContainer
+              sheet={data.object}
+              space={space}
+              role={role}
+              coordinate={data.coordinate as LayoutCoordinate}
+            />
+          ) : null;
+        },
+      },
+      intent: {
+        resolver: async (intent) => {
+          switch (intent.action) {
+            case SheetAction.CREATE: {
+              const space = intent.data?.space;
+              const sheet = createSheet();
+              const graph = graphs[space.id] ?? createComputeGraph(space);
+              const model = new SheetModel(graph, sheet);
+              await model.initialize();
+              await model.destroy();
+              return { data: sheet };
+            }
+          }
+        },
+      },
+    },
+  };
+};

package/src/components/CellEditor/CellEditor.stories.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { HyperFormula } from 'hyperformula';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Client } from '@dxos/client';
+import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
+import { automerge } from '@dxos/react-ui-editor';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { CellEditor, type CellEditorProps } from './CellEditor';
+import { sheetExtension } from './extension';
+import { createSheet, SheetType } from '../../types';
+
+export default {
+  title: 'plugin-sheet/CellEditor',
+  component: CellEditor,
+  render: (args: StoryProps) => <Story {...args} />,
+  decorators: [withTheme],
+};
+
+type StoryProps = CellEditorProps;
+
+const Story = ({ value, ...props }: StoryProps) => {
+  const extension = useMemo(() => {
+    const functions = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    return [sheetExtension({ functions })];
+  }, []);
+
+  return <CellEditor {...props} value={value} extension={extension} />;
+};
+
+const AutomergeStory = ({ value, ...props }: StoryProps) => {
+  const cell = 'A1';
+  const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
+  useEffect(() => {
+    setTimeout(async () => {
+      const client = new Client();
+      await client.initialize();
+      await client.halo.createIdentity();
+      const space = await client.spaces.create();
+      client.addTypes([SheetType]);
+
+      const sheet = createSheet();
+      sheet.title = 'Test';
+      sheet.cells[cell] = { value };
+      space.db.add(sheet);
+      setObject(sheet);
+    });
+  }, [value]);
+
+  const extension = useMemo(() => {
+    if (!object) {
+      return [];
+    }
+
+    const functions = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3' }).getRegisteredFunctionNames();
+    const accessor = createDocAccessor(object, ['cells', cell, 'value']);
+    return [automerge(accessor), sheetExtension({ functions })];
+  }, [object]);
+
+  return <CellEditor {...props} value={value} extension={extension} />;
+};
+
+export const Default = {};
+
+export const AutoComplete = {
+  args: {
+    value: '=SUM',
+  },
+};
+
+export const Formatting = {
+  args: {
+    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
+  },
+};
+
+export const Automerge = {
+  render: (args: StoryProps) => <AutomergeStory {...args} />,
+  args: {
+    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
+  },
+};

package/src/components/CellEditor/CellEditor.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import React, { type DOMAttributes, type KeyboardEvent } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  type UseTextEditorProps,
+  createBasicExtensions,
+  createThemeExtensions,
+  preventNewline,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+
+export type EditorKeysProps = {
+  onClose: (value: string | undefined) => void;
+  onNav?: (value: string | undefined, ev: Pick<KeyboardEvent<HTMLInputElement>, 'key'>) => void;
+};
+
+export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
+  return keymap.of([
+    {
+      key: 'ArrowUp',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowUp' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowDown',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowDown' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowLeft',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowLeft' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'ArrowRight',
+      run: (editor) => {
+        const value = editor.state.doc.toString();
+        onNav?.(value, { key: 'ArrowRight' });
+        return !!onNav;
+      },
+    },
+    {
+      key: 'Enter',
+      run: (editor) => {
+        onClose(editor.state.doc.toString());
+        return true;
+      },
+    },
+    {
+      key: 'Escape',
+      run: () => {
+        onClose(undefined);
+        return true;
+      },
+    },
+  ]);
+};
+
+export type CellEditorProps = {
+  value?: string;
+  extension?: Extension;
+} & Pick<UseTextEditorProps, 'autoFocus'> &
+  Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
+
+export const CellEditor = ({ value, extension, autoFocus, onBlur }: CellEditorProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      autoFocus,
+      initialValue: value,
+      selection: { anchor: value?.length ?? 0 },
+      extensions: [
+        extension ?? [],
+        preventNewline,
+        EditorView.focusChangeEffect.of((_, focusing) => {
+          if (!focusing) {
+            onBlur?.({ type: 'blur' } as any);
+          }
+          return null;
+        }),
+        createBasicExtensions({ lineWrapping: false }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: {
+              className: 'flex w-full [&>.cm-scroller]:scrollbar-none',
+            },
+            content: {
+              className: '!px-2 !py-1',
+            },
+          },
+        }),
+      ],
+    };
+  }, [extension]);
+
+  return <div ref={parentRef} className='flex w-full' />;
+};

package/src/components/CellEditor/extension.test.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CompletionContext, type CompletionSource } from '@codemirror/autocomplete';
+import { EditorState } from '@codemirror/state';
+// @ts-ignore
+import { testTree } from '@lezer/generator/test';
+import { expect } from 'chai';
+import { spreadsheet } from 'codemirror-lang-spreadsheet';
+import { describe, test } from 'vitest';
+
+import { sheetExtension } from './extension';
+
+describe('formula parser', () => {
+  const {
+    language: { parser },
+  } = spreadsheet({});
+
+  // https://lezer-playground.vercel.app
+  // https://lezer.codemirror.net/docs/ref/#common.Parsing
+  test('parser', () => {
+    const result = parser.parse('SUM(A1)');
+    testTree(
+      result,
+      'Program(FunctionCall(Function,Arguments(Argument(Reference(ReferenceItem(CellToken)))),CloseParen))',
+    );
+  });
+
+  test('autocomplete', async () => {
+    const text = '=SUM';
+    const state = EditorState.create({
+      doc: text,
+      selection: { anchor: 0 },
+      extensions: sheetExtension({ functions: ['ABS', 'SUM'] }),
+    });
+
+    const [f] = state.languageDataAt<CompletionSource>('autocomplete', text.length);
+    const result = await f(new CompletionContext(state, text.length, true));
+    expect(result?.options).to.have.length(1);
+  });
+});

package/src/components/CellEditor/extension.ts

@@ -0,0 +1,286 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+  acceptCompletion,
+  autocompletion,
+  completionStatus,
+  startCompletion,
+} from '@codemirror/autocomplete';
+import { HighlightStyle, type Language, syntaxHighlighting } from '@codemirror/language';
+import { type Extension, Facet } from '@codemirror/state';
+import { type EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
+import { type SyntaxNode } from '@lezer/common';
+import { tags } from '@lezer/highlight';
+import { spreadsheet } from 'codemirror-lang-spreadsheet';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { functions as functionDefs } from './functions';
+
+/**
+ * https://codemirror.net/examples/styling
+ * https://lezer.codemirror.net/docs/ref/#highlight
+ * https://github.com/luizzappa/codemirror-lang-spreadsheet/blob/main/src/index.ts#L28 (mapping)
+ */
+// TODO(burdon): Define light/dark.
+const highlightStyles = HighlightStyle.define([
+  // Function.
+  {
+    tag: tags.name,
+    class: 'text-primary-500',
+  },
+  // Range.
+  {
+    tag: tags.tagName,
+    class: 'text-pink-500',
+  },
+  // Values.
+  {
+    tag: tags.number,
+    class: 'text-teal-500',
+  },
+  {
+    tag: tags.bool,
+    class: 'text-teal-500',
+  },
+  {
+    tag: tags.string,
+    class: 'text-teal-500',
+  },
+  // Error.
+  {
+    tag: tags.invalid,
+    class: 'text-neutral-500',
+  },
+]);
+
+const languageFacet = Facet.define<Language>();
+
+export type SheetExtensionOptions = {
+  functions?: string[];
+};
+
+/**
+ * Spreadsheet formula extension and parser.
+ * https://github.com/luizzappa/codemirror-lang-spreadsheet
+ * https://github.com/luizzappa/codemirror-app-spreadsheet/blob/master/src/editor.ts
+ * https://github.com/codemirror/lang-example
+ * https://hyperformula.handsontable.com/guide/key-concepts.html#grammar
+ */
+export const sheetExtension = ({ functions }: SheetExtensionOptions): Extension => {
+  const { extension, language } = spreadsheet({ idiom: 'en-US', decimalSeparator: '.' });
+
+  // Parse functions.
+  const functionInfo = Object.entries(functionDefs).reduce((map, [section, values]) => {
+    values.forEach(({ function: id, ...props }) => {
+      map.set(id, { function: id, ...props, section });
+    });
+    return map;
+  }, new Map());
+
+  const createCompletion = (name: string) => {
+    const { section, description, syntax } = functionInfo.get(name) ?? { section: 'Custom' };
+
+    return {
+      section,
+      label: name,
+      info: () => {
+        if (!description && !syntax) {
+          return null;
+        }
+
+        // TODO(burdon): Standardize color styles.
+        const root = document.createElement('div');
+        root.className = 'flex flex-col gap-2 text-sm';
+
+        const title = document.createElement('h2');
+        title.innerText = name;
+        title.className = 'text-lg font-mono text-primary-500';
+        root.appendChild(title);
+
+        if (description) {
+          const info = document.createElement('p');
+          info.innerText = description;
+          info.className = 'fg-subdued';
+          root.appendChild(info);
+        }
+
+        if (syntax) {
+          const detail = document.createElement('pre');
+          detail.innerText = syntax;
+          detail.className = 'whitespace-pre-wrap text-green-500';
+          root.appendChild(detail);
+        }
+
+        return root;
+      },
+      apply: (view, completion, from, to) => {
+        const insertParens = to === view.state.doc.toString().length;
+        view.dispatch(
+          view.state.update({
+            changes: {
+              from,
+              to,
+              insert: completion.label + (insertParens ? '()' : ''),
+            },
+            selection: {
+              anchor: from + completion.label.length + 1,
+            },
+          }),
+        );
+      },
+    } satisfies Completion;
+  };
+
+  return [
+    extension,
+    languageFacet.of(language),
+    language.data.of({
+      autocomplete: (context: CompletionContext): CompletionResult | null => {
+        if (context.state.doc.toString()[0] !== '=') {
+          return null;
+        }
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to) {
+          return null;
+        }
+
+        const text = match.text.toUpperCase();
+        if (!context.explicit && match.text.length < 2) {
+          return null;
+        }
+
+        return {
+          from: match.from,
+          options: functions?.filter((name) => name.startsWith(text)).map((name) => createCompletion(name)) ?? [],
+        };
+      },
+    }),
+
+    syntaxHighlighting(highlightStyles),
+    autocompletion({
+      aboveCursor: false,
+      defaultKeymap: true,
+      activateOnTyping: true,
+      // NOTE: Useful for debugging.
+      closeOnBlur: false,
+      icons: false,
+      tooltipClass: () =>
+        mx(
+          // TODO(burdon): Factor out fragments.
+          // TODO(burdon): Size to make width same as column.
+          '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
+          '[&>ul>li[aria-selected]]:!bg-primary-700',
+          'border-neutral-200 dark:border-neutral-700',
+        ),
+    }),
+    keymap.of([
+      {
+        key: 'Tab',
+        run: (view) => {
+          return completionStatus(view.state) === 'active' ? acceptCompletion(view) : startCompletion(view);
+        },
+      },
+    ]),
+
+    // Parsing.
+    // StateField.define({
+    //   create: (state) => {},
+    //   update: (value, tr) => {
+    //     log.info('update');
+    //     syntaxTree(tr.state).iterate({
+    //       enter: ({ type, from, to }) => {
+    //         log.info('node', { type: type.name, from, to });
+    //       },
+    //     });
+    //   },
+    // }),
+  ];
+};
+
+export type CellRangeNotifier = (range: string) => void;
+
+type Range = { from: number; to: number };
+
+/**
+ * Tracks the currently active cell within a formula and provides a callback to modify it.
+ */
+export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): Extension => {
+  let view: EditorView;
+  let activeRange: Range | undefined;
+  const provider: CellRangeNotifier = (range: string) => {
+    if (activeRange) {
+      view.dispatch(
+        view.state.update({
+          changes: { ...activeRange, insert: range.toString() },
+          selection: { anchor: activeRange.from + range.length },
+        }),
+      );
+    }
+
+    view.focus();
+  };
+
+  return ViewPlugin.fromClass(
+    class {
+      constructor(_view: EditorView) {
+        view = _view;
+        onInit(provider);
+      }
+
+      update(view: ViewUpdate) {
+        const { anchor } = view.state.selection.ranges[0];
+
+        // Find first Range or cell at cursor.
+        activeRange = undefined;
+        const [language] = view.state.facet(languageFacet);
+        const { topNode } = language.parser.parse(view.state.doc.toString());
+        visitTree(topNode, ({ type, from, to }) => {
+          if (from <= anchor && to >= anchor) {
+            switch (type.name) {
+              case 'Function': {
+                // Mark but keep looking.
+                activeRange = { from: to, to };
+                break;
+              }
+
+              case 'RangeToken':
+              case 'CellToken':
+                activeRange = { from, to };
+                return true;
+            }
+          }
+
+          return false;
+        });
+
+        // Allow start of formula.
+        if (!activeRange && view.state.doc.toString()[0] === '=') {
+          activeRange = { from: 1, to: view.state.doc.toString().length };
+        }
+      }
+    },
+  );
+};
+
+/**
+ * Lezer parse result visitor.
+ */
+const visitTree = (node: SyntaxNode, callback: (node: SyntaxNode) => boolean): boolean => {
+  if (callback(node)) {
+    return true;
+  }
+
+  for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+    if (visitTree(child, callback)) {
+      return true;
+    }
+  }
+
+  return false;
+};