@dxos/react-ui-editor 0.3.11-main.008b7c6 → 0.3.11-main.08776d7

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

@@ -8,15 +8,16 @@ import { 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, useRef, useState } from 'react';
+import React, { type FC, StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
+import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
+import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
   autocomplete,
   blast,
@@ -25,7 +26,6 @@ import {
   defaultOptions,
   hr,
   image,
-  listener,
   link,
   mention,
   table,
@@ -33,9 +33,9 @@ import {
   typewriter,
   type CommentsOptions,
   type LinkOptions,
-  mermaid,
+  outliner,
 } from '../../extensions';
-import { type CommentRange, useTextModel } from '../../hooks';
+import { type Comment, useTextModel } from '../../hooks';
 
 // Extensions:
 // TODO(burdon): Table of contents.
@@ -123,8 +123,6 @@ const text = {
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
-  mermaid: str('```mermaid', 'graph TD;', 'A-->B;', 'A-->C;', 'B-->D;', 'C-->D;', '```'),
-
   footer: str('', '', '', '', '')
 };
 
@@ -185,15 +183,15 @@ const Key: FC<{ char: string }> = ({ char }) => (
   </span>
 );
 
-const onCommentsHover: CommentsOptions['onHover'] = (el) => {
+const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   createRoot(el).render(
     <StrictMode>
       <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
         <div>Create comment</div>
-        {/* TODO(burdon): Unify shortcuts. */}
         <div className='flex gap-1'>
-          <Key char='⌘' />
-          <Key char="'" />
+          {keySymbols(parseShortcut(shortcut)).map((char) => (
+            <Key key={char} char={char} />
+          ))}
         </div>
       </div>
     </StrictMode>,
@@ -204,7 +202,7 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-1')} />
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
       </a>
     </StrictMode>,
   );
@@ -216,7 +214,6 @@ type StoryProps = {
 } & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
 
 const Story = ({ text, automerge, ...props }: StoryProps) => {
-  const ref = useRef<TextEditorRef>(null);
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -225,10 +222,9 @@ const Story = ({ text, automerge, ...props }: StoryProps) => {
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
-        <div className='flex flex-col w-[800px] py-16'>
-          <MarkdownEditor ref={ref} model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
+          <MarkdownEditor model={model} {...props} />
         </div>
       </div>
     </div>
@@ -262,6 +258,16 @@ export const Readonly = {
   render: () => <Story text={document} extensions={extensions} 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 Empty = {
+  render: () => <Story />,
+};
+
 export const NoExtensions = {
   render: () => <Story text={document} />,
 };
@@ -298,17 +304,14 @@ export const Image = {
 };
 
 export const Tasklist = {
+  render: () => <Story text={str(text.tasks, '', text.list, text.footer)} extensions={[tasklist()]} />,
+};
+
+export const Outliner = {
   render: () => (
     <Story
-      text={str(text.tasks, '', text.list, text.footer)}
-      extensions={[
-        tasklist(),
-        listener({
-          onChange: (text) => {
-            console.log(text);
-          },
-        }),
-      ]}
+      text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
+      extensions={[outliner()]}
     />
   ),
 };
@@ -342,24 +345,20 @@ export const Mention = {
   ),
 };
 
-export const Mermaid = {
-  render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
-};
-
 export const Comments = {
   render: () => {
-    const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
+    const [commentRanges, setCommentRanges] = useState<Comment[]>([]);
 
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={commentsStates}
+        comments={commentRanges}
         extensions={[
           comments({
             onHover: onCommentsHover,
-            onCreate: (relPos) => {
+            onCreate: (range) => {
               const id = PublicKey.random().toHex();
-              setCommentStates((comments) => [...comments, { id, cursor: relPos }]);
+              setCommentRanges((commentRanges) => [...commentRanges, { id, cursor: range }]);
               return id;
             },
             onSelect: (state) => {
@@ -368,9 +367,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.active?.slice(0, 8),
+                    closest: state.selection.closest?.slice(0, 8),
                   }),
                 );
               }
@@ -382,8 +381,15 @@ export const Comments = {
   },
 };
 
+const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+
 export const Typewriter = {
-  render: () => <Story text={str('# Typewriter', '', text.paragraphs, text.footer)} extensions={[typewriter()]} />,
+  render: () => (
+    <Story
+      text={str('# Typewriter', '', text.paragraphs, text.footer)}
+      extensions={[typewriter({ items: typewriterItems })]}
+    />
+  ),
 };
 
 export const Blast = {
@@ -391,9 +397,7 @@ export const Blast = {
     <Story
       text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
       extensions={[
-        typewriter({
-          items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
-        }),
+        typewriter({ items: typewriterItems }),
         blast(
           defaultsDeep(
             {

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

@@ -4,17 +4,15 @@
 
 import '@dxosTheme';
 
-import defaultsDeep from 'lodash.defaultsdeep';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
+import { TextEditor, type TextEditorProps } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
-import { textTheme } from '../../themes';
 
 const initialText = [
   '# TextEditor',
@@ -30,8 +28,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
-  const ref = useRef<TextEditorRef>(null);
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'placeholder' | 'slots'>) => {
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -40,10 +37,9 @@ const Story = ({
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex justify-center'>
         <div className='flex flex-col w-[800px] py-16'>
-          <TextEditor ref={ref} model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
+          <TextEditor model={model} {...props} />
         </div>
       </div>
     </div>
@@ -58,49 +54,19 @@ export default {
 };
 
 export const Default = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
-};
-
-export const Listener = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-      extensions={[listener({ onChange: (text) => console.log(text) })]}
-    />
-  ),
+  render: () => <Story placeholder='Enter text...' />,
 };
 
 export const Text = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
+  render: () => <Story text={initialText} placeholder='Enter text...' />,
 };
 
 export const Automerge = {
+  render: () => <Story text={initialText} placeholder='Enter text...' automerge />,
+};
+
+export const Listener = {
   render: () => (
-    <Story
-      automerge
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
+    <Story placeholder='Enter text...' extensions={[listener({ onChange: (text) => console.log(text) })]} />
   ),
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -15,14 +15,15 @@ import React, {
   useEffect,
   useImperativeHandle,
   useState,
+  useRef,
 } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle, setCommentRange } from '../../extensions';
-import { type CommentRange, type EditorModel } from '../../hooks';
+import { basicBundle, markdownBundle, setComments, syncFacet } from '../../extensions';
+import { type Comment, type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 
@@ -34,92 +35,106 @@ export type CursorInfo = {
   to: number;
   line: number;
   lines: number;
+  length: number;
   after?: string;
 };
 
-export type TextEditorRef = {
-  root: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
-  editor?: {
-    className?: string;
-    placeholder?: string;
-    spellCheck?: boolean;
-    tabIndex?: number;
-    theme?: ThemeStyles;
-  };
 };
 
+// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel;
+  autofocus?: boolean;
   readonly?: boolean; // TODO(burdon): Move into model.
-  comments?: CommentRange[]; // TODO(burdon): Move into extension.
+  selection?: { anchor: number; head?: number };
+  comments?: Comment[]; // TODO(burdon): Move into extension?
   extensions?: Extension[];
   editorMode?: EditorMode;
+  placeholder?: string;
+  theme?: ThemeStyles;
   slots?: TextEditorSlots;
 };
 
+// TODO(burdon): Factor out?
+export const useComments = (view?: EditorView | null, comments?: Comment[]) => {
+  useEffect(() => {
+    if (view && comments !== undefined) {
+      view.dispatch({
+        effects: setComments.of(comments),
+      });
+    }
+  }, [view, comments]);
+};
+
+// TODO(burdon): Factor out?
+export const useAwareness = ({ awareness, peer }: EditorModel) => {
+  const { themeMode } = useThemeContext();
+  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]);
+};
+
 /**
  * Base text editor.
- * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
+  (
+    { model, autofocus, readonly, selection, comments, extensions = [], editorMode, theme, slots = defaultSlots },
+    forwardedRef,
+  ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
-      { state?: EditorState; view?: EditorView } | undefined
-    >();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
-
-    // 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]);
+    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);
+    // 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.
+    // Focus.
     useEffect(() => {
-      if (view && comments?.length) {
-        view.dispatch({
-          effects: setCommentRange.of({ model, comments }),
-        });
+      if (autofocus) {
+        view?.focus();
       }
-    }, [view, comments]);
+    }, [view, autofocus]);
+
+    // TODO(burdon): Factor out as extension/hook.
+    useAwareness(model);
+
+    // TODO(burdon): Factor out as extension/hook.
+    useComments(view, comments);
 
     useEffect(() => {
-      if (!root) {
+      if (!model || !rootRef.current) {
         return;
       }
 
-      // TODO(burdon): Remember cursor position.
       // 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(),
-
           // Theme.
           // TODO(burdon): Make theme configurable.
           EditorView.baseTheme(defaultTheme),
-          EditorView.theme(slots?.editor?.theme ?? {}),
+          EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
 
-          // Storage and replication.
+          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
+          editorMode === 'vim' && vim(),
+
+          // Storage and replication (NOTE: must come before other extensions).
           model.extension,
 
           // Custom.
@@ -131,36 +146,35 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       // 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();
-      setEditor({
+      const newView = new EditorView({
+        parent: rootRef.current,
         state,
-        view: new EditorView({
-          state,
-          parent: root,
-          // NOTE: Uncomment to spy on all transactions.
-          // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-          // dispatch: (transaction, view) => {
-          //   view.update([transaction]);
-          // },
-        }),
+        // NOTE: Uncomment to spy on all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatch: (transaction, view) => {
+          view.update([transaction]);
+
+          // TODO(burdon): Is there a place to register this?
+          view.state.facet(syncFacet)?.reconcile(view);
+        },
       });
 
+      setView(newView);
       return () => {
-        view?.destroy();
-        setEditor(undefined);
+        newView?.destroy();
+        setView(null);
       };
-    }, [root, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
+    // TODO(burdon): Replace with keymap?
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
-
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
+              rootRef.current?.focus();
+            }
             break;
           }
         }
@@ -171,42 +185,46 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        role='none'
         tabIndex={0}
-        {...slots?.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
+        {...slots.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        ref={rootRef}
       />
     );
   },
 );
 
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultTextSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[basicBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
   },
 );
 
-export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+// TODO(burdon): Remove (Just provide bundle, slots).
+export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
@@ -215,20 +233,14 @@ export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2', inputSurface),
+    className: mx('w-full p-2 overflow-y-auto', inputSurface),
   },
 };
 
 export const defaultTextSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
 };
 
 export const defaultMarkdownSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: markdownTheme,
-  },
 };