@dxos/react-ui-editor 0.4.7-main.b23cefb → 0.4.7-main.b51ad3a

package/src/hooks/useTextEditor.ts

@@ -2,6 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
+import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
 import {
   EditorSelection,
   EditorState,
@@ -9,7 +12,17 @@ import {
   type Extension,
   type StateEffect,
 } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+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';
@@ -38,7 +51,7 @@ export type UseTextEditor = {
 // TODO(wittjosiah): Does not work in strict mode.
 export const useTextEditor = (
   { autoFocus, scrollTo, debug, doc, selection, extensions }: UseTextEditorOptions = {},
-  deps?: DependencyList,
+  deps: DependencyList = [],
 ): UseTextEditor => {
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
@@ -114,23 +127,66 @@ export const useTextEditor = (
 
 // TODO(burdon): Factor out extension factories.
 
-export type DataExtensionsOptions = {
+/**
+ * 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,
 };
 
-// TODO(burdon): Pass in TextObject (remove model).
-export const createDataExtensions = ({ readonly = false } = {}): Extension => {
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
   return [
-    //
-    EditorState.readOnly.of(readonly),
-    EditorView.editable.of(!readonly),
-  ];
+    // 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;
-  lineWrap?: boolean;
   slots?: {
     editor?: {
       className?: string;
@@ -143,11 +199,10 @@ export type ThemeExtensionsOptions = {
 
 export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
   return [
-    //
     EditorView.baseTheme(defaultTheme),
-    theme && EditorView.theme(theme),
     EditorView.darkTheme.of(themeMode === 'dark'),
-    EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
-    EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
+    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

@@ -11,11 +11,11 @@ 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 { hueTokens } from '@dxos/react-ui-theme';
+import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
 import { hexToHue } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
-import { type EditorModel, modelState } from './defs';
+import { type EditorModel } from './defs';
 import { automerge, awareness } from '../extensions';
 import { type DocAccessor } from '../extensions/automerge/defs';
 
@@ -31,7 +31,8 @@ export const useTextExtensions = ({ id, text, space, identity }: useTextExtensio
   const extensions: Extension[] = [automerge(text)];
 
   const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
 
   if (space && identity) {
     const awarenessProvider = new SpaceAwarenessProvider({
@@ -68,6 +69,7 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
  * For use primarily in stories & tests so the dependence on TextObject can be avoided.
  * @deprecated
  */
+// TODO(burdon): Remove.
 export const useInMemoryTextModel = ({
   id,
   defaultContent,
@@ -76,10 +78,10 @@ export const useInMemoryTextModel = ({
   defaultContent?: string;
 }): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
   const [content, setContent] = useState(defaultContent ?? '');
-  return { id, content, setContent, text: () => content };
+  return { id, content, text: () => content, setContent };
 };
 
-const createModel = ({ space, identity, text }: UseTextModelProps) => {
+const createModel = ({ space, identity, text }: UseTextModelProps): EditorModel | undefined => {
   if (!text) {
     return undefined;
   }
@@ -89,7 +91,8 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
   const doc = getRawDoc(obj, [obj.field]);
 
   const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+  const { cursorLightValue, cursorDarkValue } =
+    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
 
   const awarenessProvider =
     space &&
@@ -104,23 +107,15 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });
 
-  const extensions = [modelState.init(() => model), automerge({ handle: doc.handle, path: doc.path })];
+  const extensions = [automerge({ handle: doc.handle, path: doc.path })];
   if (awarenessProvider) {
     extensions.push(awareness(awarenessProvider));
   }
 
-  const model: EditorModel = {
+  return {
     id: obj.id,
     content: doc,
     text: () => get(doc.handle.docSync(), doc.path),
     extension: extensions,
-    peer: identity
-      ? {
-          id: identity.identityKey.toHex(),
-          name: identity.profile?.displayName,
-        }
-      : undefined,
   };
-
-  return model;
 };

package/src/index.ts

@@ -1,10 +1,12 @@
 //
 // Copyright 2022 DXOS.org
 //
+
 import translations from './translations';
 
 export { type Extension, type EditorState } from '@codemirror/state';
 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';

package/src/themes/default.ts

@@ -152,6 +152,7 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-tooltip': {
     border: 'none',
+    background: 'unset',
   },
   '.cm-tooltip-below': {},
 

package/src/util.ts

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

package/dist/types/src/components/TextEditor/automerge.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,uBAAuB,CAAC;AAc/B,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAW9D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DF,wBAKE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAoB1B,eAAO,MAAM,QAAQ;;;CAmBpB,CAAC"}

package/dist/types/src/components/TextEditor/hooks.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/hooks.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAA4B,MAAM,OAAO,CAAC;AA4BjD,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;;mBAiFe,UAAU;;;;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAUE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

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

@@ -1,9 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import { type ThemeMode } from '@dxos/react-ui';
-import { type TextEditorProps } from '../components';
-export type BasicBundleOptions = {
-    themeMode?: ThemeMode;
-    bracketMatching?: boolean;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
-export declare const createBasicBundle: ({ themeMode, placeholder: _placeholder, lineWrapping, bracketMatching: _bracketMatching, }?: BasicBundleOptions) => Extension[];
-//# sourceMappingURL=basic.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../../../src/extensions/basic.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC;AAE1D,eAAO,MAAM,iBAAiB,gGAK3B,kBAAkB,KAAQ,SAAS,EAchB,CAAC"}

package/src/extensions/basic.ts

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { drawSelection, EditorView, highlightActiveLine, placeholder } from '@codemirror/view';
-
-import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
-
-import { type TextEditorProps } from '../components';
-
-export type BasicBundleOptions = {
-  themeMode?: ThemeMode;
-  bracketMatching?: boolean;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
-
-export const createBasicBundle = ({
-  themeMode,
-  placeholder: _placeholder,
-  lineWrapping = true,
-  bracketMatching: _bracketMatching = true,
-}: BasicBundleOptions = {}): Extension[] =>
-  [
-    lineWrapping && EditorView.lineWrapping,
-
-    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-    _bracketMatching && bracketMatching(),
-    closeBrackets(),
-    drawSelection(),
-    highlightActiveLine(),
-    history(),
-    _placeholder && placeholder(_placeholder),
-
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-  ].filter(isNotFalsy);