@dxos/react-ui-editor 0.8.2 → 0.8.3-main.7f5a14c

package/src/hooks/useTextEditor.ts

@@ -22,15 +22,7 @@ import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
-export type UseTextEditor = {
-  // TODO(burdon): Rename.
-  parentRef: RefObject<HTMLDivElement>;
-  view?: EditorView;
-  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
-    tabIndex: 0;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  };
-};
+let instanceCount = 0;
 
 export type CursorInfo = {
   from: number;
@@ -41,11 +33,20 @@ export type CursorInfo = {
   after?: string;
 };
 
+export type UseTextEditor = {
+  // TODO(burdon): Rename.
+  parentRef: RefObject<HTMLDivElement>;
+  view?: EditorView;
+  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
+    tabIndex: 0;
+    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
+  };
+};
+
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   id?: string;
   doc?: Text;
   initialValue?: string;
-  className?: string;
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
@@ -53,8 +54,6 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   debug?: boolean;
 };
 
-let instanceCount = 0;
-
 /**
  * Creates codemirror text editor.
  */

package/src/stories/Command.stories.tsx

@@ -10,7 +10,7 @@ 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 './util';
+import { EditorStory } from './components';
 import { RefDropdownMenu } from '../components';
 import { editorWidth } from '../defaults';
 import { command, type Action, floatingMenu } from '../extensions';

package/src/stories/CommandMenu.stories.tsx

@@ -0,0 +1,143 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/react';
+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 {
+  coreSlashCommands,
+  filterItems,
+  RefPopover,
+  type CommandMenuGroup,
+  CommandMenu,
+  type CommandMenuItem,
+  insertAtCursor,
+  insertAtLineStart,
+  linkSlashCommands,
+} from '../components';
+import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
+import { str } from '../testing';
+
+const generator: ValueGenerator = faker as any;
+
+type Args = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
+
+const Story = ({ text, ...options }: Args) => {
+  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<Args> = {
+  title: 'ui/react-ui-editor/CommandMenu',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: (args) => <Story {...args} />,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Slash: StoryObj<Args> = {
+  args: {
+    trigger: '/',
+    getGroups: (query) =>
+      filterItems(groups, (item) =>
+        query ? (item.label as string).toLowerCase().includes(query.toLowerCase()) : true,
+      ),
+    text: str('# Slash', '', names.join(' '), ''),
+  },
+};
+
+export const Link: StoryObj<Args> = {
+  render: (args) => {
+    const { space } = useClientProvider();
+    const getGroups = 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 <Story {...args} getGroups={getGroups} />;
+  },
+  args: {
+    trigger: ['/', '@'],
+    text: str('# Link', '', names.join(' '), ''),
+  },
+  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/stories/Comments.stories.tsx

@@ -12,7 +12,7 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory, content, longText } from './util';
+import { EditorStory, content, longText } from './components';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
 import { type Comment } from '../types';
@@ -20,8 +20,8 @@ import { createRenderer } from '../util';
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Comments',
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 

package/src/stories/Experimental.stories.tsx

@@ -11,14 +11,14 @@ import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory, content } from './util';
+import { EditorStory, content } from './components';
 import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
 import { str } from '../testing';
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Experimental',
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 

package/src/stories/Markdown.stories.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './util';
+import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
 import { str } from '../testing';
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Markdown',
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 

package/src/stories/Outliner.stories.tsx

@@ -4,14 +4,16 @@
 
 import '@dxos-theme';
 
-import React from 'react';
+import { type EditorView } from '@codemirror/view';
+import React, { useRef } from 'react';
 
 import { DropdownMenu } from '@dxos/react-ui';
+import { withAttention } from '@dxos/react-ui-attention/testing';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory } from './util';
+import { EditorStory } from './components';
 import { RefDropdownMenu } from '../components';
