@dxos/react-ui-editor 0.3.11-main.6cabbc5 → 0.3.11-main.6cd6cc9

package/src/components/TextEditor/TextEditor.tsx

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { EditorState, type Extension } from '@codemirror/state';
+import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
@@ -14,19 +14,22 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useState,
   useRef,
+  useState,
 } from 'react';
 
-import { generateName } from '@dxos/display-name';
+import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
+import { attentionSurface, mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
-import { basicBundle, markdownBundle, setCommentRange } from '../../extensions';
-import { type CommentRange, type EditorModel } from '../../hooks';
+import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
+import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
+import { logChanges } from '../../util';
 
+// TODO(burdon): Change to enum?
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
 
@@ -41,23 +44,28 @@ export type CursorInfo = {
 
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
-  // editor?: {
-  //   className?: string;
-  // };
+  editor?: {
+    className?: string;
+  };
+  content?: {
+    className?: string;
+  };
 };
 
 // TODO(burdon): Spellcheck?
 export type TextEditorProps = {
-  model: EditorModel;
-  focus?: boolean;
-  selection?: { anchor: number; head?: number };
+  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
-  comments?: CommentRange[]; // TODO(burdon): Move into extension.
-  extensions?: Extension[];
-  editorMode?: EditorMode;
+  autoFocus?: boolean;
+  lineWrapping?: boolean;
+  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  selection?: { anchor: number; head?: number };
+  editorMode?: EditorMode; // TODO(burdon): Factor out.
   placeholder?: string;
   theme?: ThemeStyles;
   slots?: TextEditorSlots;
+  extensions?: Extension[];
+  debug?: boolean;
 };
 
 /**
@@ -65,108 +73,134 @@ export type TextEditorProps = {
  */
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    { model, focus, selection, readonly, comments, extensions = [], editorMode, theme, slots = defaultSlots },
+    {
+      model,
+      readonly,
+      autoFocus,
+      scrollTo,
+      selection,
+      editorMode,
+      theme,
+      slots = defaultSlots,
+      extensions = [],
+      debug,
+    },
     forwardedRef,
   ) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    // TODO(burdon): Hook causes error even if properties are not spread into div.
+    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
+    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
+    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
+    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
+    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
-    // The editor view ref should only be used as an escape hatch.
     const rootRef = useRef<HTMLDivElement>(null);
     const [view, setView] = useState<EditorView | null>(null);
-    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
-
-    // Focus.
-    useEffect(() => {
-      if (view && focus) {
-        view.focus();
-      }
-    }, [view, focus]);
 
-    // TODO(burdon): Factor out as extension.
-    const { awareness, peer } = model;
-    useEffect(() => {
-      if (awareness && peer) {
-        awareness.setLocalStateField('user', {
-          name: peer.name ?? generateName(peer.id),
-          color: getColorForValue({ value: peer.id, type: 'color' }),
-          colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-        });
-      }
-    }, [awareness, peer, themeMode]);
+    // The view ref can be used to focus the editor.
+    // NOTE: This does not cause the parent to re-render, so the ref is not available immediately.
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
 
-    // TODO(burdon): Factor out as extension.
+    // Set focus.
     useEffect(() => {
-      if (view && comments !== undefined) {
-        view.dispatch({
-          effects: setCommentRange.of({ model, comments }),
-        });
+      if (autoFocus && !view?.hasFocus) {
+        if (view?.state.selection.main?.from === 0) {
+          // Start at end of line.
+          const { to } = view.state.doc.lineAt(0);
+          view?.dispatch({ selection: { anchor: to } });
+        }
+        view?.focus();
       }
-    }, [view, comments]);
+    }, [view, autoFocus]);
 
+    // Create editor state and view.
+    // The view is recreated if the model or extensions are changed.
     useEffect(() => {
       if (!model || !rootRef.current) {
         return;
       }
 
+      //
+      // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      //
       const state = EditorState.create({
         doc: model.text(),
-        // TODO(burdon): Composer should store and set selection when switching documents.
         selection,
         extensions: [
-          readonly && EditorState.readOnly.of(readonly),
-
-          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
-          editorMode === 'vim' && vim(),
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView.exceptionSink.of((err) => {
+            log.catch(err);
+          }),
 
           // Theme.
-          // TODO(burdon): Make theme configurable.
+          // TODO(burdon): Make configurable.
           EditorView.baseTheme(defaultTheme),
           EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
+          EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
+          EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
+
+          // State.
+          EditorView.editable.of(!readonly),
+          EditorState.readOnly.of(!!readonly),
 
           // Storage and replication.
+          // NOTE: This must come before user extensions.
           model.extension,
 
+          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
+          editorMode === 'vim' && vim(),
+
           // Custom.
           ...extensions,
-        ].filter(Boolean) as Extension[],
+        ].filter(isNotFalsy),
       });
 
-      // NOTE: This repaints the editor.
-      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
-      // Ideally this should not happen except when changing between text objects.
-      view?.destroy();
+      //
+      // EditorView
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      //
       const newView = new EditorView({
-        parent: rootRef.current,
         state,
-        // NOTE: Uncomment to spy on all transactions.
+        parent: rootRef.current,
+        scrollTo,
+        // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        // dispatch: (transaction, view) => {
-        //   view.update([transaction]);
-        // },
+        dispatchTransactions: (trs, view) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view.update(trs);
+        },
       });
 
