@dxos/react-ui-editor 0.3.11-main.d3a2438 → 0.3.11-main.d56f337

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.d3a2438",
+  "version": "0.3.11-main.d56f337",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
-    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language": "^6.9.3",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/lint": "^6.4.2",
@@ -38,24 +38,24 @@
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.d3a2438",
-    "@dxos/context": "0.3.11-main.d3a2438",
-    "@dxos/automerge": "0.3.11-main.d3a2438",
-    "@dxos/debug": "0.3.11-main.d3a2438",
-    "@dxos/display-name": "0.3.11-main.d3a2438",
-    "@dxos/echo-schema": "0.3.11-main.d3a2438",
-    "@dxos/log": "0.3.11-main.d3a2438",
-    "@dxos/invariant": "0.3.11-main.d3a2438",
-    "@dxos/react-ui": "0.3.11-main.d3a2438",
-    "@dxos/react-async": "0.3.11-main.d3a2438",
-    "@dxos/protocols": "0.3.11-main.d3a2438",
-    "@dxos/react-ui-theme": "0.3.11-main.d3a2438",
-    "@dxos/text-model": "0.3.11-main.d3a2438",
-    "@dxos/util": "0.3.11-main.d3a2438"
+    "@dxos/async": "0.3.11-main.d56f337",
+    "@dxos/automerge": "0.3.11-main.d56f337",
+    "@dxos/context": "0.3.11-main.d56f337",
+    "@dxos/debug": "0.3.11-main.d56f337",
+    "@dxos/display-name": "0.3.11-main.d56f337",
+    "@dxos/echo-schema": "0.3.11-main.d56f337",
+    "@dxos/invariant": "0.3.11-main.d56f337",
+    "@dxos/log": "0.3.11-main.d56f337",
+    "@dxos/protocols": "0.3.11-main.d56f337",
+    "@dxos/react-ui": "0.3.11-main.d56f337",
+    "@dxos/react-ui-theme": "0.3.11-main.d56f337",
+    "@dxos/text-model": "0.3.11-main.d56f337",
+    "@dxos/react-async": "0.3.11-main.d56f337",
+    "@dxos/util": "0.3.11-main.d56f337"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -67,18 +67,19 @@
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/echo-signals": "0.3.11-main.d3a2438",
-    "@dxos/config": "0.3.11-main.d3a2438",
-    "@dxos/echo-typegen": "0.3.11-main.d3a2438",
-    "@dxos/react-client": "0.3.11-main.d3a2438",
-    "@dxos/react-ui": "0.3.11-main.d3a2438",
-    "@dxos/storybook-utils": "0.3.11-main.d3a2438"
+    "@dxos/config": "0.3.11-main.d56f337",
+    "@dxos/echo-signals": "0.3.11-main.d56f337",
+    "@dxos/echo-typegen": "0.3.11-main.d56f337",
+    "@dxos/keyboard": "0.3.11-main.d56f337",
+    "@dxos/react-client": "0.3.11-main.d56f337",
+    "@dxos/react-ui": "0.3.11-main.d56f337",
+    "@dxos/storybook-utils": "0.3.11-main.d56f337"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.d3a2438"
+    "@dxos/react-client": "0.3.11-main.d56f337"
   },
   "publishConfig": {
     "access": "public"

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

@@ -12,6 +12,7 @@ import React, { type FC, StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
+import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
@@ -182,15 +183,15 @@ const Key: FC<{ char: string }> = ({ char }) => (
   </span>
 );
 
-const onCommentsHover: CommentsOptions['onHover'] = (el) => {
+const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   createRoot(el).render(
     <StrictMode>
       <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
         <div>Create comment</div>
-        {/* TODO(burdon): Unify shortcuts. */}
         <div className='flex gap-1'>
-          <Key char='⌘' />
-          <Key char="'" />
+          {keySymbols(parseShortcut(shortcut)).map((char) => (
+            <Key key={char} char={char} />
+          ))}
         </div>
       </div>
     </StrictMode>,
@@ -201,7 +202,7 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-1')} />
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
       </a>
     </StrictMode>,
   );
@@ -221,10 +222,9 @@ const Story = ({ text, automerge, ...props }: StoryProps) => {
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
-        <div className='flex flex-col w-[800px] py-16'>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
           <MarkdownEditor model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>
     </div>
@@ -350,18 +350,18 @@ export const Mention = {
 
 export const Comments = {
   render: () => {
-    const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
+    const [commentRanges, setCommentRanges] = useState<CommentRange[]>([]);
 
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={commentsStates}
+        comments={commentRanges}
         extensions={[
           comments({
             onHover: onCommentsHover,
-            onCreate: (relPos) => {
+            onCreate: (range) => {
               const id = PublicKey.random().toHex();
-              setCommentStates((comments) => [...comments, { id, cursor: relPos }]);
+              setCommentRanges((commentRanges) => [...commentRanges, { id, cursor: range }]);
               return id;
             },
             onSelect: (state) => {

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

@@ -4,17 +4,15 @@
 
 import '@dxosTheme';
 
-import defaultsDeep from 'lodash.defaultsdeep';
 import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorSlots } from './TextEditor';
+import { TextEditor, type TextEditorProps } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
-import { textTheme } from '../../themes';
 
 const initialText = [
   '# TextEditor',
@@ -30,7 +28,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'placeholder' | 'slots'>) => {
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -39,10 +37,9 @@ const Story = ({
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex justify-center'>
         <div className='flex flex-col w-[800px] py-16'>
           <TextEditor model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>
     </div>
@@ -57,49 +54,19 @@ export default {
 };
 
 export const Default = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
-};
-
-export const Listener = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-      extensions={[listener({ onChange: (text) => console.log(text) })]}
-    />
-  ),
+  render: () => <Story placeholder='Enter text...' />,
 };
 
 export const Text = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
+  render: () => <Story text={initialText} placeholder='Enter text...' />,
 };
 
 export const Automerge = {
+  render: () => <Story text={initialText} placeholder='Enter text...' automerge />,
+};
+
+export const Listener = {
   render: () => (
-    <Story
-      automerge
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
+    <Story placeholder='Enter text...' extensions={[listener({ onChange: (text) => console.log(text) })]} />
   ),
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -41,22 +41,22 @@ export type CursorInfo = {
 
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
-  editor?: {
-    className?: string;
-    placeholder?: string;
-    spellCheck?: boolean;
-    tabIndex?: number;
-    theme?: ThemeStyles;
-  };
+  // editor?: {
+  //   className?: string;
+  // };
 };
 
+// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel;
   focus?: boolean;
+  selection?: { anchor: number; head?: number };
   readonly?: boolean; // TODO(burdon): Move into model.
   comments?: CommentRange[]; // TODO(burdon): Move into extension.
   extensions?: Extension[];
   editorMode?: EditorMode;
+  placeholder?: string;
+  theme?: ThemeStyles;
   slots?: TextEditorSlots;
 };
 
@@ -64,18 +64,24 @@ export type TextEditorProps = {
  * Base text editor.
  */
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ model, focus, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
+  (
+    { model, focus, selection, readonly, comments, extensions = [], editorMode, theme, slots = defaultSlots },
+    forwardedRef,
+  ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
+
+    // The editor view ref should only be used as an escape hatch.
     const rootRef = useRef<HTMLDivElement>(null);
     const [view, setView] = useState<EditorView | null>(null);
-    // NOTE: This doesn't update useRef.
     useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
+
+    // Focus.
     useEffect(() => {
-      if (focus && view) {
+      if (view && focus) {
         view.focus();
       }
-    }, [focus, view]);
+    }, [view, focus]);
 
     // TODO(burdon): Factor out as extension.
     const { awareness, peer } = model;
@@ -91,7 +97,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // TODO(burdon): Factor out as extension.
     useEffect(() => {
-      if (view && comments?.length) {
+      if (view && comments !== undefined) {
         view.dispatch({
           effects: setCommentRange.of({ model, comments }),
         });
@@ -103,10 +109,11 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
         return;
       }
 
-      // TODO(burdon): Remember cursor position.
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc: model.text(),
+        // TODO(burdon): Composer should store and set selection when switching documents.
+        selection,
         extensions: [
           readonly && EditorState.readOnly.of(readonly),
 
@@ -116,7 +123,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           // Theme.
           // TODO(burdon): Make theme configurable.
           EditorView.baseTheme(defaultTheme),
-          EditorView.theme(slots?.editor?.theme ?? {}),
+          EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
@@ -152,7 +159,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          // TODO(burdon): ???
+          // TODO(burdon): Is this required (for vim mode?)
           // case 'Enter': {
           //   view?.contentDOM.focus();
           //   break;
@@ -170,28 +177,27 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     return (
       <div
         key={model.id}
+        role='none'
         ref={rootRef}
         tabIndex={0}
-        {...slots?.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
+        {...slots.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
       />
     );
   },
 );
 
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          basicBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
+        extensions={[basicBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
         slots={updatedSlots}
         {...props}
       />
@@ -201,17 +207,15 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
 
 // TODO(burdon): Remove (Just provide bundle, slots).
 export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          markdownBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
         slots={updatedSlots}
         {...props}
       />
@@ -221,20 +225,14 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2', inputSurface),
+    className: mx('p-2 overflow-y-auto', inputSurface),
   },
 };
 
 export const defaultTextSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
 };
 
 export const defaultMarkdownSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: markdownTheme,
-  },
 };