-import { outliner, listItemToString, treeFacet } from '../extensions';
+import { outliner, listItemToString, treeFacet, deleteItem, hashtag } from '../extensions';
 import { str } from '../testing';
 
 type StoryProps = {
@@ -19,11 +21,20 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ text }: StoryProps) => {
+  const viewRef = useRef<EditorView>(null);
+
+  const handleDelete = () => {
+    if (viewRef.current) {
+      deleteItem(viewRef.current);
+    }
+  };
+
   return (
     <RefDropdownMenu.Provider>
       <EditorStory
+        ref={viewRef}
         text={text}
-        extensions={[outliner()]}
+        extensions={[outliner(), hashtag()]}
         placeholder=''
         slots={{}}
         debug='raw+tree'
@@ -31,13 +42,14 @@ const DefaultStory = ({ text }: StoryProps) => {
           const tree = view.state.facet(treeFacet);
           const lines: string[] = [];
           tree.traverse((item) => lines.push(listItemToString(item)));
-          return <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>{lines.join('\n')}</pre>;
+          return <pre className='p-1 overflow-auto text-xs text-green-800 dark:text-green-200'>{lines.join('\n')}</pre>;
         }}
       />
+
       <DropdownMenu.Portal>
         <DropdownMenu.Content>
           <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => console.log('test')}>Test</DropdownMenu.Item>
+            <DropdownMenu.Item onClick={handleDelete}>Delete</DropdownMenu.Item>
           </DropdownMenu.Viewport>
           <DropdownMenu.Arrow />
         </DropdownMenu.Content>
@@ -48,8 +60,8 @@ const DefaultStory = ({ text }: StoryProps) => {
 
 const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-editor/Outliner',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: DefaultStory,
+  decorators: [withAttention, withTheme, withLayout({ fullscreen: true })],
   parameters: { layout: 'fullscreen' },
 };
 

package/src/stories/Preview.stories.tsx

@@ -7,12 +7,13 @@ import '@dxos-theme';
 import React, { useState, useEffect, type FC } from 'react';
 
 import { faker } from '@dxos/random';
