@dxos/react-ui-editor 0.4.8-main.97e86fe → 0.4.8-main.a4c603b

package/src/hooks/useTextEditor.ts

@@ -2,30 +2,57 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorSelection, EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { type DependencyList, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import {
+  EditorSelection,
+  EditorState,
+  type EditorStateConfig,
+  type Extension,
+  type StateEffect,
+} from '@codemirror/state';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  lineNumbers,
+  placeholder,
+  scrollPastEnd,
+} from '@codemirror/view';
+import defaultsDeep from 'lodash.defaultsdeep';
+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 TextEditorProps } from '../components';
-import { documentId } from '../extensions';
+import { type ThemeStyles } from '../styles';
+import { defaultTheme } from '../themes';
 import { logChanges } from '../util';
 
+export type UseTextEditorOptions = {
+  autoFocus?: boolean;
+  scrollTo?: StateEffect<any>;
+  debug?: boolean;
+} & EditorStateConfig;
+
+// TODO(burdon): Return tuple?
 export type UseTextEditor = {
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
 };
 
-export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
-
 /**
  * Hook for creating editor.
  */
-export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: DependencyList = []): UseTextEditor => {
-  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo<UseTextEditorProps>(cb, deps ?? []);
-
+// TODO(wittjosiah): Does not work in strict mode.
+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);
@@ -38,7 +65,6 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
         doc,
         selection,
         extensions: [
-          id && documentId.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
@@ -81,6 +107,7 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
       }
 
       // Set selection after first update (since content may rerender on focus).
+      // TODO(burdon): BUG on first render may appear in middle of formatted heading.
       // TODO(burdon): Make invisible until first render?
       if (selection || scrollTo) {
         onUpdate.current = () => {
@@ -97,3 +124,85 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
 
   return { parentRef, view };
 };
+
+// TODO(burdon): Factor out extension factories.
+
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ */
+// TODO(burdon): Reconcile with createMarkdownExtensions.
+export type BasicExtensionsOptions = {
+  allowMultipleSelections?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  crosshairCursor?: boolean;
+  dropCursor?: boolean;
+  drawSelection?: boolean;
+  editable?: boolean;
+  highlightActiveLine?: boolean;
+  history?: boolean;
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
+  placeholder?: string;
+  readonly?: boolean;
+  scrollPastEnd?: boolean;
+  tabSize?: number;
+};
+
+const defaults: BasicExtensionsOptions = {
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  lineWrapping: true,
+};
+
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
+  return [
+    // TODO(burdon): Doesn't catch errors in keymap functions.
+    EditorView.exceptionSink.of((err) => {
+      log.catch(err);
+    }),
+
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.crosshairCursor && crosshairCursor(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+  ].filter(isNotFalsy);
+};
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
+  return [
+    EditorView.baseTheme(defaultTheme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    theme && EditorView.theme(theme),
+    slots?.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+    slots?.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+  ].filter(isNotFalsy);
+};

package/src/hooks/useTextModel.ts

@@ -0,0 +1,121 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import get from 'lodash.get';
+import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue } from '@dxos/util';
+
+import { SpaceAwarenessProvider } from './awareness-provider';
+import { type EditorModel } from './defs';
+import { automerge, awareness } from '../extensions';
+import { type DocAccessor } from '../extensions/automerge/defs';
+
+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)];
+
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+
+  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: cursorDarkValue,
+        lightColor: cursorLightValue,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};
+
+export type UseTextModelProps = {
+  text?: TextObject;
+  space?: Space;
+  identity?: Identity | null;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove once automerge lands.
+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.
+ * @deprecated
+ */
+// TODO(burdon): Remove.
+export const useInMemoryTextModel = ({
+  id,
+  defaultContent,
+}: {
+  id: string;
+  defaultContent?: string;
+}): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
+  const [content, setContent] = useState(defaultContent ?? '');
+  return { id, content, text: () => content, setContent };
+};
+
+const createModel = ({ space, identity, text }: UseTextModelProps): EditorModel | undefined => {
+  if (!text) {
+    return undefined;
+  }
+
+  invariant(isAutomergeObject(text));
+  const obj = text as any as AutomergeTextCompat;
+  const doc = getRawDoc(obj, [obj.field]);
+
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+
+  const awarenessProvider =
+    space &&
+    new SpaceAwarenessProvider({
+      space,
+      channel: `automerge.awareness.${obj.id}`,
+      info: {
+        displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
+        color: cursorLightValue,
+        lightColor: cursorDarkValue,
+      },
+      peerId: identity?.identityKey.toHex() ?? 'Anonymous',
+    });
+
+  const extensions = [automerge({ handle: doc.handle, path: doc.path })];
+  if (awarenessProvider) {
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get(doc.handle.docSync(), doc.path),
+    extension: extensions,
+  };
+};

package/src/index.ts

@@ -9,7 +9,7 @@ export { type EditorView, keymap } from '@codemirror/view';
 export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-export { Doc, YText, YXmlFragment } from '@dxos/text-model'; // TODO(burdon): Remove.
