@dxos/react-ui-editor 0.4.8-main.05fda5d → 0.4.8-main.06fa7e4

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 &&
@@ -161,7 +161,7 @@ export const setStyle =
   ({ state, dispatch }) => {
     const marker = inlineMarkerText(type);
     const changes = state.changeByRange((range) => {
-      // Special case for markers directly around the cursor, which will often not be parsed as valid styling
+      // Special case for markers directly around the cursor, which will often not be parsed as valid styling.
       if (!enable && range.empty) {
         const after = state.doc.sliceString(range.head, range.head + 6);
         const found = after.indexOf(marker);
@@ -190,16 +190,16 @@ export const setStyle =
       let startCovered: boolean | { from: number; to: number } = false;
       let endCovered: boolean | { from: number; to: number } = false;
       let { from, to } = range;
-      // Iterate the selected range. For each textblock, determine a
-      // start and end position, the overlap of the selected range and
-      // the block's extent, that should be styled/unstyled.
+
+      // Iterate the selected range. For each textblock, determine a start and end position,
+      // the overlap of the selected range and the block's extent, that should be styled/unstyled.
       syntaxTree(state).iterate({
         from,
         to,
         enter: (node) => {
           const { name } = node;
           if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== 'codeblock') {
-            // Set up for this textblock
+            // Set up for this textblock.
             blockStart = blockContentStart(node);
             blockEnd = blockContentEnd(node, state.doc);
             startCovered = endCovered = false;
@@ -243,8 +243,7 @@ export const setStyle =
                     : true;
               }
             }
-            // Marks of the same type in range, or any mark if we're
-            // adding code style, need to be removed.
+            // Marks of the same type in range, or any mark if we're adding code style, need to be removed.
             if (markType === type || (type === Inline.Code && enable)) {
               if (node.from >= from && openEnd <= to) {
                 changes.push({ from: node.from, to: openEnd });
@@ -271,7 +270,7 @@ export const setStyle =
         },
         leave: (node) => {
           if (Object.hasOwn(Textblocks, node.name) && Textblocks[node.name] !== 'codeblock') {
-            // Finish opening/closing the marks for this textblock
+            // Finish opening/closing the marks for this textblock.
             const rangeStart = Math.max(from, blockStart);
             const rangeEnd = Math.min(to, blockEnd);
             if (enable) {
@@ -296,12 +295,14 @@ export const setStyle =
           }
         },
       });
+
       if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
         return {
           changes: { from: range.head, insert: marker + marker },
           range: EditorSelection.cursor(range.head + marker.length),
         };
       }
+
       const changeSet = state.changes(changes.concat(changesAtEnd));
       return {
         changes: changeSet,
@@ -313,8 +314,12 @@ export const setStyle =
     });
 
     dispatch(
-      state.update(changes, { userEvent: enable ? 'format.style.add' : 'format.style.remove', scrollIntoView: true }),
+      state.update(changes, {
+        userEvent: enable ? 'format.style.add' : 'format.style.remove',
+        scrollIntoView: true,
+      }),
     );
+
     return true;
   };
 
@@ -465,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
@@ -987,7 +996,7 @@ export const toggleCodeblock: StateCommand = (target) => {
 
 export type FormattingOptions = {};
 
-export const formatting = (options: FormattingOptions = {}): Extension => {
+export const formattingKeymap = (options: FormattingOptions = {}): Extension => {
   return [
     keymap.of([
       {
@@ -1052,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.
@@ -1211,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

@@ -61,6 +61,7 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          // TODO(burdon): Doesn't load if scrolling with mouse.
           preloadImage(url);
           decorations.push(
             Decoration.replace({
@@ -96,3 +97,9 @@ class ImageWidget extends WidgetType {
     return img;
   }
 }
+
+export type ImageUploadOptions = {
+  onSelect: () => { url: string };
+};
+
+export const imageUpload = (options: ImageOptions = {}) => {};

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

@@ -3,7 +3,14 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 // TODO(burdon): Snippet to create basic table.
@@ -18,7 +25,7 @@ export type TableOptions = {};
  * GFM tables.
  * https://github.github.com/gfm/#tables-extension
  */
-export const table = (options: TableOptions = {}) => {
+export const table = (options: TableOptions = {}): Extension => {
   return StateField.define<RangeSet<any>>({
     create: (state) => update(state, options),
     update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
@@ -76,7 +83,7 @@ const update = (state: EditorState, options: TableOptions) => {
 
   tables.forEach((table) => {
     const hide = state.readOnly || cursor < table.from || cursor > table.to;
-    hide &&
+    if (hide) {
       builder.add(
         table.from,
         table.to,
@@ -84,6 +91,7 @@ const update = (state: EditorState, options: TableOptions) => {
           widget: new TableWidget(table),
         }),
       );
+    }
 
     // Add class for styling.
     builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));

package/src/extensions/modes.ts

@@ -5,8 +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 type EditorMode = 'default' | 'vim' | undefined;
+export const focusEvent = 'focus.container';
+
+export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
 
 export type EditorConfig = {
   type: string;
@@ -19,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([
@@ -27,7 +36,7 @@ export const EditorModes: { [mode: string]: Extension } = {
         key: 'Alt-Escape',
         run: (view) => {
           // Focus container for tab navigation.
-          view.dispatch({ userEvent: 'focus.container' });
+          view.dispatch({ userEvent: focusEvent });
           return true;
         },
       },

package/src/extensions/state.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, Transaction } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { isNotFalsy } from '@dxos/util';
+
+import { documentId } from './doc';
+
+const scrollAnnotation = 'dxos.org/cm/scrolling';
+
+// NOTE: Serializable.
+export type SelectionState = {
+  scrollTo: {
+    from: number;
+  };
+  selection: {
+    anchor: number;
+    head?: number;
+  };
+};
+
+export type StateOptions = {
+  setState: (id: string, state: SelectionState) => void;
+  getState: (id: string) => SelectionState | undefined;
+};
+
+const keyPrefix = 'dxos.org/react-ui-editor/state';
+export const localStorageStateStoreAdapter: StateOptions = {
+  setState: (id, state) => {
+    invariant(id);
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  },
+  getState: (id) => {
+    invariant(id);
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : undefined;
+  },
+};
+
+/**
+ * Track scrolling and selection state to be restored when switching to document.
+ */
+export const state = ({ getState, setState }: Partial<StateOptions> = {}): Extension => {
+  const setStateDebounced = debounce(setState!, 1_000);
+
+  return [
+    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
+      // TODO(burdon): Don't react to initial scroll.
+      const id = view.state.facet(documentId);
+      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+        return;
+      }
+
+      if (setState) {
+        const { top } = view.dom.getBoundingClientRect();
+        const pos = view.posAtCoords({ x: 0, y: top });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: { from: pos, yMargin: 0 },
+            selection: { anchor, head },
+          });
+        }
+      }
+    }),
+    getState &&
+      keymap.of([
+        {
+          key: 'ctrl-r', // TODO(burdon): Setting to jump back to bookmark.
+          run: (view) => {
+            const state = getState(view.state.facet(documentId));
+            if (state) {
+              view.dispatch({
+                effects: EditorView.scrollIntoView(state.scrollTo.from, { yMargin: 0 }),
+                selection: state.selection,
+                annotations: Transaction.userEvent.of(scrollAnnotation),
+              });
+            }
+            return true;
+          },
+        },
+      ]),
+  ].filter(isNotFalsy);
+};

package/src/extensions/types.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+// TODO(burdon): Rename annotation?
+export type Comment = {
+  id: string;
+  cursor?: string;
+};

package/src/hooks/index.ts

@@ -2,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './awareness-provider';
-export * from './defs';
-
 export * from './useActionHandler';
-export * from './useEditorView';
+export * from './useDocAccessor';
 export * from './useTextEditor';
-export * from './useTextModel';

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

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import {
+  createDocAccessor,
+  type DocAccessor,
+  getTextContent,
+  type TextObject,
+  type EchoReactiveObject,
+} from '@dxos/echo-schema';
+
+// TODO(burdon): Factor out.
+export const useDocAccessor = <T = any>(
+  text: TextObject | EchoReactiveObject<{ content: string }>,
+): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
+  return useMemo(
+    () => ({
+      id: text.id,
+      doc: getTextContent(text),
+      accessor: createDocAccessor<T>(text),
+    }),
+    [text],
+  );
+};