@dxos/react-ui-editor 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/src/hooks/useTextEditor.ts

@@ -4,8 +4,8 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
+  type ComponentPropsWithoutRef,
   type DependencyList,
   type KeyboardEventHandler,
   type RefObject,
@@ -17,9 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { type MaybeProvider, getProviderValue, isNotFalsy } from '@dxos/util';
+import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;
@@ -34,13 +34,9 @@ export type CursorInfo = {
 };
 
 export type UseTextEditor = {
-  // TODO(burdon): Rename.
-  parentRef: RefObject<HTMLDivElement>;
-  view?: EditorView;
-  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
-    tabIndex: 0;
-    onKeyUp: KeyboardEventHandler<HTMLDivElement>;
-  };
+  parentRef: RefObject<HTMLDivElement | null>;
+  view: EditorView | null;
+  focusAttributes?: ComponentPropsWithoutRef<'div'>;
 };
 
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
@@ -50,7 +46,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
-  moveToEndOfLine?: boolean;
+  selectionEnd?: boolean;
   debug?: boolean;
 };
 
@@ -61,16 +57,16 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState<EditorView>();
+  const [view, setView] = useState<EditorView | null>(null);
   const parentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let view: EditorView;
+    let view: EditorView | null = null;
     if (parentRef.current) {
       log('create', { id, instanceId, doc: initialValue?.length ?? 0 });
 
@@ -79,7 +75,7 @@ export const useTextEditor = (
         if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
           initialSelection = selection;
         }
-      } else if (moveToEndOfLine && selection === undefined) {
+      } else if (selectionEnd && selection === undefined) {
         const index = initialValue?.indexOf('\n');
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = { anchor };
@@ -96,19 +92,7 @@ export const useTextEditor = (
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          // TODO(burdon): Factor out debug inspector.
-          // ViewPlugin.fromClass(
-          //   class {
-          //     constructor(_view: EditorView) {
-          //       log('construct', { id });
-          //     }
-          //
-          //     destroy() {
-          //       log('destroy', { id });
-          //     }
-          //   },
-          // ),
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
@@ -120,7 +104,7 @@ export const useTextEditor = (
       });
 
       // Move to end of line after document loaded (unless selection is specified).
-      if (moveToEndOfLine && !initialSelection) {
+      if (selectionEnd && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
         if (to) {
           view.dispatch({ selection: { anchor: to } });
@@ -155,23 +139,28 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: 'limited',
-    ignoreDefaultKeydown: {
-      Escape: view?.state.facet(editorInputMode).noTabster,
-    },
-  });
-
   // Focus editor on Enter (e.g., when tabbing to this component).
-  const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     (event) => {
       const { key, target, currentTarget } = event;
-      if (target === currentTarget) {
-        switch (key) {
-          case 'Enter': {
+      switch (key) {
+        case 'Escape': {
+          // Check if popover is open.
+          const modal = view?.state.field(modalStateField, false);
+          if (modal) {
+            return;
+          }
+
+          // Focus the closest focusable parent.
+          const element = view?.contentDOM.closest('[tabindex="0"]') as HTMLDivElement | null;
+          element?.focus();
+          break;
+        }
+        case 'Enter': {
+          if (target === currentTarget) {
             view?.focus();
-            break;
           }
+          break;
         }
       }
     },
@@ -183,8 +172,7 @@ export const useTextEditor = (
     view,
     focusAttributes: {
       tabIndex: 0 as const,
-      ...focusableGroupAttrs,
-      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
     },
   };
 };

package/src/stories/CommandDialog.stories.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type KeyboardEvent, useState } from 'react';
+
+import { type Button, IconButton, Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/react-ui-theme';
+
+import { editorWidth } from '../defaults';
+import { str } from '../util';
+
+import { EditorStory } from './components';
+
+// TODO(burdon): Reimplement with Popover.
+const CommandDialog = ({ onAction }: { onAction: (action?: any) => 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 is-full justify-center'>
+      <div
+        className={mx(
+          'flex is-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>
+        <IconButton
+          icon='ph--x--regular'
+          label='Cancel'
+          iconOnly
+          variant='ghost'
+          classNames='pli-0'
+          onClick={() => onAction({ type: 'cancel' })}
+        />
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/CommandDialog',
+  render: () => <EditorStory text={str('# Command', '', '')} extensions={[]} />,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/Comments.stories.tsx

@@ -2,37 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { effect, useSignal } from '@preact/signals-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { annotations, comments, createExternalCommentSync } from '../extensions';
-import { str } from '../testing';
 import { type Comment } from '../types';
-import { createRenderer } from '../util';
+import { createRenderer, str } from '../util';
 
 import { EditorStory, content, longText } from './components';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Comments
 //
 
-export const Comments = {
+export const Comments: Story = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
@@ -70,14 +72,14 @@ export const Comments = {
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center is-[24px] bs-[24px] rounded text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 pli-2 plb-2 bg-neutral-700 text-white text-xs rounded'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (
@@ -92,7 +94,7 @@ const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
 // Annotations
 //
 
-export const Annotations = {
+export const Annotations: Story = {
   render: () => (
     <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),

package/src/stories/EditorToolbar.stories.tsx

@@ -2,17 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorToolbar, useEditorToolbarState } from '../components';
+import { EditorToolbar, useEditorToolbar } from '../components';
 import { editorWidth } from '../defaults';
 import {
   InputModeExtensions,
@@ -21,7 +19,7 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
-  useFormattingState,
+  formattingListener,
 } from '../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
@@ -31,24 +29,24 @@ type StoryProps = { placeholder?: string } & UseTextEditorProps;
 
 const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
+
+  const toolbarState = useEditorToolbar({ viewMode: 'source' });
   const viewMode = toolbarState.viewMode;
-  const trackFormatting = useFormattingState(toolbarState);
   // TODO(wittjosiah): Provide way to change the input mode.
   const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
       initialValue,
-      moveToEndOfLine: true,
+      selectionEnd: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
-        createMarkdownExtensions({ themeMode }),
+        createMarkdownExtensions(),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        trackFormatting,
+        formattingListener(() => toolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -67,7 +65,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
       <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
         <div className={mx(editorWidth)} ref={parentRef} />
       </div>
@@ -75,12 +73,15 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
@@ -90,6 +91,6 @@ export const Default: Story = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
+    initialValue: '# Demo\n\nThis is a **document**.\n\n',
   },
 };

package/src/stories/Experimental.stories.tsx

@@ -2,36 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import { EditorStory, content } from './components';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Typewriter
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
 
-export const Typewriter = {
+export const Typewriter: Story = {
   render: () => (
     <EditorStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
@@ -44,7 +47,7 @@ export const Typewriter = {
 // Blast
 //
 
-export const Blast = {
+export const Blast: Story = {
   render: () => (
     <EditorStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
@@ -71,7 +74,7 @@ export const Blast = {
 // DND
 //
 
-export const DND = {
+export const DND: Story = {
   render: () => (
     <EditorStory
       text={str('# DND', '')}

package/src/stories/Markdown.stories.tsx

@@ -2,36 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { markdown } from '@codemirror/lang-markdown';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Default
 //
 
-export const Default = {
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
-export const Blockquote = {
+export const Blockquote: Story = {
   render: () => (
     <EditorStory
       text={str('> Blockquote', 'continuation', content.footer)}
@@ -41,23 +44,23 @@ export const Blockquote = {
   ),
 };
 
-export const Headings = {
+export const Headings: Story = {
   render: () => <EditorStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
-export const Links = {
+export const Links: Story = {
   render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
-export const Image = {
+export const Image: Story = {
   render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
 };
 
-export const Code = {
+export const Code: Story = {
   render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
-export const Lists = {
+export const Lists: Story = {
   render: () => (
     <EditorStory
       text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
@@ -70,7 +73,7 @@ export const Lists = {
 // Bullet List
 //
 
-export const BulletList = {
+export const BulletList: Story = {
   render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -78,7 +81,7 @@ export const BulletList = {
 // Ordered List
 //
 
-export const OrderedList = {
+export const OrderedList: Story = {
   render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
@@ -86,13 +89,13 @@ export const OrderedList = {
 // Task List
 //
 
-export const TaskList = {
+export const TaskList: Story = {
   render: () => (
     <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
-export const TaskListEmpty = {
+export const TaskListEmpty: Story = {
   render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
@@ -100,7 +103,7 @@ export const TaskListEmpty = {
 // Table
 //
 
-export const Table = {
+export const Table: Story = {
   render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
@@ -108,7 +111,7 @@ export const Table = {
 // Commented out
 //
 
-export const CommentedOut = {
+export const CommentedOut: Story = {
   render: () => (
     <EditorStory
       text={str('# Commented out', '', content.comment, content.footer)}