@dxos/react-ui-editor 0.6.13-staging.1e988a3 → 0.6.14-main.7bd9c89

package/src/{extensions → state}/cursor.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorState, Facet } from '@codemirror/state';
+import { type EditorState } from '@codemirror/state';
 
 import { type Range } from './types';
+import { singleValueFacet } from './util';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.
@@ -27,11 +28,7 @@ const defaultCursorConverter: CursorConverter = {
 };
 
 export class Cursor {
-  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
-    combine: (providers) => {
-      return providers[0] ?? defaultCursorConverter;
-    },
-  });
+  static readonly converter = singleValueFacet(defaultCursorConverter);
 
   static readonly getCursorFromRange = (state: EditorState, range: Range) => {
     const cursorConverter = state.facet(Cursor.converter);

package/src/state/doc.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { singleValueFacet } from './util';
+
+/**
+ * Currently edited document id as FQ string.
+ */
+export const documentId = singleValueFacet<string>();

package/src/state/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Non-UX exports.
+
+export * from './cursor';
+export * from './doc';
+export * from './state';
+export * from './types';
+export * from './util';

package/src/{extensions → state}/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
+import { type EditorState, type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
@@ -42,7 +42,10 @@ export const localStorageStateStoreAdapter: EditorStateOptions = {
   },
 };
 
-export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
+export const createEditorStateTransaction = (
+  state: EditorState,
+  { scrollTo, selection }: EditorSelectionState,
+): TransactionSpec => {
   return {
     selection,
     scrollIntoView: !scrollTo,
@@ -54,6 +57,7 @@ export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSele
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
+// TODO(burdon): Rename.
 export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}): Extension => {
   const setStateDebounced = debounce(setState!, 1_000);
 
@@ -86,7 +90,7 @@ export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}):
           run: (view) => {
             const state = getState(view.state.facet(documentId));
             if (state) {
-              view.dispatch(createEditorStateTransaction(state));
+              view.dispatch(createEditorStateTransaction(view.state, state));
             }
             return true;
           },

package/src/state/util.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+export const singleValueFacet = <I, O = I>(defaultValue?: O) =>
+  Facet.define<I, O>({
+    // Called immediately.
+    combine: (providers) => {
+      return (providers[0] ?? defaultValue) as O;
+    },
+  });

package/src/styles/markdown.ts

@@ -17,11 +17,9 @@ const headings: Record<HeadingLevel, string> = {
 };
 
 export const theme = {
-  mark: 'opacity-50',
   code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
   codeMark: 'font-mono text-primary-500',
-  // TODO(burdon): Replace with widget.
-  blockquote: 'pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500',
+  mark: 'opacity-50',
   heading: (level: HeadingLevel) => {
     return mx(headings[level], 'dark:text-primary-400');
   },

package/src/styles/theme.ts

@@ -71,9 +71,11 @@ export const defaultTheme: ThemeStyles = {
   /**
    * Gutters
    * NOTE: Gutters should have the same top margin as the content.
+   * NOTE: They can't be transparent since the content needs to scroll below.
    */
   '.cm-gutters': {
     background: 'var(--surface-bg)',
+    borderRight: 'none',
   },
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
@@ -95,7 +97,7 @@ export const defaultTheme: ThemeStyles = {
     paddingInline: 0,
   },
   '.cm-activeLine': {
-    background: 'var(--dx-hoverSurface)',
+    background: 'var(--dx-cmActiveLine)',
   },
 
   /**

package/src/util.ts

@@ -3,6 +3,7 @@
 //
 
 import type { Transaction } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
@@ -19,6 +20,15 @@ export const callbackWrapper = <T extends Function>(fn: T): T =>
     }
   }) as unknown as T;
 
+/**
+ * Log all changes before dispatching them to the view.
+ * https://codemirror.net/docs/ref/#view.EditorView.dispatch
+ */
+export const debugDispatcher = (trs: readonly Transaction[], view: EditorView) => {
+  logChanges(trs);
+  view.update(trs);
+};
+
 export const logChanges = (trs: readonly Transaction[]) => {
   const changes = trs
     .flatMap((tr) => {

package/dist/types/src/extensions/automerge/automerge.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=automerge.spec.d.ts.map

package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automerge.spec.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/automerge.spec.tsx"],"names":[],"mappings":""}

package/dist/types/src/extensions/cursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/extensions/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,0CAItB;IAEH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,SAAS,KAAK,YAMpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,UAAU,MAAM;;;kBAOtE;CACH"}

package/dist/types/src/extensions/doc.d.ts

@@ -1,6 +0,0 @@
-import { Facet } from '@codemirror/state';
-/**
- * Currently edited document id as FQ string.
- */
-export declare const documentId: Facet<string, string>;
-//# sourceMappingURL=doc.d.ts.map

package/dist/types/src/extensions/doc.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"doc.d.ts","sourceRoot":"","sources":["../../../../src/extensions/doc.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,UAAU,uBAKrB,CAAC"}

package/dist/types/src/extensions/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/extensions/state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAWtF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,oBAAoB,GAAG,SAAS,CAAC;CAC5D,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,kBAW3C,CAAC;AAEF,eAAO,MAAM,4BAA4B,4BAA6B,oBAAoB,KAAG,eAO5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,4BAA4B,OAAO,CAAC,kBAAkB,CAAC,KAAQ,SAuChF,CAAC"}

package/dist/types/src/extensions/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/extensions/types.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAIF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/src/extensions/automerge/automerge.test.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
-
-describe('Test', () => {
-  test('checks sanity', async () => {
-    expect(true).to.be.true;
-  });
-});

package/src/extensions/doc.ts

@@ -1,17 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Facet } from '@codemirror/state';
-
-import { invariant } from '@dxos/invariant';
-
-/**
- * Currently edited document id as FQ string.
- */
-export const documentId = Facet.define<string, string>({
-  combine: (providers) => {
-    invariant(providers.length <= 1);
-    return providers[0];
-  },
-});