@dxos/react-ui-editor 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/src/extensions/autoscroll.ts

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { Domino } from '../util';
+
+const lineHeight = 24;
+
+export const scrollToBottomEffect = StateEffect.define<any>();
+
+export type AutoScrollOptions = {
+  overscroll: number;
+  throttle: number;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+// TODO(burdon): Reconcile with transcript-extension.
+export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Partial<AutoScrollOptions> = {}) => {
+  let isThrottled = false;
+  let isPinned = true;
+  let lastScrollTop = 0;
+  let timeout: NodeJS.Timeout | undefined;
+  let buttonContainer: HTMLDivElement;
+
+  const hideScrollbar = (view: EditorView) => {
+    view.scrollDOM.classList.add('cm-hide-scrollbar');
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      view.scrollDOM.classList.remove('cm-hide-scrollbar');
+    }, 1_000);
+  };
+
+  const scrollToBottom = (view: EditorView) => {
+    isPinned = true;
+    buttonContainer?.classList.add('opacity-0');
+    requestAnimationFrame(() => {
+      hideScrollbar(view);
+      view.scrollDOM.scrollTo({
+        top: view.scrollDOM.scrollHeight,
+        behavior: 'smooth',
+      });
+    });
+  };
+
+  return [
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const scroller = view.scrollDOM.parentElement;
+          buttonContainer = Domino.of('div')
+            .classNames(true && 'cm-scroll-button transition-opacity duration-300 opacity-0')
+            .child(
+              Domino.of('button')
+                .classNames('dx-button bg-accentSurface')
+                .data('density', 'fine')
+                .child(Domino.of<any>('dx-icon').attr('icon', 'ph--arrow-down--regular'))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+          scroller?.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // Update listener for logging when scrolling is needed.
+    EditorView.updateListener.of((update) => {
+      // Listen for effects.
+      update.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToBottomEffect)) {
+            scrollToBottom(update.view);
+          }
+        }
+      });
+
+      if (update.docChanged && isPinned && !isThrottled) {
+        const distanceFromBottom = calcDistance(update.view.scrollDOM);
+
+        // Hide scrollbar even if not scrolling to bottom.
+        // hideScrollbar(update.view);
+
+        // Keep pinned.
+        if (distanceFromBottom > overscroll) {
+          isThrottled = true;
+          requestAnimationFrame(() => {
+            scrollToBottom(update.view);
+          });
+
+          // Reset throttle.
+          setTimeout(() => {
+            isThrottled = false;
+          }, throttle);
+        }
+      }
+    }),
+
+    EditorView.domEventHandlers({
+      scroll: (event, view) => {
+        const scroller = view.scrollDOM;
+        const distanceFromBottom = calcDistance(scroller);
+        if (distanceFromBottom === 0) {
+          // Pin to bottom.
+          isPinned = true;
+          buttonContainer?.classList.add('opacity-0');
+        } else if (scroller.scrollTop < lastScrollTop) {
+          // Break pin if user scrolls up.
+          isPinned = false;
+          buttonContainer?.classList.remove('opacity-0');
+        }
+
+        lastScrollTop = scroller.scrollTop;
+      },
+    }),
+
+    EditorView.theme({
+      '.cm-scroller': {
+        paddingBottom: `${overscroll}px`,
+        scrollbarWidth: 'thin',
+      },
+      '.cm-scroller.cm-hide-scrollbar': {
+        scrollbarWidth: 'none',
+      },
+      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
+        display: 'none',
+      },
+
+      // TODO(burdon): IconButton.
+      '.cm-scroll-button': {
+        position: 'absolute',
+        bottom: '0.5rem',
+        right: '1rem',
+      },
+    }),
+  ];
+};
+
+const calcDistance = (scroller: HTMLElement) => {
+  const scrollTop = scroller.scrollTop;
+  const scrollHeight = scroller.scrollHeight;
+  const clientHeight = scroller.clientHeight;
+  const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+  return distanceFromBottom;
+};

