@dxos/ui-editor 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-editor",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -58,35 +58,35 @@
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
-    "ajv": "^8.17.1",
+    "ajv": "^8.18.0",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/client": "0.8.4-main.bc674ce",
-    "@dxos/app-graph": "0.8.4-main.bc674ce",
-    "@dxos/context": "0.8.4-main.bc674ce",
-    "@dxos/display-name": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/echo-db": "0.8.4-main.bc674ce",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/lit-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui": "0.8.4-main.bc674ce",
-    "@dxos/protocols": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/ui-types": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
+    "@dxos/async": "0.8.4-main.c85a9c8dae",
+    "@dxos/client": "0.8.4-main.c85a9c8dae",
+    "@dxos/context": "0.8.4-main.c85a9c8dae",
+    "@dxos/debug": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/protocols": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-db": "0.8.4-main.c85a9c8dae",
+    "@dxos/display-name": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
     "@automerge/automerge": "3.2.3",
     "@automerge/automerge-repo": "2.5.1",
     "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
-    "@effect/platform": "0.93.6",
+    "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -94,25 +94,25 @@
     "@types/lodash.sortby": "^4.7.7",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.19.11",
-    "happy-dom": "^13.3.1",
+    "effect": "3.19.16",
+    "happy-dom": "^20.0.0",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "vite": "7.1.9",
+    "vite": "^7.1.11",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/config": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/keyboard": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce"
+    "@dxos/config": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/schema": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/defaults.ts

@@ -12,11 +12,11 @@ import { type ThemeExtensionsOptions } from './extensions';
  * 50rem = 800px. Maximum content width for solo mode.
  * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
  */
-export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
+export const editorWidth = '!mx-auto w-full max-w-[min(50rem,100%-4rem)]';
 
 export const editorSlots: ThemeExtensionsOptions['slots'] = {
   scroll: {
-    className: 'pbs-2',
+    className: 'pt-2',
   },
   content: {
     className: editorWidth,
@@ -29,6 +29,6 @@ export const editorWithToolbarLayout =
 // NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
-    'p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2',
-    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
+    'dx-attention-surface p-0.5 dx-focus-ring-inset data-[toolbar=disabled]:pt-2',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-h-24' : 'dx-container overflow-hidden',
   );

package/src/extensions/annotations.ts

@@ -48,7 +48,7 @@ export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
       '.cm-annotation': {
         textDecoration: 'underline',
         textDecorationStyle: 'wavy',
-        textDecorationColor: 'var(--dx-errorText)',
+        textDecorationColor: 'var(--color-error-text)',
       },
     }),
   ];

package/src/extensions/auto-scroll.ts

@@ -0,0 +1,126 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { addEventListener, combine, throttle } from '@dxos/async';
+import { Domino } from '@dxos/ui';
+
+import { scrollerCrawlEffect, scrollerLineEffect } from './scroller';
+
+export type AutoScrollToProps = {};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+export const autoScroll = (_: AutoScrollToProps = {}) => {
+  let buttonContainer: HTMLDivElement | undefined;
+  let isPinned = true;
+
+  const setPinned = (pinned: boolean) => {
+    buttonContainer?.classList.toggle('opacity-0', pinned);
+    isPinned = pinned;
+  };
+
+  return [
+    // Update listener for logging when scrolling is needed.
+    EditorView.updateListener.of(({ view, heightChanged, state }) => {
+      // Maybe scroll if doc changed and pinned.
+      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
+      if (heightChanged) {
+        if (isPinned) {
+          // NOTE: Use scroll geometry instead of coordsAtPos to avoid forced layout/scroll side-effects.
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (delta > 0 && scrollTop > 0) {
+            setPinned(true);
+            view.dispatch({
+              effects: scrollerCrawlEffect.of(true),
+            });
+          } else if (delta < 0) {
+            setPinned(false);
+          }
+        } else {
+          // TODO(burdon): Should re-pin if content shrinks.
+          if (state.doc.length === 0) {
+            setPinned(true);
+          }
+        }
+      }
+    }),
+
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin.fromClass(
+      class {
+        private readonly cleanup: () => void;
+        constructor(view: EditorView) {
+          this.cleanup = createUserScrollDetector(
+            view.scrollDOM,
+            throttle(() => {
+              requestAnimationFrame(() => {
+                const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+                const delta = scrollHeight - scrollTop - clientHeight;
+                const pinned = delta === 0;
+                setPinned(pinned);
+                if (!pinned) {
+                  view.dispatch({ effects: scrollerCrawlEffect.of(false) });
+                }
+              });
+            }, 500),
+          );
+        }
+        destroy() {
+          this.cleanup();
+        }
+      },
+    ),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const icon = Domino.of('dx-icon' as any).attributes({ icon: 'ph--arrow-down--regular' });
+          const button = Domino.of('button')
+            .classNames('dx-button bg-accent-surface')
+            .attributes({ 'data-density': 'fine' })
+            .children(icon)
+            .on('click', () => {
+              setPinned(true);
+              view.dispatch({
+                effects: scrollerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
+              });
+            });
+
+          buttonContainer = Domino.of('div')
+            .classNames('cm-scroll-button transition-opacity duration-300 opacity-0')
+            .children(button).root as HTMLDivElement;
+
+          view.scrollDOM.parentElement!.appendChild(buttonContainer);
+        }
+      },
+    ),
+  ];
+};
+
+/**
+ * Attaches listeners to detect genuine user-initiated scrolling on an element.
+ * Two sources are covered:
+ *   - `wheel`: fires only from physical mouse wheel / trackpad gestures.
+ *   - `pointerdown` on the scrollbar gutter: detected by comparing clientX to
+ *     the element's clientWidth (the content area, excluding the scrollbar).
+ * Returns a cleanup function that removes the listeners.
+ */
+// TODO(burdon): Still jumps when widgets are rendered.
+// - Track position of specific element/line in document and scroll relative to that.
+function createUserScrollDetector(element: HTMLElement, onUserScroll: () => void): () => void {
+  return combine(
+    addEventListener(element, 'wheel', () => onUserScroll(), { passive: true }),
+    addEventListener(element, 'pointerdown', (event) => {
+      // If the pointer lands beyond the content width it hit the scrollbar gutter.
+      if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+        onUserScroll();
+      }
+    }),
+  );
+}

