@dxos/react-ui-editor 0.3.11-main.1c19c60 → 0.3.11-main.1d8382a

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

@@ -8,7 +8,7 @@ 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';
@@ -16,7 +16,7 @@ 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,
@@ -33,7 +33,6 @@ import {
   typewriter,
   type CommentsOptions,
   type LinkOptions,
-  mermaid,
 } from '../../extensions';
 import { type CommentRange, useTextModel } from '../../hooks';
 
@@ -123,8 +122,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('', '', '', '', '')
 };
 
@@ -216,7 +213,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) {
@@ -227,7 +223,7 @@ const Story = ({ text, automerge, ...props }: StoryProps) => {
     <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} />
+          <MarkdownEditor model={model} {...props} />
           <div className='flex shrink-0 h-[300px]'></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} />,
 };
@@ -342,10 +348,6 @@ 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[]>([]);

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

@@ -5,13 +5,13 @@
 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 { defaultSlots, TextEditor, type TextEditorProps, type TextEditorSlots } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
 import { textTheme } from '../../themes';
@@ -31,7 +31,6 @@ const Story = ({
   automerge,
   ...props
 }: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
-  const ref = useRef<TextEditorRef>(null);
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -42,7 +41,7 @@ const Story = ({
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex justify-center overflow-y-scroll'>
         <div className='flex flex-col w-[800px] py-16'>
-          <TextEditor ref={ref} model={model} {...props} />
+          <TextEditor model={model} {...props} />
           <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>

package/src/components/TextEditor/TextEditor.tsx

@@ -15,6 +15,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useState,
+  useRef,
 } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -34,15 +35,10 @@ 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?: {
@@ -56,6 +52,7 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
+  focus?: boolean;
   readonly?: boolean; // TODO(burdon): Move into model.
   comments?: CommentRange[]; // TODO(burdon): Move into extension.
   extensions?: Extension[];
@@ -65,17 +62,20 @@ export type TextEditorProps = {
 
 /**
  * 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, focus, readonly, comments, extensions = [], editorMode, 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]);
+    const { themeMode } = useThemeContext();
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [view, setView] = useState<EditorView | null>(null);
+    // NOTE: This doesn't update useRef.
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
+    useEffect(() => {
+      if (focus && view) {
+        view.focus();
+      }
+    }, [focus, view]);
 
     // TODO(burdon): Factor out as extension.
     const { awareness, peer } = model;
@@ -99,7 +99,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     }, [view, comments]);
 
     useEffect(() => {
-      if (!root) {
+      if (!model || !rootRef.current) {
         return;
       }
 
@@ -131,36 +131,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]);
+        // },
       });
 
+      setView(newView);
       return () => {
-        view?.destroy();
-        setEditor(undefined);
+        newView?.destroy();
+        setView(null);
       };
-    }, [root, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
+          // TODO(burdon): ???
+          // case 'Enter': {
+          //   view?.contentDOM.focus();
+          //   break;
+          // }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
             break;
           }
         }
@@ -171,7 +170,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        ref={rootRef}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -181,32 +180,39 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, extensions = [], 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: updatedSlots?.editor?.placeholder }),
+          ...extensions,
+        ]}
+        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, extensions = [], 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: updatedSlots?.editor?.placeholder }),
+          ...extensions,
+        ]}
+        slots={updatedSlots}
         {...props}
       />
     );

package/src/extensions/autocomplete.ts

@@ -13,6 +13,7 @@ import {
   type CompletionContext,
   type CompletionResult,
 } from '@codemirror/autocomplete';
+import { markdownLanguage } from '@codemirror/lang-markdown';
 import { keymap } from '@codemirror/view';
 
 export type AutocompleteResult = Completion;
@@ -28,32 +29,32 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
 
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
 
       // Don't start unless key press.
       activateOnTyping: false,
+    }),
 
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context: CompletionContext): CompletionResult | null => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || (match.from === match.to && !context.explicit)) {
-            return null;
-          }
-
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase()),
-          };
-        },
-      ],
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context: CompletionContext): CompletionResult | null => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || (match.from === match.to && !context.explicit)) {
+          return null;
+        }
+
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase()),
+        };
+      },
     }),
   ];
 };

package/src/extensions/automerge/index.ts

@@ -4,3 +4,4 @@
 
 export { automerge } from './automerge';
 export { type IDocHandle } from './defs';
+export { cursorConverter } from './cursor';

package/src/extensions/code.ts

@@ -11,24 +11,23 @@ import {
   Decoration,
   type BlockInfo,
 } from '@codemirror/view';
-import get from 'lodash.get';
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 
 const CODE_REGEX = /```[\s\S]*?```/gs;
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
   '& .cm-codeblock': {
-    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+    fontFamily: getToken('fontFamily.mono', []).join(','),
   },
   '&light [aria-readonly="true"] .cm-codeblock': {
-    background: get(tokens, 'extend.colors.neutral.50'),
+    background: getToken('extend.colors.neutral.50'),
   },
   '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: get(tokens, 'extend.colors.neutral.850'),
+    background: getToken('extend.colors.neutral.850'),
   },
   '& [aria-readonly="true"] .cm-codeblock': {
     display: 'block',

package/src/extensions/comments.ts

@@ -16,7 +16,6 @@ import {
   WidgetType,
   type Rect,
 } from '@codemirror/view';
-import get from 'lodash.get';
 import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
@@ -25,7 +24,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { type CommentRange, type EditorModel, type Range } from '../hooks';
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 import { callbackWrapper, CursorConverter } from '../util';
 
 // TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
@@ -43,10 +42,10 @@ const styles = EditorView.baseTheme({
     backgroundColor: 'orange',
   },
   '& .cm-comment': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.50'),
   },
   '& .cm-comment-active': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.100'),
   },
 });
 
@@ -417,5 +416,5 @@ const getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) =>
   const parts = cursor.split(':');
   const from = cursorConverter.fromCursor(parts[0]);
   const to = cursorConverter.fromCursor(parts[1]);
-  return from && to ? { from, to } : undefined;
+  return from !== undefined && to !== undefined ? { from, to } : undefined;
 };

package/src/extensions/hr.ts

@@ -11,16 +11,15 @@ import {
   type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
-import get from 'lodash.get';
 
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
   '& .cm-hr': {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
+    borderBottom: `1px solid ${getToken('extend.colors.neutral.200')}`,
   },
 });
 

package/src/extensions/image.ts

@@ -3,28 +3,45 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { type EditorState, type Extension, StateField, type Transaction, type Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 
 export type ImageOptions = {};
 
 export const image = (options: ImageOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+  return StateField.define<DecorationSet>({
+    create: (state) => {
+      return Decoration.set(buildDecorations(0, state.doc.length, state));
+    },
+    update: (value: DecorationSet, tr: Transaction) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      // Find range of changes and cursor changes.
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      // Expand to cover lines
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state),
+      });
+    },
     provide: (field) => EditorView.decorations.from(field),
   });
 };
 
-const update = (state: EditorState, options: ImageOptions) => {
-  const builder = new RangeSetBuilder();
+const buildDecorations = (from: number, to: number, state: EditorState) => {
+  const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
 
   syntaxTree(state).iterate({
@@ -34,20 +51,20 @@ const update = (state: EditorState, options: ImageOptions) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(
-            hide ? node.from : node.to,
-            node.to,
+          decorations.push(
             Decoration.replace({
               block: true, // Prevent cursor from entering.
               widget: new ImageWidget(url),
-            }),
+            }).range(hide ? node.from : node.to, node.to),
           );
         }
       }
     },
+    from,
+    to,
   });
 
-  return builder.finish();
+  return decorations;
 };
 
 class ImageWidget extends WidgetType {
@@ -55,7 +72,6 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  // TODO(burdon): Does this need to be unique for each position?
   override eq(other: WidgetType) {
     return this._url === (other as any as ImageWidget)._url;
   }
@@ -64,6 +80,8 @@ class ImageWidget extends WidgetType {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');
+    // Images are hidden until successfully loaded to avoid flickering effects.
+    img.onload = () => img.classList.add('cm-loaded-image');
     return img;
   }
 }

package/src/extensions/index.ts

@@ -15,7 +15,6 @@ export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
-export * from './mermaid';
 export * from './table';
 export * from './tasklist';
 export * from './typewriter';