@dxos/react-ui-editor 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/src/components/Popover/RefDropdownMenu.tsx

@@ -1,85 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { DropdownMenu } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-// TODO(burdon): Reconcile this file with RefPopover?
-
-const customEventOptions = { capture: true, passive: false };
-
-// Create a context for the dxn value.
-type RefDropdownMenuValue = Partial<{
-  link: PreviewLinkRef;
-  target: PreviewLinkTarget;
-  pending: boolean;
-}>;
-
-const REF_DROPDOWN_MENU = 'RefDropdownMenu';
-const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
-
-type RefDropdownMenuProviderProps = PropsWithChildren<{
-  onLookup?: PreviewLookup;
-}>;
-
-const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefDropdownMenuValue>({});
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      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],
-  );
-
-  useEffect(() => {
-    if (!rootRef) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-ref-tag-activate' as any, handleDxRefTagActivate, customEventOptions);
-  }, [rootRef]);
-
-  return (
-    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </DropdownMenu.Root>
-    </RefDropdownMenuContextProvider>
-  );
-};
-
-export const RefDropdownMenu = {
-  Provider: RefDropdownMenuProvider,
-};
-
-export { useRefDropdownMenu };
-
-export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/components/Popover/RefPopover.tsx

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  type RefObject,
-  forwardRef,
-} from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-const customEventOptions = { capture: true, passive: false };
-
-export type RefPopoverProps = PropsWithChildren<{
-  modal?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onActivate?: (event: DxRefTagActivate) => void;
-}>;
-
-export const RefPopover = forwardRef<DxRefTag | null, RefPopoverProps>(
-  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
-    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-
-      return addEventListener(rootRef, 'dx-ref-tag-activate' as any, onActivate, customEventOptions);
-    }, [rootRef, onActivate]);
-
-    return (
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
-        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    );
-  },
-);
-
-// Create a context for the dxn value.
-type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
-
-const REF_POPOVER = 'RefPopover';
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
-
-type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
-
-const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      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],
-  );
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
-        {children}
-      </RefPopover>
-    </RefPopoverContextProvider>
-  );
-};
-
-export { PreviewProvider, useRefPopover };
-
-export type { PreviewProviderProps, RefPopoverValue };

package/src/extensions/command/index.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './action';
-export * from './command';
-export * from './command-menu';
-export * from './floating-menu';
-export * from './typeahead';
-export * from './useCommandMenu';

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 = {};