-import { IconButton, Popover } from '@dxos/react-ui';
-import { hoverableHidden } from '@dxos/react-ui-theme';
+import { Popover } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-stack';
+import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { EditorStory } from './util';
-import { RefPopover, useRefPopover } from '../components';
+import { EditorStory } from './components';
+import { PreviewProvider, useRefPopover } from '../components';
 import {
   preview,
   image,
@@ -49,10 +50,12 @@ const PreviewCard = () => {
   const { target } = useRefPopover('PreviewCard');
   return (
     <Popover.Portal>
-      <Popover.Content classNames='popover-card-width p-2' onOpenAutoFocus={(event) => event.preventDefault()}>
+      <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <h2 className='grow truncate'>{target?.label}</h2>
-          {target && <div className='line-clamp-3'>{target.text}</div>}
+          <Card.Container role='popover'>
+            <Card.Heading>{target?.label}</Card.Heading>
+            {target && <Card.Text classNames='line-clamp-3'>{target.text}</Card.Text>}
+          </Card.Container>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -64,52 +67,51 @@ const PreviewCard = () => {
 const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLookup }) => {
   const target = useRefTarget(link, onLookup);
   return (
-    <div className='group flex flex-col gap-2'>
-      <div className='flex items-center gap-4'>
-        <div className='grow truncate'>
-          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
-          {link.label}
-        </div>
+    <Card.Content classNames={hoverableControls}>
+      <div className='flex items-start'>
         {!readonly && (
-          <div className='flex gap-1'>
+          <Card.Toolbar classNames='is-min p-[--dx-card-spacing-inline]'>
             {(link.suggest && (
               <>
+                <Card.ToolbarIconButton
+                  label='Discard'
+                  icon={'ph--x--regular'}
+                  onClick={() => onAction({ type: 'delete', link })}
+                />
                 {target && (
-                  <IconButton
-                    classNames='text-green-500'
+                  <Card.ToolbarIconButton
+                    classNames='bg-successSurface text-successSurfaceText'
                     label='Apply'
-                    icon={'ph--check--regular'}
+                    icon='ph--check--regular'
                     onClick={() => onAction({ type: 'insert', link, target })}
                   />
                 )}
-                <IconButton
-                  classNames='text-red-500'
-                  label='Cancel'
-                  icon={'ph--x--regular'}
-                  onClick={() => onAction({ type: 'delete', link })}
-                />
               </>
             )) || (
-              <IconButton
+              <Card.ToolbarIconButton
                 iconOnly
                 label='Delete'
-                icon={'ph--x--regular'}
-                classNames={hoverableHidden}
+                icon='ph--x--regular'
+                classNames={[hoverableControlItem, hoverableControlItemTransition]}
                 onClick={() => onAction({ type: 'delete', link })}
               />
             )}
-          </div>
+          </Card.Toolbar>
         )}
+        <Card.Heading classNames='grow order-first mie-0'>
+          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
+          {link.label}
+        </Card.Heading>
       </div>
-      {target && <div className='line-clamp-3'>{target.text}</div>}
-    </div>
+      {target && <Card.Text classNames='line-clamp-3 mbs-0'>{target.text}</Card.Text>}
+    </Card.Content>
   );
 };
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/Preview',
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: EditorStory,
   parameters: { layout: 'fullscreen' },
 };
 
@@ -117,7 +119,7 @@ export default meta;
 
 export const Default = {
   render: () => (
-    <RefPopover.Provider onLookup={handlePreviewLookup}>
+    <PreviewProvider onLookup={handlePreviewLookup}>
       <EditorStory
         text={str(
           '# Preview',
@@ -144,6 +146,6 @@ export const Default = {
         ]}
       />
       <PreviewCard />
-    </RefPopover.Provider>
+    </PreviewProvider>
   ),
 };

package/src/stories/TextEditor.stories.tsx

@@ -23,7 +23,7 @@ import {
   names,
   renderLinkButton,
   text,
-} from './util';
+} from './components';
 import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
@@ -41,9 +41,9 @@ import { str } from '../testing';
 
 const meta: Meta<typeof EditorStory> = {
   title: 'ui/react-ui-editor/TextEditor',
-  render: EditorStory,
+  component: EditorStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', controls: { disable: true } },
 };
 
 export default meta;

package/src/stories/components/EditorStory.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import React, { type ReactNode, forwardRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
+
+import { Expando } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { PublicKey } from '@dxos/keys';
+import { live } from '@dxos/live-object';
+import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { editorSlots, editorGutter } from '../../defaults';
+import {
+  type DebugNode,
+  type ThemeExtensionsOptions,
+  createDataExtensions,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  debugTree,
+} from '../../extensions';
+import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+
+// Type definitions.
+export type DebugMode = 'raw' | 'tree' | 'raw+tree';
+
+const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
+
+export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
+  Pick<ThemeExtensionsOptions, 'slots'> & {
+    id?: string;
+    debug?: DebugMode;
+    debugCustom?: (view: EditorView) => ReactNode;
+    text?: string;
+    object?: Expando;
+    readOnly?: boolean;
+    placeholder?: string;
+    lineNumbers?: boolean;
+    onReady?: (view: EditorView) => void;
+  };
+
+export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
+  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
+    const attentionAttrs = useAttentionAttributes('testing');
+    const [tree, setTree] = useState<DebugNode>();
+    const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
+    const viewRef = useForwardedRef(forwardedRef);
+    const view = viewRef.current;
+    const extensions = useMemo(
+      () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
+      [debug, _extensions],
+    );
+
+    return (
+      <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+        <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
+
+        {debug && (
+          <div
+            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            {...attentionAttrs}
+          >
+            {view && debugCustom?.(view)}
+            {(debug === 'raw' || debug === 'raw+tree') && (
+              <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>
+                {view?.state.doc.toString()}
+              </pre>
+            )}
+            {(debug === 'tree' || debug === 'raw+tree') && <JsonFilter data={tree} classNames='p-1 text-xs' />}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * Default story component.
+ */
+export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
+  (
+    {
+      id = defaultId,
+      text,
+      object,
+      readOnly,
+      placeholder = 'New document.',
+      lineNumbers,
+      scrollTo,
+      selection,
+      extensions,
+      slots = editorSlots,
+      onReady,
+    },
+    forwardedRef,
+  ) => {
+    invariant(object);
+    const { themeMode } = useThemeContext();
+    const attentionAttrs = useAttentionAttributes(id);
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        scrollTo,
+        selection,
+        initialValue: text,
+        extensions: [
+          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
+          createMarkdownExtensions({ themeMode }),
+          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
+          editorGutter,
+          extensions || [],
+        ],
+      }),
+      [id, object, extensions, themeMode],
+    );
+
+    useImperativeHandle(forwardedRef, () => view, [view]);
+
+    useEffect(() => {
+      if (view) {
+        onReady?.(view);
+      }
+    }, [view]);
+
+    return <div ref={parentRef} className='flex overflow-hidden' {...attentionAttrs} {...focusAttributes} />;
+  },
+);

package/src/stories/components/index.ts

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