@dxos/react-ui-editor 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/TextEditor.stories.tsx

@@ -4,12 +4,13 @@
 
 import '@dxos-theme';
 
+import { type Completion } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
 import { openSearchPanel } from '@codemirror/search';
 import { type Extension } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
-import { ArrowSquareOut, X } from '@phosphor-icons/react';
+import { X } from '@phosphor-icons/react';
 import { effect, useSignal } from '@preact/signals-react';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, { useEffect, useState, type FC, type KeyboardEvent } from 'react';
@@ -22,9 +23,9 @@ import { create } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 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 { Button, Icon, IconButton, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
+import { baseSurface, defaultTx, getSize, mx } from '@dxos/react-ui-theme';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorContent, editorGutter, editorMonospace } from './defaults';
 import {
@@ -202,7 +203,7 @@ const text = str(
   '=== LAST LINE ===',
 );
 
-const links = [
+const links: Completion[] = [
   { label: 'DXOS', apply: '[DXOS](https://dxos.org)' },
   { label: 'GitHub', apply: '[DXOS GitHub](https://github.com/dxos)' },
   { label: 'Automerge', apply: '[Automerge](https://automerge.org/)' },
@@ -215,16 +216,6 @@ const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', '
 const hover =
   'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const renderLinkTooltip = (el: Element, url: string) => {
-  const web = new URL(url);
-  createRoot(el).render(
-    <a href={url} target='_blank' rel='noreferrer' className={hover}>
-      {web.origin}
-      <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
-    </a>,
-  );
-};
-
 const Key: FC<{ char: string }> = ({ char }) => (
   <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
     {char}
@@ -244,11 +235,25 @@ const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   );
 };
 
+const renderLinkTooltip = (el: Element, url: string) => {
+  const web = new URL(url);
+  createRoot(el).render(
+    <ThemeProvider tx={defaultTx}>
+      <a href={url} target='_blank' rel='noreferrer' className={mx(hover, 'flex items-center gap-2')}>
+        {web.origin}
+        <Icon icon='ph--arrow-square-out--regular' size={4} />
+      </a>
+    </ThemeProvider>,
+  );
+};
+
 const renderLinkButton = (el: Element, url: string) => {
   createRoot(el).render(
-    <a href={url} target='_blank' rel='noreferrer' className={hover}>
-      <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
-    </a>,
+    <ThemeProvider tx={defaultTx}>
+      <a href={url} target='_blank' rel='noreferrer' className={mx(hover)}>
+        <Icon icon='ph--arrow-square-out--regular' size={4} classNames='inline-block mis-1 mb-[3px]' />
+      </a>
+    </ThemeProvider>,
   );
 };
 
@@ -262,7 +267,7 @@ type StoryProps = {
   id?: string;
   debug?: DebugMode;
   text?: string;
-  readonly?: boolean;
+  readOnly?: boolean;
   placeholder?: string;
   lineNumbers?: boolean;
   onReady?: (view: EditorView) => void;
@@ -273,7 +278,7 @@ const DefaultStory = ({
   debug,
   text,
   extensions,
-  readonly,
+  readOnly,
   placeholder = 'New document.',
   scrollTo,
   selection,
@@ -289,7 +294,7 @@ const DefaultStory = ({
       initialValue: text,
       extensions: [
         createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readonly, placeholder, lineNumbers, scrollPastEnd: true }),
+        createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({
           themeMode,
@@ -335,26 +340,22 @@ const DefaultStory = ({
   );
 };
 
-export default {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-editor/TextEditor',
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: DefaultStory,
   parameters: { translations, layout: 'fullscreen' },
 };
 
+export default meta;
+
 const defaultExtensions: Extension[] = [
-  autocomplete({
-    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-  }),
   decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
   linkTooltip(renderLinkTooltip),
 ];
 
 const allExtensions: Extension[] = [
-  autocomplete({
-    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-  }),
   decorateMarkdown({ numberedHeadings: { from: 2, to: 4 }, renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
   linkTooltip(renderLinkTooltip),
@@ -363,26 +364,50 @@ const allExtensions: Extension[] = [
   folding(),
 ];
 
+//
+// Default
+//
+
 export const Default = {
   render: () => <DefaultStory text={text} extensions={defaultExtensions} />,
 };
 
+//
+// Everything
+//
+
 export const Everything = {
   render: () => <DefaultStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
+//
+// Empty
+//
+
 export const Empty = {
   render: () => <DefaultStory extensions={defaultExtensions} />,
 };
 
+//
+// Readonly
+//
+
 export const Readonly = {
-  render: () => <DefaultStory text={text} extensions={defaultExtensions} readonly />,
+  render: () => <DefaultStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
+//
+// No Extensions
+//
+
 export const NoExtensions = {
   render: () => <DefaultStory text={text} />,
 };
 
+//
+// Vim
+//
+
 export const Vim = {
   render: () => (
     <DefaultStory
@@ -409,14 +434,22 @@ const headings = str(
     .flat(),
 );
 
-const global: Record<string, EditorSelectionState> = {};
+const global = new Map<string, EditorSelectionState>();
 
 export const Folding = {
   render: () => <DefaultStory text={text} extensions={[folding()]} />,
 };
 
 export const Scrolling = {
-  render: () => <DefaultStory text={str('# Large Document', '', longText)} extensions={selectionState(global)} />,
+  render: () => (
+    <DefaultStory
+      text={str('# Large Document', '', longText)}
+      extensions={selectionState({
+        setState: (id, state) => global.set(id, state),
+        getState: (id) => global.get(id),
+      })}
+    />
+  ),
 };
 
 export const ScrollingWithImages = {
@@ -503,6 +536,10 @@ export const Table = {
   render: () => <DefaultStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
+//
+// Commented out
+//
+
 export const CommentedOut = {
   render: () => (
     <DefaultStory
@@ -516,6 +553,10 @@ export const CommentedOut = {
   ),
 };
 
+//
+// Typescript
+//
+
 export const Typescript = {
   render: () => (
     <DefaultStory
@@ -537,13 +578,19 @@ export const Autocomplete = {
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         autocomplete({
-          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+          onSearch: (text) => {
+            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
+          },
         }),
       ]}
     />
   ),
 };
 
+//
+// Mention
+//
+
 export const Mention = {
   render: () => (
     <DefaultStory
@@ -557,6 +604,10 @@ export const Mention = {
   ),
 };
 
+//
+// Search
+//
+
 export const Search = {
   render: () => (
     <DefaultStory
@@ -567,10 +618,65 @@ export const Search = {
   ),
 };
 
+//
+// Command
+//
+
+export const Command = {
+  render: () => (
+    <DefaultStory
+      text={str('# Command', '', '', '[Test](dxn:queue:data:123)', '', '', '')}
+      extensions={[
+        command({
+          onHint: () => 'Press / for commands.',
+          onRenderMenu: (el, onClick) => {
+            renderRoot(
+              el,
+              <ThemeProvider tx={defaultTx}>
+                <Button classNames='p-1 aspect-square' onClick={onClick}>
+                  <Icon icon={'ph--sparkle--regular'} size={5} />
+                </Button>
+              </ThemeProvider>,
+            );
+          },
+          onRenderDialog: (el, onClose) => {
+            renderRoot(el, <CommandDialog onClose={onClose} />);
+          },
+          onRenderPreview: (el, { text }) => {
+            faker.seed(text.length);
+            const data = Array.from({ length: 2 }, () => faker.lorem.sentences(2));
+            renderRoot(
+              el,
+              <ThemeProvider tx={defaultTx}>
+                <div className='flex flex-col gap-2'>
+                  <div className='flex items-center gap-4'>
+                    <div className='grow truncate'>
+                      <span className='text-xs text-subdued mie-2'>Prompt</span>
+                      {text}
+                    </div>
+                    <div className='flex gap-1'>
+                      <IconButton classNames='text-green-500' label='Apply' icon={'ph--check--regular'} />
+                      <IconButton classNames='text-red-500' label='Cancel' icon={'ph--x--regular'} />
+                    </div>
+                  </div>
+                  <div>{data.join('\n\n')}</div>
+                </div>
+              </ThemeProvider>,
+            );
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
 const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void }) => {
   const [text, setText] = useState('');
   const handleInsert = () => {
-    onClose(text.length ? { insert: text + '\n' } : undefined);
+    // TODO(burdon): Use queue ref.
+    const link = `[${text}](dxn:queue:data:123)`;
+    console.log({ link });
+    onClose(text.length ? { insert: link } : undefined);
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -587,38 +693,34 @@ const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void
   };
 
   return (
-    <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 className='flex w-full justify-center'>
+      <div
+        className={mx(
+          'flex w-full p-2 gap-2 items-center border border-separator rounded-md',
+          editorContent,
+          baseSurface,
+        )}
+      >
+        <Input.Root>
+          <Input.TextInput
+            autoFocus={true}
+            placeholder='Ask a question...'
+            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>
     </div>
   );
 };
 
-export const Command = {
-  render: () => (
-    <DefaultStory
-      text={str('# Command', '')}
-      extensions={[
-        command({
-          onRender: (el, onClose) => {
-            renderRoot(el, <CommandDialog onClose={onClose} />);
-          },
-          onHint: () => 'Press / for commands.',
-        }),
-      ]}
-    />
-  ),
-};
+//
+// Comments
+//
 
 export const Comments = {
   render: () => {
@@ -660,12 +762,20 @@ export const Comments = {
   },
 };
 
+//
+// Annotations
+//
+
 export const Annotations = {
   render: () => (
     <DefaultStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),
 };
 
+//
+// DND
+//
+
 export const DND = {
   render: () => (
     <DefaultStory
@@ -681,6 +791,10 @@ export const DND = {
   ),
 };
 
+//
+// Listener
+//
+
 export const Listener = {
   render: () => (
     <DefaultStory
@@ -699,6 +813,10 @@ export const Listener = {
   ),
 };
 
+//
+// Typewriter
+//
+
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
 export const Typewriter = {
@@ -710,6 +828,10 @@ export const Typewriter = {
   ),
 };
 
+//
+// Blast
+//
+
 export const Blast = {
   render: () => (
     <DefaultStory

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -7,11 +7,11 @@ import React, { useCallback } from 'react';
 import { type NodeArg } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
 import {
-  ToolbarMenu,
-  MenuProvider,
   type MenuActionHandler,
-  useMenuActions,
+  MenuProvider,
+  ToolbarMenu,
   createGapSeparator,
+  useMenuActions,
 } from '@dxos/react-ui-menu';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 
@@ -27,7 +27,7 @@ import {
   editorToolbarSearch,
 } from './util';
 import { createViewMode } from './viewMode';
-import { stackItemContentToolbarClassNames } from '../../styles/stack-item-content-class-names';
+import { stackItemContentToolbarClassNames } from '../../fragments';
 
 const createToolbar = ({
   state,
@@ -86,7 +86,6 @@ const createToolbar = ({
 
 const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
   const menuCreator = useCallback(() => createToolbar(props), [props]);
-
   const { resolveGroupItems } = useMenuActions(menuCreator);
 
   return { resolveGroupItems, onAction: onAction as MenuActionHandler };

package/src/defaults.ts

@@ -41,3 +41,15 @@ export const editorMonospace = EditorView.theme({
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
+
+export const stackItemContentEditorClassNames = (role?: string) =>
+  mx(
+    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
+  );
+
+export const stackItemContentToolbarClassNames = (role?: string) =>
+  mx(
+    'attention-surface is-full border-be !border-separator',
+    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+  );

package/src/extensions/command/command.ts

@@ -6,6 +6,8 @@ import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { hintViewPlugin } from './hint';
+import { floatingMenu } from './menu';
+import { preview, type PreviewOptions } from './preview';
 import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
@@ -13,23 +15,40 @@ import { closeEffect, commandConfig, commandKeyBindings, commandState } from './
 // https://github.com/saminzadeh/codemirror-extension-inline-suggestion
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
 
+// TODO(burdon): Discriminated union.
 export type CommandAction = {
   insert?: string;
 };
 
 export type CommandOptions = {
-  onRender: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
   onHint: () => string | undefined;
-};
+  onRenderDialog: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
+  onRenderMenu: (el: HTMLElement, cb: () => void) => void;
+} & Pick<PreviewOptions, 'onRenderPreview'>;
 
 export const command = (options: CommandOptions): Extension => {
   return [
     commandConfig.of(options),
     commandState,
     keymap.of(commandKeyBindings),
+    preview(options),
+    floatingMenu(options),
     hintViewPlugin(options),
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
+    EditorView.theme({
+      '.cm-tooltip': {
+        background: 'transparent',
+      },
+      '.cm-preview': {
+        marginLeft: '-1rem',
+        marginRight: '-1rem',
+        padding: '1rem',
+        borderRadius: '1rem',
+        background: 'var(--dx-modalSurface)',
+        border: '1px solid var(--dx-separator)',
+      },
+    }),
   ];
 };

package/src/extensions/command/hint.ts

@@ -24,6 +24,7 @@ class CommandHint extends WidgetType {
     } else {
       wrap.setAttribute('aria-hidden', 'true');
     }
+
     return wrap;
   }
 
@@ -32,12 +33,14 @@ class CommandHint extends WidgetType {
     if (!rects.length) {
       return null;
     }
+
     const style = window.getComputedStyle(dom.parentNode as HTMLElement);
     const rect = flattenRect(rects[0], style.direction !== 'rtl');
     const lineHeight = parseInt(style.lineHeight);
     if (rect.bottom - rect.top > lineHeight * 1.5) {
       return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
     }
+
     return rect;
   }
 

package/src/extensions/command/menu.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { type CommandOptions } from './command';
+import { closeEffect, openCommand, openEffect } from './state';
+
+// TODO(burdon): Trigger completion on click.
+// TODO(burdon): Hide when dialog is open.
+export const floatingMenu = (options: CommandOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      button: HTMLElement;
+      view: EditorView;
+      rafId: number | null = null;
+
+      constructor(view: EditorView) {
+        this.view = view;
+
+        // Position context: scrollDOM
+        const container = view.scrollDOM;
+        if (getComputedStyle(container).position === 'static') {
+          container.style.position = 'relative';
+        }
+
+        // Render menu externally.
+        this.button = document.createElement('div');
+        this.button.style.position = 'absolute';
+        this.button.style.zIndex = '10';
+        this.button.style.display = 'none';
+
+        options.onRenderMenu(this.button, () => {
+          openCommand(view);
+        });
+        container.appendChild(this.button);
+
+        // Listen for scroll events.
+        container.addEventListener('scroll', this.scheduleUpdate);
+        this.scheduleUpdate();
+      }
+
+      update(update: ViewUpdate) {
+        // TODO(burdon): Timer to fade in/out.
+        if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+          this.button.style.display = 'none';
+        } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
+          this.button.style.display = 'block';
+        } else if (update.selectionSet || update.viewportChanged || update.docChanged || update.geometryChanged) {
+          this.scheduleUpdate();
+        }
+      }
+
+      scheduleUpdate() {
+        if (this.rafId != null) {
+          cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
+      }
+
+      updateButtonPosition() {
+        const pos = this.view.state.selection.main.head;
+        const lineBlock: BlockInfo = this.view.lineBlockAt(pos);
+        const domInfo = this.view.domAtPos(lineBlock.from);
+
+        // Find nearest HTMLElement for the line block
+        let node: Node | null = domInfo.node;
+        while (node && !(node instanceof HTMLElement)) {
+          node = node.parentNode;
+        }
+
+        if (!node) {
+          this.button.style.display = 'none';
+          return;
+        }
+
+        const lineRect = (node as HTMLElement).getBoundingClientRect();
+        const containerRect = this.view.scrollDOM.getBoundingClientRect();
+
+        // Account for scroll and padding/margin in scrollDOM.
+        const offsetTop = lineRect.top - containerRect.top + this.view.scrollDOM.scrollTop;
+        const offsetLeft = this.view.scrollDOM.clientWidth + this.view.scrollDOM.scrollLeft - lineRect.x;
+
+        // TODO(burdon): Position is incorrect if cursor is in fenced code block.
+        // console.log('offsetTop', lineRect, containerRect);
+
+        this.button.style.top = `${offsetTop}px`;
+        this.button.style.left = `${offsetLeft}px`;
+        this.button.style.display = 'block';
+      }
+
+      destroy() {
+        this.button.remove();
+        if (this.rafId != null) {
+          cancelAnimationFrame(this.rafId);
+        }
+      }
+    },
+  );