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

package/src/components/TextEditor/TextEditor.tsx

@@ -15,7 +15,6 @@ import React, {
   useEffect,
   useImperativeHandle,
   useState,
-  useRef,
 } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -35,10 +34,15 @@ 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?: {
@@ -52,7 +56,6 @@ 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[];
@@ -62,20 +65,17 @@ export type TextEditorProps = {
 
 /**
  * Base text editor.
+ * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ model, focus, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
     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]);
+    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;
@@ -99,7 +99,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     }, [view, comments]);
 
     useEffect(() => {
-      if (!model || !rootRef.current) {
+      if (!root) {
         return;
       }
 
@@ -131,35 +131,36 @@ export const BaseTextEditor = forwardRef<EditorView, 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();
-      const newView = new EditorView({
-        parent: rootRef.current,
+      setEditor({
         state,
-        // NOTE: Uncomment to spy on all transactions.
-        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        // dispatch: (transaction, view) => {
-        //   view.update([transaction]);
-        // },
+        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]);
+          // },
+        }),
       });
 
-      setView(newView);
       return () => {
-        newView?.destroy();
-        setView(null);
+        view?.destroy();
+        setEditor(undefined);
       };
-    }, [rootRef, model, readonly, editorMode, themeMode]);
+    }, [root, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          // TODO(burdon): ???
-          // case 'Enter': {
-          //   view?.contentDOM.focus();
-          //   break;
-          // }
+          case 'Enter': {
+            view?.contentDOM.focus();
+            break;
+          }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
             break;
           }
         }
@@ -170,7 +171,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={rootRef}
+        ref={setRoot}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -180,39 +181,32 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
+    const slots = defaultsDeep({}, _slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          basicBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
-        slots={updatedSlots}
+        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );
   },
 );
 
-// TODO(burdon): Remove (Just provide bundle, slots).
-export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
+    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          markdownBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
-        slots={updatedSlots}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );

package/src/hooks/useTextModel.ts

@@ -66,7 +66,7 @@ export type UseTextModelProps = {
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState<EditorModel | undefined>();
+  const [model, setModel] = useState<EditorModel | undefined>(() => createModel(props));
   useEffect(() => setModel(createModel(props)), [identity, space, text]);
   return model;
 };

package/src/index.ts

@@ -5,7 +5,6 @@
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export { type Extension } from '@codemirror/state';
-export { type EditorView } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';