+export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 
 export * from './components';
 export * from './extensions';

package/src/themes/default.ts

@@ -55,7 +55,7 @@ export const defaultTheme: ThemeStyles = {
     // 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.body', []).join(','),
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
     lineHeight: 1.5,
   },
 
@@ -261,3 +261,30 @@ export const defaultTheme: ThemeStyles = {
     marginRight: '0.4rem !important',
   },
 };
+
+export const textTheme: ThemeStyles = {
+  '.cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+};
+
+export const markdownTheme: ThemeStyles = {
+  '.cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+};
+
+export const codeTheme: ThemeStyles = {
+  '.cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
+};

package/dist/types/src/extensions/awareness/awareness-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"awareness-provider.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/awareness/awareness-provider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,EAAS,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAatH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqC;IAEnE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgB;IAEtC,OAAO,CAAC,IAAI,CAAC,CAAU;IACvB,OAAO,CAAC,SAAS,CAAC,CAAe;IACjC,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC,SAAgB,iBAAiB,cAAqB;gBAE1C,MAAM,EAAE,uBAAuB;IAO3C,IAAI;IAqCJ,KAAK;IAML,eAAe,IAAI,cAAc,EAAE;IAInC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAWrD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,kBAAkB;CAK3B"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"awareness.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/awareness/awareness.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,EAAE,KAAK,SAAS,EAAwB,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EACV,KAAK,WAAW,EAEhB,KAAK,UAAU,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IAEd,eAAe,IAAI,cAAc,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC;CACvD;AAYD,eAAO,MAAM,iBAAiB,6CAE5B,CAAC;AAKH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,oCAA+B,SAQpD,CAAC;AAEF;;GAEG;AACH,qBAAa,yBAA0B,YAAW,WAAW;IACpD,WAAW,EAAE,aAAa,CAAmB;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IAEtC,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,SAAS,CAAC,CAAqB;gBAE3B,IAAI,EAAE,UAAU;IAS5B,OAAO;IAKP,MAAM,CAAC,MAAM,EAAE,UAAU;IAKzB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,uBAAuB;CA4EhC"}

package/dist/types/src/extensions/awareness/index.d.ts

@@ -1,3 +0,0 @@
-export * from './awareness';
-export * from './awareness-provider';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/awareness/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

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

@@ -1,3 +0,0 @@
-import { Facet } from '@codemirror/state';
-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,eAAO,MAAM,UAAU,uBAKrB,CAAC"}

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

@@ -1,49 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import { type DocAccessor } from '@dxos/echo-schema';
-import { type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
-import { type ThemeMode } from '@dxos/react-ui';
-import { type ThemeStyles } from '../styles';
-/**
- * https://codemirror.net/docs/extensions
- * https://github.com/codemirror/basic-setup
- */
-export type BasicExtensionsOptions = {
-    allowMultipleSelections?: boolean;
-    bracketMatching?: boolean;
-    closeBrackets?: boolean;
-    crosshairCursor?: boolean;
-    dropCursor?: boolean;
-    drawSelection?: boolean;
-    editable?: boolean;
-    highlightActiveLine?: boolean;
-    history?: boolean;
-    lineNumbers?: boolean;
-    lineWrapping?: boolean;
-    placeholder?: string;
-    readonly?: boolean;
-    scrollPastEnd?: boolean;
-    tabSize?: number;
-};
-export declare const createBasicExtensions: (_props?: BasicExtensionsOptions) => Extension;
-export type ThemeExtensionsOptions = {
-    theme?: ThemeStyles;
-    themeMode?: ThemeMode;
-    slots?: {
-        editor?: {
-            className?: string;
-        };
-        content?: {
-            className?: string;
-        };
-    };
-};
-export declare const createThemeExtensions: ({ theme, themeMode, slots: _slots }?: ThemeExtensionsOptions) => Extension;
-export type DataExtensionsProps = {
-    id: string;
-    text: DocAccessor;
-    space?: Space;
-    identity?: Identity | null;
-};
-export declare const createDataExtensions: ({ id, text, space, identity }: DataExtensionsProps) => Extension[];
-//# sourceMappingURL=factories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/factories.ts"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAchE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAS7C;;;GAGG;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF,eAAO,MAAM,qBAAqB,YAAa,sBAAsB,KAAG,SAuBvE,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,qBAAqB,yCAAyC,sBAAsB,KAAQ,SASxG,CAAC;AAMF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kCAAmC,mBAAmB,KAAG,SAAS,EAsBlG,CAAC"}

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

@@ -1,9 +0,0 @@
-export type Range = {
-    from: number;
-    to: number;
-};
-export type Comment = {
-    id: string;
-    cursor?: string;
-};
-//# sourceMappingURL=types.d.ts.map

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/dist/types/src/hooks/useDocAccessor.d.ts

@@ -1,7 +0,0 @@
-import { type DocAccessor, type TextObject } from '@dxos/echo-schema';
-export declare const useDocAccessor: <T = any>(text: TextObject) => {
-    id: string;
-    doc: string | undefined;
-    accessor: DocAccessor<T>;
-};
-//# sourceMappingURL=useDocAccessor.d.ts.map

package/dist/types/src/hooks/useDocAccessor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,WAAW,EAAkB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGzG,eAAO,MAAM,cAAc,kBACnB,UAAU;QACT,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}

package/src/extensions/awareness/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './awareness';
-export * from './awareness-provider';

package/src/extensions/doc.ts

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

package/src/extensions/factories.ts

@@ -1,167 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
-import { EditorState, type Extension } from '@codemirror/state';
-import {
-  EditorView,
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  highlightActiveLine,
-  lineNumbers,
-  placeholder,
-  scrollPastEnd,
-} from '@codemirror/view';
-import defaultsDeep from 'lodash.defaultsdeep';
-
-import { generateName } from '@dxos/display-name';
-import { type DocAccessor } from '@dxos/echo-schema';
-import { log } from '@dxos/log';
-import { type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
-import { type ThemeMode } from '@dxos/react-ui';
-import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
-import { hexToHue, isNotFalsy } from '@dxos/util';
-
-import { automerge } from './automerge';
-import { awareness, SpaceAwarenessProvider } from './awareness';
-import { type ThemeStyles } from '../styles';
-import { defaultTheme } from '../themes';
-
-// TODO(burdon): Move into extensions folder.
-
-//
-// Basic
-//
-
-/**
- * https://codemirror.net/docs/extensions
- * https://github.com/codemirror/basic-setup
- */
-// TODO(burdon): Reconcile with createMarkdownExtensions.
-export type BasicExtensionsOptions = {
-  allowMultipleSelections?: boolean;
-  bracketMatching?: boolean;
-  closeBrackets?: boolean;
-  crosshairCursor?: boolean;
-  dropCursor?: boolean;
-  drawSelection?: boolean;
-  editable?: boolean;
-  highlightActiveLine?: boolean;
-  history?: boolean;
-  lineNumbers?: boolean;
-  lineWrapping?: boolean;
-  placeholder?: string;
-  readonly?: boolean;
-  scrollPastEnd?: boolean;
-  tabSize?: number;
-};
-
-const defaults: BasicExtensionsOptions = {
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  editable: true,
-  history: true,
-  lineWrapping: true,
-};
-
-export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
-  return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
-    EditorView.exceptionSink.of((err) => {
-      log.catch(err);
-    }),
-
-    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching(),
-    props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
-    props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection(),
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView.lineWrapping,
-    props.placeholder && placeholder(props.placeholder),
-    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize),
-  ].filter(isNotFalsy);
-};
-
-//
-// Theme
-//
-
-export type ThemeExtensionsOptions = {
-  theme?: ThemeStyles;
-  themeMode?: ThemeMode;
-  slots?: {
-    editor?: {
-      className?: string;
-    };
-    content?: {
-      className?: string;
-    };
-  };
-};
-
-const defaultSlots = {
-  editor: {
-    className: 'w-full bs-full',
-  },
-};
-
-export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultSlots);
-  return [
-    EditorView.baseTheme(defaultTheme),
-    EditorView.darkTheme.of(themeMode === 'dark'),
-    theme && EditorView.theme(theme),
-    slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
-    slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-  ].filter(isNotFalsy);
-};
-
-//
-// Data
-//
-
-export type DataExtensionsProps = {
-  id: string;
-  text: DocAccessor; // TODO(burdon): Rename content.
-  space?: Space;
-  identity?: Identity | null;
-};
-
-// TODO(burdon): Factor out automerge defs and extension (not hook).
-// TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
-  const extensions: Extension[] = [automerge(text)];
-
-  if (space && identity) {
-    const peerId = identity?.identityKey.toHex();
-    const { cursorLightValue, cursorDarkValue } =
-      hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
-    const awarenessProvider = new SpaceAwarenessProvider({
-      space,
-      channel: `awareness.${id}`,
-      peerId: identity.identityKey.toHex(),
-      info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
-        lightColor: cursorLightValue,
-      },
-    });
-
-    extensions.push(awareness(awarenessProvider));
-  }
-
-  return extensions;
-};

package/src/extensions/types.ts

@@ -1,16 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-// Runtime data structure.
-export type Range = {
-  from: number;
-  to: number;
-};
-
-// Persistent data structure.
-// TODO(burdon): Rename annotation?
-export type Comment = {
-  id: string;
-  cursor?: string;
-};

package/src/hooks/useDocAccessor.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
-
-// TODO(burdon): Factor out.
-export const useDocAccessor = <T = any>(
-  text: TextObject,
-): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
-  return useMemo(
-    () => ({
-      id: text.id,
-      doc: getTextContent(text),
-      accessor: createDocAccessor<T>(text),
-    }),
-    [text],
-  );
-};