@dxos/react-ui-editor 0.4.10-main.fa5a270 → 0.4.10-main.fe71b4c

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -10,7 +10,8 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
+import { createDocAccessor, create, createEchoObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -49,7 +50,6 @@ import {
   type CommentsOptions,
   type SelectionState,
 } from '../../extensions';
-import { useDocAccessor } from '../../hooks';
 import translations from '../../translations';
 
 faker.seed(101);
@@ -65,11 +65,11 @@ const text = {
     //
     '## Tasks',
     '',
-    '- [x] decorator',
-    '- [ ] checkbox',
-    '  - [ ] state',
-    '    - [ ] indent',
-    '    - [x] style',
+    `- [x] ${faker.lorem.sentences()}`,
+    `- [ ] ${faker.lorem.sentences()}`,
+    `  - [ ] ${faker.lorem.sentences()}`,
+    `    - [ ] ${faker.lorem.sentences()}`,
+    `    - [x] ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -77,9 +77,9 @@ const text = {
     //
     '## List',
     '',
-    '- new york',
-    '- london',
-    '- tokyo',
+    `- ${faker.lorem.sentences()}`,
+    `- ${faker.lorem.sentences()}`,
+    `- ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -87,9 +87,9 @@ const text = {
     //
     '## Numbered',
     '',
-    '1. one',
-    '2. two',
-    '3. three',
+    `1. ${faker.lorem.sentences()}`,
+    `2. ${faker.lorem.sentences()}`,
+    `3. ${faker.lorem.sentences()}`,
     '',
   ),
 
@@ -241,7 +241,7 @@ type StoryProps = {
   comments?: Comment[];
   readonly?: boolean;
   placeholder?: string;
-} & Pick<TextEditorProps, 'extensions'>;
+} & Pick<TextEditorProps, 'selection' | 'extensions'>;
 
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
@@ -252,7 +252,7 @@ const Story = ({
   placeholder = 'New document.',
   ...props
 }: StoryProps) => {
-  const { accessor } = useDocAccessor(new TextObject(text));
+  const [object] = useState(createEchoObject(create(TextV0Type, { content: text ?? '' })));
 
   const viewRef = useRef<EditorView>(null);
   useComments(viewRef.current, id, comments);
@@ -268,10 +268,10 @@ const Story = ({
           editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
         },
       }),
-      createDataExtensions({ id, text: accessor }),
+      createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
       _extensions,
     ],
