@dxos/react-ui-editor 0.4.3 → 0.4.4-main.01e2847

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.3",
+  "version": "0.4.4-main.01e2847",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,20 +36,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.3",
-    "@dxos/automerge": "0.4.3",
-    "@dxos/context": "0.4.3",
-    "@dxos/debug": "0.4.3",
-    "@dxos/display-name": "0.4.3",
-    "@dxos/echo-schema": "0.4.3",
-    "@dxos/invariant": "0.4.3",
-    "@dxos/log": "0.4.3",
-    "@dxos/protocols": "0.4.3",
-    "@dxos/react-async": "0.4.3",
-    "@dxos/react-ui-theme": "0.4.3",
-    "@dxos/react-ui": "0.4.3",
-    "@dxos/text-model": "0.4.3",
-    "@dxos/util": "0.4.3"
+    "@dxos/context": "0.4.4-main.01e2847",
+    "@dxos/async": "0.4.4-main.01e2847",
+    "@dxos/debug": "0.4.4-main.01e2847",
+    "@dxos/automerge": "0.4.4-main.01e2847",
+    "@dxos/display-name": "0.4.4-main.01e2847",
+    "@dxos/log": "0.4.4-main.01e2847",
+    "@dxos/echo-schema": "0.4.4-main.01e2847",
+    "@dxos/invariant": "0.4.4-main.01e2847",
+    "@dxos/protocols": "0.4.4-main.01e2847",
+    "@dxos/react-async": "0.4.4-main.01e2847",
+    "@dxos/react-ui": "0.4.4-main.01e2847",
+    "@dxos/react-ui-theme": "0.4.4-main.01e2847",
+    "@dxos/util": "0.4.4-main.01e2847",
+    "@dxos/text-model": "0.4.4-main.01e2847"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -76,20 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.4.3",
-    "@dxos/echo-signals": "0.4.3",
-    "@dxos/echo-typegen": "0.4.3",
-    "@dxos/keyboard": "0.4.3",
-    "@dxos/react-ui": "0.4.3",
-    "@dxos/react-client": "0.4.3",
-    "@dxos/random": "0.4.3",
-    "@dxos/storybook-utils": "0.4.3"
+    "@dxos/echo-signals": "0.4.4-main.01e2847",
+    "@dxos/echo-typegen": "0.4.4-main.01e2847",
+    "@dxos/keyboard": "0.4.4-main.01e2847",
+    "@dxos/react-client": "0.4.4-main.01e2847",
+    "@dxos/react-ui": "0.4.4-main.01e2847",
+    "@dxos/storybook-utils": "0.4.4-main.01e2847",
+    "@dxos/random": "0.4.4-main.01e2847",
+    "@dxos/config": "0.4.4-main.01e2847"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.3"
+    "@dxos/react-client": "0.4.4-main.01e2847"
   },
   "publishConfig": {
     "access": "public"

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

@@ -211,15 +211,16 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
 };
 
 type StoryProps = {
+  id?: string;
   text?: string;
   comments?: Comment[];
 } & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'extensions'>;
 
