@dxos/react-ui-editor 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

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

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

@@ -61,7 +61,8 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   lineWrapping?: boolean;
   placeholder?: string;
-  readonly?: boolean;
+  /** If true user cannot edit the text, but they can still select and copy it. */
+  readOnly?: boolean;
   search?: boolean;
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
@@ -73,7 +74,6 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
-  editable: true,
   focus: true,
   history: true,
   keymap: 'standard',
@@ -101,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,10 +4,12 @@
 
 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',
-    role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
+    '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) =>

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -19,14 +19,14 @@ import {
 import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
-import { editorInputMode, type EditorSelection, documentId, createEditorStateTransaction } from '../extensions';
+import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 export type UseTextEditor = {
   // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
-  focusAttributes: ReturnType<typeof useFocusableGroup> & {
+  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
     tabIndex: 0;
     onKeyUp: KeyboardEventHandler<HTMLDivElement>;
   };
@@ -55,7 +55,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
 let instanceCount = 0;
 
 /**
- * Hook for creating editor.
+ * Creates codemirror text editor.
  */
 export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
@@ -155,9 +155,11 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroup = useFocusableGroup({
+  const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: 'limited',
-    ignoreDefaultKeydown: { Escape: view?.state.facet(editorInputMode).noTabster },
+    ignoreDefaultKeydown: {
+      Escape: view?.state.facet(editorInputMode).noTabster,
+    },
   });
 
   // Focus editor on Enter (e.g., when tabbing to this component).
@@ -176,6 +178,13 @@ export const useTextEditor = (
     [view],
   );
 
-  const focusAttributes = { tabIndex: 0 as const, ...focusableGroup, onKeyUp: handleKeyUp };
-  return { parentRef, view, focusAttributes };
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0 as const,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp,
+    },
+  };
 };

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',
   },
 
   /**
@@ -137,6 +141,7 @@ export const defaultTheme: ThemeStyles = {
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
+    textDecorationColor: 'var(--dx-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },

package/src/util/debug.ts

@@ -59,6 +59,6 @@ export const logChanges = (trs: readonly Transaction[]) => {
     .filter(Boolean);
 
   if (changes.length) {
-    log.info('changes', { changes });
+    log('changes', { changes });
   }
 };

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"}