@dxos/react-ui-editor 0.4.6 → 0.4.7-main.06facb4

package/src/hooks/useActionHandler.ts

@@ -6,23 +6,23 @@ import type { EditorView } from '@codemirror/view';
 
 import type { ToolbarProps } from '../components';
 import {
-  createComment,
-  insertTable,
-  setHeading,
-  setStyle,
-  toggleStyle,
-  addLink,
-  removeLink,
   Inline,
   List,
-  addList,
-  removeList,
-  toggleList,
   addBlockquote,
-  removeBlockquote,
   addCodeblock,
+  addLink,
+  addList,
+  createComment,
+  insertTable,
+  removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
   toggleBlockquote,
+  toggleList,
+  toggleStyle,
 } from '../extensions';
 
 export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {

package/src/hooks/useEditorView.ts

@@ -21,7 +21,6 @@ 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/{components/TextEditor/hooks.stories.tsx → hooks/useTextEditor.stories.tsx}

@@ -10,7 +10,9 @@ import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dx
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TextEditor } from './TextEditor';
+import { useActionHandler } from './useActionHandler';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from './useTextEditor';
+import { Toolbar } from '../components';
 import {
   type EditorMode,
   EditorModes,
@@ -20,11 +22,9 @@ import {
   image,
   table,
   useFormattingState,
-} from '../../extensions';
-import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
-import { markdownTheme } from '../../themes';
-import translations from '../../translations';
-import { Toolbar } from '../Toolbar';
+} from '../extensions';
+import { markdownTheme } from '../themes';
+import translations from '../translations';
 
 // TODO(burdon): Demo toolbar with hooks.
 // TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
@@ -46,7 +46,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const extensions = useMemo(
     () => [
       editorMode ? EditorModes[editorMode] : [],
-      createDataExtensions({ readonly }),
+      createBasicExtensions({ readonly }),
       createThemeExtensions({
         themeMode,
         theme: markdownTheme,
@@ -116,7 +116,7 @@ const EditorModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/useTextEditor',
-  component: TextEditor,
+  // component: TextEditor,
   decorators: [withTheme],
   render: (args: StoryProps) => (
     <Tooltip.Provider>

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,12 +11,13 @@ 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 { 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';
-import { cursorColor } from '../styles';
 
 export type useTextExtensionsProps = {
   id: string;
@@ -29,6 +30,9 @@ export type useTextExtensionsProps = {
 export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   if (space && identity) {
     const awarenessProvider = new SpaceAwarenessProvider({
       space,
@@ -36,8 +40,8 @@ export const useTextExtensions = ({ id, text, space, identity }: useTextExtensio
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
       },
     });
 
@@ -64,6 +68,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,
@@ -72,10 +77,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;
   }
@@ -84,6 +89,9 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   const awarenessProvider =
     space &&
     new SpaceAwarenessProvider({
@@ -91,29 +99,21 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       channel: `automerge.awareness.${obj.id}`,
       info: {
         displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorLightValue,
+        lightColor: cursorDarkValue,
       },
       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/styles/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 export * from './layout';

package/src/themes/default.ts

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

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/dist/types/src/styles/cursors.d.ts

@@ -1,5 +0,0 @@
-export declare const cursorColor: {
-    color: string;
-    light: string;
-};
-//# sourceMappingURL=cursors.d.ts.map

package/dist/types/src/styles/cursors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/styles/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,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);

package/src/styles/cursors.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// Copied from https://github.com/yjs/y-codemirror.next#example.
-
-import * as random from 'lib0/random';
-
-const cursorColors = [
-  { color: '#30bced', light: '#30bced33' },
-  { color: '#6eeb83', light: '#6eeb8333' },
-  { color: '#ffbc42', light: '#ffbc4233' },
-  { color: '#ecd444', light: '#ecd44433' },
-  { color: '#ee6352', light: '#ee635233' },
-  { color: '#9ac2c9', light: '#9ac2c933' },
-  { color: '#8acb88', light: '#8acb8833' },
-  { color: '#1be7ff', light: '#1be7ff33' },
-];
-
-// Select a random color for this user.
-export const cursorColor = cursorColors[random.uint32() % cursorColors.length];