@dxos/react-ui-editor 0.4.4-main.2a45fa8 → 0.4.4-main.2c7ecda

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.4-main.2a45fa8",
+  "version": "0.4.4-main.2c7ecda",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,25 +36,25 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.4-main.2a45fa8",
-    "@dxos/automerge": "0.4.4-main.2a45fa8",
-    "@dxos/context": "0.4.4-main.2a45fa8",
-    "@dxos/display-name": "0.4.4-main.2a45fa8",
-    "@dxos/debug": "0.4.4-main.2a45fa8",
-    "@dxos/invariant": "0.4.4-main.2a45fa8",
-    "@dxos/echo-schema": "0.4.4-main.2a45fa8",
-    "@dxos/log": "0.4.4-main.2a45fa8",
-    "@dxos/protocols": "0.4.4-main.2a45fa8",
-    "@dxos/react-ui": "0.4.4-main.2a45fa8",
-    "@dxos/react-async": "0.4.4-main.2a45fa8",
-    "@dxos/react-ui-theme": "0.4.4-main.2a45fa8",
-    "@dxos/text-model": "0.4.4-main.2a45fa8",
-    "@dxos/util": "0.4.4-main.2a45fa8"
+    "@dxos/async": "0.4.4-main.2c7ecda",
+    "@dxos/automerge": "0.4.4-main.2c7ecda",
+    "@dxos/context": "0.4.4-main.2c7ecda",
+    "@dxos/debug": "0.4.4-main.2c7ecda",
+    "@dxos/display-name": "0.4.4-main.2c7ecda",
+    "@dxos/echo-schema": "0.4.4-main.2c7ecda",
+    "@dxos/invariant": "0.4.4-main.2c7ecda",
+    "@dxos/react-async": "0.4.4-main.2c7ecda",
+    "@dxos/log": "0.4.4-main.2c7ecda",
+    "@dxos/protocols": "0.4.4-main.2c7ecda",
+    "@dxos/react-ui": "0.4.4-main.2c7ecda",
+    "@dxos/react-ui-theme": "0.4.4-main.2c7ecda",
+    "@dxos/text-model": "0.4.4-main.2c7ecda",
+    "@dxos/util": "0.4.4-main.2c7ecda"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
     "@phosphor-icons/react": "^2.0.5",
-    "@preact/signals-react": "^1.3.6",
+    "@preact/signals-react": "^1.3.8",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^17.0.2",
     "@vitest/ui": "^1.2.1",
-    "deepsignal": "1.4.0-shallow.0",
+    "deepsignal": "^1.5.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^20.0.1",
     "react": "^18.2.0",
@@ -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.4-main.2a45fa8",
-    "@dxos/echo-signals": "0.4.4-main.2a45fa8",
-    "@dxos/keyboard": "0.4.4-main.2a45fa8",
-    "@dxos/react-client": "0.4.4-main.2a45fa8",
-    "@dxos/react-ui": "0.4.4-main.2a45fa8",
-    "@dxos/random": "0.4.4-main.2a45fa8",
-    "@dxos/storybook-utils": "0.4.4-main.2a45fa8",
-    "@dxos/echo-typegen": "0.4.4-main.2a45fa8"
+    "@dxos/config": "0.4.4-main.2c7ecda",
+    "@dxos/echo-signals": "0.4.4-main.2c7ecda",
+    "@dxos/keyboard": "0.4.4-main.2c7ecda",
+    "@dxos/random": "0.4.4-main.2c7ecda",
+    "@dxos/echo-typegen": "0.4.4-main.2c7ecda",
+    "@dxos/react-ui": "0.4.4-main.2c7ecda",
+    "@dxos/react-client": "0.4.4-main.2c7ecda",
+    "@dxos/storybook-utils": "0.4.4-main.2c7ecda"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.4-main.2a45fa8"
+    "@dxos/react-client": "0.4.4-main.2c7ecda"
   },
   "publishConfig": {
     "access": "public"

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

@@ -131,6 +131,12 @@ const document = str(
   '',
   '> This is a block quote.',
   '',
+  '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
+  '',
+  '> This is',
+  '> a multi-line',
+  '> block quote.',
+  '',
   'This is all about https://dxos.org and related technologies.',
   '',
   'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
@@ -211,15 +217,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

@@ -15,6 +15,7 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 
 import { log } from '@dxos/log';
@@ -65,7 +66,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,
@@ -172,7 +173,8 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
         newView?.destroy();
         setView(null);
       };
-    }, [rootRef, model, readonly, themeMode]);
+      // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
+    }, [rootRef, extensions, model, readonly, themeMode]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -202,15 +204,22 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
+  (
+    { readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props },
+    forwardedRef,
+  ) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
+    const extensions = useMemo(
+      () => [createBasicBundle({ themeMode, placeholder, lineWrapping }), ...(_extensions ?? [])],
+      [themeMode, placeholder, lineWrapping, _extensions],
+    );
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        extensions={extensions}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -219,15 +228,19 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
+    const extensions = useMemo(
+      () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
+      [themeMode, placeholder, _extensions],
+    );
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
+        extensions={extensions}
         theme={theme}
         slots={updatedSlots}
         {...props}

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

