@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.8ad58eb

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

@@ -3,73 +3,65 @@
 //
 
 import '@dxosTheme';
-
-import { HighlightStyle, StreamLanguage } from '@codemirror/language';
-import { tags } from '@lezer/highlight';
-import React, { useState } from 'react';
+import { markdown } from '@codemirror/lang-markdown';
+import { ArrowCircleUp } from '@phosphor-icons/react';
+import React, { StrictMode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
-import { defaultHyperLinkTooltip, hyperlink } from './extensions';
-import { useTextModel } from '../../model';
-
-export const nameRegex = /\{([\w_]+)}/;
-
-/**
- * Simple Monaco language extension.
- * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
- */
-export const promptLanguage = StreamLanguage.define<{ count: number }>({
-  startState: () => ({ count: 0 }),
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { useTextModel } from '../../hooks';
 
-  token: (stream, state) => {
-    state.count++;
-    if (stream.eatSpace()) {
-      return null;
-    }
-    if (stream.match(/^(<\w+>)/)) {
-      return 'tagName';
-    }
-    stream.next();
-    return null;
-  },
-});
+const text = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  '',
+].join('\n');
 
-/**
- * https://codemirror.net/examples/styling
- * https://lezer.codemirror.net/docs/ref/#highlight
- */
-export const promptHighlightStyles = HighlightStyle.define([
-  {
-    tag: tags.tagName,
-    class: mx(
-      'mr-1 p-1',
-      'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-mono text-sm',
-      'rounded border border-neutral-300 dark:border-neutral-700',
-    ),
-  },
-]);
-
-const Story = () => {
-  const [item] = useState({
-    text: new TextObject(
-      '\n\n\nThis is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).\n\n\n',
-    ),
+const hyperLinkTooltip = () =>
+  createHyperlinkTooltip((el, url) => {
+    const web = new URL(url);
+    createRoot(el).render(
+      <StrictMode>
+        <div className='flex gap-1 items-center'>
+          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
+          <p className='pr-1'>{web.origin}</p>
+        </div>
+      </StrictMode>,
+    );
   });
 
+const Story = ({ automerge }: { automerge?: boolean }) => {
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
   const model = useTextModel({ text: item.text });
+  if (!model) {
+    return <></>;
+  }
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface, 'p-4 gap-4')}>
-      <TextEditor
-        model={model}
-        slots={{ root: { className: mx(inputSurface, 'p-2') } }}
-        extensions={[hyperlink, defaultHyperLinkTooltip]}
-      />
-      <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex justify-center p-8'>
+        <div className='w-[800px]'>
+          <TextEditor
+            model={model}
+            extensions={[
+              markdown(),
+              hyperlinkDecoration({ link: false }),
+              hyperLinkTooltip(),
+              // EditorView.domEventHandlers({
+              //   mousedown: (e, view) => {},
+              // }),
+            ]}
+            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+          />
+        </div>
+      </div>
     </div>
   );
 };
@@ -81,3 +73,7 @@ export default {
 };
 
 export const Default = {};
+
+export const Automerge = {
+  render: () => <Story automerge />,
+};

package/src/components/TextEditor/TextEditor.tsx

@@ -2,28 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorView, placeholder } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { vim } from '@replit/codemirror-vim';
+import defaultsDeep from 'lodash.defaultsdeep';
+import get from 'lodash.get';
 import React, {
   type KeyboardEvent,
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useState,
-  useCallback,
-  type HTMLAttributes,
+  type ComponentProps,
 } from 'react';
-import { type StyleSpec } from 'style-mod';
-import { yCollab } from 'y-codemirror.next';
 
+import { isDocAccessor } from '@dxos/echo-schema';
 import { useThemeContext } from '@dxos/react-ui';
-import { YText } from '@dxos/text-model';
 