-    [_extensions],
+    [_extensions, object],
   );
 
   return (
@@ -294,11 +294,13 @@ export default {
   parameters: { translations, layout: 'fullscreen' },
 };
 
+// TODO(burdon): Test invalid inputs (e.g., selection).
+
 const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  decorateMarkdown({ renderLinkButton }),
+  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
   image(),
   table(),

package/src/components/TextEditor/TextEditor.tsx

@@ -16,6 +16,7 @@ import React, {
 } from 'react';
 
 import { log } from '@dxos/log';
+import { useDefaultValue } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { documentId, editorMode, focusEvent } from '../../extensions';
@@ -51,12 +52,13 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
     {
       id,
+      // TODO(wittjosiah): Rename initialText?
       doc,
       selection,
       extensions,
       className,
       autoFocus,
-      scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
+      scrollTo: propsScrollTo,
       moveToEndOfLine,
       debug,
       dataTestId,
@@ -65,6 +67,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   ) => {
     // NOTE: Increments by 2 in strict mode.
     const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+    const scrollTo = useDefaultValue(propsScrollTo, EditorView.scrollIntoView(0, { yMargin: 0 }));
 
     // TODO(burdon): Make tabster optional.
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -90,10 +93,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       //
       // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      // NOTE: Don't set selection here in case it is invalid (and crashes the state); dispatch below.
       //
       const state = EditorState.create({
         doc,
-        selection,
         extensions: [
           id && documentId.of(id),
           // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
@@ -150,7 +153,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         log('destroy', { id, instanceId });
         view?.destroy();
       };
-    }, [doc, selection, extensions]);
+    }, [id, selection, scrollTo, editorMode, extensions]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -6,7 +6,8 @@ import '@dxosTheme';
 
 import React, { type FC, useState } from 'react';
 
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
+import { createDocAccessor, create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { Tooltip, useThemeContext } from '@dxos/react-ui';
@@ -28,26 +29,25 @@ import {
   useComments,
   useFormattingState,
 } from '../../extensions';
-import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
+import { useActionHandler, useTextEditor } from '../../hooks';
 import translations from '../../translations';
 
 faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
   const { themeMode } = useThemeContext();
-  const [item] = useState({ text: new TextObject(content) });
-  const { id, doc, accessor } = useDocAccessor(item.text);
+  const [text] = useState(create(TextV0Type, { content }));
   const [formattingState, formattingObserver] = useFormattingState();
   const { parentRef, view } = useTextEditor(() => {
     return {
-      id,
-      doc,
+      id: text.id,
+      doc: text.content,
       extensions: [
         formattingObserver,
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
-        createDataExtensions({ id, text: accessor }),
+        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
         comments({
           onCreate: ({ cursor }) => {
             const id = PublicKey.random().toHex();
@@ -61,12 +61,12 @@ const Story: FC<{ content: string }> = ({ content }) => {
         table(),
       ],
     };
-  }, [id, accessor, formattingObserver, themeMode]);
+  }, [text, formattingObserver, themeMode]);
 
   const handleAction = useActionHandler(view);
 
   const [_comments, setComments] = useState<Comment[]>([]);
-  useComments(view, id, _comments);
+  useComments(view, text.id, _comments);
 
   return (
     <Tooltip.Provider>

package/src/extensions/automerge/automerge.stories.tsx

@@ -8,10 +8,11 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 import '@preact/signals-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { TextV0Type } from '@braneframe/types';
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { createDocAccessor, Filter, DocAccessor } from '@dxos/echo-schema';
+import { Filter, DocAccessor, create, createDocAccessor, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
+import { useSpace } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
@@ -97,9 +98,9 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
   // const identity = useIdentity();
   const space = useSpace(spaceKey);
   const source = useMemo<DocAccessor | undefined>(() => {
-    const { objects = [] } = space?.db.query(Filter.from({ type: 'test' })) ?? {};
+    const { objects = [] } = space?.db.query<Expando>(Filter.from({ type: 'test' })) ?? {};
     if (objects.length) {
-      return createDocAccessor(objects[0].content);
+      return createDocAccessor(objects[0].content, ['content']);
     }
   }, [space]);
 
@@ -124,9 +125,9 @@ export const WithEcho = {
         createSpace
         onCreateSpace={async (space) => {
           space.db.add(
-            new Expando({
+            create({
               type: 'test',
-              content: new TextObject(initialContent),
+              content: create(TextV0Type, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/automerge/cursor.ts

@@ -2,30 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import get from 'lodash.get';
-
-import { next as A } from '@dxos/automerge/automerge';
-import { type DocAccessor } from '@dxos/echo-schema';
+import { toCursor, type DocAccessor, fromCursor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 
 import { type CursorConverter } from '../cursor';
 
-export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter => ({
+export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
-    const doc = handle.docSync();
-    if (!doc) {
-      return '';
-    }
-
-    const value = get(doc, path);
-    if (typeof value === 'string' && value.length <= pos) {
-      return 'end';
-    }
-
     try {
-      // NOTE: Slice is needed because getCursor mutates the array.
-      return A.getCursor(doc, path.slice(), pos);
+      return toCursor(accessor, pos);
     } catch (err) {
       log.catch(err);
       return ''; // In case of invalid request (e.g., wrong document).
@@ -33,27 +19,8 @@ export const cursorConverter = ({ handle, path }: DocAccessor): CursorConverter
   },
 
   fromCursor: (cursor) => {
-    if (cursor === '') {
-      return 0;
-    }
-
-    const doc = handle.docSync();
-    if (!doc) {
-      return 0;
-    }
-
-    if (cursor === 'end') {
-      const value = get(doc, path);
-      if (typeof value === 'string') {
-        return value.length;
-      } else {
-        return 0;
-      }
-    }
-
     try {
-      // NOTE: Slice is needed because getCursor mutates the array.
-      return A.getCursorPosition(doc, path.slice(), cursor);
+      return fromCursor(accessor, cursor);
     } catch (err) {
       log.catch(err);
       return 0; // In case of invalid request (e.g., wrong document).

package/src/extensions/factories.ts

@@ -162,14 +162,14 @@ export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: Theme
 
 export type DataExtensionsProps = {
   id: string;
-  text: DocAccessor;
+  text?: DocAccessor;
   space?: Space;
   identity?: Identity | null;
 };
 
 // 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)];
+  const extensions: Extension[] = text ? [automerge(text)] : [];
 
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();

package/src/extensions/markdown/decorate.ts

@@ -81,6 +81,7 @@ const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() }
 const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
 const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
 
+// Check if cursor is inside text.
 const editingRange = (state: EditorState, range: { from: number; to: number }, focus: boolean) => {
   const {
     readOnly,
@@ -103,76 +104,103 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       from,
       to,
       enter: (node) => {
-        if (node.name === 'FencedCode') {
-          const editing = editingRange(state, node, focus);
+        switch (node.name) {
           // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          for (const block of view.viewportLineBlocks) {
-            if (block.to < node.from) {
-              continue;
-            }
-            if (block.from > node.to) {
-              break;
-            }
-            const first = block.from <= node.from;
-            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
-            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
-            if (!editing && (first || last)) {
-              atomicDeco.add(block.from, block.to, hide);
+          case 'FencedCode': {
+            const editing = editingRange(state, node, focus);
+            for (const block of view.viewportLineBlocks) {
+              if (block.to < node.from) {
+                continue;
+              }
+              if (block.from > node.to) {
+                break;
+              }
+              const first = block.from <= node.from;
+              const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+              deco.add(
+                block.from,
+                block.from,
+                first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
+              );
+              if (!editing && (first || last)) {
+                atomicDeco.add(block.from, block.to, hide);
+              }
             }
+            return false;
           }
-          return false;
-        } else if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const urlNode = node.node.getChild('URL');
-          const editing = editingRange(state, node, focus);
-          if (urlNode && marks.length >= 2) {
-            const url = state.sliceDoc(urlNode.from, urlNode.to);
-            if (!editing) {
-              atomicDeco.add(node.from, marks[0].to, hide);
-            }
-            deco.add(
-              marks[0].to,
-              marks[1].from,
-              Decoration.mark({
-                tagName: 'a',
-                attributes: {
-                  class: 'cm-link',
-                  href: url,
-                  rel: 'noreferrer',
-                  target: '_blank',
-                },
-              }),
-            );
-            if (!editing) {
-              atomicDeco.add(
+
+          case 'Link': {
+            const marks = node.node.getChildren('LinkMark');
+            const urlNode = node.node.getChild('URL');
+            const editing = editingRange(state, node, focus);
+            if (urlNode && marks.length >= 2) {
+              const url = state.sliceDoc(urlNode.from, urlNode.to);
+              if (!editing) {
+                atomicDeco.add(node.from, marks[0].to, hide);
+              }
+              deco.add(
+                marks[0].to,
                 marks[1].from,
-                node.to,
-                options.renderLinkButton
-                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
-                  : hide,
+                Decoration.mark({
+                  tagName: 'a',
+                  attributes: {
+                    class: 'cm-link',
+                    href: url,
+                    rel: 'noreferrer',
+                    target: '_blank',
+                  },
+                }),
               );
+              if (!editing) {
+                atomicDeco.add(
+                  marks[1].from,
+                  node.to,
+                  options.renderLinkButton
+                    ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                    : hide,
+                );
+              }
+            }
+            break;
+          }
+
+          case 'HeaderMark': {
+            const parent = node.node.parent!;
+            if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
+              const next = state.doc.sliceString(node.to, node.to + 1);
+              atomicDeco.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
             }
+            break;
           }
-        } else if (node.name === 'HeaderMark') {
-          const parent = node.node.parent!;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
-            const next = state.doc.sliceString(node.to, node.to + 1);
-            atomicDeco.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
+
+          case 'HorizontalRule': {
+            if (!editingRange(state, node, focus)) {
+              deco.add(node.from, node.to, horizontalRule);
+            }
+            break;
           }
-        } else if (node.name === 'HorizontalRule') {
-          if (!editingRange(state, node, focus)) {
-            deco.add(node.from, node.to, horizontalRule);
+
+          case 'TaskMarker': {
+            if (!editingRange(state, node, focus)) {
+              const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+              atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+              atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+            }
+            break;
           }
-        } else if (node.name === 'TaskMarker') {
-          // Check if cursor is inside text.
-          if (!editingRange(state, node, focus)) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-            atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
-            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+
+          case 'ListItem': {
+            const start = state.doc.lineAt(node.from);
+            deco.add(start.from, start.from, Decoration.line({ class: 'cm-list-item' }));
+            break;
           }
-        } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent!, focus)) {
-            atomicDeco.add(node.from, node.to, hide);
+
+          default: {
+            if (MarksByParent.has(node.name)) {
+              if (!editingRange(state, node.node.parent!, focus)) {
+                atomicDeco.add(node.from, node.to, hide);
+              }
+            }
           }
         }
       },
@@ -224,8 +252,6 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
           }
         }
 
-        // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
-        //  the cursor will float in space or be in the wrong position after the decoration is applied.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
           this.pendingUpdate = setTimeout(() => {
@@ -304,4 +330,6 @@ const formattingStyles = EditorView.baseTheme({
     marginLeft: '4px',
     marginRight: '4px',
   },
+
+  // '& .cm-list-item > span:nth-child(2)': {},
 });