@@ -8,7 +8,7 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 import '@preact/signals-react';
 import { EditorView } from '@codemirror/view'; // Register react integration.
 import get from 'lodash.get';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -37,17 +37,20 @@ type EditorProps = {
 };
 
 const Editor = ({ handle, path = ['text'] }: EditorProps) => {
-  const { parentRef } = useTextEditor({
-    autoFocus: true,
-    doc: get(handle.docSync()!, path),
-    extensions: [
-      //
+  const extensions = useMemo(
+    () => [
       EditorView.baseTheme(defaultTheme),
       EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
       createBasicBundle({ placeholder: 'Type here...' }),
       automerge({ handle, path }),
       awareness(),
     ],
+    [handle, path],
+  );
+  const { parentRef } = useTextEditor({
+    autoFocus: true,
+    doc: get(handle.docSync()!, path),
+    extensions,
   });
 
   return <div ref={parentRef} />;
@@ -133,7 +136,7 @@ export const WithEcho = {
             }),
           );
         }}
-        Component={EchoStory}
+        component={EchoStory}
       />
     );
   },

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

@@ -4,14 +4,16 @@
 
 import '@dxosTheme';
 
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { useThemeContext } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
 import {
+  type EditorMode,
+  EditorModes,
   code,
   createMarkdownExtensions,
   formatting,
@@ -45,11 +47,10 @@ type StoryProps = {
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
-  const { parentRef, view } = useTextEditor({
-    autoFocus,
-    doc,
-    extensions: [
-      //
+  const [editorMode, setEditorMode] = useState<EditorMode>('default');
+  const extensions = useMemo(
+    () => [
+      editorMode ? EditorModes[editorMode] : [],
       createDataExtensions({ readonly }),
       createThemeExtensions({
         themeMode,
@@ -71,16 +72,19 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       tasklist(),
       trackFormatting,
     ],
-  });
+    [editorMode, themeMode, placeholder, trackFormatting, readonly],
+  );
+  const { parentRef, view } = useTextEditor({ autoFocus, doc, extensions });
 
   const handleAction = useActionHandler(view);
 
-  // FIXME This doesn't update the state on view changes. Also not
-  // sure if view is even guaranteed to exist at this point.
+  // TODO(marijn) This doesn't update the state on view changes.
+  //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
+        <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='overflow-y-auto'>
         <div
@@ -93,6 +97,36 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   );
 };
 
+const EditorModeToolbar = ({
+  editorMode,
+  setEditorMode,
+}: {
+  editorMode: EditorMode;
+  setEditorMode: (mode: EditorMode) => void;
+}) => {
+  return (
+    <Select.Root value={editorMode} onValueChange={(value) => setEditorMode(value as EditorMode)}>
+      <NaturalToolbar.Button asChild>
+        <Select.TriggerButton variant='ghost'>{editorMode}</Select.TriggerButton>
+      </NaturalToolbar.Button>
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {['default', 'vim'].map((mode) => (
+              <Select.Option key={mode} value={mode}>
+                {mode}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
 export default {
   title: 'react-ui-editor/useTextEditor',
   component: TextEditor,

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

@@ -31,10 +31,10 @@ 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;

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/basic.ts

@@ -16,18 +16,20 @@ import { type TextEditorProps } from '../components';
 
 export type BasicBundleOptions = {
   themeMode?: ThemeMode;
+  bracketMatching?: boolean;
 } & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
 
 export const createBasicBundle = ({
   themeMode,
   placeholder: _placeholder,
   lineWrapping = true,
+  bracketMatching: _bracketMatching = true,
 }: BasicBundleOptions = {}): Extension[] =>
   [
     lineWrapping && EditorView.lineWrapping,
 
     // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-    bracketMatching(),
+    _bracketMatching && bracketMatching(),
     closeBrackets(),
     drawSelection(),
     highlightActiveLine(),