@dxos/react-ui-editor 0.4.5 → 0.4.6-main.20d1ec4

package/src/extensions/markdown/decorate.ts

@@ -10,23 +10,6 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { getToken } from '../../styles';
 
-/**
- * Widget for first/last line of code block (read-only).
- */
-// TODO(burdon): Add copy-to-clipboard button.
-class FencedCodeBoundary extends WidgetType {
-  constructor(private readonly _className: string) {
-    super();
-  }
-
-  override toDOM() {
-    const el = document.createElement('span');
-    el.innerHTML = ' ';
-    el.className = mx('cm-code cm-codeblock', this._className);
-    return el;
-  }
-}
-
 class HorizontalRuleWidget extends WidgetType {
   override toDOM() {
     const el = document.createElement('span');
@@ -91,8 +74,9 @@ class CheckboxWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const fencedCodeTop = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-first') });
-const fencedCodeBottom = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-last') });
+const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
 const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() });
 const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
 const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
@@ -130,16 +114,13 @@ const buildDecorations = (view: EditorView, options: DecorateOptions): Decoratio
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
+            builder.add(
+              block.from,
+              block.from,
+              first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
+            );
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(
-                block.from,
-                block.from,
-                Decoration.line({
-                  class: mx('cm-code cm-codeblock-line', first && 'cm-codeblock-first', last && 'cm-codeblock-last'),
-                }),
-              );
+              builder.add(block.from, block.to, hide);
             }
           }
           return false;
@@ -252,18 +233,13 @@ const formattingStyles = EditorView.baseTheme({
     },
   },
   '& .cm-codeblock-first': {
-    '&::after': {
-      borderTopLeftRadius: '.5rem',
-      borderTopRightRadius: '.5rem',
-    },
+    borderTopLeftRadius: '.5rem',
+    borderTopRightRadius: '.5rem',
   },
   '& .cm-codeblock-last': {
-    '&::after': {
-      borderBottomLeftRadius: '.5rem',
-      borderBottomRightRadius: '.5rem',
-    },
+    borderBottomLeftRadius: '.5rem',
+    borderBottomRightRadius: '.5rem',
   },
-
   '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
     background: getToken('extend.semanticColors.input.light'),
     mixBlendMode: 'darken',
@@ -272,18 +248,6 @@ const formattingStyles = EditorView.baseTheme({
     background: getToken('extend.semanticColors.input.dark'),
     mixBlendMode: 'lighten',
   },
-  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
-    mixBlendMode: 'darken',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-    },
-  },
-  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
-    mixBlendMode: 'lighten',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-    },
-  },
   '& .cm-hr': {
     display: 'inline-block',
     width: '100%',

package/src/hooks/defs.ts

@@ -35,7 +35,9 @@ export type EditorModel = {
 
 /**
  * State field makes the model available to other extensions.
+ * @deprecated
  */
+// TODO(burdon): Remove.
 export const modelState = StateField.define<EditorModel | undefined>({
   create: () => undefined,
   update: (model) => model,

package/src/hooks/useEditorView.ts

@@ -7,6 +7,7 @@ import { type MutableRefObject, useRef, useState } from 'react';
 
 /**
  * Hook for accessing the editor view.
+ * @deprecated
  *
  * ```tsx
  * const Test = () => {
@@ -20,6 +21,7 @@ import { type MutableRefObject, useRef, useState } from 'react';
  * };
  * ```
  */
+// TODO(burdon): Replace with useTextEditor.
 export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
   const editorRef = useRef<EditorView | null>(null);
   const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);

package/src/hooks/useTextEditor.ts

@@ -10,13 +10,13 @@ import {
   type StateEffect,
 } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { type RefObject, useEffect, useRef, useState } from 'react';
+import { type DependencyList, type RefObject, useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
-import { type ThemeStyles } from '..//styles';
+import { type ThemeStyles } from '../styles';
 import { defaultTheme } from '../themes';
 import { logChanges } from '../util';
 
@@ -26,6 +26,7 @@ export type UseTextEditorOptions = {
   debug?: boolean;
 } & EditorStateConfig;
 
+// TODO(burdon): Return tuple?
 export type UseTextEditor = {
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
@@ -35,14 +36,10 @@ export type UseTextEditor = {
  * Hook for creating editor.
  */
 // TODO(wittjosiah): Does not work in strict mode.
-export const useTextEditor = ({
-  autoFocus,
-  scrollTo,
-  debug,
-  doc,
-  selection,
-  extensions,
-}: UseTextEditorOptions = {}): UseTextEditor => {
+export const useTextEditor = (
+  { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
+  deps?: DependencyList,
+): UseTextEditor => {
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
@@ -87,8 +84,7 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-    // TODO(wittjosiah): Does `parentRef` ever change? Only `.current` changes?
-  }, [parentRef, extensions]);
+  }, deps);
 
   useEffect(() => {
     if (view) {

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
   //