-const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
+const Story = ({ id = 'test', 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);
+  useComments(view.current, id, comments);
   if (!model) {
     return null;
   }

package/src/components/TextEditor/TextEditor.tsx

@@ -65,7 +65,7 @@ export type TextEditorProps = {
  * Base text editor.
  */
 // TODO(burdon): Replace with useTextEditor.
-export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
+export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
     { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
     forwardedRef,
@@ -202,7 +202,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
@@ -219,7 +219,7 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
+export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
   ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);

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

@@ -7,7 +7,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
@@ -24,7 +24,7 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
-import { editorWithToolbarLayout } from '../../styles/layout';
+import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
 import { markdownTheme } from '../../themes';
 import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
@@ -55,7 +55,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          editor: { className: 'min-bs-full' },
+          editor: { className: editorFillLayoutEditor },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -85,7 +85,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       <div role='none' className='overflow-y-auto'>
         <div
           role='textbox'
-          className={mx(textBlockWidth, 'min-bs-full p-4 surface-attention fg-base')}
+          className={mx(textBlockWidth, attentionSurface, editorFillLayoutRoot, 'p-4')}
           ref={parentRef}
         />
       </div>

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -25,16 +25,16 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
-import { editorWithToolbarLayout } from '../../styles';
+import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
 import translations from '../../translations';
 import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
 
-const Story: FC<{ content: string }> = ({ content }) => {
+const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) => {
   const [item] = useState({ text: new TextObject(content) });
   const [_comments, setComments] = useState<Comment[]>([]);
-  const [editorRef, editorView] = useEditorView();
+  const [editorRef, viewInvalidated] = useEditorView(id);
   const model = useTextModel({ text: item.text });
   const [formattingState, formattingObserver] = useFormattingState();
   const extensions = useMemo(
@@ -57,8 +57,8 @@ const Story: FC<{ content: string }> = ({ content }) => {
     [],
   );
 
-  useComments(editorView, _comments);
-  const handleAction = useActionHandler(editorView);
+  useComments(viewInvalidated ? null : editorRef.current, id, _comments);
+  const handleAction = useActionHandler(editorRef.current);
 
   if (!model) {
     return null;
@@ -75,7 +75,10 @@ const Story: FC<{ content: string }> = ({ content }) => {
         ref={editorRef}
         model={model}
         extensions={extensions}
-        slots={{ root: { className: mx(textBlockWidth, 'pli-2') } }}
+        slots={{
+          root: { className: mx(textBlockWidth, editorFillLayoutRoot, 'pli-2') },
+          editor: { className: editorFillLayoutEditor },
+        }}
       />
     </div>
   );

package/src/components/Toolbar/Toolbar.tsx

@@ -122,7 +122,7 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
-  // const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext('MarkdownFormatting');
   const blockType = state ? state.blockType : 'paragraph';
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -134,15 +134,12 @@ const MarkdownHeading = () => {
       value={value ?? '0'}
       onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
     >
-      <Select.TriggerButton>
-        <HeadingIcon className={iconStyles} />
-        {/* TODO(burdon): Incorrectly positioned. */}
-        {/* <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}> */}
-        {/*  <span className='sr-only'>{t('heading label')}</span> */}
-        {/*  <HeadingIcon className={iconStyles} /> */}
-        {/*  <CaretDown className={getSize(2)} weight='bold' /> */}
-        {/* </NaturalToolbar.Button> */}
-      </Select.TriggerButton>
+      <NaturalToolbar.Button asChild>
+        <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
+          <span className='sr-only'>{t('heading label')}</span>
+          <HeadingIcon className={iconStyles} />
+        </Select.TriggerButton>
+      </NaturalToolbar.Button>
       <Select.Portal>
         <Select.Content>
           <Select.ScrollUpButton />
@@ -211,7 +208,7 @@ const MarkdownLists = () => {
   const { onAction, state } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ?? undefined}>
+    <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ? `list-${state.listStyle}` : ''}>
       {markdownLists.map(({ type, getState, Icon }) => (
         <ToolbarButton
           key={type}
@@ -235,7 +232,7 @@ const markdownBlocks: ButtonProps[] = [
   {
     type: 'codeblock',
     Icon: CodeBlock,
-    getState: (state) => state.blockQuote,
+    getState: (state) => state.blockType === 'codeblock',
     disabled: (state) => !state.blankLine,
   },
   {
@@ -251,7 +248,7 @@ const MarkdownBlocks = () => {
   const { t } = useTranslation(translationKey);
   const value = markdownBlocks.find(({ getState }) => state && getState(state));
   return (
-    <NaturalToolbar.ToggleGroup type='single' value={value?.type}>
+    <NaturalToolbar.ToggleGroup type='single' value={value?.type ?? ''}>
       {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
         <ToolbarButton
           key={type}

package/src/extensions/autocomplete.ts

@@ -35,7 +35,7 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: true,
+      activateOnTyping: false,
 
       // closeOnBlur: false,
       // defaultKeymap: false,

package/src/extensions/automerge/cursor.ts

@@ -6,6 +6,7 @@ import get from 'lodash.get';
 
 import type { Prop } from '@dxos/automerge/automerge';
 import { next as A } from '@dxos/automerge/automerge';
+import { log } from '@dxos/log';
 
 import { type IDocHandle } from './defs';
 import { type CursorConverter } from '../cursor';
@@ -23,8 +24,13 @@ export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConvert
       return 'end';
     }
 
-    // NOTE: Slice is needed because getCursor mutates the array.
-    return A.getCursor(doc, path.slice(), pos);
+    try {
+      // NOTE: Slice is needed because getCursor mutates the array.
+      return A.getCursor(doc, path.slice(), pos);
+    } catch (err) {
+      log.catch(err);
+      return ''; // In case of invalid request (e.g., wrong document).
+    }
   },
 
   fromCursor: (cursor) => {
@@ -46,7 +52,12 @@ export const cursorConverter = (handle: IDocHandle, path: Prop[]): CursorConvert
       }
     }
 
-    // NOTE: Slice is needed because getCursor mutates the array.
-    return A.getCursorPosition(doc, path.slice(), cursor);
+    try {
+      // NOTE: Slice is needed because getCursor mutates the array.
+      return A.getCursorPosition(doc, path.slice(), cursor);
+    } catch (err) {
+      log.catch(err);
+      return 0; // In case of invalid request (e.g., wrong document).
+    }
   },
 });

package/src/extensions/automerge/defs.ts

@@ -35,7 +35,6 @@ export type IDocHandle<T = any> = {
   docSync(): Doc<T> | undefined;
   change(callback: ChangeFn<T>, options?: ChangeOptions<T>): void;
   changeAt(heads: Heads, callback: ChangeFn<T>, options?: ChangeOptions<T>): string[] | undefined;
-
   addListener(event: 'change', listener: () => void): void;
   removeListener(event: 'change', listener: () => void): void;
 };

package/src/extensions/comments.ts

@@ -16,31 +16,11 @@ import { type Comment, type Range } from '../hooks';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '&light .cm-comment, &light .cm-comment-current': { mixBlendMode: 'darken' },
-  '&dark .cm-comment, &dark .cm-comment-current': { mixBlendMode: 'plus-lighter' },
-  '&light .cm-comment': {
-    backgroundColor: getToken('extend.colors.yellow.50'),
-  },
-  '&light .cm-comment-current': {
-    backgroundColor: getToken('extend.colors.yellow.100'),
-  },
-  '&dark .cm-comment': {
-    color: getToken('extend.colors.yellow.50'),
-    backgroundColor: getToken('extend.colors.yellow.900'),
-  },
-  '&dark .cm-comment-current': {
-    color: getToken('extend.colors.yellow.100'),
-    backgroundColor: getToken('extend.colors.yellow.950'),
-  },
-});
+//
+// State management.
+//
 
-const commentMark = Decoration.mark({ class: 'cm-comment', attributes: { 'data-testid': 'cm-comment' } });
-const commentCurrentMark = Decoration.mark({
-  class: 'cm-comment-current',
-  attributes: { 'data-testid': 'cm-comment' },
-});
+const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
 
 type CommentState = {
   comment: Comment;
@@ -54,30 +34,12 @@ type SelectionState = {
 };
 
 export type CommentsState = {
+  id?: string;
   comments: CommentState[];
   selection: SelectionState;
 };
 
-export const focusComment = (view: EditorView, id: string, center = true) => {
-  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
-  if (!comment?.comment.cursor) {
-    return;
-  }
-
-  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
-  if (range) {
-    view.dispatch({
-      selection: { anchor: range.from },
-      effects: [
-        //
-        EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined),
-        setSelection.of({ current: id }),
-      ],
-    });
-  }
-};
-
-export const setComments = StateEffect.define<Comment[]>();
+export const setComments = StateEffect.define<{ id: string; comments: Comment[] }>();
 
 export const setSelection = StateEffect.define<SelectionState>();
 
@@ -88,7 +50,7 @@ const setCommentState = StateEffect.define<CommentsState>();
  * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 const commentsState = StateField.define<CommentsState>({
-  create: () => ({ comments: [], selection: {} }),
+  create: (state) => ({ id: state.facet(documentId), comments: [], selection: {} }),
   update: (value, tr) => {
     for (const effect of tr.effects) {
       // Update selection.
@@ -98,7 +60,8 @@ const commentsState = StateField.define<CommentsState>({
 
       // Update range from store.
       if (effect.is(setComments)) {
-        const comments: CommentState[] = effect.value
+        const { comments } = effect.value;
+        const commentStates: CommentState[] = comments
           .map((comment) => {
             // Skip cut/deleted comments.
             if (!comment.cursor) {
@@ -110,7 +73,7 @@ const commentsState = StateField.define<CommentsState>({
           })
           .filter(nonNullable);
 
-        return { ...value, comments };
+        return { ...value, comments: commentStates };
       }
 
       // Update entire state.
@@ -123,6 +86,35 @@ const commentsState = StateField.define<CommentsState>({
   },
 });
 
+//
+// UX
+//
+
+const styles = EditorView.baseTheme({
+  '&light .cm-comment, &light .cm-comment-current': { mixBlendMode: 'darken' },
+  '&dark .cm-comment, &dark .cm-comment-current': { mixBlendMode: 'plus-lighter' },
+  '&light .cm-comment': {
+    backgroundColor: getToken('extend.colors.yellow.50'),
+  },
+  '&light .cm-comment-current': {
+    backgroundColor: getToken('extend.colors.yellow.100'),
+  },
+  '&dark .cm-comment': {
+    color: getToken('extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.900'),
+  },
+  '&dark .cm-comment-current': {
+    color: getToken('extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.950'),
+  },
+});
+
+const commentMark = Decoration.mark({ class: 'cm-comment', attributes: { 'data-testid': 'cm-comment' } });
+const commentCurrentMark = Decoration.mark({
+  class: 'cm-comment-current',
+  attributes: { 'data-testid': 'cm-comment' },
+});
+
 /**
  * Decorate ranges.
  */
@@ -151,32 +143,9 @@ const commentsDecorations = EditorView.decorations.compute([commentsState], (sta
   return Decoration.set(decorations);
 });
 
-export type CommentsOptions = {
-  /**
-   * Key shortcut to create a new thread.
-   */
-  key?: string;
-  /**
-   * Called to create a new thread and return the thread id.
-   */
-  onCreate?: (params: { cursor: string; from: number; location?: Rect | null }) => string | undefined;
-  /**
-   * Selection cut/deleted.
-   */
-  onDelete?: (params: { id: string }) => void;
-  /**
-   * Called when a comment is moved.
-   */
-  onUpdate?: (params: { id: string; cursor: string }) => void;
-  /**
-   * Called to notify which thread is currently closest to the cursor.
-   */
-  onSelect?: (state: CommentsState) => void;
-  /**
-   * Called to render tooltip.
-   */
-  onHover?: (el: Element, shortcut: string) => void;
-};
+//
+// Cut-and-paste.
+//
 
 type TrackedComment = { id: string; from: number; to: number };
 
@@ -288,14 +257,12 @@ const mapTrackedComment = (comment: TrackedComment, changes: ChangeDesc) => ({
   to: changes.mapPos(comment.to, 1),
 });
 
-// These are attached to undone/redone transactions in the editor for the purpose of restoring comments
-// that were deleted by the original changes.
+/**
+ * These are attached to undone/redone transactions in the editor for the purpose of restoring comments
+ * that were deleted by the original changes.
+ */
 const restoreCommentEffect = StateEffect.define<TrackedComment>({ map: mapTrackedComment });
 
-const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({
-  combine: (providers) => providers[0],
-});
-
 /**
  * Create comment thread action.
  */
@@ -334,6 +301,43 @@ export const createComment: Command = (view) => {
   return false;
 };
 
+//
+// Options
+//
+
+export type CommentsOptions = {
+  /**
+   * Document id.
+   */
+  id?: string;
+  /**
+   * Key shortcut to create a new thread.
+   */
+  key?: string;
+  /**
+   * Called to create a new thread and return the thread id.
+   */
+  onCreate?: (params: { cursor: string; from: number; location?: Rect | null }) => string | undefined;
+  /**
+   * Selection cut/deleted.
+   */
+  onDelete?: (params: { id: string }) => void;
+  /**
+   * Called when a comment is moved.
+   */
+  onUpdate?: (params: { id: string; cursor: string }) => void;
+  /**
+   * Called to notify which thread is currently closest to the cursor.
+   */
+  onSelect?: (state: CommentsState) => void;
+  /**
+   * Called to render tooltip.
+   */
+  onHover?: (el: Element, shortcut: string) => void;
+};
+
+const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
+
 /**
  * Comment threads.
  * 1). Updates the EditorModel to store relative selections for a set of comments threads.
@@ -352,6 +356,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
   return [
     optionsFacet.of(options),
+    documentId.of(options.id),
     commentsState,
     commentsDecorations,
     styles,
@@ -462,6 +467,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         // Update callback.
         handleSelect({
           selection,
+          id: state.facet(documentId),
           comments: comments.map(({ comment, range }) => ({
             comment,
             range,
@@ -475,15 +481,38 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   ];
 };
 
+//
+// Utils.
+//
+
+export const focusComment = (view: EditorView, id: string, center = true) => {
+  const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
+  if (!comment?.comment.cursor) {
+    return;
+  }
+
+  const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
+  if (range) {
+    view.dispatch({
+      selection: { anchor: range.from },
+      effects: [
+        //
+        EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined),
+        setSelection.of({ current: id }),
+      ],
+    });
+  }
+};
+
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null, id: string, comments: Comment[] = []) => {
   useEffect(() => {
     if (view) {
       view.dispatch({
-        effects: setComments.of(comments),
+        effects: setComments.of({ id, comments }),
       });
     }
-  }, [view, comments]);
+  }, [id, view, comments]);
 };

package/src/extensions/cursor.ts

@@ -14,7 +14,7 @@ import type { Range } from '../hooks';
  *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
  *
  * @param {assoc} number Negative values will associate the cursor with the previous character
- *                       while positive - with the next one.
+ *  while positive - with the next one.
  */
 export interface CursorConverter {
   toCursor(position: number, assoc?: -1 | 1 | undefined): string;
@@ -28,7 +28,9 @@ const defaultCursorConverter: CursorConverter = {
 
 export class Cursor {
   static readonly converter = Facet.define<CursorConverter, CursorConverter>({
-    combine: (providers) => providers[0] ?? defaultCursorConverter,
+    combine: (providers) => {
+      return providers[0] ?? defaultCursorConverter;
+    },
   });
 
   static readonly getCursorFromRange = (state: EditorState, range: Range) => {