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

package/src/extensions/comments.ts

@@ -508,14 +508,14 @@ export const focusComment = (view: EditorView, id: string, center = true) => {
 /**
  * Update comments state field.
  */
-export const useComments = (view: EditorView | null | undefined, id: string, comments: Comment[] = []) => {
+export const useComments = (view: EditorView | null | undefined, id: string, comments?: Comment[]) => {
   useEffect(() => {
     if (view) {
       // Check same document.
       // NOTE: Hook might be called before editor state is updated.
       if (id === view.state.facet(documentId)) {
         view.dispatch({
-          effects: setComments.of({ id, comments }),
+          effects: setComments.of({ id, comments: comments ?? [] }),
         });
       }
     }

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

@@ -2,16 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { history } from '@codemirror/commands';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+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';
 import {
   EditorView,
-  crosshairCursor,
+  type KeyBinding,
   drawSelection,
   dropCursor,
   highlightActiveLine,
+  keymap,
   lineNumbers,
   placeholder,
   scrollPastEnd,
@@ -32,8 +34,6 @@ import { awareness, SpaceAwarenessProvider } from './awareness';
 import { type ThemeStyles } from '../styles';
 import { defaultTheme } from '../themes';
 
-// TODO(burdon): Move into extensions folder.
-
 //
 // Basic
 //
@@ -41,39 +41,52 @@ 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;
   closeBrackets?: boolean;
-  crosshairCursor?: boolean;
   dropCursor?: boolean;
   drawSelection?: boolean;
   editable?: boolean;
   highlightActiveLine?: boolean;
   history?: boolean;
+  indentWithTab?: boolean;
+  keymap?: null | 'default' | 'standard';
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
   readonly?: boolean;
+  search?: boolean;
   scrollPastEnd?: boolean;
+  standardKeymap?: boolean;
   tabSize?: number;
 };
 
-const defaults: BasicExtensionsOptions = {
+const defaultBasicOptions: BasicExtensionsOptions = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
+  keymap: 'standard',
   lineWrapping: true,
+  search: true,
+};
+
+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 => {
-  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaultBasicOptions);
   return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
+    // NOTE: Doesn't catch errors in keymap functions.
     EditorView.exceptionSink.of((err) => {
       log.catch(err);
     }),
@@ -81,7 +94,6 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
@@ -92,6 +104,21 @@ 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(
+      [
+        ...((props.keymap && keymaps[props.keymap]) ?? []),
+        // 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);
 };
 
@@ -112,14 +139,14 @@ export type ThemeExtensionsOptions = {
   };
 };
 
-const defaultSlots = {
+const defaultThemeSlots = {
   editor: {
     className: 'w-full bs-full',
   },
 };
 
 export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultSlots);
+  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
     EditorView.baseTheme(defaultTheme),
     EditorView.darkTheme.of(themeMode === 'dark'),
@@ -135,12 +162,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/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/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.test.ts

@@ -9,20 +9,20 @@ import { expect } from 'chai';
 import { describe, test } from '@dxos/test';
 
 import {
-  setHeading,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
   addStyle,
+  getFormatting,
   removeStyle,
-  addLink,
   removeLink,
-  addList,
   removeList,
-  addBlockquote,
   removeBlockquote,
-  addCodeblock,
   removeCodeblock,
+  setHeading,
   Inline,
   List,
-  getFormatting,
   type Formatting,
 } from './formatting';
 
@@ -204,22 +204,22 @@ describe('removeStyle', () => {
 });
 
 describe('addLink', () => {
-  testCommand('adds a link', '{}', addLink, '[]({})');
+  testCommand('adds a link', '{}', addLink(), '[]({})');
 
-  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+  testCommand('adds a link around text', 'hello {world}', addLink(), 'hello [world]({})');
 
-  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+  testCommand('clears existing links', '[hello {world}](foo)', addLink(), 'hello [world]({})');
 
-  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink(), null);
 
-  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink(), null);
 
-  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink(), '*foo* [*bar* baz]({})');
 
   testCommand(
     'patches up overlapping styles after',
     'one {two ~~three} four~~',
-    addLink,
+    addLink(),
     'one [two ~~three~~]({}) ~~four~~',
   );
 });

package/src/extensions/markdown/formatting.ts

@@ -15,7 +15,7 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -56,7 +56,7 @@ export type Formatting = {
   listStyle: null | 'ordered' | 'bullet' | 'task';
 };
 
-export const compareFormatting = (a: Formatting, b: Formatting) =>
+export const formattingEquals = (a: Formatting, b: Formatting) =>
   a.blockType === b.blockType &&
   a.strong === b.strong &&
   a.emphasis === b.emphasis &&
@@ -470,90 +470,94 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
 };
 
 // Add link markup around the selection
-export const addLink: StateCommand = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
-    let { from, to } = range;
-    const cutStyles: SyntaxNode[] = [];
-    let okay: boolean | null = null;
-    // Check whether this range is in a position where a link makes sense
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name)) {
-          // If the selection spans multiple textblocks or is in a
-          // code block, abort
-          okay =
-            Textblocks[node.name] !== 'codeblock' &&
-            from >= blockContentStart(node) &&
-            to <= blockContentEnd(node, state.doc);
-        } else if (Object.hasOwn(InlineMarker, node.name)) {
-          // Look for inline styles that partially overlap the range.
-          // Expand the range over them if they start directly
-          // outside, otherwise mark them for later
-          const sNode = node.node;
-          if (node.from < from && node.to <= to) {
-            if (sNode.firstChild!.to === from) {
-              from = node.from;
-            } else {
-              cutStyles.push(sNode);
-            }
-          } else if (node.from >= from && node.to > to) {
-            if (sNode.lastChild!.from === to) {
-              to = node.to;
-            } else {
-              cutStyles.push(sNode);
+export const addLink =
+  ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand =>
+  ({ state, dispatch }) => {
+    const changes = state.changeByRange((range) => {
+      let { from, to } = range;
+      const cutStyles: SyntaxNode[] = [];
+      let okay: boolean | null = null;
+      // Check whether this range is in a position where a link makes sense.
+      syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (node) => {
+          if (Object.hasOwn(Textblocks, node.name)) {
+            // If the selection spans multiple textblocks or is in a code block, abort.
+            okay =
+              Textblocks[node.name] !== 'codeblock' &&
+              from >= blockContentStart(node) &&
+              to <= blockContentEnd(node, state.doc);
+          } else if (Object.hasOwn(InlineMarker, node.name)) {
+            // Look for inline styles that partially overlap the range.
+            // Expand the range over them if they start directly outside, otherwise mark them for later.
+            const sNode = node.node;
+            if (node.from < from && node.to <= to) {
+              if (sNode.firstChild!.to === from) {
+                from = node.from;
+              } else {
+                cutStyles.push(sNode);
+              }
+            } else if (node.from >= from && node.to > to) {
+              if (sNode.lastChild!.from === to) {
+                to = node.to;
+              } else {
+                cutStyles.push(sNode);
+              }
             }
           }
-        }
-      },
-    });
+        },
+      });
 
