@dxos/react-ui-editor 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

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);
+        }
+      }
+    },
+  );

package/src/extensions/command/preview.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+
+export type PreviewOptions = {
+  onRenderPreview: (el: HTMLElement, props: { url: string; text: string }) => void;
+};
+
+/**
+ * Create image decorations.
+ */
+export const preview = (options: PreviewOptions): Extension => {
+  return [
+    StateField.define<DecorationSet>({
+      create: (state) => buildDecorations(state, options),
+      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      // TODO(burdon): Make atomic.
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Make atomic.
+const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+  const builder = new RangeSetBuilder<Decoration>();
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'Link') {
+        const urlNode = node.node.getChild('URL');
+        if (urlNode) {
+          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              block: true, // Prevent cursor from entering.
+              widget: new PreviewWidget(options.onRenderPreview, url, text),
+            }),
+          );
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+};
+
+class PreviewWidget extends WidgetType {
+  constructor(
+    readonly _onRenderPreview: PreviewOptions['onRenderPreview'],
+    readonly _url: string,
+    readonly _text: string,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === (other as any as PreviewWidget)._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('div');
+    root.classList.add('cm-preview');
+    this._onRenderPreview(root, { url: this._url, text: this._text });
+    return root;
+  }
+}

package/src/extensions/command/state.ts

@@ -4,10 +4,10 @@
 
 import { StateEffect, StateField } from '@codemirror/state';
 import {
+  showTooltip,
   type Command,
   type EditorView,
   type KeyBinding,
-  showTooltip,
   type Tooltip,
   type TooltipView,
 } from '@codemirror/view';
@@ -50,14 +50,17 @@ export const commandState = StateField.define<CommandState>({
                 }
 
                 // Render react component.
-                options.onRender(dom, (action) => {
+                options.onRenderDialog(dom, (action) => {
                   view.dispatch({ effects: closeEffect.of(null) });
                   if (action?.insert?.length) {
+                    // Insert into editor.
+                    const text = action.insert + '\n';
                     view.dispatch({
-                      changes: { from: pos, insert: action.insert },
-                      selection: { anchor: pos + action.insert.length },
+                      changes: { from: pos, insert: text },
+                      selection: { anchor: pos + text.length },
                     });
                   }
+
                   // NOTE: Truncates text if set focus immediately.
                   requestAnimationFrame(() => view.focus());
                 });
@@ -88,6 +91,7 @@ export const openCommand: Command = (view: EditorView) => {
       return true;
     }
   }
+
   return false;
 };
 
@@ -96,6 +100,7 @@ export const closeCommand: Command = (view: EditorView) => {
     view.dispatch({ effects: closeEffect.of(null) });
     return true;
   }
+
   return false;
 };
 

package/src/extensions/comments.ts

@@ -4,12 +4,12 @@
 
 import { invertedEffects } from '@codemirror/commands';
 import {
+  type ChangeDesc,
+  type EditorState,
   type Extension,
   StateEffect,
   StateField,
   type Text,
-  type ChangeDesc,
-  type EditorState,
 } from '@codemirror/state';
 import {
   hoverTooltip,
@@ -24,7 +24,7 @@ import {
 import sortBy from 'lodash.sortby';
 import { useEffect, useMemo } from 'react';
 
-import { debounce, type UnsubscribeCallback } from '@dxos/async';
+import { debounce, type CleanupFn } from '@dxos/async';
 import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
@@ -181,6 +181,7 @@ const handleCommentClick = EditorView.domEventHandlers({
     return false;
   },
 });
+
 //
 // Cut-and-paste.
 //
@@ -575,12 +576,7 @@ const hasActiveSelection = (state: EditorState): boolean => {
 class ExternalCommentSync implements PluginValue {
   private readonly unsubscribe: () => void;
 
-  constructor(
-    view: EditorView,
-    id: string,
-    subscribe: (sink: () => void) => UnsubscribeCallback,
-    getComments: () => Comment[],
-  ) {
+  constructor(view: EditorView, id: string, subscribe: (sink: () => void) => CleanupFn, getComments: () => Comment[]) {
     const updateComments = () => {
       const comments = getComments();
       if (id === view.state.facet(documentId)) {
@@ -599,7 +595,7 @@ class ExternalCommentSync implements PluginValue {
 // TODO(burdon): Needs comment.
 export const createExternalCommentSync = (
   id: string,
-  subscribe: (sink: () => void) => UnsubscribeCallback,
+  subscribe: (sink: () => void) => CleanupFn,
   getComments: () => Comment[],
 ): Extension =>
   ViewPlugin.fromClass(

package/src/extensions/factories.ts

@@ -62,7 +62,7 @@ export type BasicExtensionsOptions = {
   lineWrapping?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
-  readonly?: boolean;
+  readOnly?: boolean;
   search?: boolean;
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
@@ -74,7 +74,6 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
-  editable: true,
   focus: true,
   history: true,
   keymap: 'standard',
@@ -102,13 +101,14 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
+    props.editable !== undefined && EditorView.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
     props.lineWrapping && EditorView.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
-    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
+    props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
 

package/src/{styles/stack-item-content-class-names.ts → fragments.ts}

@@ -4,9 +4,11 @@
 
 import { mx } from '@dxos/react-ui-theme';
 
+// TODO(burdon): Move this to a common plugin.
+
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
-    'dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
+    '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',
   );
 

package/src/index.ts

@@ -14,10 +14,6 @@ export * from './components';
 export * from './defaults';
 export * from './extensions';
 export * from './hooks';
-export {
-  stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames,
-} from './styles/stack-item-content-class-names';
 export * from './types';
 export * from './util';
 

package/src/styles/theme.ts

@@ -77,6 +77,10 @@ export const defaultTheme: ThemeStyles = {
     background: 'transparent',
   },
   '.cm-gutter': {},
+  '.cm-gutter.cm-lineNumbers': {
+    paddingRight: '4px',
+    borderRight: '1px solid var(--dx-separator)',
+  },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',
     alignContent: 'center',
@@ -86,7 +90,7 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-gutterElement': {
     alignItems: 'center',
-    fontSize: '16px',
+    fontSize: '12px',
   },
 
   /**

package/dist/types/src/styles/stack-item-content-class-names.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stack-item-content-class-names.d.ts","sourceRoot":"","sources":["../../../../src/styles/stack-item-content-class-names.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gCAAgC,UAAW,MAAM,WAI3D,CAAC;AAEJ,eAAO,MAAM,iCAAiC,UAAW,MAAM,WAI5D,CAAC"}