@dxos/react-ui-editor 0.4.8-main.6919ef3 → 0.4.8-main.6dbc1f1

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,92 +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 '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/hooks/useTextEditor.stories.tsx

@@ -67,7 +67,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='grow overflow-hidden'>
-        <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
+        <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
       </div>
     </div>
   );
@@ -117,7 +117,7 @@ export default {
 export const Default = {
   render: () => {
     const { parentRef } = useTextEditor();
-    return <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
   },
 };
 
@@ -127,7 +127,7 @@ export const Basic = {
     const { parentRef } = useTextEditor(() => ({
       extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
     }));
-    return <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
   },
 };
 

package/src/hooks/useTextEditor.ts

@@ -33,6 +33,8 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
   useEffect(() => {
     let view: EditorView;
     if (parentRef.current) {
+      log('create', { id });
+
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc,
@@ -69,6 +71,7 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
     }
 
     return () => {
+      log('destroy', { id });
       view?.destroy();
     };
   }, deps);

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

@@ -19,6 +19,7 @@ export default [
         'blockquote label': 'Block quote',
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
+        'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',
       },

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