@dxos/react-ui-editor 0.3.11-main.cb8120f → 0.3.11-main.ccc0ca3

package/dist/types/src/hooks/useTextEditor.d.ts

@@ -1,17 +1,39 @@
-import { type EditorView } from '@codemirror/view';
-import { type RefCallback } from 'react';
+import { type EditorStateConfig, type Extension, type StateEffect } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type RefObject } from 'react';
+import { type ThemeMode } from '@dxos/react-ui';
+import { type ThemeStyles } from '..//styles';
+export type UseTextEditorOptions = {
+    autoFocus?: boolean;
+    scrollTo?: StateEffect<any>;
+    debug?: boolean;
+} & EditorStateConfig;
+export type UseTextEditor = {
+    parentRef: RefObject<HTMLDivElement>;
+    view?: EditorView;
+};
 /**
- * Hook for accessing the editor view.
- *
- * ```tsx
- * const Test = () => {
- *   const [editorRef, editorView] = useTextEditor();
- *   useEffect(() => {
- *     editorView?.focus();
- *   }, [editorView]);
- *   return <TextEditor ref={editorRef} />;
- * };
- * ```
+ * Hook for creating editor.
  */
-export declare const useTextEditor: () => [RefCallback<EditorView | null>, EditorView | null];
+export declare const useTextEditor: ({ autoFocus, scrollTo, debug, doc, selection, extensions, }?: UseTextEditorOptions) => UseTextEditor;
+export type DataExtensionsOptions = {
+    readonly?: boolean;
+};
+export declare const createDataExtensions: ({ readonly }?: {
+    readonly?: boolean | undefined;
+}) => Extension;
+export type ThemeExtensionsOptions = {
+    theme?: ThemeStyles;
+    themeMode?: ThemeMode;
+    lineWrap?: boolean;
+    slots?: {
+        editor?: {
+            className?: string;
+        };
+        content?: {
+            className?: string;
+        };
+    };
+};
+export declare const createThemeExtensions: ({ theme, themeMode, slots }?: ThemeExtensionsOptions) => Extension;
 //# sourceMappingURL=useTextEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,QAAO,CAAC,YAAY,UAAU,GAAG,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAQlF,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAI9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,iEAOvB,oBAAoB,KAAQ,aAqE9B,CAAC;AAIF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,eAAO,MAAM,oBAAoB;;MAAgC,SAMhE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAEF,eAAO,MAAM,qBAAqB,iCAAiC,sBAAsB,KAAQ,SAShG,CAAC"}

package/dist/types/src/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WA+N1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAiO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.cb8120f",
+  "version": "0.3.11-main.ccc0ca3",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,10 +23,11 @@
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.23.0",
-    "@fluentui/react-tabster": "^9.16.1",
+    "@fluentui/react-tabster": "^9.17.4",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.2.0",
+    "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
     "codemirror": "6.0.1",
     "lib0": "^0.2.65",
