@dxos/react-ui-editor 0.4.6-main.aeca3cc → 0.4.6-main.e47f68d

package/src/hooks/useTextModel.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import get from 'lodash.get';
 import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
 
@@ -14,13 +15,42 @@ import { type Identity } from '@dxos/react-client/halo';
 import { SpaceAwarenessProvider } from './awareness-provider';
 import { type EditorModel, modelState } from './defs';
 import { automerge, awareness } from '../extensions';
+import { type DocAccessor } from '../extensions/automerge/defs';
 import { cursorColor } from '../styles';
 
-// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
-export type UseTextModelProps = {
-  identity?: Identity | null;
+export type useTextExtensionsProps = {
+  id: string;
+  text: DocAccessor;
   space?: Space;
+  identity?: Identity;
+};
+
+// TODO(burdon): Factor out automerge defs and extension (not hook).
+export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
+  const extensions: Extension[] = [automerge(text)];
+
+  if (space && identity) {
+    const awarenessProvider = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorColor.color,
+        lightColor: cursorColor.light,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};
+
+export type UseTextModelProps = {
   text?: TextObject;
+  space?: Space;
+  identity?: Identity | null;
 };
 
 /**
@@ -32,8 +62,7 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
 
 /**
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.
- * @param id
- * @param defaultContent
+ * @deprecated
  */
 export const useInMemoryTextModel = ({
   id,

package/src/index.ts

@@ -12,13 +12,7 @@ export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-export {
-  getToken,
-  editorWithToolbarLayout,
-  editorFillLayoutEditor,
-  editorFillLayoutRoot,
-  editorHalfViewportOverscrollContent,
-} from './styles';
+export { getToken, editorWithToolbarLayout, editorFillLayoutRoot, editorFillLayoutEditor } from './styles';
 export * from './themes';
 export * from './util';
 export { translations };

package/src/styles/layout.ts

@@ -5,8 +5,5 @@
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-export const editorFillLayoutRoot = 'bs-full overflow-hidden grid';
-export const editorFillLayoutEditor =
-  'bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto';
-
-export const editorHalfViewportOverscrollContent = 'after:block after:min-bs-[50dvh] after:pointer-events-none';
+export const editorFillLayoutRoot = 'bs-full relative';
+export const editorFillLayoutEditor = '!absolute inset-0';

package/src/themes/default.ts

@@ -50,14 +50,18 @@ export const defaultTheme: ThemeStyles = {
     outline: 'none',
   },
 
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   '.cm-scroller': {
-    // overflow: 'visible',
+    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
+    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
+    overflowY: 'auto',
     fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
 
   '.cm-content': {
-    padding: 0,
+    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
+    // padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
   },
@@ -96,6 +100,13 @@ export const defaultTheme: ThemeStyles = {
     background: 'transparent',
   },
 
+  //
+  // gutter
+  //
+  '.cm-gutterElement': {
+    width: '48px',
+  },
+
   //
   // Selection
   //