@dxos/react-ui-editor 0.3.9-next.7522f7a → 0.3.9

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,72 +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.
-          // TODO(burdon): Move to default extensions.
-          ...(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 () => {
@@ -112,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/{theme.ts → extensions/basic/theme.ts}

@@ -5,30 +5,44 @@
 import get from 'lodash.get';
 import { type StyleSpec } from 'style-mod';
 
-import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
-
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+import { tokens } from '../../../../styles';
 
 /**
  * Minimal styles.
+ * NOTE: The '&' prefix denotes the CM editor root.
  * https://codemirror.net/examples/styling
  */
-// TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
-export const defaultStyles: {
+// TODO(burdon): Remove?
+export const basicTheme: {
   [selector: string]: StyleSpec;
 } = {
   '&.cm-focused': {
     outline: 'none',
   },
-  '.cm-scroller': {
+  '& .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-tooltip': {
+  '& .cm-content': {
+    padding: 0,
+    caretColor: 'black',
+  },
+  '.dark & .cm-content': {
+    caretColor: 'white',
+  },
+  '& .cm-tooltip': {
     backgroundColor: 'transparent',
     border: 'none',
   },
-  '.cm-link': {
+  '& .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;
+    },
+  });

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

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

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './hyperlinkDecoration';
-export * from './hyperlinkTooltip';
-export * from './hyperlinkWidget';
+export * from './basic';
+export * from './change';
+export * from './hyperlink';
+export * from './markdown';

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

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+import { lintKeymap } from '@codemirror/lint';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  placeholder,
+  rectangularSelection,
+} from '@codemirror/view';
+// import { GFM } from '@lezer/markdown';
+
+import type { ThemeMode } from '@dxos/react-ui';
+
+import { markdownTagsExtension } from './tags';
+import { markdownHighlightStyle } from './theme';
+
+export type MarkdownBundleOptions = {
+  themeMode?: ThemeMode;
+  placeholder?: string;
+};
+
+export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
+  // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
+  // https://codemirror.net/docs/ref/#codemirror.basicSetup
+  return [
+    bracketMatching(),
+    closeBrackets(),
+    _placeholder && placeholder(_placeholder),
+
+    EditorState.allowMultipleSelections.of(true),
+    EditorView.lineWrapping,
+
+    // autocompletion(),
+    crosshairCursor(),
+    dropCursor(),
+    drawSelection(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    highlightSelectionMatches(),
+    highlightSpecialChars(),
+    history(),
+    indentOnInput(),
+    rectangularSelection(),
+
+    keymap.of([
+      ...closeBracketsKeymap,
+      // ...completionKeymap,
+      ...defaultKeymap,
+      ...foldKeymap,
+      ...historyKeymap,
+      ...lintKeymap,
+      ...searchKeymap,
+      indentWithTab,
+    ]),
+
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    markdown({
+      base: markdownLanguage,
+      codeLanguages: languages,
+      extensions: [
+        // TODO(burdon): This seems to upgrade the parser.
+        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+        // https://github.github.com/gfm
+        // GFM,
+
+        // Custom styling.
+        markdownTagsExtension,
+      ],
+    }),
+
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    syntaxHighlighting(markdownHighlightStyle),
+    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+  ].filter(Boolean) as Extension[];
+};

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

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

package/src/components/{Markdown/markdownTheme.ts → TextEditor/extensions/markdown/theme.ts}

@@ -7,12 +7,10 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import get from 'lodash.get';
 
-import { markdownTags } from './markdownTags';
-import { bold, heading, italic, mark, strikethrough, tokens } from '../../styles';
-
-// TODO(burdon): Use theme colors.
-// TODO(burdon): Light mode.
+import { markdownTags } from './tags';
+import { bold, heading, italic, mark, strikethrough, tokens, type ThemeStyles } from '../../../../styles';
 
+// TODO(burdon): Rationalize theme/colors. Hoist onto single property object.
 export const chalky = '#e5c07b';
 export const coral = '#e06c75';
 export const cyan = '#56b6c2';
@@ -28,16 +26,15 @@ export const highlightBackground = '#2c313a';
 const _background = '#282c34';
 export const tooltipBackground = '#353a42';
 const _selection = '#3E4451';
-export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
-// TODO(burdon): Subtle difference in layout for documents and stacks.
-// TODO(burdon): On first character, height of editor changes by a few pixels.
-// TODO(burdon): Is the '&' prefix required? If so, document.
-
-export const markdownTheme = {
-  // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
+/**
+ * NOTE: The '&' prefix denotes the CM editor root.
+ * https://codemirror.net/examples/styling
+ */
+export const markdownTheme: ThemeStyles = {
+  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
   //   color: ivory,
   //   backgroundColor: background
@@ -75,7 +72,7 @@ export const markdownTheme = {
   //   color: '#ddd'
   // },
 
-  '.cm-tooltip': {
+  '& .cm-tooltip': {
     backgroundColor: 'transparent',
     border: 'none',
   },
@@ -102,6 +99,7 @@ export const markdownTheme = {
   },
   '& .cm-line': {
     paddingInline: 0,
+    lineHeight: 1.6,
     minBlockSize: '1.6em',
   },
   '& .cm-line *': {
@@ -120,16 +118,17 @@ export const markdownTheme = {
     background: get(tokens, 'extend.colors.primary.600', '#00ffff') + '44',
   },
   '& .cm-content': {
+    padding: 0,
     caretColor: 'black',
   },
   '.dark & .cm-content': {
-    caretColor: cursor,
+    caretColor: 'white',
   },
   '& .cm-cursor': {
     borderLeftColor: 'black',
   },
   '.dark & .cm-cursor': {
-    borderLeftColor: cursor,
+    borderLeftColor: 'white',
   },
   '.cm-placeholder': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
@@ -169,12 +168,13 @@ export const markdownTheme = {
     margin: '0',
   },
   '.cm-link': {
-    color: 'rgb(20 89 208)',
+    color: 'rgb(20 89 208)', // TODO(burdon): Rationalize.
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },
+  // TODO(burdon): Document.
   ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
     const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
     // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.