@dxos/ui-editor 0.0.0 → 0.8.4-main.1c7ec43d41

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

@@ -22,7 +22,6 @@ import { isNonNullable } from '@dxos/util';
 
 import { type Comment, type Range, type RenderCallback } from '../types';
 import { Cursor, singleValueFacet, wrapWithCatch } from '../util';
-
 import { documentId } from './selection';
 
 //
@@ -103,14 +102,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.test.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { markdown, markdownLanguage, insertNewlineContinueMarkup } from '@codemirror/lang-markdown';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { describe, test } from 'vitest';
+
+import { createBasicExtensions } from './factories';
+
+describe('createBasicExtensions readOnly', () => {
+  test('drops user-initiated edits when readOnly is true', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({
+      changes: { from: state.doc.length, insert: ' world' },
+      userEvent: 'input.type',
+    });
+    expect(tr.state.doc.toString()).toBe('hello');
+  });
+
+  for (const userEvent of ['delete.forward', 'undo', 'redo']) {
+    test(`drops '${userEvent}' user events when readOnly is true`, ({ expect }) => {
+      const state = EditorState.create({
+        doc: 'hello',
+        extensions: [createBasicExtensions({ readOnly: true })],
+      });
+      const tr = state.update({
+        changes: { from: state.doc.length, insert: ' world' },
+        userEvent,
+      });
+      expect(tr.state.doc.toString()).toBe('hello');
+    });
+  }
+
+  test('allows programmatic dispatches (no userEvent) when readOnly is true', ({ expect }) => {
+    // Streaming consumers (e.g. MarkdownStream) populate the doc programmatically — those
+    // transactions must pass even though the editor is read-only to the user.
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({ changes: { from: state.doc.length, insert: ' world' } });
+    expect(tr.state.doc.toString()).toBe('hello world');
+  });
+
+  test('selection-only transactions still apply when readOnly', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: true })],
+    });
+    const tr = state.update({ selection: EditorSelection.cursor(2) });
+    expect(tr.state.selection.main.head).toBe(2);
+  });
+
+  test('doc-changing transactions apply normally when readOnly is false', ({ expect }) => {
+    const state = EditorState.create({
+      doc: 'hello',
+      extensions: [createBasicExtensions({ readOnly: false })],
+    });
+    const tr = state.update({ changes: { from: state.doc.length, insert: ' world' } });
+    expect(tr.state.doc.toString()).toBe('hello world');
+  });
+
+  // Regression: in MarkdownStream `readOnly: true` must also block the markdown extension's
+  // Enter handler (`insertNewlineContinueMarkup`), which programmatically dispatches a list
+  // continuation regardless of the readOnly facet.
+  test('markdown insertNewlineContinueMarkup is suppressed when readOnly', ({ expect }) => {
+    const doc = '- one\n- two';
+    const state = EditorState.create({
+      doc,
+      selection: EditorSelection.cursor(doc.length),
+      extensions: [createBasicExtensions({ readOnly: true }), markdown({ base: markdownLanguage })],
+    });
+    let dispatched: any;
+    insertNewlineContinueMarkup({
+      state,
+      dispatch: (tr) => {
+        dispatched = tr;
+      },
+    });
+    if (dispatched) {
+      expect(dispatched.state.doc.toString()).toBe(doc);
+    }
+  });
+});

package/src/extensions/factories.ts

@@ -17,7 +17,6 @@ import {
   keymap,
   lineNumbers,
   placeholder,
-  scrollPastEnd,
 } from '@codemirror/view';
 import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -27,15 +26,14 @@ 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';
-
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
+import { scrollPastEnd } from './scroll-past-end';
 
 //
 // Basic
@@ -145,6 +143,19 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
     props.lineWrapping && EditorView.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
