@dxos/react-ui-editor 0.4.7-main.33db07e → 0.4.7-main.344d0d8

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

@@ -3,17 +3,19 @@
 //
 
 import '@dxosTheme';
+
 import { type EditorView } from '@codemirror/view';
-import { ArrowSquareOut } from '@phosphor-icons/react';
+import { ArrowSquareOut, X } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, StrictMode, useRef, useState } from 'react';
+import React, { type FC, type KeyboardEvent, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { Button, DensityProvider, Input, ThemeProvider } from '@dxos/react-ui';
+import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
@@ -24,6 +26,8 @@ import {
   decorateMarkdown,
   comments,
   defaultOptions,
+  dnd,
+  command,
   image,
   linkTooltip,
   mention,
@@ -33,6 +37,8 @@ import {
   formatting,
   annotations,
   EditorModes,
+  type CommandOptions,
+  type CommandAction,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
 import translations from '../../translations';
@@ -238,7 +244,7 @@ const Story = ({ id = 'test', text, comments, placeholder = 'New document.', ...
       placeholder={placeholder}
       slots={{
         root: { className: mx(textBlockWidth, 'min-bs-dvh') },
-        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+        editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
       }}
       {...props}
     />
@@ -353,6 +359,64 @@ export const Mention = {
   ),
 };
 
+const CommandDialog: FC<{ onClose: (action?: CommandAction) => void }> = ({ onClose }) => {
+  const [text, setText] = useState('');
+  const handleInsert = () => {
+    onClose(text.length ? { insert: text + '\n' } : undefined);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    switch (event.key) {
+      case 'Enter': {
+        handleInsert();
+        break;
+      }
+      case 'Escape': {
+        onClose();
+        break;
+      }
+    }
+  };
+
+  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>
+  );
+};
+
+const renderCommandDialog: CommandOptions['onRender'] = (el, onClose) => {
+  createRoot(el).render(
+    <StrictMode>
+      <ThemeProvider tx={defaultTx}>
+        <CommandDialog onClose={onClose} />
+      </ThemeProvider>
+    </StrictMode>,
+  );
+};
+
+export const Command = {
+  render: () => (
+    <Story
+      text={str('# Command', '')}
+      extensions={[command({ onRender: renderCommandDialog, onHint: () => 'Press / for commands.' })]}
+    />
+  ),
+};
+
 export const Comments = {
   render: () => {
     const [_comments, setComments] = useState<Comment[]>([]);
@@ -402,6 +466,10 @@ export const Annotations = {
   render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
 };
 
+export const DND = {
+  render: () => <Story text={str('# DND', '')} extensions={[dnd()]} />,
+};
+
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
 export const Typewriter = {

package/src/extensions/awareness.ts

@@ -164,7 +164,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           from: start,
           to: startLine.from + startLine.length,
           value: Decoration.mark({
-            attributes: { style: `background-color: ${color}` },
+            attributes: { style: `background-color: ${lightColor}` },
             class: 'cm-collab-selection',
           }),
         });
@@ -174,7 +174,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           from: endLine.from,
           to: end,
           value: Decoration.mark({
-            attributes: { style: `background-color: ${color}` },
+            attributes: { style: `background-color: ${lightColor}` },
             class: 'cm-collab-selection',
           }),
         });
@@ -185,7 +185,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
             from: linePos,
             to: linePos,
             value: Decoration.line({
-              attributes: { style: `background-color: ${color}`, class: 'cm-collab-selectionLine' },
+              attributes: { style: `background-color: ${lightColor}`, class: 'cm-collab-selectionLine' },
             }),
           });
         }

package/src/extensions/command/command.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { hintViewPlugin } from './hint';
+import { closeEffect, commandConfig, commandKeymap, commandState } from './state';
+
+// TODO(burdon): Create knowledge base for notes.
+// https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
+// 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): Insert text at cursor.
+
+export type CommandAction = {
+  insert?: string;
+};
+
+export type CommandOptions = {
+  onRender: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
+  onHint: () => string | undefined;
+};
+
+export const command = (options: CommandOptions): Extension => {
+  return [
+    commandState,
+    keymap.of(commandKeymap),
+    hintViewPlugin(options),
+    // Close tooltip on focus change.
+    EditorView.focusChangeEffect.of((_, focusing) => {
+      return focusing ? closeEffect.of(null) : null;
+    }),
+    commandConfig.of(options),
+  ];
+};

package/src/extensions/command/hint.ts

@@ -0,0 +1,75 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
+
+import { type CommandOptions } from './command';
+import { commandState } from './state';
+import { clientRectsFor, flattenRect } from '../util/dom';
+
+class CommandHint extends WidgetType {
+  constructor(readonly content: string | HTMLElement) {
+    super();
+  }
+
+  toDOM() {
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.appendChild(typeof this.content === 'string' ? document.createTextNode(this.content) : this.content);
+    if (typeof this.content === 'string') {
+      wrap.setAttribute('aria-label', 'placeholder ' + this.content);
+    } else {
+      wrap.setAttribute('aria-hidden', 'true');
+    }
+    return wrap;
+  }
+
+  override coordsAt(dom: HTMLElement) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    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;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+export const hintViewPlugin = ({ onHint }: CommandOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      deco = Decoration.none;
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const cState = update.view.state.field(commandState, false);
+        if (!cState?.tooltip) {
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+          // Only show if blank line.
+          // TODO(burdon): Show after delay or if blank line above?
+          if (selection.from === selection.to && line.from === line.to) {
+            const hint = onHint();
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
+            }
+          }
+        }
+
+        this.deco = builder.finish();
+      }
+    },
+    {
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
+    },
+  );

