@dxos/react-ui-editor 0.6.13 → 0.6.14-main.1366248

package/src/TextEditor.stories.tsx

@@ -3,6 +3,7 @@
 //
 
 import '@dxos-theme';
+
 import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
 import { openSearchPanel } from '@codemirror/search';
@@ -11,7 +12,7 @@ import { type EditorView } from '@codemirror/view';
 import { ArrowSquareOut, X } from '@phosphor-icons/react';
 import { effect, useSignal } from '@preact/signals-react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, type KeyboardEvent, useEffect, useState } from 'react';
+import React, { useEffect, useState, type FC, type KeyboardEvent } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { create, Expando } from '@dxos/echo-schema';
@@ -19,14 +20,13 @@ import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
-import { Button, DensityProvider, Input, useThemeContext } from '@dxos/react-ui';
-import { baseSurface, mx, getSize } from '@dxos/react-ui-theme';
+import { createDocAccessor, createObject } from '@dxos/react-client/echo';
+import { Button, Input, useThemeContext } from '@dxos/react-ui';
+import { baseSurface, getSize, mx } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorContent, editorGutter, editorMonospace } from './defaults';
 import {
-  InputModeExtensions,
   annotations,
   autocomplete,
   blast,
@@ -37,28 +37,29 @@ import {
   createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
+  debugTree,
   decorateMarkdown,
   defaultOptions,
   dropFile,
   folding,
   formattingKeymap,
   image,
+  InputModeExtensions,
   linkTooltip,
   listener,
   mention,
-  state,
+  selectionState,
   table,
   typewriter,
   type CommandAction,
-  type Comment,
   type CommentsOptions,
-  type EditorSelectionState,
-  debugTree,
   type DebugNode,
+  type EditorSelectionState,
 } from './extensions';
-import { renderRoot } from './extensions/util';
 import { useTextEditor, type UseTextEditorProps } from './hooks';
 import translations from './translations';
+import { type Comment } from './types';
+import { renderRoot } from './util';
 
 faker.seed(101);
 
@@ -164,8 +165,8 @@ const content = {
     '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
     '',
     '> This is ...',
-    '> ... a multi-line ...',
-    '> block quote.',
+    '... a multi-line ...',
+    'block quote.',
     '',
   ),
 
@@ -254,7 +255,7 @@ const renderLinkButton = (el: Element, url: string) => {
 // Story
 //
 
-type DebugMode = 'syntax' | 'raw';
+type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 type StoryProps = {
   id?: string;
@@ -266,7 +267,7 @@ type StoryProps = {
   onReady?: (view: EditorView) => void;
 } & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
 
-const Story = ({
+const DefaultStory = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
   debug,
   text,
@@ -278,7 +279,7 @@ const Story = ({
   lineNumbers,
   onReady,
 }: StoryProps) => {
-  const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
+  const [object] = useState(createObject(create(Expando, { content: text ?? '' })));
   const { themeMode } = useThemeContext();
   const [tree, setTree] = useState<DebugNode>();
   const { parentRef, focusAttributes, view } = useTextEditor(
@@ -317,16 +318,16 @@ const Story = ({
   return (
     <div className='flex w-full'>
       <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
-      {debug === 'raw' && (
-        <div className='w-[800px] border-l border-separator overflow-auto'>
-          <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
-        </div>
-      )}
-      {debug === 'syntax' && (
-        <div className='w-[800px] border-l border-separator overflow-auto'>
-          <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
-            {JSON.stringify(tree, null, 2)}
-          </pre>
+      {debug && (
+        <div className='flex flex-col w-[800px] border-l border-separator divide-y divide-separator overflow-auto'>
+          {(debug === 'raw' || debug === 'raw+tree') && (
+            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
+          )}
+          {(debug === 'tree' || debug === 'raw+tree') && (
+            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
+              {JSON.stringify(tree, null, 2)}
+            </pre>
+          )}
         </div>
       )}
     </div>
@@ -334,9 +335,9 @@ const Story = ({
 };
 
 export default {
-  title: 'react-ui-editor/TextEditor',
+  title: 'ui/react-ui-editor/TextEditor',
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: Story,
+  render: DefaultStory,
   parameters: { translations, layout: 'fullscreen' },
 };
 
@@ -362,28 +363,28 @@ const allExtensions: Extension[] = [
 ];
 
 export const Default = {
-  render: () => <Story text={text} extensions={defaultExtensions} />,
+  render: () => <DefaultStory text={text} extensions={defaultExtensions} />,
 };
 
 export const Everything = {
-  render: () => <Story text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
+  render: () => <DefaultStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
 export const Empty = {
-  render: () => <Story extensions={defaultExtensions} />,
+  render: () => <DefaultStory extensions={defaultExtensions} />,
 };
 
 export const Readonly = {
-  render: () => <Story text={text} extensions={defaultExtensions} readonly />,
+  render: () => <DefaultStory text={text} extensions={defaultExtensions} readonly />,
 };
 
 export const NoExtensions = {
-  render: () => <Story text={text} />,
+  render: () => <DefaultStory text={text} />,
 };
 
 export const Vim = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
       extensions={[defaultExtensions, InputModeExtensions.vim]}
     />
@@ -410,14 +411,14 @@ const headings = str(
 const global = new Map<string, EditorSelectionState>();
 
 export const Folding = {
-  render: () => <Story text={text} extensions={[folding()]} />,
+  render: () => <DefaultStory text={text} extensions={[folding()]} />,
 };
 
 export const Scrolling = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Large Document', '', longText)}
-      extensions={state({
+      extensions={selectionState({
         setState: (id, state) => global.set(id, state),
         getState: (id) => global.get(id),
       })}
@@ -427,7 +428,7 @@ export const Scrolling = {
 
 export const ScrollingWithImages = {
   render: () => (
-    <Story text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+    <DefaultStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
@@ -438,7 +439,7 @@ export const ScrollTo = {
     const text = str('# Scroll To', longText, '', word, '', longText);
     const idx = text.indexOf(word);
     return (
-      <Story
+      <DefaultStory
         text={text}
         extensions={defaultExtensions}
         scrollTo={idx}
@@ -452,25 +453,39 @@ export const ScrollTo = {
 // Markdown
 //
 
+export const Blockquote = {
+  render: () => (
+    <DefaultStory
+      text={str('> Blockquote', 'continuation', content.footer)}
+      extensions={decorateMarkdown()}
+      debug='raw'
+    />
+  ),
+};
+
 export const Headings = {
-  render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
+  render: () => (
+    <DefaultStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />
+  ),
 };
 
 export const Links = {
-  render: () => <Story text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => (
+    <DefaultStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
 export const Image = {
-  render: () => <Story text={str(content.image, content.footer)} extensions={[image()]} />,
+  render: () => <DefaultStory text={str(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code = {
-  render: () => <Story text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <DefaultStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
@@ -478,24 +493,26 @@ export const Lists = {
 };
 
 export const BulletList = {
-  render: () => <Story text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <DefaultStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const OrderedList = {
-  render: () => <Story text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <DefaultStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const TaskList = {
-  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw' />,
+  render: () => (
+    <DefaultStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+  ),
 };
 
 export const Table = {
-  render: () => <Story text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+  render: () => <DefaultStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 export const CommentedOut = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
@@ -508,7 +525,11 @@ export const CommentedOut = {
 
 export const Typescript = {
   render: () => (
-    <Story text={content.typescript} lineNumbers extensions={[editorMonospace, javascript({ typescript: true })]} />
+    <DefaultStory
+      text={content.typescript}
+      lineNumbers
+      extensions={[editorMonospace, javascript({ typescript: true })]}
+    />
   ),
 };
 
@@ -518,7 +539,7 @@ export const Typescript = {
 
 export const Autocomplete = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
       extensions={[
         decorateMarkdown({ renderLinkButton }),
@@ -532,7 +553,7 @@ export const Autocomplete = {
 
 export const Mention = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Mention', '', 'Type @...', content.footer)}
       extensions={[
         mention({
@@ -545,7 +566,11 @@ export const Mention = {
 
 export const Search = {
   render: () => (
-    <Story text={str('# Search', text)} extensions={defaultExtensions} onReady={(view) => openSearchPanel(view)} />
+    <DefaultStory
+      text={str('# Search', text)}
+      extensions={defaultExtensions}
+      onReady={(view) => openSearchPanel(view)}
+    />
   ),
 };
 
@@ -569,28 +594,26 @@ const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void
   };
 
   return (
-    <DensityProvider density='fine'>
-      <div className={mx('flex items-center p-2 gap-2 border rounded-md', baseSurface)}>
-        <Input.Root>
-          <Input.TextInput
-            autoFocus={true}
-            placeholder='Enter command.'
-            value={text}
-            onChange={({ target: { value } }) => setText(value)}
-            onKeyDown={handleKeyDown}
-          />
-        </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onClose()}>
-          <X className={getSize(5)} />
-        </Button>
-      </div>
-    </DensityProvider>
+    <div className={mx('flex items-center p-2 gap-2 border rounded-md', baseSurface)}>
+      <Input.Root>
+        <Input.TextInput
+          autoFocus={true}
+          placeholder='Enter command.'
+          value={text}
+          onChange={({ target: { value } }) => setText(value)}
+          onKeyDown={handleKeyDown}
+        />
+      </Input.Root>
+      <Button variant='ghost' classNames='pli-0' onClick={() => onClose()}>
+        <X className={getSize(5)} />
+      </Button>
+    </div>
   );
 };
 
 export const Command = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Command', '')}
       extensions={[
         command({
@@ -608,7 +631,7 @@ export const Comments = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
-      <Story
+      <DefaultStory
         text={str('# Comments', '', content.paragraphs, content.footer)}
         extensions={[
           createExternalCommentSync(
@@ -645,12 +668,14 @@ export const Comments = {
 };
 
 export const Annotations = {
-  render: () => <Story text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />,
+  render: () => (
+    <DefaultStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
+  ),
 };
 
 export const DND = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# DND', '')}
       extensions={[
         dropFile({
@@ -665,7 +690,7 @@ export const DND = {
 
 export const Listener = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Listener', '', content.footer)}
       extensions={[
         listener({
@@ -685,7 +710,7 @@ const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewrite
 
 export const Typewriter = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
@@ -694,7 +719,7 @@ export const Typewriter = {
 
 export const Blast = {
   render: () => (
-    <Story
+    <DefaultStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),

package/src/components/Toolbar/Toolbar.tsx

@@ -37,7 +37,6 @@ import { useDropzone } from 'react-dropzone';
 
 import {
   Button,
-  DensityProvider,
   DropdownMenu,
   ElevationProvider,
   Toolbar as NaturalToolbar,
@@ -74,16 +73,14 @@ export type ToolbarProps = ThemedClassName<
 const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) => {
   return (
     <ToolbarContextProvider onAction={onAction} state={state}>
-      <DensityProvider density='fine'>
-        <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root
-            classNames={['p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden', classNames]}
-            style={{ contain: 'layout' }}
-          >
-            {children}
-          </NaturalToolbar.Root>
-        </ElevationProvider>
-      </DensityProvider>
+      <ElevationProvider elevation='chrome'>
+        <NaturalToolbar.Root
+          classNames={['p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden', classNames]}
+          style={{ contain: 'layout' }}
+        >
+          {children}
+        </NaturalToolbar.Root>
+      </ElevationProvider>
     </ToolbarContextProvider>
   );
 };

package/src/defaults.ts

@@ -8,8 +8,6 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { fontMono } from './styles';
 
-// TODO(burdon): Define scrollMargins for fixed gutter?
-//  https://codemirror.net/docs/ref/#view.EditorView^scrollMargins
 const margin = '!mt-[1rem]';
 
 /**

package/src/extensions/annotations.ts

@@ -7,7 +7,7 @@ import { Decoration, EditorView } from '@codemirror/view';
 
 import { isNotFalsy } from '@dxos/util';
 
-import { Cursor } from './cursor';
+import { Cursor } from '../util';
 
 type Annotation = {
   cursor: string;

package/src/extensions/autocomplete.ts

@@ -2,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
-
 import {
   autocompletion,
   completionKeymap,
@@ -15,6 +11,7 @@ import {
   type CompletionResult,
 } from '@codemirror/autocomplete';
 import { markdownLanguage } from '@codemirror/lang-markdown';
+import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
 export type AutocompleteResult = Completion;
@@ -25,11 +22,15 @@ export type AutocompleteOptions = {
   onSearch?: (text: string) => Completion[];
 };
 
+// https://codemirror.net/examples/autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.Completion
+
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}) => {
-  const extentions = [
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
+  const extensions: Extension[] = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -50,7 +51,7 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
   ];
 
   if (onSearch) {
-    extentions.push(
+    extensions.push(
       // TODO(burdon): Optional decoration via addToOptions
       markdownLanguage.data.of({
         autocomplete: (context: CompletionContext): CompletionResult | null => {
@@ -68,5 +69,5 @@ export const autocomplete = ({ activateOnTyping, override, onSearch }: Autocompl
     );
   }
 
-  return extentions;
+  return extensions;
 };

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

@@ -92,7 +92,7 @@ const Story = () => {
 };
 
 export default {
-  title: 'react-ui-editor/Automerge',
+  title: 'ui/react-ui-editor/Automerge',
   component: Editor,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => <Story />,
@@ -129,7 +129,7 @@ export const WithEcho = {
         count={2}
         component={EchoStory}
         createSpace
-        onCreateSpace={async (space) => {
+        onSpaceCreated={async ({ space }) => {
           space.db.add(
             create({
               type: 'test',

package/src/extensions/automerge/{automerge.spec.tsx → automerge.test.tsx}

@@ -5,6 +5,7 @@
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
+// TODO(wittjosiah): Move to vitest expect (and remove from package.json).
 import chai, { expect } from 'chai';
 import chaiDom from 'chai-dom';
 import get from 'lodash.get';

package/src/extensions/automerge/automerge.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 // Copyright 2024 Automerge
 // Ref: https://github.com/automerge/automerge-codemirror
 //
@@ -13,7 +13,7 @@ import { type DocAccessor } from '@dxos/react-client/echo';
 import { cursorConverter } from './cursor';
 import { updateHeadsEffect, isReconcile, type State } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../cursor';
+import { Cursor } from '../../util';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({

package/src/extensions/automerge/cursor.ts

@@ -5,7 +5,7 @@
 import { log } from '@dxos/log';
 import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
-import { type CursorConverter } from '../cursor';
+import { type CursorConverter } from '../../util';
 
 export const cursorConverter = (accessor: DocAccessor): CursorConverter => ({
   toCursor: (pos, assoc) => {

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, Facet, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from '../cursor';
+import { singleValueFacet, Cursor, type CursorConverter } from '../../util';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;
@@ -38,9 +38,7 @@ const dummyProvider: AwarenessProvider = {
   update: () => {},
 };
 
-export const awarenessProvider = Facet.define<AwarenessProvider, AwarenessProvider>({
-  combine: (providers) => providers[0] ?? dummyProvider,
-});
+export const awarenessProvider = singleValueFacet<AwarenessProvider>(dummyProvider);
 
 // TODO(dmaretskyi): Specify the users that actually changed. Currently, we recalculate positions for every user.
 const RemoteSelectionChangedAnnotation = Annotation.define();

package/src/extensions/command/hint.ts

@@ -7,7 +7,7 @@ import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from
 
 import { type CommandOptions } from './command';
 import { commandState } from './state';
-import { clientRectsFor, flattenRect } from '../util/dom';
+import { clientRectsFor, flattenRect } from '../../util';
 
 class CommandHint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {

package/src/extensions/command/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Facet, StateEffect, StateField } from '@codemirror/state';
+import { StateEffect, StateField } from '@codemirror/state';
 import {
   type Command,
   type EditorView,
@@ -13,14 +13,13 @@ import {
 } from '@codemirror/view';
 
 import { type CommandOptions } from './command';
+import { singleValueFacet } from '../../util';
 
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
-export const commandConfig = Facet.define<CommandOptions, Required<CommandOptions>>({
-  combine: (providers) => providers[0],
-});
+export const commandConfig = singleValueFacet<CommandOptions>();
 
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),