@dxos/react-ui-editor 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/stories/CommandMenu.stories.tsx

@@ -1,158 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type EditorView } from '@codemirror/view';
-import { type Meta, 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 { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import {
-  type CommandMenuGroup,
-  type CommandMenuItem,
-  CommandMenuProvider,
-  coreSlashCommands,
-  filterItems,
-  insertAtCursor,
-  insertAtLineStart,
-  linkSlashCommands,
-} from '../components';
-import { type UseCommandMenuOptions, useCommandMenu } from '../extensions';
-import { str } from '../testing';
-import { Domino } from '../util';
-
-import { EditorStory, names } from './components';
-
-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, ...commandMenuProps } = useCommandMenu({ viewRef, ...options });
-
-  return (
-    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
-      <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
-    </CommandMenuProvider>
-  );
-};
-
-const groups: CommandMenuGroup[] = [
-  coreSlashCommands,
-  linkSlashCommands,
-  {
-    id: 'custom',
-    label: 'Custom',
-    items: [
-      {
-        id: 'custom-1',
-        label: 'Log',
-        icon: 'ph--log--regular',
-        onSelect: console.log,
-      },
-    ],
-  },
-];
-
-const meta = {
-  title: 'ui/react-ui-editor/CommandMenu',
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// TODO(burdon): Not working.
-export const Slash: Story = {
-  args: {
-    text: str('# Slash', '', names.join(' '), ''),
-    trigger: '/',
-    placeholder: {
-      content: () =>
-        Domino.of('div')
-          .child(Domino.of('span').text('Press'))
-          .child(Domino.of('span').text('/').classNames('border border-separator rounded-sm mx-1 px-1'))
-          .child(Domino.of('span').text('for commands'))
-          .build(),
-    },
-    getMenu: (text) => {
-      return filterItems(groups, (item) =>
-        text ? (item.label as string).toLowerCase().includes(text.toLowerCase()) : true,
-      );
-    },
-  },
-};
-
-export const Link: Story = {
-  render: (args: StoryProps) => {
-    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} />;
-  },
-  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 });
-      },
-    }),
-  ],
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-    getMenu: () => [],
-  },
-};

package/src/testing/PreviewPopover.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxAnchorActivate, Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget } from '../extensions';
-
-type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
-type PreviewPopoverValue = Partial<{
-  link: PreviewLinkRef;
-  target: PreviewLinkTarget;
-  pending: boolean;
-}>;
-
-const [PreviewPopoverContextProvider, usePreviewPopover] = createContext<PreviewPopoverValue>('PreviewPopover', {});
-
-type PopoverLookupProviderProps = PropsWithChildren<{
-  onLookup?: PreviewLookup;
-}>;
-
-const PreviewPopoverProvider = ({ children, onLookup }: PopoverLookupProviderProps) => {
-  const trigger = useRef<HTMLElement | null>(null);
-  const [value, setValue] = useState<PreviewPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxAnchorActivate = useCallback(
-    (event: DxAnchorActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!rootRef || !handleDxAnchorActivate) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
-      capture: true,
-      passive: false,
-    });
-  }, [rootRef, handleDxAnchorActivate]);
-
-  return (
-    <PreviewPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    </PreviewPopoverContextProvider>
-  );
-};
-export { PreviewPopoverProvider, usePreviewPopover };
-
-export type { PopoverLookupProviderProps, PreviewPopoverValue };

package/src/testing/index.ts

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

package/src/testing/util.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-/** deprecated Replace with @dxos/util trim */
-// TODO(burdon): Remove
-export const str = (...lines: string[]) => lines.join('\n');

package/src/util/domino.ts

@@ -1,51 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { mx } from '@dxos/react-ui-theme';
-import { type ClassNameValue } from '@dxos/react-ui-types';
-
-/**
- * Super lightweight chainable DOM builder.
- */
-export class Domino<T extends HTMLElement> {
-  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
-    return new Domino<HTMLElementTagNameMap[K]>(tag);
-  }
-
-  private readonly _el: T;
-  constructor(tag: keyof HTMLElementTagNameMap) {
-    this._el = document.createElement(tag) as T;
-  }
-  classNames(...classNames: ClassNameValue[]): this {
-    this._el.className = mx(classNames);
-    return this;
-  }
-  text(value: string): this {
-    this._el.textContent = value;
-    return this;
-  }
-  data(key: string, value: string): this {
-    this._el.dataset[key] = value;
-    return this;
-  }
-  style(styles: Partial<CSSStyleDeclaration>): this {
-    Object.assign(this._el.style, styles);
-    return this;
-  }
-  attr<K extends keyof T>(key: K, value: T[K]): this {
-    (this._el as any)[key] = value;
-    return this;
-  }
-  child<C extends HTMLElement>(...children: Domino<C>[]): this {
-    children.forEach((child) => this._el.appendChild(child.build()));
-    return this;
-  }
-  on(event: string, handler: (e: Event) => void): this {
-    this._el.addEventListener(event, handler);
-    return this;
-  }
-  build(): T {
-    return this._el;
-  }
-}