@dxos/react-ui-editor 0.8.4-main.67995b8 → 0.8.4-main.72ec0f3

package/src/stories/Command.stories.tsx

@@ -1,97 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { useState, type KeyboardEvent } from 'react';
-
-import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
-
-import { EditorStory } from './components';
-import { RefDropdownMenu } from '../components';
-import { editorWidth } from '../defaults';
-import { command, type Action, floatingMenu } from '../extensions';
-import { str } from '../testing';
-import { createRenderer } from '../util';
-
-const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
-  const [text, setText] = useState('');
-
-  const handleInsert = () => {
-    // TODO(burdon): Use queue ref.
-    const link = `[${text}](dxn:queue:data:123)`;
-    onAction(text.length ? { type: 'insert', text: link } : undefined);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        handleInsert();
-        break;
-      }
-      case 'Escape': {
-        onAction();
-        break;
-      }
-    }
-  };
-
-  return (
-    <div className='flex w-full justify-center'>
-      <div
-        className={mx(
-          'flex w-full p-2 gap-2 items-center bg-modalSurface border border-separator rounded-md',
-          editorWidth,
-        )}
-      >
-        <Input.Root>
-          <Input.TextInput
-            autoFocus={true}
-            placeholder='Ask a question...'
-            value={text}
-            onChange={(ev) => setText(ev.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
-          <Icon icon='ph--x--regular' size={5} />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<typeof EditorStory> = {
-  title: 'ui/react-ui-editor/Command',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => (
-    <RefDropdownMenu.Provider>
-      <EditorStory
-        text={str('# Command', '', '', '')}
-        extensions={[
-          floatingMenu(),
-          command({
-            renderDialog: createRenderer(CommandDialog),
-            onHint: () => "Press '/' for commands",
-          }),
-        ]}
-      />
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => console.log('!')}>Test</DropdownMenu.Item>
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </RefDropdownMenu.Provider>
-  ),
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-
-export const Default = {};

package/src/stories/CommandMenu.stories.tsx

@@ -1,159 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type EditorView } from '@codemirror/view';
-import { type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useRef } from 'react';
-
-import { Obj, Query } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
-
-import { EditorStory, names } from './components';
-import {
-  CommandMenu,
-  type CommandMenuGroup,
-  type CommandMenuItem,
-  RefPopover,
-  coreSlashCommands,
-  filterItems,
-  insertAtCursor,
-  insertAtLineStart,
-  linkSlashCommands,
-} from '../components';
-import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
-import { str } from '../testing';
-import { createElement } from '../util';
-
-const generator: ValueGenerator = faker as any;
-
-type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
-
-const DefaultStory = ({ text, ...options }: StoryProps) => {
-  const viewRef = useRef<EditorView>();
-  const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
-
-  return (
-    <RefPopover modal={false} {...props}>
-      <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
-  );
-};
-
-const groups: CommandMenuGroup[] = [
-  coreSlashCommands,
-  linkSlashCommands,
-  {
-    id: 'custom',
-    label: 'Custom',
-    items: [
-      {
-        id: 'custom-1',
-        label: 'Log',
-        icon: 'ph--log--regular',
-        onSelect: console.log,
-      },
-    ],
-  },
-];
-
-const meta: Meta<StoryProps> = {
-  title: 'ui/react-ui-editor/CommandMenu',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: (args) => <DefaultStory {...args} />,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<StoryProps>;
-
-// TODO(burdon): Not working.
-export const Slash: Story = {
-  args: {
-    text: str('# Slash', '', names.join(' '), ''),
-    trigger: '/',
-    placeholder: {
-      content: () => {
-        return createElement('div', undefined, [
-          createElement('span', { text: 'Press' }),
-          createElement('span', { className: 'border border-separator rounded-sm mx-1 px-1', text: '/' }),
-          createElement('span', { text: 'for commands' }),
-        ]);
-      },
-    },
-    getMenu: (text) => {
-      return filterItems(groups, (item) =>
-        text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
-      );
-    },
-  },
-};
-
-export const Link: Story = {
-  render: (args) => {
-    const { space } = useClientProvider();
-    const getMenu = useCallback(
-      async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
-        if (trigger === '/') {
-          return filterItems(groups, (item) =>
-            query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
-          );
-        }
-
-        if (!space) {
-          return [];
-        }
-
-        const name = query?.startsWith('@') ? query.slice(1).toLowerCase() : (query?.toLowerCase() ?? '');
-        const result = await space?.db.query(Query.type(Testing.Contact)).run();
-        const items = result.objects
-          .filter((object) => object.name.toLowerCase().includes(name))
-          .map(
-            (object): CommandMenuItem => ({
-              id: object.id,
-              label: object.name,
-              icon: 'ph--user--regular',
-              onSelect: (view, head) => {
-                const link = `[${object.name}][${Obj.getDXN(object)}]`;
-                if (query?.startsWith('@')) {
-                  insertAtLineStart(view, head, `!${link}\n`);
-                } else {
-                  insertAtCursor(view, head, `${link} `);
-                }
-              },
-            }),
-          );
-        return [{ id: 'echo', items }];
-      },
-      [space],
-    );
-
-    return <DefaultStory {...args} getMenu={getMenu} />;
-  },
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-  },
-  decorators: [
-    withClientProvider({
-      createSpace: true,
-      onInitialized: async (client) => {
-        client.addTypes([Testing.Contact]);
-      },
-      onSpaceCreated: async ({ space }) => {
-        const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Contact, count: 10 }]);
-        await space.db.flush({ indexes: true });
-      },
-    }),
-  ],
-};

package/src/testing/index.ts

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

package/src/testing/util.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export const str = (...lines: string[]) => lines.join('\n');