@dxos/react-ui-editor 0.8.4-main.67995b8 → 0.8.4-main.70d3990

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,33 +19,62 @@ import {
   placeholder,
   scrollPastEnd,
 } from '@codemirror/view';
+import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
 import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
-import { type DocAccessor, type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
+import { type Messenger } from '@dxos/protocols';
+import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
 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';
 
 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
 //
 
-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
  * 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;
@@ -63,11 +91,11 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
-  monospace?: boolean;
   placeholder?: string;
   /** 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;
@@ -82,7 +110,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   history: true,
   keymap: 'standard',
   lineWrapping: true,
-  search: true,
+  search: false,
 } as const;
 
 const keymaps: { [key: string]: readonly KeyBinding[] } = {
@@ -111,7 +139,6 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.history && history(),
     props.lineNumbers && [lineNumbers(), editorGutter],
     props.lineWrapping && EditorView.lineWrapping,
-    props.monospace && editorMonospace,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -137,9 +164,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
           preventDefault: true,
           run: () => true,
         },
-      ].filter(isNotFalsy),
+      ].filter(isTruthy),
     ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //
@@ -148,6 +175,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 
 export type ThemeExtensionsOptions = {
   themeMode?: ThemeMode;
+  monospace?: boolean;
   styles?: ThemeStyles;
   syntaxHighlighting?: boolean;
   slots?: {
@@ -155,9 +183,7 @@ export type ThemeExtensionsOptions = {
       className?: string;
     };
     scroll?: {
-      className?: string;
-    };
-    scroller?: {
+      // NOTE: Do not apply vertical padding to scroll container.
       className?: string;
     };
     content?: {
@@ -168,7 +194,7 @@ export type ThemeExtensionsOptions = {
 
 export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'is-full bs-full',
+    className: 'bs-full is-full',
   },
 } as const;
 
@@ -180,41 +206,39 @@ 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,
+  monospace,
   styles,
-  syntaxHighlighting: _syntaxHighlighting,
-  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),
-    // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting &&
-      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
+    monospace && editorMonospace,
+    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 &&
       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+/));
           }
         },
       ),
-  ].filter(isNotFalsy);
+  ].filter(isTruthy);
 };
 
 //
@@ -224,31 +248,30 @@ export const createThemeExtensions = ({
 export type DataExtensionsProps<T> = {
   id: string;
   text?: DocAccessor<T>;
-  space?: Space;
+  messenger?: Messenger;
   identity?: Identity | null;
 };
 
-// TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
+// TODO(burdon): Move out of react-ui-editor?
+export const createDataExtensions = <T>({ id, text, messenger, identity }: DataExtensionsProps<T>): Extension[] => {
   const extensions: Extension[] = [];
   if (text) {
     extensions.push(automerge(text));
   }
 
-  if (space && identity) {
+  if (messenger && identity) {
     const peerId = identity?.identityKey.toHex();
     const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
-
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
-          space,
+          messenger,
           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/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 { createElement, 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,8 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      // TODO(burdon): Use sprite directly.
-      const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
-        el,
+        Domino.of('div').classNames('flex bs-full items-center').build(),
         <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

@@ -4,10 +4,12 @@
 
 export * from './annotations';
 export * from './autocomplete';
+export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
-export * from './command';
+export * from './blocks';
+export * from './bookmarks';
 export * from './comments';
 export * from './debug';
 export * from './dnd';
@@ -19,8 +21,15 @@ export * from './json';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './modal';
 export * from './modes';
 export * from './outliner';
 export * from './preview';
+export * from './replacer';
 export * from './selection';
+export * from './scrolling';
+export * from './state';
+export * from './submit';
+export * from './tab';
+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/listener.ts

@@ -5,34 +5,28 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
+import { isNonNullable } from '@dxos/util';
+
 import { documentId } from './selection';
 
 export type ListenerOptions = {
-  onFocus?: (focusing: boolean) => void;
-  onChange?: (text: string, id: string) => void;
+  onFocus?: (event: { id: string; focusing: boolean }) => void;
+  onChange?: (event: { id: string; text: string }) => void;
 };
 
-/**
- * Event listener.
- * @deprecated Use EditorView.updateListener and listen for specific update events.
- */
 export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
-  const extensions: Extension[] = [];
-
-  onFocus &&
-    extensions.push(
-      EditorView.focusChangeEffect.of((_, focusing) => {
-        onFocus(focusing);
+  return [
+    onFocus &&
+      EditorView.focusChangeEffect.of((state, focusing) => {
+        onFocus({ id: state.facet(documentId), focusing });
         return null;
       }),
-    );
 
-  onChange &&
-    extensions.push(
-      EditorView.updateListener.of((update) => {
-        onChange(update.state.doc.toString(), update.state.facet(documentId));
+    onChange &&
+      EditorView.updateListener.of(({ state, docChanged }) => {
+        if (docChanged) {
+          onChange({ id: state.facet(documentId), text: state.doc.toString() });
+        }
       }),
-    );
-
-  return extensions;
+  ].filter(isNonNullable);
 };

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,23 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { syntaxHighlighting } from '@codemirror/language';
+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 { 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 { isTruthy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
+  extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
+  setextHeading?: boolean;
 };
 
 /**
@@ -42,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.
@@ -51,6 +55,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
+        ...(options.extensions ?? defaultExtensions()),
       ],
     }),
 
@@ -64,8 +69,37 @@ 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
+ */
+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.

package/src/extensions/markdown/decorate.ts

@@ -3,20 +3,21 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorState, Prec, RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type HeadingLevel, theme } from '../../styles';
+import { type RenderCallback } from '../../types';
+import { wrapWithCatch } from '../../util';
+
 import { adjustChanges } from './changes';
 import { image } from './image';
-import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
+import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.
@@ -51,12 +52,12 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this.url === other.url;
   }
 
   // TODO(burdon): Create icon and link directly without react?
-  override toDOM(view: EditorView): HTMLSpanElement {
+  override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
     return el;
@@ -68,11 +69,15 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._checked === other._checked;
   }
 
-  override toDOM(view: EditorView): HTMLSpanElement {
+  override ignoreEvent() {
+    return false;
+  }
+
+  override toDOM(view: EditorView) {
     const input = document.createElement('input');
     input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
@@ -104,10 +109,6 @@ class CheckboxWidget extends WidgetType {
     span.appendChild(input);
     return span;
   }
-
-  override ignoreEvent(): boolean {
-    return false;
-  }
 }
 
 class TextWidget extends WidgetType {
@@ -233,7 +234,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const mark = node.node.firstChild!;
         if (mark?.name === 'HeaderMark') {
           const { from, to = 6 } = options.numberedHeadings ?? {};
-          const text = view.state.sliceDoc(node.from, node.to);
+          const text = state.sliceDoc(node.from, node.to);
           const len = text.match(/[#\s]+/)![0].length;
           if (!from || level < from || level > to) {
             atomicDeco.add(mark.from, mark.from + len, hide);
@@ -426,6 +427,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const editing = editingRange(state, node, focus);
         if (urlNode && marks.length >= 2) {
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          if (options.skip?.({ name: 'Link', url })) {
+            break;
+          }
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
@@ -443,6 +447,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               },
             }),
           );
+
           if (!editing) {
             atomicDeco.add(
               marks[1].from,
@@ -493,15 +498,15 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       tree.iterate({
         from,
         to,
-        enter: wrapWithCatch(enterNode),
-        leave: wrapWithCatch(leaveNode),
+        enter: wrapWithCatch(enterNode, 'decorate.enter'),
+        leave: wrapWithCatch(leaveNode, 'decorate.leave'),
       });
     }
   } else {
     // NOTE: If line numbering then we must iterate from the start of document.
     tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode),
+      enter: wrapWithCatch(enterNode, 'decorate.enter'),
+      leave: wrapWithCatch(leaveNode, 'decorate.leave'),
     });
   }
 
@@ -513,15 +518,20 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
 const forceUpdate = StateEffect.define<null>();
 
+export type NodeData = { name: 'Link'; url: string } | { name: 'Image'; url: string };
+
 export interface DecorateOptions {
   /**
    * Prevents triggering decorations as the cursor moves through the document.
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: RenderCallback<{ url: string }>;
   // TODO(burdon): Additional padding for each line.
   listPaddingLeft?: number;
+  // TODO(burdon): Use consistently.
+  skip?: (node: NodeData) => boolean;
+  // TODO(burdon): Remove.
+  renderLinkButton?: RenderCallback<{ url: string }>;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {
@@ -577,9 +587,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       },
       {
         provide: (plugin) => [
-          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          Prec.low(EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)),
           EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
+          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
         ],
       },
     ),