@dxos/react-ui-editor 0.4.8-main.ec0899a → 0.4.8-next.fff1521

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,9 @@ 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 } from 'react';
+
+import { useStateRef } from '@dxos/react-async';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -56,7 +58,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 +472,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 +1063,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,16 +1222,18 @@ 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, stateRef] = useStateRef<Formatting>();
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
           const newState = getFormatting(update.state);
-          if (!state || !compareFormatting(state, newState)) {
+          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);
           }
         }

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 = {}) => {};

package/src/extensions/modes.ts

@@ -6,6 +6,8 @@ import { type Extension, Facet } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 
+export const focusEvent = 'focus.container';
+
 export type EditorMode = 'default' | 'vim' | undefined;
 
 export type EditorConfig = {
@@ -27,7 +29,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/hooks/useActionHandler.ts

@@ -75,7 +75,11 @@ export const useActionHandler = (view?: EditorView | null): ToolbarProps['onActi
         break;
 
       case 'link':
-        (action.data === false ? removeLink : addLink)(view);
+        (action.data === false ? removeLink : addLink())(view);
+        break;
+
+      case 'image':
+        addLink({ url: action.data, image: true })(view);
         break;
 
       case 'comment':

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/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',
       },