@dxos/react-ui-editor 0.3.11-main.00a28cb → 0.3.11-main.0252f93

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

@@ -4,11 +4,11 @@
 
 import '@dxosTheme';
 
-import { EditorView } from '@codemirror/view';
+import { type EditorView } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, StrictMode, useState } from 'react';
+import React, { type FC, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
@@ -19,11 +19,14 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
+  type CommentsOptions,
+  type LinkOptions,
   autocomplete,
   blast,
   code,
   comments,
   defaultOptions,
+  heading,
   hr,
   image,
   link,
@@ -31,15 +34,10 @@ import {
   table,
   tasklist,
   typewriter,
-  type CommentsOptions,
-  type LinkOptions,
-  outliner,
+  useComments,
+  formatting,
 } from '../../extensions';
-import { type CommentRange, useTextModel } from '../../hooks';
-
-// Extensions:
-// TODO(burdon): Table of contents.
-// TODO(burdon): Front-matter
+import { type Comment, useTextModel } from '../../hooks';
 
 faker.seed(101);
 
@@ -55,8 +53,8 @@ const text = {
     '- [x] decorator',
     '- [ ] checkbox',
     '  - [ ] state',
-    '  - [ ] indent',
-    '  - [x] style',
+    '    - [ ] indent',
+    '    - [x] style',
     '',
   ),
 
@@ -82,7 +80,7 @@ const text = {
     '## Code',
     '',
     '```',
-    'const x = 100;',
+    '$ ls -las',
     '```',
     '',
     '```tsx',
@@ -162,6 +160,8 @@ const links = [
   { label: 'StackEdit', apply: '[StackEdit](https://stackedit.io/app)' },
 ];
 
+const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
+
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
@@ -210,12 +210,14 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
 
 type StoryProps = {
   text?: string;
-  automerge?: boolean;
-} & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
+  comments?: Comment[];
+} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
 
-const Story = ({ text, automerge, ...props }: StoryProps) => {
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
+const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
+  const [item] = useState({ text: new TextObject(text) });
+  const view = useRef<EditorView>(null);
   const model = useTextModel({ text: item.text });
+  useComments(view.current, comments);
   if (!model) {
     return null;
   }
@@ -224,7 +226,7 @@ const Story = ({ text, automerge, ...props }: StoryProps) => {
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex h-full justify-center'>
         <div className='flex flex-col h-full w-[800px]'>
-          <MarkdownEditor model={model} {...props} />
+          <MarkdownEditor ref={view} model={model} placeholder={placeholder} {...props} />
         </div>
       </div>
     </div>
@@ -238,11 +240,13 @@ export default {
   render: Story,
 };
 
-const extensions = [
+const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
+  formatting(),
+  heading(),
   hr(),
   image(),
   link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
@@ -251,35 +255,25 @@ const extensions = [
 ];
 
 export const Default = {
-  render: () => <Story text={document} extensions={extensions} />,
+  render: () => <Story text={document} extensions={defaults} />,
 };
 
 export const Readonly = {
-  render: () => <Story text={document} extensions={extensions} readonly />,
+  render: () => <Story text={document} extensions={defaults} readonly />,
 };
 
-const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
-
-export const Large = {
-  render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
+export const NoExtensions = {
+  render: () => <Story text={document} />,
 };
 
+const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
+
 export const Empty = {
   render: () => <Story />,
 };
 
-export const NoExtensions = {
-  render: () => <Story text={document} />,
-};
-
-// TODO(burdon): Cursor bug if no newline after BR (cursor down just loops back to start of each paragraph).
-export const HorizontalRule = {
-  render: () => (
-    <Story
-      text={str('# Horizontal Rule', '', text.paragraphs, '---', '', text.paragraphs, '---', '', text.paragraphs)}
-      extensions={[hr()]}
-    />
-  ),
+export const Scrolling = {
+  render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
 };
 
 export const Links = {
@@ -292,34 +286,36 @@ export const Links = {
 };
 
 export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} readonly />,
-};
-
-export const Table = {
-  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
+  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
 };
 
 export const Image = {
-  render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
+  render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
 };
 
-export const Tasklist = {
-  render: () => <Story text={str(text.tasks, '', text.list, text.footer)} extensions={[tasklist()]} />,
-};
-
-export const Outliner = {
+export const Lists = {
   render: () => (
-    <Story
-      text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
-      extensions={[outliner()]}
-    />
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[tasklist()]} />
   ),
 };
 
+export const Table = {
+  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
+};
+
+// export const Outliner = {
+//   render: () => (
+//     <Story
+//       text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
+//       extensions={[outliner()]}
+//     />
+//   ),
+// };
+
 export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
         link({ onRender: onRenderLink }),
         autocomplete({
@@ -330,8 +326,6 @@ export const Autocomplete = {
   ),
 };
 
-const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
-
 export const Mention = {
   render: () => (
     <Story
@@ -347,18 +341,18 @@ export const Mention = {
 
 export const Comments = {
   render: () => {
-    const [commentRanges, setCommentRanges] = useState<CommentRange[]>([]);
+    const [_comments, setComments] = useState<Comment[]>([]);
 
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={commentRanges}
+        comments={_comments}
         extensions={[
           comments({
             onHover: onCommentsHover,
             onCreate: (range) => {
               const id = PublicKey.random().toHex();
-              setCommentRanges((commentRanges) => [...commentRanges, { id, cursor: range }]);
+              setComments((commentRanges) => [...commentRanges, { id, cursor: range }]);
               return id;
             },
             onSelect: (state) => {
@@ -367,9 +361,9 @@ export const Comments = {
                 console.log(
                   'update',
                   JSON.stringify({
-                    active: state.active?.slice(0, 8),
-                    closest: state.closest?.slice(0, 8),
-                    ranges: state.ranges.length,
+                    comments: state.comments.length,
+                    active: state.selection.current?.slice(0, 8),
+                    closest: state.selection.closest?.slice(0, 8),
                   }),
                 );
               }
@@ -381,6 +375,15 @@ export const Comments = {
   },
 };
 
+export const HorizontalRule = {
+  render: () => (
+    <Story
+      text={str('# Horizontal Rule', '', text.paragraphs, '---', text.paragraphs, '---', text.paragraphs)}
+      extensions={[hr()]}
+    />
+  ),
+};
+
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
 export const Typewriter = {
@@ -414,17 +417,3 @@ export const Blast = {
     />
   ),
 };
-
-export const Diagnostics = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        // Cursor moved.
-        EditorView.updateListener.of((update) => {
-          console.log('update', update.view.state.selection.main.head);
-        }),
-      ]}
-    />
-  ),
-};

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 { basicBundle, markdownBundle } 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;
-  autofocus?: boolean;
+  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
+  autoFocus?: boolean;
+  lineWrapping?: boolean;
+  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
-  comments?: CommentRange[]; // TODO(burdon): Move into extension?
-  extensions?: Extension[];
-  editorMode?: EditorMode;
+  editorMode?: EditorMode; // TODO(burdon): Factor out.
   placeholder?: string;
   theme?: ThemeStyles;
   slots?: TextEditorSlots;
+  extensions?: Extension[];
+  debug?: boolean;
 };
 
 /**
@@ -65,108 +73,129 @@ export type TextEditorProps = {
  */
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    { model, autofocus, readonly, selection, 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);
+
+    // 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]);
 
+    // Set focus.
     useEffect(() => {
-      if (autofocus) {
+      if (autoFocus) {
         view?.focus();
       }
-    }, [autofocus, view]);
-
-    // TODO(burdon): Factor out as extension/hook.
-    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]);
-
-    // TODO(burdon): Factor out as extension/hook.
-    useEffect(() => {
-      if (view && comments !== undefined) {
-        view.dispatch({
-          effects: setCommentRange.of({ model, comments }),
-        });
-      }
-    }, [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;
           }
         }
@@ -179,9 +208,9 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
         key={model.id}
         role='none'
         tabIndex={0}
-        onKeyUp={handleKeyUp}
         {...slots.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
         ref={rootRef}
       />
     );
@@ -189,14 +218,14 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 );
 
 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={[basicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -205,16 +234,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={[markdownBundle({ themeMode, placeholder }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -225,7 +253,11 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('w-full 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',
   },
 };