@@ -35,20 +36,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.3.11-main.cb8120f",
-    "@dxos/context": "0.3.11-main.cb8120f",
-    "@dxos/automerge": "0.3.11-main.cb8120f",
-    "@dxos/display-name": "0.3.11-main.cb8120f",
-    "@dxos/invariant": "0.3.11-main.cb8120f",
-    "@dxos/echo-schema": "0.3.11-main.cb8120f",
-    "@dxos/debug": "0.3.11-main.cb8120f",
-    "@dxos/log": "0.3.11-main.cb8120f",
-    "@dxos/protocols": "0.3.11-main.cb8120f",
-    "@dxos/react-async": "0.3.11-main.cb8120f",
-    "@dxos/react-ui": "0.3.11-main.cb8120f",
-    "@dxos/util": "0.3.11-main.cb8120f",
-    "@dxos/text-model": "0.3.11-main.cb8120f",
-    "@dxos/react-ui-theme": "0.3.11-main.cb8120f"
+    "@dxos/async": "0.3.11-main.ccc0ca3",
+    "@dxos/automerge": "0.3.11-main.ccc0ca3",
+    "@dxos/context": "0.3.11-main.ccc0ca3",
+    "@dxos/display-name": "0.3.11-main.ccc0ca3",
+    "@dxos/debug": "0.3.11-main.ccc0ca3",
+    "@dxos/echo-schema": "0.3.11-main.ccc0ca3",
+    "@dxos/invariant": "0.3.11-main.ccc0ca3",
+    "@dxos/log": "0.3.11-main.ccc0ca3",
+    "@dxos/react-async": "0.3.11-main.ccc0ca3",
+    "@dxos/react-ui": "0.3.11-main.ccc0ca3",
+    "@dxos/protocols": "0.3.11-main.ccc0ca3",
+    "@dxos/react-ui-theme": "0.3.11-main.ccc0ca3",
+    "@dxos/text-model": "0.3.11-main.ccc0ca3",
+    "@dxos/util": "0.3.11-main.ccc0ca3"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
@@ -76,24 +77,24 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.3.11-main.cb8120f",
-    "@dxos/echo-signals": "0.3.11-main.cb8120f",
-    "@dxos/echo-typegen": "0.3.11-main.cb8120f",
-    "@dxos/keyboard": "0.3.11-main.cb8120f",
-    "@dxos/react-ui": "0.3.11-main.cb8120f",
-    "@dxos/react-client": "0.3.11-main.cb8120f",
-    "@dxos/storybook-utils": "0.3.11-main.cb8120f"
+    "@dxos/config": "0.3.11-main.ccc0ca3",
+    "@dxos/echo-signals": "0.3.11-main.ccc0ca3",
+    "@dxos/react-client": "0.3.11-main.ccc0ca3",
+    "@dxos/react-ui": "0.3.11-main.ccc0ca3",
+    "@dxos/storybook-utils": "0.3.11-main.ccc0ca3",
+    "@dxos/echo-typegen": "0.3.11-main.ccc0ca3",
+    "@dxos/keyboard": "0.3.11-main.ccc0ca3"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.cb8120f"
+    "@dxos/react-client": "0.3.11-main.ccc0ca3"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "vitest": "vitest --ui --dir ./src/extensions/automerge"
+    "vitest": "vitest --ui"
   }
 }

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -211,11 +211,10 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
 type StoryProps = {
   text?: string;
   comments?: Comment[];
-  automerge?: boolean;
 } & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
 
-const Story = ({ text, comments, automerge, placeholder = 'New document.', ...props }: StoryProps) => {
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
+const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
+  const [item] = useState({ text: new TextObject(text) });
   const view = useRef<EditorView>(null);
   const model = useTextModel({ text: item.text });
   useComments(view.current, comments);

package/src/components/TextEditor/TextEditor.tsx

@@ -4,7 +4,7 @@
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
@@ -21,9 +21,9 @@ import React, {
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
+import { isNotFalsy } from '@dxos/util';
 
-import { basicBundle, markdownBundle } from '../../extensions';
+import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
@@ -87,7 +87,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     },
     forwardedRef,
   ) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    // TODO(burdon): Hook causes error even if properties are not spread into div.
+    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
+    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
+    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
+    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
+    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -99,7 +104,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // Set focus.
     useEffect(() => {
-      if (autoFocus) {
+      if (autoFocus && !view?.hasFocus) {
+        if (view?.state.selection.main?.from === 0) {
+          // Start at end of line.
+          const { to } = view.state.doc.lineAt(0);
+          view?.dispatch({ selection: { anchor: to } });
+        }
         view?.focus();
       }
     }, [view, autoFocus]);
@@ -140,12 +150,12 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           // NOTE: This must come before user extensions.
           model.extension,
 
-          // TODO(burdon): Factor out (requires special handling for Escape/focus).
+          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
           editorMode === 'vim' && vim(),
 
           // Custom.
           ...extensions,
-        ].filter(nonNullable) as Extension[], // TODO(burdon): ???
+        ].filter(isNotFalsy),
       });
 
       //
@@ -177,6 +187,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // Handles tab/focus.
     // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
+    // TODO(burdon): Convert to keymap?
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
@@ -188,7 +199,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
           case 'Escape': {
             if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
-              rootRef.current?.focus();
+              view?.focus();
             }
             break;
           }
@@ -202,16 +213,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
         key={model.id}
         role='none'
         tabIndex={0}
-        onKeyUp={handleKeyUp}
         {...slots.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
         ref={rootRef}
       />
     );
   },
 );
 
-// TODO(burdon): Single-line/scroll.
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
@@ -220,7 +230,7 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -237,7 +247,7 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ themeMode, placeholder }), ...extensions]}
+        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}

package/src/components/TextEditor/comments.stories.tsx