-import { defaultStyles } from './theme';
-import { type EditorModel, type EditorSlots } from '../../model';
+import { basicBundle, basicTheme, markdownBundle, markdownTheme } from './extensions';
+import { type EditorModel, useCollaboration } from '../../hooks';
+import type { ThemeStyles } from '../../styles';
+
+export const EditorModes = ['default', 'vim'] as const;
+export type EditorMode = (typeof EditorModes)[number];
 
 export type CursorInfo = {
   from: number;
@@ -39,71 +42,81 @@ export type TextEditorRef = {
   view?: EditorView;
 };
 
+export type TextEditorSlots = {
+  root?: Omit<ComponentProps<'div'>, 'ref'>;
+  editor?: {
+    className?: string;
+    placeholder?: string;
+    spellCheck?: boolean;
+    tabIndex?: number;
+    theme?: ThemeStyles;
+  };
+};
+
 export type TextEditorProps = {
-  model?: EditorModel;
+  model: EditorModel;
   extensions?: Extension[];
-  theme?: {
-    [selector: string]: StyleSpec;
-  };
-  slots?: EditorSlots;
-  onKeyDown?: (event: KeyboardEvent, info: CursorInfo) => void;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'onBlur' | 'onFocus'>;
+  slots?: TextEditorSlots;
+  editorMode?: EditorMode;
+};
 
 /**
- * Simple text editor.
+ * Base text editor.
+ * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
-    const { id, content } = model ?? {};
+export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
     const { themeMode } = useThemeContext();
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
     const [parent, setParent] = useState<HTMLDivElement | null>(null);
     const [state, setState] = useState<EditorState>();
     const [view, setView] = useState<EditorView>();
-
-    // TODO(burdon): The ref may be instantiated before the view is created.
     useImperativeHandle(
       forwardedRef,
-      () => {
-        return {
-          editor: parent,
-          state,
-          view,
-        };
-      },
-      [view],
+      () => ({
+        editor: parent,
+        state,
+        view,
+      }),
+      [view, state, parent],
     );
 
+    // TODO(burdon): Pass in extension?
+    const collaboration = useCollaboration(model, themeMode);
+
     useEffect(() => {
       if (!parent) {
         return;
       }
 
-      view?.destroy();
+      const initialText = isDocAccessor(model.content)
+        ? get(model.content.handle.docSync(), model.content.path)
+        : model.content?.toString();
 
       const state = EditorState.create({
-        doc: content?.toString(),
+        doc: initialText,
         extensions: [
-          bracketMatching(),
-          closeBrackets(),
-          placeholder(slots.editor?.placeholder ?? ''),
-          EditorView.lineWrapping,
-
-          // Themes.
-          EditorView.theme(theme),
-          ...(themeMode === 'dark'
-            ? [syntaxHighlighting(oneDarkHighlightStyle)]
-            : [syntaxHighlighting(defaultHighlightStyle)]),
+          // TODO(burdon): Factor out VIM mode?
+          editorMode === 'vim' && vim(),
 
           // Replication.
-          ...(content instanceof YText ? [yCollab(content, undefined)] : []),
+          collaboration,
+
+          // Theme.
+          slots?.editor?.theme && EditorView.theme(slots?.editor?.theme),
 
           // Custom.
           ...extensions,
-        ],
+        ].filter(Boolean) as Extension[],
       });
 
       setState(state);
+
+      // NOTE: This repaints the editor.
+      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
+      // Ideally this should not be hit except when changing between text objects.
+      view?.destroy();
       setView(new EditorView({ state, parent }));
 
       return () => {
@@ -111,20 +124,65 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [parent, content, themeMode]);
+    }, [parent, model.content, themeMode, editorMode]);
 
-    const handleKeyDown = useCallback(
+    const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
-        if (view) {
-          const { head, from, to } = view.state.selection.ranges[0];
-          const { number } = view.state.doc.lineAt(head);
-          const after = view.state.sliceDoc(from);
-          onKeyDown?.(event, { from, to, line: number, lines: view.state.doc.lines, after });
+        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+        switch (key) {
+          case 'Enter': {
+            view?.contentDOM.focus();
+            break;
+          }
+
+          case 'Escape': {
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            break;
+          }
         }
       },
-      [view],
+      [view, editorMode],
+    );
+
+    return (
+      <div
+        key={model.id}
+        ref={setParent}
+        tabIndex={0}
+        {...slots?.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
+      />
+    );
+  },
+);
+
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
+        {...props}
+      />
     );
+  },
+);
 
-    return <div key={id} ref={setParent} {...slots.root} onKeyDown={handleKeyDown} {...props} />;
+export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
+        {...props}
+      />
+    );
   },
 );

package/src/components/TextEditor/codemirror.stories.ts

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/html';
+import { basicSetup } from 'codemirror';
+import { yCollab } from 'y-codemirror.next';
+
+import { EventSubscriptions } from '@dxos/async';
+import { generateName } from '@dxos/display-name';
+import { Client, type PublicKey } from '@dxos/react-client';
+import { type Space, TextObject } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
+import { YText } from '@dxos/text-model';
+
+import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
+import { EditorDocument, types as schema } from '../../testing';
+
+export default {
+  title: 'CodeMirror',
+};
+
+const testBuilder = new TestBuilder();
+const views: Record<number, EditorView> = {};
+const subscriptions = new EventSubscriptions();
+
+const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identity, space: Space, text: TextObject) => {
+  const doc = text.doc;
+  const ytext = text.content;
+  if (!(ytext instanceof YText) || !doc) {
+    return;
+  }
+
+  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  awareness.setLocalStateField('user', {
+    name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+    // TODO(wittjosiah): Pick colours from theme based on identity key.
+    color: cursorColor.color,
+    colorLight: cursorColor.light,
+  });
+
+  const state = EditorState.create({
+    doc: ytext.toString(),
+    extensions: [basicSetup, markdown({ base: markdownLanguage }), yCollab(ytext, awareness)],
+  });
+
+  const view = views[id];
+  if (view) {
+    view.setState(state);
+  } else {
+    views[id] = new EditorView({ state, parent: editor });
+  }
+
+  if (id === 0) {
+    subscriptions.clear();
+    subscriptions.add(textGenerator({ text: ytext }));
+  }
+};
+
+const setupEditor = async (id: number, client: Client, spaceKey: PublicKey, editor: HTMLDivElement) => {
+  const space = await client.spaces.get(spaceKey)!;
+  const query = space.db.query(EditorDocument.filter());
+  query.subscribe(({ objects }) => {
+    const text = objects[0]?.content;
+    void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+  });
+
+  const text = query.objects[0]?.content;
+  void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+};
+
+const setupSpace = async (count: number) => {
+  const clients = [...Array(count)].map(() => new Client({ services: testBuilder.createLocal() }));
+  await Promise.all(clients.map((client) => client.initialize()));
+  await Promise.all(clients.map((client) => client.halo.createIdentity()));
+  clients.map((client) => client.spaces.addSchema(schema));
+
+  const space = await clients[0].spaces.create();
+  const text = new TextObject('Hello, Storybook!');
+  const document = new EditorDocument({ content: text });
+  await space.db.add(document);
+
+  await joinCommonSpace(clients, space.key);
+
+  return { clients, spaceKey: space.key };
+};
+
+const count = 2;
+
+export const Default: StoryObj<{ id: number; client: Client; spaceKey: PublicKey }> = {
+  render: ({ id, client, spaceKey }) => {
+    const editor = document.createElement('div');
+    editor.setAttribute('style', 'min-width: 0; flex: 1; padding: 1rem;');
+    void setupEditor(id, client, spaceKey, editor);
+    return editor;
+  },
+  decorators: [
+    (story) => {
+      const container = document.createElement('div');
+      container.setAttribute('style', 'display: flex; justify-content: space-evenly');
+      void setupSpace(count).then(({ clients, spaceKey }) => {
+        clients.forEach((client, id) => {
+          // TODO(wittjosiah): According to the docs these types should be compatible.
+          container.appendChild(story({ args: { id, client, spaceKey } }) as HTMLElement);
+        });
+      });
+      return container;
+    },
+  ],
+};

package/src/components/TextEditor/extensions/basic/bundle.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { EditorView, placeholder } from '@codemirror/view';
+
+import type { ThemeMode } from '@dxos/react-ui';
+
+export type BasicBundleOptions = {
+  themeMode?: ThemeMode;
+  placeholder?: string;
+};
+
+export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
+  [
+    bracketMatching(),
+    closeBrackets(),
+    _placeholder && placeholder(_placeholder),
+
+    EditorView.lineWrapping,
+
+    // TODO(burdon): Is this required?
+    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+  ].filter(Boolean) as Extension[];

package/src/components/TextEditor/extensions/basic/index.ts

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

package/src/components/TextEditor/extensions/basic/theme.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
+
+import { tokens } from '../../../../styles';
+
+/**
+ * Minimal styles.
+ * NOTE: The '&' prefix denotes the CM editor root.
+ * https://codemirror.net/examples/styling
+ */
+// TODO(burdon): Remove?
+export const basicTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-line': {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: '1.6em',
+  },
+  '& .cm-line *': {
+    lineHeight: 1.6,
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    overflow: 'visible',
+  },
+  '& .cm-content': {
+    padding: 0,
+    caretColor: 'black',
+  },
+  '.dark & .cm-content': {
+    caretColor: 'white',
+  },
+  '& .cm-tooltip': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+  '& .cm-link': {
+    color: get(tokens, 'extend.colors.primary.500'),
+    textDecoration: 'underline',
+  },
+};

package/src/components/TextEditor/extensions/change.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StateField } from '@codemirror/state';
+
+/**
+ * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
+ * @param onChange
+ */
+// TODO(burdon): Name?
+export const onChangeExtension = (onChange: (text: string) => void) =>
+  StateField.define({
+    create: () => null,
+    update: (_value, transaction) => {
+      if (transaction.docChanged && onChange) {
+        onChange(transaction.newDoc.toString());
+      }
+
+      return null;
+    },
+  });