package/src/extensions/awareness/awareness.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Annotation, type Extension, RangeSet, type Range } from '@codemirror/state';
+import { Annotation, type Extension, type Range, RangeSet } from '@codemirror/state';
 import {
   Decoration,
   type DecorationSet,
@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { singleValueFacet, Cursor, type CursorConverter } from '../../util';
+import { Cursor, type CursorConverter, singleValueFacet } from '../../util';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/command/action.ts

@@ -3,7 +3,7 @@
 //
 
 import { StateEffect } from '@codemirror/state';
-import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
+import { type Command, type EditorView, type KeyBinding } from '@codemirror/view';
 
 import { commandState } from './state';
 

package/src/extensions/command/command-menu.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
+import { Prec, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
 
-import { placeholder, type PlaceholderOptions } from './placeholder';
 import { type Range } from '../../types';
 
+import { type PlaceholderOptions, placeholder } from './placeholder';
+
 export type CommandMenuOptions = {
   trigger: string | string[];
   placeholder?: Partial<PlaceholderOptions>;
@@ -37,12 +38,12 @@ export const commandMenu = (options: CommandMenuOptions) => {
         // Check if we should show the widget - only if cursor is within the active command range.
         const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
         if (shouldShowWidget) {
-          // Create mark decoration that wraps the entire line content in a dx-ref-tag.
+          // Create mark decoration that wraps the entire line content in a dx-anchor.
           builder.add(
             activeRange.from,
             activeRange.to,
             Decoration.mark({
-              tagName: 'dx-ref-tag',
+              tagName: 'dx-anchor',
               class: 'cm-ref-tag',
               attributes: {
                 'data-auto-trigger': 'true',

package/src/extensions/command/command.ts

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Prec, type Extension } from '@codemirror/state';
+import { type Extension, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { isNonNullable } from '@dxos/util';
 
 import { closeEffect, commandKeyBindings } from './action';
-import { hint, type HintOptions } from './hint';
-import { commandConfig, commandState, type PopupOptions } from './state';
+import { type HintOptions, hint } from './hint';
+import { type PopupOptions, commandConfig, commandState } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4

package/src/extensions/command/floating-menu.ts

@@ -37,7 +37,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
           const button = document.createElement('button');
           button.appendChild(icon);
 
-          this.tag = document.createElement('dx-ref-tag');
+          this.tag = document.createElement('dx-anchor');
           this.tag.classList.add('cm-ref-tag');
           this.tag.appendChild(button);
         }

package/src/extensions/command/hint.ts

@@ -6,9 +6,10 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
+import { commandState } from './state';
+
 export type HintOptions = {
   delay?: number;
   onHint?: () => string | undefined;

package/src/extensions/command/placeholder.ts

@@ -4,7 +4,7 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
 import { clientRectsFor, flattenRect } from '../../util';
 

package/src/extensions/command/state.ts

@@ -3,13 +3,14 @@
 //
 
 import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
+import { type EditorView, type Tooltip, type TooltipView, showTooltip } from '@codemirror/view';
 
-import { closeEffect, type Action, openEffect } from './action';
-import { type CommandOptions } from './command';
 import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+import { type Action, closeEffect, openEffect } from './action';
+import { type CommandOptions } from './command';
+
 export const commandConfig = singleValueFacet<CommandOptions>();
 
 export type PopupOptions = {

package/src/extensions/command/typeahead.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { EditorSelection, Prec, RangeSetBuilder, type Extension } from '@codemirror/state';
+import { EditorSelection, type Extension, Prec, RangeSetBuilder } from '@codemirror/state';
 import {
   type Command,
   Decoration,
   type DecorationSet,
   type EditorView,
-  keymap,
   ViewPlugin,
   type ViewUpdate,
+  keymap,
 } from '@codemirror/view';
 
 import { Hint } from './hint';

package/src/extensions/command/useCommandMenu.ts

@@ -5,12 +5,13 @@
 import { type EditorView } from '@codemirror/view';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
 import { type MaybePromise } from '@dxos/util';
 
+import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
+
 import { commandMenu, commandRangeEffect } from './command-menu';
 import { type PlaceholderOptions } from './placeholder';
-import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
 
 export type UseCommandMenuOptions = {
   viewRef: RefObject<EditorView | undefined>;
@@ -20,7 +21,7 @@ export type UseCommandMenuOptions = {
 };
 
 export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions) => {
-  const triggerRef = useRef<DxRefTag | null>(null);
+  const triggerRef = useRef<DxAnchor | null>(null);
   const currentRef = useRef<CommandMenuItem | null>(null);
   const groupsRef = useRef<CommandMenuGroup[]>([]);
   const [currentItem, setCurrentItem] = useState<string>();
@@ -43,7 +44,7 @@ export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCo
   );
 
   const handleActivate = useCallback(
-    async (event: DxRefTagActivate) => {
+    async (event: DxAnchorActivate) => {
       const item = getItem(groupsRef.current, currentItem);
       if (item) {
         currentRef.current = item;

package/src/extensions/comments.ts

@@ -5,25 +5,26 @@
 import { invertedEffects } from '@codemirror/commands';
 import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
-  hoverTooltip,
-  keymap,
   type Command,
   Decoration,
   EditorView,
-  type Rect,
   type PluginValue,
+  type Rect,
   ViewPlugin,
+  hoverTooltip,
+  keymap,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 import { useEffect } from 'react';
 
-import { debounce, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, debounce } from '@dxos/async';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
+import { type Comment, type Range, type RenderCallback } from '../types';
+import { Cursor, callbackWrapper, singleValueFacet } from '../util';
+
 import { documentId } from './selection';
-import { type RenderCallback, type Comment, type Range } from '../types';
-import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.
@@ -57,7 +58,11 @@ const setCommentState = StateEffect.define<CommentsState>();
  * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 export const commentsState = StateField.define<CommentsState>({
-  create: (state) => ({ id: state.facet(documentId), comments: [], selection: {} }),
+  create: (state) => ({
+    id: state.facet(documentId),
+    comments: [],
+    selection: {},
+  }),
   update: (value, tr) => {
     for (const effect of tr.effects) {
       // Update selection.
@@ -98,16 +103,16 @@ export const commentsState = StateField.define<CommentsState>({
  */
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
+    padding: '3px 0',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+  },
+  '.cm-comment > span, .cm-comment-current > span': {
+    boxDecorationBreak: 'clone',
+    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
     backgroundColor: 'var(--dx-cmCommentSurface)',
     color: 'var(--dx-cmComment)',
     cursor: 'pointer',
   },
-  '.cm-comment:hover, .cm-comment-current': {
-    textDecoration: 'underline',
-  },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>

package/src/extensions/dnd.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Extension } from '@codemirror/state';
-import { dropCursor, EditorView } from '@codemirror/view';
+import { EditorView, dropCursor } from '@codemirror/view';
 
 export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
 

package/src/extensions/factories.ts

@@ -31,11 +31,12 @@ import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isNotFalsy } from '@dxos/util';
 
+import { editorGutter, editorMonospace } from '../defaults';
+import { type ThemeStyles, defaultTheme } from '../styles';
+
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
-import { editorGutter, editorMonospace } from '../defaults';
-import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
 // Basic
@@ -47,6 +48,7 @@ export const preventNewline = EditorState.transactionFilter.of((tr) => (tr.newDo
  * https://codemirror.net/docs/extensions
  * https://github.com/codemirror/basic-setup
  * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+ * https://github.com/codemirror/theme-one-dark
  */
 export type BasicExtensionsOptions = {
   allowMultipleSelections?: boolean;
@@ -82,7 +84,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   history: true,
   keymap: 'standard',
   lineWrapping: true,
-  search: true,
+  search: false,
 } as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {
@@ -157,9 +159,6 @@ export type ThemeExtensionsOptions = {
     scroll?: {
       className?: string;
     };
-    scroller?: {
-      className?: string;
-    };
     content?: {
       className?: string;
     };
@@ -186,31 +185,21 @@ export const defaultThemeSlots = grow;
 export const createThemeExtensions = ({
   themeMode,
   styles,
-  syntaxHighlighting: _syntaxHighlighting,
+  syntaxHighlighting: syntaxHighlightingProps,
   slots: _slots,
 }: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting &&
-      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
+    syntaxHighlightingProps && syntaxHighlighting(themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
     slots.scroll?.className &&
       ViewPlugin.fromClass(
         class {
           constructor(view: EditorView) {
-            view.scrollDOM.classList.add(slots.scroll.className);
-          }
-        },
-      ),
-    slots.scroller?.className &&
-      ViewPlugin.fromClass(
-        class {
-          constructor(view: EditorView) {
-            view.dom.querySelector('.cm-scroller')?.classList.add(...slots.scroller.className.split(' '));
+            view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
           }
         },
       ),
@@ -238,7 +227,6 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
     const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
-
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
@@ -246,9 +234,9 @@ export const createDataExtensions = <T>({ id, text, space, identity }: DataExten
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {
-            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
             darkColor: `var(--dx-${hue}Cursor)`,
             lightColor: `var(--dx-${hue}Cursor)`,
+            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
           },
         }),
       ),

package/src/extensions/folding.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { Icon } from '@dxos/react-ui';
 
-import { createElement, renderRoot } from '../util';
+import { Domino, renderRoot } from '../util';
 
 export type FoldingOptions = {};
 
@@ -26,7 +26,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   foldGutter({
     markerDOM: (open) => {
       // TODO(burdon): Use sprite directly.
-      const el = createElement('div', { className: 'flex h-full items-center' });
+      const el = Domino.of('div').classNames('flex h-full items-center').build();
       return renderRoot(
         el,
         <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,

package/src/extensions/index.ts

@@ -4,6 +4,7 @@
 
 export * from './annotations';
 export * from './autocomplete';
+export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
@@ -23,4 +24,5 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './selection';
+export * from './tags';
 export * from './typewriter';

package/src/extensions/markdown/action.ts

@@ -7,6 +7,8 @@ import { type EditorView } from '@codemirror/view';
 import { type Action } from '@dxos/app-graph';
 import { type MenuActionProperties } from '@dxos/react-ui-menu';
 
+import { createComment } from '../comments';
+
 import {
   Inline,
   List,
@@ -25,7 +27,6 @@ import {
   toggleList,
   toggleStyle,
 } from './formatting';
-import { createComment } from '../comments';
 
 export type PayloadType =
   | 'view-mode'

package/src/extensions/markdown/bundle.ts

@@ -4,20 +4,21 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
+import { type MarkdownConfig } from '@lezer/markdown';
 
-import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
+  extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
+  setextHeading?: boolean;
 };
 
 /**
@@ -51,6 +52,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
+        ...(options.extensions ?? defaultExtensions()),
       ],
     }),
 
@@ -69,3 +71,23 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
     ),
   ];
 };
+
+/**
+ * Default customizations.
+ * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
+ */
+export const defaultExtensions = (): MarkdownConfig[] => [noSetExtHeading, noHtml];
+
+/**
+ * Remove SetextHeading (e.g., headings created from "---").
+ */
+const noSetExtHeading: MarkdownConfig = {
+  remove: ['SetextHeading'],
+};
+
+/**
+ * Remove HTML and XML parsing.
+ */
+const noHtml: MarkdownConfig = {
+  remove: ['HTMLBlock', 'HTMLTag'],
+};

package/src/extensions/markdown/changes.ts

@@ -4,7 +4,7 @@
 
 import { syntaxTree } from '@codemirror/language';
 import { type ChangeSpec, Transaction } from '@codemirror/state';
-import { ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
+import { type PluginValue, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 /**
  * Monitors and augments changes.