@dxos/react-ui-editor 0.4.8-main.46f461d → 0.4.8-main.4ad174a

package/src/components/Toolbar/Toolbar.tsx

@@ -42,7 +42,7 @@ import {
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Formatting } from '../../extensions';
+import { type Action, type ActionType, type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
@@ -57,30 +57,6 @@ const HeadingIcons: { [key: string]: Icon } = {
   '6': TextHSix,
 };
 
-// TODO(burdon): Revert to string to make extensible?
-export type ActionType =
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'strikethrough'
-  | 'table';
-
-export type Action = {
-  type: ActionType;
-  data?: any;
-};
-
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
     state: Formatting | undefined;
@@ -358,7 +334,7 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
 
   useEffect(() => {
     if (onUpload && acceptedFiles.length) {
-      setTimeout(async () => {
+      requestAnimationFrame(async () => {
         // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
         const f = acceptedFiles[0];
         const file = new File([f], f.name, {

package/src/extensions/command/state.ts

@@ -59,8 +59,8 @@ export const commandState = StateField.define<CommandState>({
                       selection: { anchor: pos + action.insert.length },
                     });
                   }
-                  // TODO(burdon): Truncates text if set focus immediately.
-                  setTimeout(() => view.focus());
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
                 });
               },
             };

package/src/extensions/dnd.ts

@@ -3,15 +3,37 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import { dropCursor, EditorView } from '@codemirror/view';
 
-import { log } from '@dxos/log';
+import { getToken } from '../styles';
 
-// TODO(burdon): DND experiment.
-export const dnd = (): Extension => {
-  return EditorView.domEventHandlers({
-    drop: (event, view) => {
-      log.info('domEventHandlersDrop', { event });
-    },
-  });
+export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
+
+const styles = EditorView.baseTheme({
+  '.cm-dropCursor': {
+    borderLeft: `2px solid ${getToken('extend.colors.primary.500')}`,
+    color: getToken('extend.colors.primary.500'),
+    padding: '0 4px',
+  },
+  '.cm-dropCursor:after': {
+    content: '"←"',
+  },
+});
+
+export const dropFile = (options: DNDOptions = {}): Extension => {
+  return [
+    styles,
+    dropCursor(),
+    EditorView.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({ selection: { anchor: pos } });
+          options.onDrop?.(view, { files });
+        }
+      },
+    }),
+  ];
 };

package/src/extensions/factories.ts

@@ -3,7 +3,7 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
@@ -13,11 +13,11 @@ import {
   drawSelection,
   dropCursor,
   highlightActiveLine,
-  highlightSpecialChars,
   keymap,
   lineNumbers,
   placeholder,
   scrollPastEnd,
+  type KeyBinding,
 } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
 
@@ -55,12 +55,14 @@ export type BasicExtensionsOptions = {
   highlightActiveLine?: boolean;
   history?: boolean;
   indentWithTab?: boolean;
+  keymap?: 'default' | 'standard';
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
   readonly?: boolean;
   search?: boolean;
   scrollPastEnd?: boolean;
+  standardKeymap?: boolean;
   tabSize?: number;
 };
 
@@ -73,6 +75,14 @@ const defaults: BasicExtensionsOptions = {
   history: true,
   lineWrapping: true,
   search: true,
+  keymap: 'standard',
+};
+
+const keymaps: { [key: string]: readonly KeyBinding[] } = {
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  standard: standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.defaultKeymap
+  default: defaultKeymap,
 };
 
 export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
@@ -90,7 +100,6 @@ 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,
@@ -102,12 +111,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     // https://codemirror.net/docs/ref/#view.KeyBinding
     keymap.of(
       [
-        // https://codemirror.net/docs/ref/#commands.standardKeymap
-        ...standardKeymap,
-
+        ...((props.keymap && keymaps[props.keymap]) ?? []),
         // https://codemirror.net/docs/ref/#commands.indentWithTab
-        props.indentWithTab && indentWithTab,
-
+        ...(props.indentWithTab ? [indentWithTab] : []),
         // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
         ...(props.closeBrackets ? closeBracketsKeymap : []),
         // https://codemirror.net/docs/ref/#commands.historyKeymap

package/src/extensions/index.ts

@@ -10,7 +10,6 @@ export * from './blast';
 export * from './command';
 export * from './comments';
 export * from './cursor';
-export * from './cursor-line-margin';
 export * from './doc';
 export * from './dnd';
 export * from './factories';

package/src/extensions/markdown/action.ts

@@ -0,0 +1,112 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import {
+  Inline,
+  List,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
+  insertTable,
+  removeBlockquote,
+  removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
+  toggleBlockquote,
+  toggleList,
+  toggleStyle,
+} from './formatting';
+import { createComment } from '../comments';
+
+export type ActionType =
+  | 'blockquote'
+  | 'strong'
+  | 'codeblock'
+  | 'comment'
+  | 'heading'
+  | 'image'
+  | 'emphasis'
+  | 'code'
+  | 'link'
+  | 'list-bullet'
+  | 'list-ordered'
+  | 'list-task'
+  | 'mention'
+  | 'prompt'
+  | 'strikethrough'
+  | 'table';
+
+export type Action = {
+  type: ActionType;
+  data?: any;
+};
+
+export type ActionHandler = (view: EditorView, action: Action) => void;
+
+export const processAction: ActionHandler = (view, action) => {
+  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;
+  }
+
+  requestAnimationFrame(() => {
+    if (!view.hasFocus) {
+      view.focus();
+    }
+  });
+};

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