@dxos/react-ui-editor 0.4.8-next.fff1521 → 0.4.9-main.2d20855

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/markdown/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './action';
 export * from './bundle';
 export * from './decorate';
 export * from './formatting';

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/useActionHandler.ts

@@ -2,96 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { EditorView } from '@codemirror/view';
+import { type EditorView } from '@codemirror/view';
 
-import type { ToolbarProps } from '../components';
-import {
-  Inline,
-  List,
-  addBlockquote,
-  addCodeblock,
-  addLink,
-  addList,
-  createComment,
-  insertTable,
-  removeBlockquote,
-  removeCodeblock,
-  removeLink,
-  removeList,
-  setHeading,
-  setStyle,
-  toggleBlockquote,
-  toggleList,
-  toggleStyle,
-} from '../extensions';
+import { type ToolbarProps } from '../components';
+import { processAction } from '../extensions';
 
 export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
-  return (action) => {
-    if (!view) {
-      return;
-    }
-
-    let inlineType, listType;
-    switch (action.type) {
-      case 'heading':
-        setHeading(parseInt(action.data))(view);
-        break;
-
-      case 'strong':
-      case 'emphasis':
-      case 'strikethrough':
-      case 'code':
-        inlineType =
-          action.type === 'strong'
-            ? Inline.Strong
-            : action.type === 'emphasis'
-              ? Inline.Emphasis
-              : action.type === 'strikethrough'
-                ? Inline.Strikethrough
-                : Inline.Code;
-        (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
-        break;
-
-      case 'list-ordered':
-      case 'list-bullet':
-      case 'list-task':
-        listType =
-          action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
-        (action.data === false
-          ? removeList(listType)
-          : action.data === true
-            ? addList(listType)
-            : toggleList(listType))(view);
-        break;
-
-      case 'blockquote':
-        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
-        break;
-      case 'codeblock':
-        (action.data === false ? removeCodeblock : addCodeblock)(view);
-        break;
-      case 'table':
-        insertTable(view);
-        break;
-
-      case 'link':
-        (action.data === false ? removeLink : addLink())(view);
-        break;
-
-      case 'image':
-        addLink({ url: action.data, image: true })(view);
-        break;
-
-      case 'comment':
-        createComment(view);
-        break;
-    }
-
-    // TODO(burdon): Hack otherwise remains on heading selector.
-    setTimeout(() => {
-      if (!view.hasFocus) {
-        view.focus();
-      }
-    });
-  };
+  return (action) => view && processAction(view, action);
 };

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'),
+    },
   },
 };

package/src/translations.ts

@@ -22,6 +22,9 @@ export default [
         'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',
+        'heading level label_zero': 'Paragraph',
+        'heading level label_one': 'Heading level {{count}}',
+        'heading level label_other': 'Heading level {{count}}',
       },
     },
   },

package/dist/types/src/extensions/cursor-line-margin.d.ts

@@ -1,7 +0,0 @@
-import { type Extension } from '@codemirror/state';
-type Options = {
-    lines?: number;
-};
-export declare const cursorLineMargin: (options?: Options) => Extension;
-export {};
-//# sourceMappingURL=cursor-line-margin.d.ts.map

package/dist/types/src/extensions/cursor-line-margin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor-line-margin.d.ts","sourceRoot":"","sources":["../../../../src/extensions/cursor-line-margin.ts"],"names":[],"mappings":"AAOA,OAAO,EAAoB,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAC;AAQlF,KAAK,OAAO,GAAG;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,eAAO,MAAM,gBAAgB,aAAa,OAAO,KAAkB,SAyElE,CAAC"}

package/src/extensions/cursor-line-margin.ts

@@ -1,94 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-// Based upon @acheronfail’s implementation, fetched 16 Feb 2024
-// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448/5
-
-import { type EditorState, type Extension, Transaction } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-
-import { log } from '@dxos/log';
-
-const annotation = 'cursorLineMargin';
-const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
-
-type Options = {
-  lines?: number;
-};
-
-// TODO(burdon): Remove. Buggy and creates scrolling problems. Find better (more general) way to deal with HALO notch.
-export const cursorLineMargin = (options: Options = { lines: 3 }): Extension => {
-  const { lines } = options;
-  if (!lines || lines <= 0) {
-    return [];
-  }
-
-  return EditorView.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
-    // make sure we don't trigger an infinite loop and ignore our own changes
-    if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
-      return;
-    }
-
-    const s = state;
-    const { main } = s.selection;
-
-    // editor rect
-    const rect = view.dom.getBoundingClientRect();
-    // top and bottom pixel positions of the visible region of the editor
-    const viewportTop = rect.top - view.documentTop;
-    const viewportBottom = rect.bottom - view.documentTop;
-
-    // line with main selection
-    const mainLine = lineAtPos(s, main.head);
-    // top most visible line
-    const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
-
-    // bottom most visible line
-    // NOTE: calculating this is slightly more complex - if the editor is
-    // larger than all the lines in it, and the `scrollPastEnd()` extension is
-    // enabled, then we need to calculate where the bottom most visible line
-    // should be if it extended all the way to the bottom of the editor
-    const botLineBlk = view.lineBlockAtHeight(viewportBottom);
-    const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
-    const visBotLine =
-      botLineBlk.bottom >= viewportBottom
-        ? visBotLineDoc
-        : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
-
-    // const needsScrollTop = mainLine <= visTopLine + cursorLineMargin;
-    const needsScrollTop = false;
-    const needsScrollBot = mainLine >= visBotLine - lines;
-
-    // the scroll margins are overlapping
-    if (needsScrollTop && needsScrollBot) {
-      log.warn('is cursorScrollMargin too large for the editor size?');
-      return;
-    }
-
-    // no need to scroll, we're in between scroll regions
-    if (!needsScrollTop && !needsScrollBot) {
-      return;
-    }
-
-    // if we're within the margin, but moving the other way, then don't scroll
-    if (selectionSet) {
-      const { head } = startState.selection.main;
-      const oldMainLine = lineAtPos(startState, head);
-      if (needsScrollTop && oldMainLine < mainLine) {
-        return;
-      }
-      if (needsScrollBot && oldMainLine > mainLine) {
-        return;
-      }
-    }
-
-    view.dispatch({
-      annotations: Transaction.userEvent.of(annotation),
-      effects: EditorView.scrollIntoView(s.selection.main.head, {
-        y: needsScrollTop ? 'start' : 'end',
-        yMargin: view.defaultLineHeight * lines,
-      }),
-    });
-  });
-};