package/src/extensions/command/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './command';

package/src/extensions/command/state.ts

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet, StateEffect, StateField } from '@codemirror/state';
+import {
+  type Command,
+  type EditorView,
+  type KeyBinding,
+  showTooltip,
+  type Tooltip,
+  type TooltipView,
+} from '@codemirror/view';
+
+import { type CommandOptions } from './command';
+
+type CommandState = {
+  tooltip?: Tooltip | null;
+};
+
+export const commandConfig = Facet.define<CommandOptions, Required<CommandOptions>>({
+  combine: (providers) => providers[0],
+});
+
+export const commandState = StateField.define<CommandState>({
+  create: () => ({}),
+  update: (state, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(closeEffect)) {
+        return {};
+      }
+
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
+        const { pos, fullWidth } = effect.value;
+        const tooltip: Tooltip = {
+          pos,
+          above: false,
+          arrow: false,
+          strictSide: true,
+          create: (view: EditorView) => {
+            const dom = document.createElement('div');
+            const tooltipView: TooltipView = {
+              dom,
+              mount: (view: EditorView) => {
+                if (fullWidth) {
+                  const parent = dom.parentElement!;
+                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
+                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+                  dom.style.width = `${widthWithoutPadding}px`;
+                }
+
+                // Render react component.
+                options.onRender(dom, (action) => {
+                  view.dispatch({ effects: closeEffect.of(null) });
+                  if (action?.insert?.length) {
+                    view.dispatch({
+                      changes: { from: pos, insert: action.insert },
+                      selection: { anchor: pos + action.insert.length },
+                    });
+                  }
+                  // TODO(burdon): Truncates text if focus immediately.
+                  setTimeout(() => view.focus());
+                });
+              },
+            };
+
+            return tooltipView;
+          },
+        };
+        return { tooltip };
+      }
+    }
+
+    return state;
+  },
+  provide: (f) => [showTooltip.from(f, (value) => value.tooltip ?? null)],
+});
+
+export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
+export const closeEffect = StateEffect.define<null>();
+
+export const openCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
+      return true;
+    }
+  }
+  return false;
+};
+
+export const closeCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({ effects: closeEffect.of(null) });
+    return true;
+  }
+  return false;
+};
+
+export const commandKeymap: readonly KeyBinding[] = [
+  { key: '/', run: openCommand },
+  { key: 'Escape', run: closeCommand },
+];

package/src/extensions/dnd.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+// TODO(burdon): DND experiment.
+export const dnd = (): Extension => {
+  return EditorView.domEventHandlers({
+    drop: (event, view) => {
+      console.log(event);
+    },
+  });
+};

package/src/extensions/index.ts

@@ -8,9 +8,11 @@ export * from './automerge';
 export * from './awareness';
 export * from './basic';
 export * from './blast';
+export * from './command';
 export * from './comments';
 export * from './cursor';
 export * from './cursor-line-margin';
+export * from './dnd';
 export * from './listener';
 export * from './markdown';
 export * from './mention';

package/src/extensions/util/dom.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Copied from @codemirror/view
+
+export interface Rect {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+
+export const flattenRect = (rect: Rect, left: boolean) => {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+};
+
+let scratchRange: Range | null;
+
+export const textRange = (node: Text, from: number, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+
+export const clientRectsFor = (dom: Node) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return (dom as HTMLElement).getClientRects();
+  } else {
+    return [] as any as DOMRectList;
+  }
+};

package/src/hooks/useTextModel.ts

@@ -11,12 +11,13 @@ import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
+import { hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
 import { type EditorModel, modelState } from './defs';
 import { automerge, awareness } from '../extensions';
 import { type DocAccessor } from '../extensions/automerge/defs';
-import { cursorColor } from '../styles';
 
 export type useTextExtensionsProps = {
   id: string;
@@ -29,6 +30,9 @@ export type useTextExtensionsProps = {
 export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
   const extensions: Extension[] = [automerge(text)];
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   if (space && identity) {
     const awarenessProvider = new SpaceAwarenessProvider({
       space,
@@ -36,8 +40,8 @@ export const useTextExtensions = ({ id, text, space, identity }: useTextExtensio
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
       },
     });
 
@@ -84,6 +88,9 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? '0')];
+
   const awarenessProvider =
     space &&
     new SpaceAwarenessProvider({
@@ -91,8 +98,8 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       channel: `automerge.awareness.${obj.id}`,
       info: {
         displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
-        color: cursorColor.color,
-        lightColor: cursorColor.light,
+        color: cursorLightValue,
+        lightColor: cursorDarkValue,
       },
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });

package/src/styles/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 export * from './layout';

package/dist/types/src/styles/cursors.d.ts

@@ -1,5 +0,0 @@
-export declare const cursorColor: {
-    color: string;
-    light: string;
-};
-//# sourceMappingURL=cursors.d.ts.map

package/dist/types/src/styles/cursors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/styles/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}

package/src/styles/cursors.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// Copied from https://github.com/yjs/y-codemirror.next#example.
-
-import * as random from 'lib0/random';
-
-const cursorColors = [
-  { color: '#30bced', light: '#30bced33' },
-  { color: '#6eeb83', light: '#6eeb8333' },
-  { color: '#ffbc42', light: '#ffbc4233' },
-  { color: '#ecd444', light: '#ecd44433' },
-  { color: '#ee6352', light: '#ee635233' },
-  { color: '#9ac2c9', light: '#9ac2c933' },
-  { color: '#8acb88', light: '#8acb8833' },
-  { color: '#1be7ff', light: '#1be7ff33' },
-];
-
-// Select a random color for this user.
-export const cursorColor = cursorColors[random.uint32() % cursorColors.length];