+      view?.destroy();
       setView(newView);
+
       return () => {
         newView?.destroy();
         setView(null);
       };
     }, [rootRef, model, readonly, editorMode, themeMode]);
 
+    // Handles tab/focus.
+    // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
+    // TODO(burdon): Convert to keymap?
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          // TODO(burdon): Is this required (for vim mode?)
-          // case 'Enter': {
-          //   view?.contentDOM.focus();
-          //   break;
-          // }
+          case 'Enter': {
+            view?.focus();
+            break;
+          }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
+              view?.focus();
+            }
             break;
           }
         }
@@ -178,25 +212,25 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
       <div
         key={model.id}
         role='none'
-        ref={rootRef}
         tabIndex={0}
-        onKeyUp={handleKeyUp}
         {...slots.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
+        ref={rootRef}
       />
     );
   },
 );
 
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, placeholder, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -205,16 +239,15 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-// TODO(burdon): Remove (Just provide bundle, slots).
 export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, placeholder, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -225,7 +258,11 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2 overflow-y-auto', inputSurface),
+    // TODO(burdon): Add focusRing by default/as property?
+    className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
+  },
+  editor: {
+    className: 'h-full p-2',
   },
 };
 

package/src/components/TextEditor/comments.stories.tsx

@@ -6,18 +6,19 @@ import '@dxosTheme';
 
 import { type EditorView, keymap } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
-import { Check } from '@phosphor-icons/react';
+import { Check, Trash } from '@phosphor-icons/react';
 import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
 
