@dxos/react-ui-editor 0.4.8-main.aa7abac → 0.4.8-main.aafbaef

package/src/extensions/factories.ts

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import {
   EditorView,
@@ -12,6 +13,8 @@ import {
   drawSelection,
   dropCursor,
   highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
   lineNumbers,
   placeholder,
   scrollPastEnd,
@@ -32,8 +35,6 @@ import { awareness, SpaceAwarenessProvider } from './awareness';
 import { type ThemeStyles } from '../styles';
 import { defaultTheme } from '../themes';
 
-// TODO(burdon): Move into extensions folder.
-
 //
 // Basic
 //
@@ -41,8 +42,8 @@ import { defaultTheme } from '../themes';
 /**
  * https://codemirror.net/docs/extensions
  * https://github.com/codemirror/basic-setup
+ * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
  */
-// TODO(burdon): Reconcile with createMarkdownExtensions.
 export type BasicExtensionsOptions = {
   allowMultipleSelections?: boolean;
   bracketMatching?: boolean;
@@ -53,21 +54,27 @@ export type BasicExtensionsOptions = {
   editable?: boolean;
   highlightActiveLine?: boolean;
   history?: boolean;
+  standardKeymap?: boolean;
+  indentWithTab?: boolean;
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
   readonly?: boolean;
+  search?: boolean;
   scrollPastEnd?: boolean;
   tabSize?: number;
 };
 
 const defaults: BasicExtensionsOptions = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
+  standardKeymap: true,
   lineWrapping: true,
+  search: true,
 };
 
 export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
@@ -85,6 +92,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
+    highlightSpecialChars(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
     props.lineWrapping && EditorView.lineWrapping,
@@ -92,6 +100,22 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
+
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap.of(
+      [
+        // https://codemirror.net/docs/ref/#commands.standardKeymap
+        ...(props.standardKeymap ? standardKeymap : []),
+        // https://codemirror.net/docs/ref/#commands.indentWithTab
+        ...(props.indentWithTab ? [indentWithTab] : []),
+        // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+        ...(props.closeBrackets ? closeBracketsKeymap : []),
+        // https://codemirror.net/docs/ref/#commands.historyKeymap
+        ...(props.history ? historyKeymap : []),
+        // https://codemirror.net/docs/ref/#search.searchKeymap
+        ...(props.search ? searchKeymap : []),
+      ].filter(isNotFalsy),
+    ),
   ].filter(isNotFalsy);
 };
 
@@ -135,12 +159,11 @@ export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: Theme
 
 export type DataExtensionsProps = {
   id: string;
-  text: DocAccessor; // TODO(burdon): Rename content.
+  text: DocAccessor;
   space?: Space;
   identity?: Identity | null;
 };
 
-// TODO(burdon): Factor out automerge defs and extension (not hook).
 // TODO(burdon): Move out of react-ui-editor (remove echo deps).
 export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];

package/src/extensions/markdown/bundle.ts

@@ -2,12 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBracketsKeymap } from '@codemirror/autocomplete';
-import { historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { completionKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { searchKeymap } from '@codemirror/search';
+import { lintKeymap } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
@@ -60,14 +60,11 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
     keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap,
+
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap,
+      ...completionKeymap,
+      ...lintKeymap,
     ]),
   ];
 };

package/src/extensions/markdown/formatting.ts

@@ -15,9 +15,7 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useMemo } from 'react';
-
-import { useStateRef } from '@dxos/react-async';
+import { useMemo, useState } from 'react';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -1225,20 +1223,22 @@ export const getFormatting = (state: EditorState): Formatting => {
  * Hook provides an extension to compute the current formatting state.
  */
 export const useFormattingState = (): [Formatting | undefined, Extension] => {
-  const [state, setState, stateRef] = useStateRef<Formatting>();
+  const [state, setState] = useState<Formatting>();
+
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          const newState = getFormatting(update.state);
-          if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
-            // TODO(burdon): Error on first click on toolbar.
-            //  Warning: React has detected a change in the order of Hooks called by ForwardRef. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
-            setState(newState);
-          }
+          setState((prevState) => {
+            const newState = getFormatting(update.state);
+            if (!prevState || !formattingEquals(prevState, newState)) {
+              return newState;
+            }
+            return prevState;
+          });
         }
       }),
-    [],
+    [setState],
   );
 
   return [state, observer];

package/src/extensions/modes.ts

@@ -5,10 +5,11 @@
 import { type Extension, Facet } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 
 export const focusEvent = 'focus.container';
 
-export type EditorMode = 'default' | 'vim' | undefined;
+export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
 
 export type EditorConfig = {
   type: string;
@@ -21,7 +22,13 @@ export const editorMode = Facet.define<EditorConfig, EditorConfig>({
 
 export const EditorModes: { [mode: string]: Extension } = {
   default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorMode.of({ type: 'vscode' }),
+    keymap.of(vscodeKeymap),
+  ],
   vim: [
+    // https://github.com/replit/codemirror-vim
     vim(),
     editorMode.of({ type: 'vim', noTabster: true }),
     keymap.of([

package/src/hooks/useDocAccessor.ts

@@ -4,11 +4,17 @@
 
 import { useMemo } from 'react';
 
-import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
+import {
+  createDocAccessor,
+  type DocAccessor,
+  getTextContent,
+  type TextObject,
+  type EchoReactiveObject,
+} from '@dxos/echo-schema';
 
 // TODO(burdon): Factor out.
 export const useDocAccessor = <T = any>(
-  text: TextObject,
+  text: TextObject | EchoReactiveObject<{ content: string }>,
 ): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
   return useMemo(
     () => ({

package/src/themes/default.ts

@@ -236,28 +236,44 @@ export const defaultTheme: ThemeStyles = {
    *   </div>
    * </div
    */
-  '.cm-panels': {
-    border: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
-  },
+  '.cm-panels': {},
   '.cm-panel': {
-    background: get(tokens, 'extend.colors.neutral.50'),
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
   },
+  '.cm-panel input[type=checkbox]': {
+    marginRight: '0.4rem !important',
+  },
+  '&light .cm-panel': {
+    background: get(tokens, 'extend.colors.neutral.50'),
+  },
+  '&dark .cm-panel': {
+    background: get(tokens, 'extend.colors.neutral.850'),
+  },
   '.cm-button': {
     margin: '4px',
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-    background: get(tokens, 'extend.colors.neutral.100'),
     backgroundImage: 'none',
     border: 'none',
+    '&:active': {
+      backgroundImage: 'none',
+    },
+  },
+  '&light .cm-button': {
+    background: get(tokens, 'extend.colors.neutral.100'),
     '&:hover': {
       background: get(tokens, 'extend.colors.neutral.200'),
     },
     '&:active': {
       background: get(tokens, 'extend.colors.neutral.300'),
-      backgroundImage: 'none',
     },
   },
-  '.cm-panel input[type=checkbox]': {
-    marginRight: '0.4rem !important',
+  '&dark .cm-button': {
+    background: get(tokens, 'extend.colors.neutral.800'),
+    '&:hover': {
+      background: get(tokens, 'extend.colors.neutral.700'),
+    },
+    '&:active': {
+      background: get(tokens, 'extend.colors.neutral.600'),
+    },
   },
 };