+    // `EditorState.readOnly` is advisory — CodeMirror doesn't auto-reject doc-changing
+    // transactions. Some extensions (e.g. `@codemirror/lang-markdown`'s Enter handler that
+    // continues a list) dispatch programmatic edits regardless. Drop user-initiated edits
+    // (`input` / `delete` keymap dispatches plus `undo` / `redo` from the history extension)
+    // but pass programmatic dispatches — streaming `MarkdownStream` and similar consumers
+    // depend on being able to populate the doc themselves.
+    props.readOnly &&
+      EditorState.transactionFilter.of((tr) =>
+        tr.docChanged &&
+        (tr.isUserEvent('input') || tr.isUserEvent('delete') || tr.isUserEvent('undo') || tr.isUserEvent('redo'))
+          ? []
+          : tr,
+      ),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabbable && tabbable,
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -181,12 +192,12 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
 export type ThemeExtensionsOptions = {
   monospace?: boolean;
   themeMode?: ThemeMode;
+  scrollbarThin?: boolean;
   slots?: {
     editor?: {
       className?: string;
     };
-    scroll?: {
-      // NOTE: Do not apply vertical padding to scroll container.
+    scroller?: {
       className?: string;
     };
     content?: {
@@ -198,13 +209,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;
 
@@ -220,11 +231,12 @@ export const defaultStyles = {
  */
 export const createThemeExtensions = ({
   monospace,
-  themeMode,
+  scrollbarThin,
   slots: slotsProp,
   syntaxHighlighting: syntaxHighlightingProp,
+  themeMode,
 }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, slotsProp, defaultThemeSlots);
+  const slots: NonNullable<ThemeExtensionsOptions['slots']> = defaultsDeep({}, slotsProp, defaultThemeSlots);
   return [
     baseTheme,
     EditorView.darkTheme.of(themeMode === 'dark'),
@@ -233,11 +245,16 @@ export const createThemeExtensions = ({
       syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-    slots.scroll?.className &&
+    (slots.scroller?.className || scrollbarThin) &&
       ViewPlugin.fromClass(
         class {
           constructor(view: EditorView) {
-            view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
+            if (slots.scroller?.className) {
+              view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
+            }
+            if (scrollbarThin) {
+              view.scrollDOM.style.setProperty('--scrollbar-size', '4px');
+            }
           }
         },
       ),
@@ -263,7 +280,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 +288,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

@@ -17,37 +17,20 @@ export const folding = (): Extension => {
       placeholderDOM: () => Domino.of('span').root,
     }),
     foldGutter({
+      // NOTE: We can't animate since the element is remounted on state change.
       markerDOM: (open) => {
         return Domino.of('div')
-          .classNames('flex bs-full justify-center items-center')
-          .children(
+          .classNames('flex h-full justify-center items-center')
+          .append(
             Domino.of('svg', Domino.SVG)
-              .classNames(mx('is-4 bs-4 cursor-pointer', open && 'rotate-90'))
-              .children(
+              .classNames(mx('w-4 h-4 cursor-pointer', open && 'rotate-90'))
+              .append(
                 Domino.of('use', Domino.SVG).attributes({
                   href: Domino.icon('ph--caret-right--regular'),
                 }),
               ),
           ).root;
       },
-      // TODO(burdon): markerDOM is called either way, defeating the animation: transition-transform duration-200
-      // domEventHandlers: {
-      //   click: (view, line: BlockInfo, event) => {
-      //     event.preventDefault();
-      //     event.stopPropagation();
-      //     const range = foldable(view.state, line.from, line.to);
-      //     if (range) {
-      //       view.dispatch({ effects: foldEffect.of(range) });
-      //       (event.target as HTMLElement)?.classList.add('rotate-90');
-      //     } else {
-      //       foldedRanges(view.state).between(line.from, line.to, (from, to) => {
-      //         view.dispatch({ effects: unfoldEffect.of({ from, to }) });
-      //         (event.target as HTMLElement)?.classList.remove('rotate-90');
-      //       });
-      //     }
-      //     return true;
-      //   },
-      // },
     }),
     EditorView.theme({
       '.cm-foldGutter': {

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,9 +26,10 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './replacer';
+export * from './scroll-past-end';
+export * from './scroller';
 export * from './selection';
-export * from './scrolling';
+export * from './snippets';
 export * from './state';
 export * from './submit';
 export * from './tags';
-export * from './typewriter';

package/src/extensions/markdown/action.ts

@@ -8,7 +8,6 @@ import { type Node } from '@dxos/app-graph';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { createComment } from '../comments';
-
 import {
   Inline,
   List,

package/src/extensions/markdown/bundle.ts

@@ -6,8 +6,7 @@ import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { xml } from '@codemirror/lang-xml';
-import { LanguageDescription, syntaxHighlighting } from '@codemirror/language';
+import { type LanguageDescription, foldNodeProp, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
@@ -18,6 +17,8 @@ import { isTruthy } from '@dxos/util';
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
+  /** Additional fenced-code languages prepended to the standard language-data list. */
+  codeLanguages?: LanguageDescription[];
   extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
   setextHeading?: boolean;
@@ -45,8 +46,9 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       base: markdownLanguage,
 
       // Languages for syntax highlighting fenced code blocks.
+      // Caller-supplied languages are checked first so they can override defaults.
       defaultCodeLanguage: jsonLanguage,
-      codeLanguages: languages,
+      codeLanguages: [...(options.codeLanguages ?? []), ...languages],
 
       // Don't complete HTML tags.
       completeHTMLTags: false,
@@ -56,6 +58,10 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
         // GFM provided by default.
         markdownTagsExtensions,
         ...(options.extensions ?? defaultExtensions()),
+        // Disable folding for fenced code blocks by overriding foldNodeProp.
+        // Note: returning null from foldService does not prevent syntaxFolding fallback,
+        // so we must override the node prop directly on the FencedCode node type.
+        noFencedCodeFolding,
       ],
     }),
 
@@ -77,12 +83,20 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
   ];
 };
 
-const xmlLanguageDesc = LanguageDescription.of({
-  name: 'xml',
-  alias: ['html', 'xhtml'],
-  extensions: ['xml', 'xhtml'],
-  load: async () => xml(),
-});
+/**
+ * Disables folding for fenced code blocks.
+ *
+ * foldService cannot block folding because returning null just defers to the next service,
+ * and CodeMirror always falls back to syntaxFolding (which reads foldNodeProp).
+ * The only reliable fix is to override foldNodeProp on FencedCode to return null.
+ */
+const noFencedCodeFolding: MarkdownConfig = {
+  props: [
+    foldNodeProp.add({
+      FencedCode: () => null,
+    }),
+  ],
+};
 
 /**
  * Default customizations.

package/src/extensions/markdown/decorate.ts

@@ -8,12 +8,10 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
-import { mx } from '@dxos/ui-theme';
 
 import { type HeadingLevel, markdownTheme } from '../../styles';
 import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
-
 import { adjustChanges } from './changes';
 import { image } from './image';
 import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
@@ -56,7 +54,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);
@@ -132,8 +129,8 @@ class TextWidget extends WidgetType {
 const hide = Decoration.replace({});
 const blockQuote = Decoration.line({ class: 'cm-blockquote' });
 const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
+const fencedCodeLineFirst = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-start' });
+const fencedCodeLineLast = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-end' });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -244,14 +241,14 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               headers
                 .slice(from - 1)
                 .map((level) => level?.number ?? 0)
-                .join('.') + ' ';
+                .join('.') + '). ';
 
             if (num.length) {
               atomicDecoRanges.push({
                 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),
                 }),
               });
             }
@@ -440,11 +437,11 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
           decoRanges.push({
             from: marks[0].to,
-            to: marks[1].from,
+            to: !editing && options.renderLinkButton ? node.to : marks[1].from,
             deco: Decoration.mark({
               tagName: 'a',
               attributes: {
-                class: 'cm-link',
+                class: options.renderLinkButton ? 'cm-link cm-link-with-button' : 'cm-link',
                 href: url,
                 rel: 'noreferrer',
                 target: '_blank',
@@ -457,7 +454,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,
             });
           }
@@ -527,8 +526,12 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
   }
 
   const atomicDeco = new RangeSetBuilder<Decoration>();
-  for (const { from, to, deco: d } of atomicDecoRanges) {
-    atomicDeco.add(from, to, d);
+  for (const { from, to, deco } of atomicDecoRanges) {
+    // Skip replace decorations that span line breaks (not allowed by CodeMirror plugins).
+    if (from < to && state.doc.lineAt(from).number !== state.doc.lineAt(to).number) {
+      continue;
+    }
+    atomicDeco.add(from, to, deco);
   }
 
   return {

package/src/extensions/markdown/formatting.ts

@@ -1245,20 +1245,15 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook provides an extension to compute the current formatting state.
+ * Extension to compute and publish the current formatting state.
+ * @param onStateChange - Callback invoked with the current formatting state when the editor state changes.
+ * @param delay - Debounce/throttle delay in ms.
  */
-export const formattingListener = (stateProvider: () => Formatting | undefined, delay = 100): Extension => {
+export const formattingListener = (onStateChange: (state: Formatting) => void, delay = 100): Extension => {
   return EditorView.updateListener.of(
     debounceAndThrottle((update: ViewUpdate) => {
       if (update.docChanged || update.selectionSet) {
-        const state = stateProvider();
-        if (!state) {
-          return;
-        }
-
-        Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
-          state[key as keyof Formatting] = active as any;
-        });
+        onStateChange(getFormatting(update.state));
       }
     }, delay),
   );

package/src/extensions/markdown/highlight.ts

@@ -145,13 +145,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' },

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/parser.test.ts

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { parser } from '@lezer/markdown';
 import { describe, test } from 'vitest';