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

package/src/extensions/automerge/automerge.ts

@@ -5,12 +5,13 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { type DocAccessor } from '@dxos/react-client/echo';
+import { DocAccessor } from '@dxos/react-client/echo';
 
 import { Cursor } from '../../util';
+import { initialSync } from '../state';
 
 import { cursorConverter } from './cursor';
 import { type State, isReconcile, updateHeadsEffect } from './defs';
@@ -18,11 +19,13 @@ import { Syncer } from './sync';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
+    create: () => {
+      return {
+        path: accessor.path.slice(),
+        lastHeads: A.getHeads(accessor.handle.doc()!),
+        unreconciledTransactions: [],
+      };
+    },
 
     update: (value, tr) => {
       const result: State = {
@@ -64,6 +67,18 @@ export const automerge = (accessor: DocAccessor): Extension => {
       class {
         constructor(private readonly _view: EditorView) {
           accessor.handle.addListener('change', this._handleChange);
+
+          requestAnimationFrame(() => {
+            const value = DocAccessor.getValue<string>(accessor);
+            const current = this._view.state.doc.toString();
+            if (value !== current) {
+              // TODO(burdon): This attempts to set the initial state, but creates problems.
+              // this._view.dispatch({
+              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
+              //   annotations: initialSync,
+              // });
+            }
+          });
         }
 
         destroy() {
@@ -77,9 +92,13 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ),
 
     // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
-        syncer.reconcile(view, true);
+        // Only reconcile if it's not an initial sync (to avoid loops)
+        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+        if (!isInitialSync) {
+          syncer.reconcile(view, true);
+        }
       }
     }),
   ];

package/src/extensions/automerge/sync.ts

@@ -8,6 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
+import { log } from '@dxos/log';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
@@ -27,7 +28,6 @@ export class Syncer {
   ) {}
 
   reconcile(view: EditorView, editor: boolean): void {
-    // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
     }