-    if (okay === null) {
-      // No textblock found around selection. Check if the rest of the line is empty.
-      const line = state.doc.lineAt(from);
-      okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
-    }
-    if (!okay) {
-      return { range };
-    }
+      if (okay === null) {
+        // No textblock found around selection. Check if the rest of the line is empty.
+        const line = state.doc.lineAt(from);
+        okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
+      }
+      if (!okay) {
+        return { range };
+      }
 
-    const changes: ChangeSpec[] = [];
-    // Some changes must be moved to end of change array so that they are applied in the right order
-    const changesAfter: ChangeSpec[] = [];
-    // Clear existing links.
-    removeLinkInner(from, to, changesAfter, state);
-    let cursorOffset = 1;
-    // Close and reopen inline styles that partially overlap the range.
-    for (const style of cutStyles) {
-      const type = InlineMarker[style.name];
-      const mark = inlineMarkerText(type);
-      if (style.from < from) {
-        // Extends before.
-        changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
-        changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
-      } else {
-        changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
-        const after = skipSpaces(to, state.doc, 1);
-        if (after === to) {
-          cursorOffset += mark.length;
+      const changes: ChangeSpec[] = [];
+      // Some changes must be moved to end of change array so that they are applied in the right order
+      const changesAfter: ChangeSpec[] = [];
+      // Clear existing links.
+      removeLinkInner(from, to, changesAfter, state);
+      let cursorOffset = 1;
+      // Close and reopen inline styles that partially overlap the range.
+      for (const style of cutStyles) {
+        const type = InlineMarker[style.name];
+        const mark = inlineMarkerText(type);
+        if (style.from < from) {
+          // Extends before.
+          changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
+          changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
+        } else {
+          changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
+          const after = skipSpaces(to, state.doc, 1);
+          if (after === to) {
+            cursorOffset += mark.length;
+          }
+          changesAfter.push({ from: after, insert: mark });
         }
-        changesAfter.push({ from: after, insert: mark });
       }
+
+      // Add the link markup.
+      changes.push({ from, insert: image ? '![' : '[' }, { from: to, insert: `](${url ?? ''})` });
+      const changeSet = state.changes(changes.concat(changesAfter));
+      // Put the cursor between the title or parenthesis.
+      return {
+        changes: changeSet,
+        range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0)),
+      };
+    });
+    if (changes.changes.empty) {
+      return false;
     }
-    // Add the link markup.
-    changes.push({ from, insert: '[' }, { from: to, insert: ']()' });
-    const changeSet = state.changes(changes.concat(changesAfter));
-    // Put the cursor between the parenthesis.
-    return { changes: changeSet, range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset) };
-  });
-  if (changes.changes.empty) {
-    return false;
-  }
 
-  dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
-  return true;
-};
+    dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
+    return true;
+  };
 
 //
 // Lists
@@ -1057,7 +1061,7 @@ export const getFormatting = (state: EditorState): Formatting => {
   const inline: (boolean | null)[] = [null, null, null, null];
   let link: boolean = false;
   let blockQuote: boolean | null = null;
-  // False indicates mixed list styles
+  // False indicates mixed list styles.
   let listStyle: Formatting['listStyle'] | null | false = null;
 
   // Track block context for list/blockquote handling.
@@ -1216,21 +1220,25 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook computes the current formatting state.
+ * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (): [Formatting | null, Extension] => {
-  const [state, setState] = useState<Formatting | null>(null);
+export const useFormattingState = (): [Formatting | undefined, Extension] => {
+  const [state, setState] = useState<Formatting>();
+
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          const newState = getFormatting(update.state);
-          if (!state || !compareFormatting(state, newState)) {
-            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/image.ts

@@ -97,3 +97,9 @@ class ImageWidget extends WidgetType {
     return img;
   }
 }
+
+export type ImageUploadOptions = {
+  onSelect: () => { url: string };
+};
+
+export const imageUpload = (options: ImageOptions = {}) => {};