-import { TextObject } from '@dxos/echo-schema';
+import { getTextContent, TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { Button, DensityProvider } from '@dxos/react-ui';
 import { fixedInsetFlexLayout, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, TextEditor } from './TextEditor';
-import { comments, type CommentsOptions, Cursor } from '../../extensions';
-import { type CommentRange, type Range, useTextModel } from '../../hooks';
+import { comments, type CommentsOptions, focusComment, useComments } from '../../extensions';
+import { type Comment, type Range, useTextModel } from '../../hooks';
 
 faker.seed(101);
 
@@ -27,36 +28,41 @@ faker.seed(101);
 
 const Editor: FC<{
   item: { text: TextObject };
-  commentSelected?: string;
-  commentRanges: CommentRange[];
+  comments: Comment[];
+  selected?: string;
   onCreateComment: CommentsOptions['onCreate'];
-  onMoveComment: CommentsOptions['onMove'];
+  onDeleteComment: CommentsOptions['onDelete'];
+  onUpdateComment: CommentsOptions['onUpdate'];
   onSelectComment: CommentsOptions['onSelect'];
-}> = ({ item, commentSelected, commentRanges, onCreateComment, onMoveComment, onSelectComment }) => {
+}> = ({
+  item,
+  selected: selectedValue,
+  comments: commentRanges,
+  onCreateComment,
+  onDeleteComment,
+  onUpdateComment,
+  onSelectComment,
+}) => {
   const model = useTextModel({ text: item.text });
-  const editorRef = useRef<EditorView>(null);
+  const view = useRef<EditorView>(null);
   const [selected, setSelected] = useState<string>();
   useEffect(() => {
-    if (!editorRef.current?.hasFocus && commentSelected !== selected) {
-      const thread = commentRanges.find((range) => range.id === commentSelected);
-      if (thread) {
-        const { cursor } = thread;
-        const range = Cursor.getRangeFromCursor(editorRef.current!.state.facet(Cursor.converter), cursor);
-        if (range) {
-          // TODO(burdon): Scroll selection to center of screen?
-          editorRef.current?.dispatch({ selection: { anchor: range.from }, scrollIntoView: true });
-        }
+    if (!view.current?.hasFocus && selectedValue !== selected) {
+      setSelected(selectedValue);
+      if (selectedValue) {
+        focusComment(view.current!, selectedValue);
       }
-
-      setSelected(commentSelected);
     }
-  }, [selected, commentRanges, commentSelected]);
+  }, [selected, commentRanges, selectedValue]);
+
+  useComments(view.current, commentRanges);
 
   const extensions = useMemo(() => {
     return [
       comments({
         onCreate: onCreateComment,
-        onMove: onMoveComment,
+        onDelete: onDeleteComment,
+        onUpdate: onUpdateComment,
         onSelect: onSelectComment,
       }),
     ];
@@ -69,7 +75,7 @@ const Editor: FC<{
   // TODO(burdon): Highlight currently selected comment.
   return (
     <div className='flex grow overflow-y-scroll'>
-      <MarkdownEditor ref={editorRef} model={model} comments={commentRanges} extensions={extensions} />
+      <MarkdownEditor ref={view} model={model} extensions={extensions} />
     </div>
   );
 };
@@ -80,9 +86,9 @@ const Editor: FC<{
 
 type CommentThread = {
   id: string;
-  range: CommentRange;
+  cursor?: string;
+  range?: Range;
   yPos?: number;
-  selection?: Range;
   messages: TextObject[];
 };
 
@@ -92,23 +98,17 @@ const Thread: FC<{
   onSelect: () => void;
   onResolve: () => void;
 }> = ({ thread, selected, onSelect, onResolve }) => {
+  const [focus, setFocus] = useState(false);
   const [item, setItem] = useState({ text: new TextObject() });
   const model = useTextModel({ text: item.text });
   const editorRef = useRef<EditorView>(null);
 
-  // TODO(burdon): Hack to focus (view is recreated when text object changes).
-  const focus = () => {
-    setTimeout(() => {
-      editorRef.current?.focus();
-    }, 100);
-  };
-
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (selected) {
       containerRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });
       if (thread.messages.length === 0) {
-        focus();
+        setFocus(true);
       }
     }
   }, [selected]);
@@ -118,7 +118,7 @@ const Thread: FC<{
     if (text?.length) {
       thread.messages.push(item.text);
       setItem({ text: new TextObject() });
-      focus();
+      setFocus(true);
     }
   };
 
@@ -127,41 +127,49 @@ const Thread: FC<{
   }
 
   return (
-    <div className={mx('flex flex-col m-1 rounded shadow divide-y bg-white', selected && 'ring')}>
-      <div className='flex p-2 text-xs font-mono gap-2 text-neutral-500 font-thin'>
+    <div
+      className={mx(
+        'flex flex-col m-1 rounded shadow divide-y bg-white',
+        selected && 'ring',
+        !thread.cursor && 'opacity-50',
+      )}
+    >
+      <div className='flex p-2 gap-2 items-center text-xs font-mono text-neutral-500 font-thin'>
         <span>id:{thread.id.slice(0, 4)}</span>
-        <span>from:{thread.selection?.from}</span>
-        <span>to:{thread.selection?.to}</span>
+        <span>from:{thread.range?.from}</span>
+        <span>to:{thread.range?.to}</span>
         <span>y:{thread.yPos}</span>
+        <span className='grow' />
+        {!thread.cursor && <Trash />}
       </div>
 
       {thread.messages.map((message, i) => (
         // TODO(burdon): Fix default editor padding so content doesn't jump on creating message.
         <div key={i} className='p-2' onClick={() => onSelect()}>
-          {message.text}
+          {getTextContent(message)}
         </div>
       ))}
 
-      <div ref={containerRef} onClick={() => onSelect()} className='flex py-1'>
-        <div className='grow'>
-          <TextEditor
-            ref={editorRef}
-            model={model}
-            placeholder={'Enter comment...'}
-            extensions={[
-              keymap.of([
-                {
-                  key: 'Enter',
-                  run: () => {
-                    handleCreateMessage();
-                    return true;
-                  },
+      <div ref={containerRef} className='flex' onClick={() => onSelect()}>
+        <TextEditor
+          ref={editorRef}
+          autoFocus={focus}
+          model={model}
+          placeholder={'Enter comment...'}
+          slots={{ root: { className: 'grow rounded-b' } }}
+          extensions={[
+            keymap.of([
+              {
+                key: 'Enter',
+                run: () => {
+                  handleCreateMessage();
+                  return true;
                 },
-              ]),
-            ]}
-          />
-        </div>
-        <Button variant='ghost' classNames='px-1 mr-1' title='Resolve' onClick={onResolve}>
+              },
+            ]),
+          ]}
+        />
+        <Button variant='ghost' classNames='px-1' title='Resolve' onClick={onResolve}>
           <Check />
         </Button>
       </div>
@@ -185,7 +193,7 @@ const Sidebar: FC<{
 
   return (
     <DensityProvider density='fine'>
-      <div className='flex flex-col grow overflow-y-scroll py-4 gap-4 pr-4'>
+      <div className='flex flex-col grow overflow-y-scroll py-4 gap-4'>
         {sortedThreads.map((thread) => (
           <Thread
             key={thread.id}
@@ -212,55 +220,74 @@ type StoryProps = {
 const Story = ({ text, autoCreate }: StoryProps) => {
   const [item] = useState({ text: new TextObject(text) });
   const [threads, setThreads] = useState<CommentThread[]>([]);
-  const commentRanges = useMemo(() => threads.map((thread) => thread.range), [threads]);
   const [selected, setSelected] = useState<string>();
 
+  const comments = useMemo<Comment[]>(() => threads.map(({ id, cursor }) => ({ id, cursor })), [threads]);
+
   // Filter by visibility.
   const visibleThreads = useMemo(() => threads.filter((thread) => thread.yPos !== undefined), [threads]);
 
   const handleCreateComment: CommentsOptions['onCreate'] = (cursor, location) => {
     const id = PublicKey.random().toHex();
+    log.info('create', { id: id.slice(0, 4), cursor });
     setThreads((threads) => [
       ...threads,
       {
         id,
-        range: { id, cursor },
+        cursor,
         yPos: location ? Math.floor(location.top) : undefined,
         messages: autoCreate
-          ? faker.helpers.multiple(() => new TextObject(faker.lorem.sentence()), { count: { min: 2, max: 5 } })
+          ? faker.helpers.multiple(() => new TextObject(faker.lorem.sentence()), { count: { min: 1, max: 3 } })
           : [],
       },
     ]);
-    setSelected(id);
+    setSelected(id); // TODO(burdon): Not required.
     return id;
   };
 
-  // TODO(burdon): Scroll sidebar on select.
-  const handleSelectComment: CommentsOptions['onSelect'] = ({ active, closest, ranges }) => {
+  const handleDeleteComment: CommentsOptions['onDelete'] = (id) => {
+    log.info('delete', { id: id.slice(0, 4) });
     setThreads((threads) =>
       threads.map((thread) => {
-        const range = ranges.find((range) => range.id === thread.range.id);
-        if (range) {
-          thread.yPos = range.location ? Math.floor(range.location.top) : undefined;
-          thread.selection = { from: range.from, to: range.to };
+        if (thread.id === id) {
+          thread.cursor = undefined;
         }
 
         return thread;
       }),
     );
 
-    setSelected(active ?? closest);
+    setSelected((selected) => (selected === id ? undefined : selected));
   };
 
-  const handleMoveComment: CommentsOptions['onMove'] = (id, cursor) => {
+  const handleUpdateComment: CommentsOptions['onUpdate'] = (id, cursor) => {
+    log.info('update', { id: id.slice(0, 4), cursor });
     setThreads((threads) =>
       threads.map((thread) => {
         if (thread.id === id) {
-          thread.range.cursor = cursor;
+          thread.cursor = cursor;
         }
+
+        return thread;
+      }),
+    );
+  };
+
+  const handleSelectComment: CommentsOptions['onSelect'] = ({ comments, selection: { current, closest } }) => {
+    log.info('select', { active: current?.slice(0, 4), closest: closest?.slice(0, 4) });
+    setThreads((threads) =>
+      threads.map((thread) => {
+        const comment = comments.find(({ comment }) => comment.id === thread.id);
+        if (comment) {
+          thread.yPos = comment.location ? Math.floor(comment.location.top) : undefined;
+          thread.range = { from: comment.range.from, to: comment.range.to };
+        }
+
         return thread;
       }),
     );
+
+    setSelected(current ?? closest);
   };
 
   const handleSelectThread = (id: string) => {
@@ -278,10 +305,11 @@ const Story = ({ text, autoCreate }: StoryProps) => {
         <div className='flex flex-col h-full w-[600px]'>
           <Editor
             item={item}
-            commentSelected={selected}
-            commentRanges={commentRanges}
+            selected={selected}
+            comments={comments}
             onCreateComment={handleCreateComment}
-            onMoveComment={handleMoveComment}
+            onDeleteComment={handleDeleteComment}
+            onUpdateComment={handleUpdateComment}
             onSelectComment={handleSelectComment}
           />
         </div>
@@ -321,7 +349,7 @@ export const Default = {
   },
 };
 
-export const Demo = {
+export const Testing = {
   args: {
     text: document,
     autoCreate: true,