@@ -41,7 +41,9 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView): void {
+  private onEditorChange(view: EditorView): void {
+    log('onEditorChange');
+
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,7 +56,9 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView): void {
+  private onAutomergeChange(view: EditorView): void {
+    log('onAutomergeChange');
+
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A.getHeads(this._handle.doc()!);

package/src/extensions/autoscroll.ts

@@ -5,15 +5,15 @@
 import { StateEffect } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { Domino } from '../util';
+import { Domino } from '@dxos/react-ui';
 
 const lineHeight = 24;
 
 export const scrollToBottomEffect = StateEffect.define<any>();
 
 export type AutoScrollOptions = {
-  overscroll: number;
-  throttle: number;
+  overscroll?: number;
+  throttle?: number;
 };
 
 /**
@@ -23,9 +23,10 @@ export type AutoScrollOptions = {
 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;
+  let buttonContainer: HTMLDivElement | undefined;
+  let lastScrollTop = 0;
+  let scrollCounter = 0;
 
   const hideScrollbar = (view: EditorView) => {
     view.scrollDOM.classList.add('cm-hide-scrollbar');
@@ -37,6 +38,7 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
 
   const scrollToBottom = (view: EditorView) => {
     isPinned = true;
+    scrollCounter = 0;
     buttonContainer?.classList.add('opacity-0');
     requestAnimationFrame(() => {
       hideScrollbar(view);
@@ -48,28 +50,6 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
   };
 
   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.
@@ -81,14 +61,10 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
         }
       });
 
+      // Maybe scroll if doc changed and pinned.
       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) {
+        if (distanceFromBottom >= overscroll) {
           isThrottled = true;
           requestAnimationFrame(() => {
             scrollToBottom(update.view);
@@ -97,29 +73,60 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
           // Reset throttle.
           setTimeout(() => {
             isThrottled = false;
+            scrollToBottom(update.view);
           }, throttle);
         }
       }
     }),
 
+    // Detect user scroll.
+    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
     EditorView.domEventHandlers({
       scroll: (event, view) => {
         const scroller = view.scrollDOM;
+        // Suspect delta goes positive when rendering widgets, so count positive deltas.
+        // TODO(burdon): Detect user scroll directly (wheel, touch, keys, etc.)
+        if (lastScrollTop > scroller.scrollTop) {
+          scrollCounter++;
+        }
+        lastScrollTop = scroller.scrollTop;
         const distanceFromBottom = calcDistance(scroller);
         if (distanceFromBottom === 0) {
           // Pin to bottom.
           isPinned = true;
           buttonContainer?.classList.add('opacity-0');
-        } else if (scroller.scrollTop < lastScrollTop) {
+          scrollCounter = 0;
+        } else if (scrollCounter > 3) {
           // Break pin if user scrolls up.
           isPinned = false;
           buttonContainer?.classList.remove('opacity-0');
         }
-
-        lastScrollTop = scroller.scrollTop;
       },
     }),
 
+    // 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')
+            .children(
+              Domino.of('button')
+                .classNames('dx-button bg-accentSurface')
+                .data('density', 'fine')
+                .children(Domino.of<any>('dx-icon').attributes({ icon: 'ph--arrow-down--regular' }))
+                .on('click', () => {
+                  scrollToBottom(view);
+                }),
+            )
+            .build();
+          scroller?.appendChild(buttonContainer);
+        }
+      },
+    ),
+
+    // Styles.
     EditorView.theme({
       '.cm-scroller': {
         paddingBottom: `${overscroll}px`,
@@ -132,7 +139,6 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
         display: 'none',
       },
 
-      // TODO(burdon): IconButton.
       '.cm-scroll-button': {
         position: 'absolute',
         bottom: '0.5rem',

package/src/extensions/factories.ts

@@ -4,10 +4,9 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { type ChangeSpec, EditorState, type Extension, type TransactionSpec } from '@codemirror/state';
 import {
   EditorView,
   type KeyBinding,
@@ -20,6 +19,7 @@ import {
   placeholder,
   scrollPastEnd,
 } from '@codemirror/view';
+import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
@@ -29,7 +29,7 @@ import { type DocAccessor, type Space } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
-import { hexToHue, isNotFalsy } from '@dxos/util';
+import { hexToHue, isTruthy } from '@dxos/util';
 
 import { editorGutter, editorMonospace } from '../defaults';
 import { type ThemeStyles, defaultTheme } from '../styles';
@@ -42,7 +42,29 @@ import { focus } from './focus';
 // Basic
 //
 
-export const preventNewline = EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr));
+export const filterChars = (chars: RegExp) => {
+  return EditorState.transactionFilter.of((transaction) => {
+    if (!transaction.docChanged) return transaction;
+
+    const changes: ChangeSpec[] = [];
+    transaction.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+      const inserted = text.toString();
+      const filtered = inserted.replace(chars, '');
+      if (inserted !== filtered) {
+        changes.push({
+          from: fromB,
+          to: toB,
+          insert: filtered,
+        });
+      }
+    });
+
+    if (changes.length) {
+      return [transaction, { changes, sequential: true } as TransactionSpec];
+    }
+    return transaction;
+  });
+};
 
 /**
  * https://codemirror.net/docs/extensions
@@ -70,6 +92,7 @@ export type BasicExtensionsOptions = {
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
   search?: boolean;
+  /** NOTE: Do not use with stack sections. */
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
   tabSize?: number;
@@ -139,9 +162,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
           preventDefault: true,
           run: () => true,
         },
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //
@@ -179,20 +202,26 @@ export const fullWidth: ThemeExtensionsOptions['slots'] = {
 
 export const defaultThemeSlots = grow;
 
+export const defaultStyles = {
+  dark: vscodeDarkStyle,
+  light: vscodeLightStyle,
+};
+
 /**
  * https://codemirror.net/examples/styling
  */
 export const createThemeExtensions = ({
   themeMode,
   styles,
-  syntaxHighlighting: syntaxHighlightingProps,
-  slots: _slots,
+  syntaxHighlighting: syntaxHighlightingProp,
+  slots: slotsParam,
 }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
+  const slots = defaultsDeep({}, slotsParam, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    syntaxHighlightingProps && syntaxHighlighting(themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle),
+    syntaxHighlightingProp &&
+      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 &&
@@ -203,7 +232,7 @@ export const createThemeExtensions = ({
           }
         },
       ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //

package/src/extensions/focus.ts

@@ -15,6 +15,7 @@ export const focusField = StateField.define<boolean>({
         return effect.value;
       }
     }
+
     return value;
   },
 });
@@ -25,11 +26,11 @@ export const focusField = StateField.define<boolean>({
 export const focus = [
   focusField,
   EditorView.domEventHandlers({
-    focus: (event, view) => {
-      setTimeout(() => view.dispatch({ effects: focusEffect.of(true) }));
+    focus: (_event, view) => {
+      requestAnimationFrame(() => view.dispatch({ effects: focusEffect.of(true) }));
     },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({ effects: focusEffect.of(false) }));
+    blur: (_event, view) => {
+      requestAnimationFrame(() => view.dispatch({ effects: focusEffect.of(false) }));
     },
   }),
 ];

package/src/extensions/folding.tsx

@@ -7,16 +7,15 @@ import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import React from 'react';
 
-import { Icon } from '@dxos/react-ui';
+import { Domino, Icon } from '@dxos/react-ui';
 
-import { Domino, renderRoot } from '../util';
+import { renderRoot } from '../util';
 
 export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
-// TODO(burdon): Remember folding state (to state).
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
     placeholderDOM: () => {
@@ -25,10 +24,9 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      // TODO(burdon): Use sprite directly.
-      const el = Domino.of('div').classNames('flex h-full items-center').build();
       return renderRoot(
-        el,
+        Domino.of('div').classNames('flex h-full items-center').build(),
+        // TODO(burdon): Use sprite directly.
         <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },

package/src/extensions/hashtag.tsx

@@ -13,7 +13,7 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
-import { getHashColor, mx } from '@dxos/react-ui-theme';
+import { getHashStyles, mx } from '@dxos/react-ui-theme';
 
 class TagWidget extends WidgetType {
   constructor(private _text: string) {
@@ -22,7 +22,7 @@ class TagWidget extends WidgetType {
 
   toDOM(): HTMLSpanElement {
     const span = document.createElement('span');
-    span.className = mx('cm-tag', getHashColor(this._text).tag);
+    span.className = mx('cm-tag', getHashStyles(this._text).surface);
     span.textContent = this._text;
     return span;
   }

package/src/extensions/index.ts

@@ -8,7 +8,6 @@ export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
-export * from './command';
 export * from './comments';
 export * from './debug';
 export * from './dnd';
@@ -22,7 +21,9 @@ export * from './markdown';
 export * from './mention';
 export * from './modes';
 export * from './outliner';
+export * from './popover';
 export * from './preview';
 export * from './selection';
+export * from './state';
 export * from './tags';
 export * from './typewriter';

package/src/extensions/json.ts

@@ -7,7 +7,7 @@ import { type LintSource, linter } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import Ajv, { type ValidateFunction } from 'ajv';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 
 export type JsonExtensionsOptions = {
   schema?: JsonSchemaType;

package/src/extensions/markdown/bundle.ts

@@ -4,14 +4,16 @@
 
 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 { syntaxHighlighting } from '@codemirror/language';
+import { xml } from '@codemirror/lang-xml';
+import { LanguageDescription, 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 { isNotFalsy } from '@dxos/util';
+import { isTruthy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
@@ -43,6 +45,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       base: markdownLanguage,
 
       // Languages for syntax highlighting fenced code blocks.
+      defaultCodeLanguage: jsonLanguage,
       codeLanguages: languages,
 
       // Don't complete HTML tags.
@@ -66,12 +69,21 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
 
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
+
+        // TODO(burdon): Remove?
         ...completionKeymap,
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     ),
   ];
 };
 
+const xmlLanguageDesc = LanguageDescription.of({
+  name: 'xml',
+  alias: ['html', 'xhtml'],
+  extensions: ['xml', 'xhtml'],
+  load: async () => xml(),
+});
+
 /**
  * Default customizations.
  * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
@@ -89,5 +101,5 @@ const noSetExtHeading: MarkdownConfig = {
  * Remove HTML and XML parsing.
  */
 const noHtml: MarkdownConfig = {
-  remove: ['HTMLBlock', 'HTMLTag'],
+  // remove: ['HTMLBlock', 'HTMLTag'],
 };

package/src/extensions/markdown/decorate.ts

@@ -447,6 +447,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               },
             }),
           );
+
           if (!editing) {
             atomicDeco.add(
               marks[1].from,

package/src/extensions/markdown/link.ts

@@ -26,6 +26,9 @@ export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
       }
 
       const urlText = view.state.sliceDoc(url.from, url.to);
+      if (urlText.startsWith('dxn')) {
+        return null;
+      }
       return {
         pos: link.from,
         end: link.to,

package/src/extensions/modes.ts

@@ -11,7 +11,7 @@ import { singleValueFacet } from '../util';
 
 export type EditorInputConfig = {
   type?: string;
-  noTabster?: boolean;
+  ignoreEscape?: boolean;
 };
 
 export const editorInputMode = singleValueFacet<EditorInputConfig>({});
@@ -26,7 +26,7 @@ export const InputModeExtensions: { [mode: string]: Extension } = {
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorInputMode.of({ type: 'vim', noTabster: true }),
+    editorInputMode.of({ type: 'vim', ignoreEscape: true }),
     keymap.of([
       {
         key: 'Alt-Escape',

package/src/extensions/{command/floating-menu.ts → outliner/menu.ts}

@@ -2,19 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 import { type CleanupFn, addEventListener } from '@dxos/async';
 
-import { closeEffect, openEffect } from './action';
-
-export type FloatingMenuOptions = {
+export type MenuOptions = {
   icon?: string;
   height?: number;
   padding?: number;
 };
 
-export const floatingMenu = (options: FloatingMenuOptions = {}) => [
+// TODO(burdon): Replace with popover.
+export const menu = (options: MenuOptions = {}): Extension => [
   ViewPlugin.fromClass(
     class {
       view: EditorView;
@@ -34,12 +34,10 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         {
           const icon = document.createElement('dx-icon');
           icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-          const button = document.createElement('button');
-          button.appendChild(icon);
 
           this.tag = document.createElement('dx-anchor');
-          this.tag.classList.add('cm-ref-tag');
-          this.tag.appendChild(button);
+          this.tag.classList.add('cm-popover-trigger');
+          this.tag.appendChild(icon);
         }
 
         container.appendChild(this.tag);
@@ -65,12 +63,12 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         }
 
         // TODO(burdon): Timer to fade in/out.
-        if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+        /*if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
           this.tag.style.display = 'none';
           this.tag.classList.add('opacity-10');
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = 'block';
-        } else if (
+          this.tag.style.display = '';
+        } else */ if (
           update.docChanged ||
           update.focusChanged ||
           update.geometryChanged ||
@@ -99,7 +97,7 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         this.tag.style.top = `${offsetTop}px`;
         this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = 'block';
+        this.tag.style.display = '';
       }
 
       scheduleUpdate() {
@@ -113,21 +111,18 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ),
 
   EditorView.theme({
-    '.cm-ref-tag': {
+    '.cm-popover-trigger': {
       position: 'fixed',
       padding: '0',
       border: 'none',
       opacity: '0',
-    },
-    '[data-has-focus] & .cm-ref-tag': {
-      opacity: '1',
-    },
-    '.cm-ref-tag button': {
       display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'center',
+      placeContent: 'center',
       width: '2rem',
       height: '2rem',
     },
+    '&:focus-within .cm-popover-trigger': {
+      opacity: '1',
+    },
   }),
 ];