package/src/extensions/automerge/automerge.test.tsx

@@ -9,7 +9,7 @@ import { render, screen } from '@testing-library/react';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
-import { get } from '@dxos/util';
+import { getDeep } from '@dxos/util';
 
 import { automerge } from './automerge';
 
@@ -46,7 +46,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
+      state: EditorState.create({ doc: getDeep(handle.doc()!, path), extensions }),
       parent: ref.current!,
     });
 

package/src/extensions/blocks.ts

@@ -101,11 +101,11 @@ export const blocks = () => [
     '.cm-line.block-line': {
       paddingLeft: '0.75rem',
       paddingRight: '0.75rem',
-      borderLeft: '1px solid var(--dx-subduedSeparator)',
-      borderRight: '1px solid var(--dx-subduedSeparator)',
+      borderLeft: '1px solid var(--color-subdued-separator)',
+      borderRight: '1px solid var(--color-subdued-separator)',
     },
     '.cm-line.block-single': {
-      border: '1px solid var(--dx-subduedSeparator)',
+      border: '1px solid var(--color-subdued-separator)',
       borderRadius: '6px',
       paddingTop: '0.5rem',
       paddingBottom: '0.5rem',
@@ -113,7 +113,7 @@ export const blocks = () => [
       marginBottom: '0.5rem',
     },
     '.cm-line.block-first': {
-      borderTop: '1px solid var(--dx-subduedSeparator)',
+      borderTop: '1px solid var(--color-subdued-separator)',
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
       paddingTop: '0.5rem',
@@ -121,7 +121,7 @@ export const blocks = () => [
     },
     '.cm-line.block-middle': {},
     '.cm-line.block-last': {
-      borderBottom: '1px solid var(--dx-subduedSeparator)',
+      borderBottom: '1px solid var(--color-subdued-separator)',
       borderBottomLeftRadius: '6px',
       borderBottomRightRadius: '6px',
       paddingBottom: '0.5rem',

package/src/extensions/comments.ts

@@ -103,14 +103,14 @@ export const commentsState = StateField.define<CommentsState>({
 const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
     padding: '3px 0',
-    color: 'var(--dx-cmCommentText)',
-    backgroundColor: 'var(--dx-cmCommentSurface)',
+    color: 'var(--color-cm-comment-text)',
+    backgroundColor: 'var(--color-cm-comment-surface)',
   },
   '.cm-comment > span, .cm-comment-current > span': {
     boxDecorationBreak: 'clone',
-    boxShadow: '0 0 1px 3px var(--dx-cmCommentSurface)',
-    backgroundColor: 'var(--dx-cmCommentSurface)',
-    color: 'var(--dx-cmCommentText)',
+    boxShadow: '0 0 1px 3px var(--color-cm-comment-surface)',
+    backgroundColor: 'var(--color-cm-comment-surface)',
+    color: 'var(--color-cm-comment-text)',
     cursor: 'pointer',
   },
 });

package/src/extensions/dnd.ts

@@ -29,8 +29,8 @@ export const dropFile = (options: DropOptions = {}): Extension => {
 
 const styles = EditorView.theme({
   '.cm-dropCursor': {
-    borderLeft: '2px solid var(--dx-accentText)',
-    color: 'var(--dx-accentText)',
+    borderLeft: '2px solid var(--color-accent-text)',
+    color: 'var(--color-accent-text)',
     padding: '0 4px',
   },
   '.cm-dropCursor:after': {

package/src/extensions/factories.ts

@@ -27,8 +27,7 @@ import { type DocAccessor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
 import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
-import { type HuePalette } from '@dxos/ui-theme';
-import { type ThemeMode } from '@dxos/ui-types';
+import { type ChromaticPalette, type ThemeMode } from '@dxos/ui-types';
 import { hexToHue, isTruthy } from '@dxos/util';
 
 import { baseTheme, createFontTheme, editorGutter } from '../styles';
@@ -198,13 +197,13 @@ export type ThemeExtensionsOptions = {
 
 export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'bs-full is-full',
+    className: 'h-full w-full',
   },
 } as const;
 
 export const fullWidth: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'is-full',
+    className: 'w-full',
   },
 } as const;
 
@@ -263,7 +262,7 @@ export const createDataExtensions = <T>({ id, text, messenger, identity }: DataE
 
   if (messenger && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
+    const hue = (identity?.profile?.data?.hue as ChromaticPalette | undefined) ?? hexToHue(peerId ?? '0');
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
@@ -271,8 +270,8 @@ export const createDataExtensions = <T>({ id, text, messenger, identity }: DataE
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {
-            darkColor: `var(--dx-${hue}Cursor)`,
-            lightColor: `var(--dx-${hue}Cursor)`,
+            darkColor: `var(--color-${hue}-border)`,
+            lightColor: `var(--color-${hue}-border)`,
             displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
           },
         }),

package/src/extensions/folding.ts

@@ -19,10 +19,10 @@ export const folding = (): Extension => {
     foldGutter({
       markerDOM: (open) => {
         return Domino.of('div')
-          .classNames('flex bs-full justify-center items-center')
+          .classNames('flex h-full justify-center items-center')
           .children(
             Domino.of('svg', Domino.SVG)
-              .classNames(mx('is-4 bs-4 cursor-pointer', open && 'rotate-90'))
+              .classNames(mx('w-4 h-4 cursor-pointer', open && 'rotate-90'))
               .children(
                 Domino.of('use', Domino.SVG).attributes({
                   href: Domino.icon('ph--caret-right--regular'),

package/src/extensions/index.ts

@@ -4,7 +4,7 @@
 
 export * from './annotations';
 export * from './autocomplete';
-export * from './autoscroll';
+export * from './auto-scroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
@@ -26,8 +26,8 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './replacer';
+export * from './scroller';
 export * from './selection';
-export * from './scrolling';
 export * from './state';
 export * from './submit';
 export * from './tags';

package/src/extensions/markdown/decorate.ts

@@ -56,7 +56,6 @@ class LinkButton extends WidgetType {
     return this.url === other.url;
   }
 
-  // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
@@ -251,7 +250,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 from: mark.from,
                 to: mark.from + len,
                 deco: Decoration.replace({
-                  widget: new TextWidget(num, markdownTheme.heading(level)),
+                  widget: new TextWidget(num, markdownTheme.heading(level).className),
                 }),
               });
             }
@@ -457,7 +456,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               from: marks[1].from,
               to: node.to,
               deco: options.renderLinkButton
-                ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                ? Decoration.replace({
+                    widget: new LinkButton(url, options.renderLinkButton),
+                  })
                 : hide,
             });
           }

package/src/extensions/markdown/highlight.ts

@@ -9,6 +9,12 @@ import { type MarkdownConfig, Table } from '@lezer/markdown';
 
 import { fontBody, markdownTheme } from '../../styles';
 
+const styles = {
+  code: 'font-mono no-underline! text-cm-code',
+  codeMark: 'font-mono text-cm-code-mark',
+  mark: 'opacity-50',
+};
+
 /**
  * Custom tags defined and processed by the GFM lezer extension.
  * https://github.com/lezer-parser/markdown
@@ -114,7 +120,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           markdownTags.LinkReference,
           markdownTags.ListMark,
         ],
-        class: markdownTheme.mark,
+        class: styles.mark,
       },
 
       // Markdown marks.
@@ -126,7 +132,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           markdownTags.QuoteMark,
           markdownTags.EmphasisMark,
         ],
-        class: markdownTheme.mark,
+        class: styles.mark,
       },
 
       // E.g., code block language (after ```).
@@ -136,7 +142,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
           tags.function(tags.variableName),
           tags.labelName,
         ],
-        class: markdownTheme.codeMark,
+        class: styles.codeMark,
       },
 
       // Fonts.
@@ -145,13 +151,21 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
         class: 'font-mono',
       },
 
-      // Headings.
-      { tag: tags.heading1, class: markdownTheme.heading(1) },
-      { tag: tags.heading2, class: markdownTheme.heading(2) },
-      { tag: tags.heading3, class: markdownTheme.heading(3) },
-      { tag: tags.heading4, class: markdownTheme.heading(4) },
-      { tag: tags.heading5, class: markdownTheme.heading(5) },
-      { tag: tags.heading6, class: markdownTheme.heading(6) },
+      // Headings — use CSS properties only (no class:) so CodeMirror generates scoped CSS via
+      // StyleModule that overrides vscodeDarkStyle's t.heading rule. When class: is present,
+      // HighlightStyle silently ignores all other CSS properties (they're mutually exclusive).
+      // Font sizes use Tailwind v4 CSS variables so nothing is hardcoded.
+      {
+        tag: tags.heading,
+        color: 'var(--color-cm-heading) !important',
+        fontWeight: '300',
+      },
+      { tag: tags.heading1, ...markdownTheme.heading(1) },
+      { tag: tags.heading2, ...markdownTheme.heading(2) },
+      { tag: tags.heading3, ...markdownTheme.heading(3) },
+      { tag: tags.heading4, ...markdownTheme.heading(4) },
+      { tag: tags.heading5, ...markdownTheme.heading(5) },
+      { tag: tags.heading6, ...markdownTheme.heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: 'italic' },
@@ -165,7 +179,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
       // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: markdownTheme.code,
+        class: styles.code,
       },
 
       {

package/src/extensions/markdown/link.ts

@@ -12,39 +12,33 @@ import { tooltipContent } from '@dxos/ui-theme';
 import { type RenderCallback } from '../../types';
 
 export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
-  return hoverTooltip(
-    (view, pos, side) => {
-      const syntax = syntaxTree(view.state).resolveInner(pos, side);
-      let link = null;
-      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-        link = node.name === 'Link' ? node : null;
-      }
+  return hoverTooltip((view, pos, side) => {
+    const syntax = syntaxTree(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === 'Link' ? node : null;
+    }
 
-      const url = link && link.getChild('URL');
-      if (!url || !link) {
-        return null;
-      }
+    const url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
 
-      const urlText = view.state.sliceDoc(url.from, url.to);
-      if (urlText.startsWith('dxn')) {
-        return null;
-      }
-      return {
-        pos: link.from,
-        end: link.to,
-        // NOTE: Forcing above causes the tooltip to flicker.
-        // above: true,
-        create: () => {
-          const el = document.createElement('div');
-          el.className = tooltipContent({});
-          renderTooltip(el, { url: urlText }, view);
-          return { dom: el, offset: { x: 0, y: 4 } };
-        },
-      };
-    },
-    {
-      // NOTE: 0 = default of 300ms.
-      hoverTime: 1,
-    },
-  );
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    if (urlText.startsWith('dxn')) {
+      return null;
+    }
+
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipContent({});
+        renderTooltip(el, { url: urlText }, view);
+        return { dom: el, offset: { x: 0, y: 4 } };
+      },
+    };
+  });
 };

package/src/extensions/markdown/styles.ts

@@ -18,7 +18,7 @@ export const formattingStyles = EditorView.theme({
     width: '100%',
     height: '0',
     verticalAlign: 'middle',
-    borderTop: '1px solid var(--dx-cmSeparator)',
+    borderTop: '1px solid var(--color-cm-separator)',
     opacity: 0.5,
   },
 
@@ -43,8 +43,8 @@ export const formattingStyles = EditorView.theme({
    * Blockquote.
    */
   '& .cm-blockquote': {
-    background: 'var(--dx-cmCodeblock)',
-    borderLeft: '2px solid var(--dx-cmSeparator)',
+    background: 'var(--color-cm-codeblock)',
+    borderLeft: '2px solid var(--color-cm-separator)',
     paddingLeft: '1rem',
     margin: '0',
   },
@@ -56,7 +56,7 @@ export const formattingStyles = EditorView.theme({
     fontFamily: fontMono,
   },
   '& .cm-codeblock-line': {
-    background: 'var(--dx-cmCodeblock)',
+    background: 'var(--color-cm-codeblock)',
     paddingInline: '1rem !important',
   },
   '& .cm-codeblock-start': {
@@ -92,8 +92,8 @@ export const formattingStyles = EditorView.theme({
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
     textAlign: 'left',
-    borderBottom: '1px solid var(--dx-cmSeparator)',
-    color: 'var(--dx-subdued)',
+    borderBottom: '1px solid var(--color-cm-separator)',
+    color: 'var(--color-subdued)',
   },
   '.cm-table-cell': {
     padding: '2px 16px 2px 0px',