@dxos/react-ui-editor 0.8.1-main.ba2dec9 → 0.8.1-staging.5be625a

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -19,14 +19,14 @@ import {
 import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
-import { editorInputMode, type EditorSelection, documentId, createEditorStateTransaction } from '../extensions';
+import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 export type UseTextEditor = {
   // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
-  focusAttributes: ReturnType<typeof useFocusableGroup> & {
+  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
     tabIndex: 0;
     onKeyUp: KeyboardEventHandler<HTMLDivElement>;
   };
@@ -55,7 +55,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
 let instanceCount = 0;
 
 /**
- * Hook for creating editor.
+ * Creates codemirror text editor.
  */
 export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
@@ -155,9 +155,11 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroup = useFocusableGroup({
+  const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: 'limited',
-    ignoreDefaultKeydown: { Escape: view?.state.facet(editorInputMode).noTabster },
+    ignoreDefaultKeydown: {
+      Escape: view?.state.facet(editorInputMode).noTabster,
+    },
   });
 
   // Focus editor on Enter (e.g., when tabbing to this component).
@@ -176,6 +178,13 @@ export const useTextEditor = (
     [view],
   );
 
-  const focusAttributes = { tabIndex: 0 as const, ...focusableGroup, onKeyUp: handleKeyUp };
-  return { parentRef, view, focusAttributes };
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0 as const,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp,
+    },
+  };
 };

package/src/styles/stack-item-content-class-names.ts

@@ -7,7 +7,7 @@ import { mx } from '@dxos/react-ui-theme';
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
     'dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
-    role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );
 
 export const stackItemContentToolbarClassNames = (role?: string) =>

package/src/styles/theme.ts

@@ -137,6 +137,7 @@ export const defaultTheme: ThemeStyles = {
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
+    textDecorationColor: 'var(--dx-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },

package/src/util/debug.ts

@@ -59,6 +59,6 @@ export const logChanges = (trs: readonly Transaction[]) => {
     .filter(Boolean);
 
   if (changes.length) {
-    log.info('changes', { changes });
+    log('changes', { changes });
   }
 };