@@ -17,7 +17,7 @@ import { fixedInsetFlexLayout, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, TextEditor } from './TextEditor';
-import { comments, type CommentsOptions, setFocus, useComments } from '../../extensions';
+import { comments, type CommentsOptions, focusComment, useComments } from '../../extensions';
 import { type Comment, type Range, useTextModel } from '../../hooks';
 
 faker.seed(101);
@@ -50,7 +50,7 @@ const Editor: FC<{
     if (!view.current?.hasFocus && selectedValue !== selected) {
       setSelected(selectedValue);
       if (selectedValue) {
-        setFocus(view.current!, selectedValue);
+        focusComment(view.current!, selectedValue);
       }
     }
   }, [selected, commentRanges, selectedValue]);
@@ -150,7 +150,7 @@ const Thread: FC<{
         </div>
       ))}
 
-      <div ref={containerRef} onClick={() => onSelect()} className='flex'>
+      <div ref={containerRef} className='flex' onClick={() => onSelect()}>
         <TextEditor
           ref={editorRef}
           autoFocus={focus}

package/src/components/TextEditor/hooks.stories.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import {
+  code,
+  createMarkdownExtensions,
+  formatting,
+  heading,
+  hr,
+  image,
+  link,
+  table,
+  tasklist,
+} from '../../extensions';
+import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { markdownTheme } from '../../themes';
+import { Toolbar } from '../Toolbar';
+
+// TODO(burdon): Demo toolbar with hooks.
+// TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
+// TODO(burdon): Remove BaseTextEditor.
+// TODO(burdon): Move scrolling container layout/logic into TextEditor/MarkdownEditor components.
+// TODO(burdon): Define keymap in composer framework format.
+
+type StoryProps = {
+  autoFocus?: boolean;
+  placeholder?: string;
+  doc?: string;
+  readonly?: boolean;
+};
+
+const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, view } = useTextEditor({
+    autoFocus,
+    doc,
+    extensions: [
+      //
+      createDataExtensions({ readonly }),
+      createThemeExtensions({
+        themeMode,
+        theme: markdownTheme,
+        slots: {
+          // TODO(burdon): Document classes re base theme.
+          //  Semantic tokens (e.g., replacement of input surface).
+          editor: {
+            className: 'h-full p-4 bg-white text-black dark:bg-black dark:text-white',
+          },
+        },
+      }),
+      // TODO(burdon): Move lineWrapping.
+      createMarkdownExtensions({ placeholder, lineWrapping: true }),
+      // TODO(burdon): Move into markdown bundle (with React callbacks).
+      code(),
+      formatting(),
+      heading(),
+      hr(),
+      image(),
+      link(),
+      table(),
+      tasklist(),
+    ],
+  });
+
+  const handleAction = useActionHandler(view);
+
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
+          <Toolbar.Root onAction={handleAction}>
+            <Toolbar.Markdown />
+          </Toolbar.Root>
+
+          {/* TODO(burdon): Handle scrolling in component wrapper (like this). */}
+          <div role='none' className='h-full overflow-y-auto' ref={parentRef} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/useTextEditor',
+  component: TextEditor,
+  decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
+};
+
+export const Default = {
+  args: {
+    autoFocus: true,
+    placeholder: 'Text...',
+    doc: '# Demo\n\nThis is a document.\n\n',
+  },
+};

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,7 +14,7 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import { code, comments, formatting, heading, image, table, tasklist, useComments } from '../../extensions';
-import { type Comment, useActionHandler, useTextEditor, useTextModel } from '../../hooks';
+import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
 import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
@@ -22,7 +22,7 @@ faker.seed(101);
 const Story: FC<{ content: string }> = ({ content }) => {
   const [item] = useState({ text: new TextObject(content) });
   const [_comments, setComments] = useState<Comment[]>([]);
-  const [editorRef, editorView] = useTextEditor();
+  const [editorRef, editorView] = useEditorView();
   const model = useTextModel({ text: item.text });
   const extensions = useMemo(
     () => [
@@ -54,7 +54,11 @@ const Story: FC<{ content: string }> = ({ content }) => {
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex h-full justify-center'>
         <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar onAction={handleAction} />
+          <Toolbar.Root onAction={handleAction}>
+            <Toolbar.Markdown />
+            <Toolbar.Separator />
+            <Toolbar.Extended />
+          </Toolbar.Root>
           <MarkdownEditor ref={editorRef} model={model} extensions={extensions} />
         </div>
       </div>