@dxos/react-ui-editor 0.4.4-main.3a00f69 → 0.4.4-main.4468a54

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(),

package/src/extensions/markdown/image.ts

@@ -26,7 +26,7 @@ export const image = (options: ImageOptions = {}): Extension => {
         from = Math.min(from, fromB);
         to = Math.max(to, toB);
       });
-      // Expand to cover lines
+      // Expand to cover lines.
       from = tr.state.doc.lineAt(from).from;
       to = tr.state.doc.lineAt(to).to;
       return value.map(tr.changes).update({

package/src/hooks/useEditorView.ts

@@ -3,27 +3,29 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import { type RefCallback, useState } from 'react';
+import { type MutableRefObject, useRef, useState } from 'react';
 
 /**
  * Hook for accessing the editor view.
  *
  * ```tsx
  * const Test = () => {
- *   const [editorRef, editorView] = useEditorView();
+ *   const [editorRef, viewInvalidated] = useEditorView();
  *   useEffect(() => {
- *     editorView?.focus();
+ *     if (editorRef.current && !viewInvalidated) {
+ *       editorView?.focus();
+ *     }
  *   }, [editorView]);
  *   return <TextEditor ref={editorRef} />;
  * };
  * ```
  */
-export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
-  const [view, setView] = useState<EditorView | null>(null);
-  return [
-    (ref: EditorView | null) => {
-      setView(ref);
-    },
-    view,
-  ];
+export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
+  const editorRef = useRef<EditorView | null>(null);
+  const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);
+  if (prev[0] !== editorRef.current) {
+    setPrev([editorRef.current, id]);
+  }
+
+  return [editorRef, prev[1] !== id];
 };

package/src/hooks/useTextModel.ts

@@ -3,7 +3,7 @@
 //
 
 import get from 'lodash.get';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
@@ -27,14 +27,8 @@ export type UseTextModelProps = {
  * @deprecated
  */
 // TODO(burdon): Remove once automerge lands.
-export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
-  const [model, setModel] = useState<EditorModel>();
-  const { identity, space, text } = props;
-  useEffect(() => {
-    setModel(createModel(props));
-  }, [identity, space, text]);
-  return model;
-};
+export const useTextModel = (props: UseTextModelProps): EditorModel | undefined =>
+  useMemo(() => createModel(props), Object.values(props));
 
 /**
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.

package/src/styles/layout.ts

@@ -3,7 +3,7 @@
 //
 
 export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden';
+  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
 export const editorFillLayoutRoot = 'min-bs-full grid';
 export const editorFillLayoutEditor = 'min-bs-full';