@dxos/ui-editor 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/extensions/tags/xml-tags.ts

@@ -15,13 +15,12 @@ import {
 } from '@codemirror/view';
 import { type FunctionComponent } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { Domino } from '@dxos/ui';
 
 import { type Range } from '../../types';
 import { decorationSetToArray } from '../../util';
 import { crawlerLineEffect } from '../scrolling';
+import { StubWidget, type XmlWidgetNotifier } from './stub';
 import { nodeToJson } from './xml-util';
 
 /**
@@ -98,6 +97,13 @@ export type XmlWidgetDef = {
    * Streaming tags use `cm-xml-<from>` so the same portal id is kept when the closing tag arrives.
    */
   Component?: FunctionComponent<XmlWidgetProps>;
+
+  /**
+   * URL scheme prefixes that trigger this widget on Link/Image markdown nodes.
+   * Example: `[‘dxn:’, ‘echo:’]` matches `[label](dxn:…)` and `![label](echo:…)`.
+   * Block widgets are created for Image nodes; inline widgets for Link nodes.
+   */
+  urlSchemes?: string[];
 };
 
 export type XmlWidgetRegistry = Record<string, XmlWidgetDef>;
@@ -145,10 +151,7 @@ export type XmlWidgetState = {
   Component: FunctionComponent<XmlWidgetProps>;
 };
 
-export interface XmlWidgetNotifier {
-  mounted(widget: XmlWidgetState): void;
-  unmounted(id: string): void;
-}
+export type { XmlWidgetNotifier };
 
 /**
  * Context state.
@@ -207,7 +210,7 @@ export type XmlTagsOptions = {
  * Basic mechanism:
  * - Decorations are created from XML tags that matched the provided Widget registry.
  * - Native widgets are rendered inline.
- * - React/Solid widgets are rendered in portals outside of the editor via the PlaceholderWidget.
+ * - React/Solid widgets are rendered in portals outside of the editor via the StubWidget.
  * - Widget state can be update via effects.
  *   - NOTE: Widget state may be updated BEFORE the widget is mounted.
  */
@@ -244,6 +247,18 @@ const createWidgetMap = (setWidgets?: (widgets: XmlWidgetState[]) => void): XmlW
       widgets.delete(id);
       setWidgets?.([...widgets.values()]);
     },
+    reconcile: (liveIds: Set<string>) => {
+      let changed = false;
+      for (const id of [...widgets.keys()]) {
+        if (!liveIds.has(id)) {
+          widgets.delete(id);
+          changed = true;
+        }
+      }
+      if (changed) {
+        setWidgets?.([...widgets.values()]);
+      }
+    },
   } satisfies XmlWidgetNotifier;
 
   return notifier;
@@ -355,6 +370,18 @@ const createWidgetUpdatePlugin = (
         const widgetStateMap = update.state.field(widgetStateMapStateField);
         const { decorations } = update.state.field(widgetDecorationsField);
 
+        // Prune widgets orphaned by a rebuild (position-keyed ids change when an edit shifts a node).
+        if (update.docChanged) {
+          const liveIds = new Set<string>();
+          for (const range of decorationSetToArray(decorations)) {
+            const widget = range.value?.spec?.widget;
+            if (widget instanceof StubWidget) {
+              liveIds.add(widget.id);
+            }
+          }
+          notifier.reconcile(liveIds);
+        }
+
         // Check for widget update effects and re-render widgets.
         for (const effect of update.transactions.flatMap((tr) => tr.effects)) {
           if (effect.is(xmlTagUpdateEffect)) {
@@ -366,7 +393,7 @@ const createWidgetUpdatePlugin = (
               const widget = deco?.spec?.widget;
 
               // NOTE: If the widget has not yet been mounted, then the root will be null.
-              if (widget && widget instanceof PlaceholderWidget && widget.id === effect.value.id && widget.root) {
+              if (widget && widget instanceof StubWidget && widget.id === effect.value.id && widget.root) {
                 const props = { ...widget.props, ...widgetState };
                 notifier.mounted({ id: widget.id, props, root: widget.root, Component: widget.Component });
               }
@@ -381,17 +408,30 @@ const createWidgetUpdatePlugin = (
  * Builds and maintains decorations for XML widgets.
  * Must be a StateField because block decorations cannot be provided via ViewPlugin.
  */
-const createWidgetDecorationsField = (registry: XmlWidgetRegistry = {}, notifier: XmlWidgetNotifier) =>
-  StateField.define<WidgetDecorationSet>({
+const createWidgetDecorationsField = (registry: XmlWidgetRegistry = {}, notifier: XmlWidgetNotifier) => {
+  // Multiple registry entries may claim the same URL scheme (e.g. one block, one inline).
+  const urlSchemeMap: Map<string, [string, XmlWidgetDef][]> = new Map();
+  for (const [tag, def] of Object.entries(registry)) {
+    for (const scheme of def.urlSchemes ?? []) {
+      const existing = urlSchemeMap.get(scheme);
+      if (existing) {
+        existing.push([tag, def]);
+      } else {
+        urlSchemeMap.set(scheme, [[tag, def]]);
+      }
+    }
+  }
+
+  return StateField.define<WidgetDecorationSet>({
     create: (state) => {
-      return buildDecorations(state, { from: 0, to: state.doc.length }, registry, notifier);
+      return buildDecorations(state, { from: 0, to: state.doc.length }, registry, notifier, urlSchemeMap);
     },
     update: ({ from, streamingFrom, decorations }, tr) => {
       // Check for reset effect.
       for (const effect of tr.effects) {
         if (effect.is(xmlTagResetEffect)) {
           if (tr.docChanged) {
-            return buildDecorations(tr.state, { from: 0, to: tr.state.doc.length }, registry, notifier);
+            return buildDecorations(tr.state, { from: 0, to: tr.state.doc.length }, registry, notifier, urlSchemeMap);
           }
           return { from: 0, decorations: Decoration.none };
         }
@@ -404,11 +444,17 @@ const createWidgetDecorationsField = (registry: XmlWidgetRegistry = {}, notifier
         if (reset) {
           log('document reset', { from, to: state.doc.length });
           // Full rebuild from start.
-          return buildDecorations(state, { from: 0, to: state.doc.length }, registry, notifier);
+          return buildDecorations(state, { from: 0, to: state.doc.length }, registry, notifier, urlSchemeMap);
         } else {
           // Rebuild from the streaming tag start (if active) so the tree walk can detect completion.
           const rebuildFrom = streamingFrom ?? from;
-          const result = buildDecorations(state, { from: rebuildFrom, to: state.doc.length }, registry, notifier);
+          const result = buildDecorations(
+            state,
+            { from: rebuildFrom, to: state.doc.length },
+            registry,
+            notifier,
+            urlSchemeMap,
+          );
           return {
             from: result.from,
             streamingFrom: result.streamingFrom,
@@ -428,6 +474,7 @@ const createWidgetDecorationsField = (registry: XmlWidgetRegistry = {}, notifier
       EditorView.atomicRanges.of((view) => view.state.field(field).decorations || Decoration.none),
     ],
   });
+};
 
 /**
  * Creates widget decorations for XML tags in the document using the syntax tree.
@@ -438,6 +485,7 @@ const buildDecorations = (
   range: Range,
   registry: XmlWidgetRegistry,
   notifier: XmlWidgetNotifier,
+  urlSchemeMap: Map<string, [string, XmlWidgetDef][]>,
 ): WidgetDecorationSet => {
   const context = state.field(widgetContextStateField, false);
   const widgetStateMap = state.field(widgetStateMapStateField, false) ?? {};
@@ -488,7 +536,7 @@ const buildDecorations = (
                 const widget: WidgetType | undefined = factory
                   ? (factory(props) ?? undefined)
                   : Component
-                    ? new PlaceholderWidget(widgetId, Component, props, notifier)
+                    ? new StubWidget(widgetId, Component, props, notifier, false, !!block)
                     : undefined;
 
                 // Add decoration.
@@ -517,6 +565,58 @@ const buildDecorations = (
           // Don't descend into children.
           return false;
         }
+
+        case 'Image':
+        case 'Link': {
+          if (urlSchemeMap.size === 0) {
+            return false;
+          }
+          const urlNode = node.node.getChild('URL');
+          const markNodes = node.node.getChildren('LinkMark');
+          if (!urlNode || markNodes.length < 2) {
+            return false;
+          }
+          const dxn = state.sliceDoc(urlNode.from, urlNode.to);
+          const isBlock = node.type.name === 'Image';
+          const defs = [...urlSchemeMap.entries()].find(([scheme]) => dxn.startsWith(scheme))?.[1];
+          if (!defs) {
+            return false;
+          }
+          const matched = defs.find(([, d]: [string, XmlWidgetDef]) => !!d.block === isBlock);
+          if (!matched) {
+            return false;
+          }
+          const [tag, def] = matched;
+          const label = state.sliceDoc(markNodes[0].to, markNodes[1].from);
+          const nodeRange = { from: node.node.from, to: node.node.to };
+          const widgetId = `cm-url-${node.from}-${dxn}`;
+          const widgetState = widgetStateMap[widgetId];
+          const props: XmlWidgetProps = {
+            id: widgetId,
+            _tag: node.type.name === 'Image' ? 'image' : 'link',
+            range: nodeRange,
+            context,
+            label,
+            dxn,
+            block: isBlock,
+            suggest: isBlock,
+            ...widgetState,
+          };
+          const widget: WidgetType | undefined = def.factory
+            ? (def.factory(props) ?? undefined)
+            : def.Component
+              ? new StubWidget(widgetId, def.Component, props, notifier, false, isBlock)
+              : undefined;
+          if (widget) {
+            builder.add(
+              nodeRange.from,
+              nodeRange.to,
+              Decoration.replace({ widget, block: isBlock, atomic: true, inclusive: true, tag }),
+            );
+            last = nodeRange.to - 1;
+          }
+          return false;
+        }
       }
     },
   });
@@ -567,7 +667,7 @@ const buildDecorations = (
         const widget: WidgetType | undefined = def.factory
           ? (def.factory(mergedProps) ?? undefined)
           : def.Component
-            ? new PlaceholderWidget(widgetId, def.Component, mergedProps, notifier, true)
+            ? new StubWidget(widgetId, def.Component, mergedProps, notifier, true)
             : undefined;
 
         if (widget) {
@@ -598,61 +698,3 @@ const buildDecorations = (
 
   return { from: last, streamingFrom, decorations: builder.finish() };
 };
-
-/**
- * Placeholder for widgets.
- */
-class PlaceholderWidget<TProps extends XmlWidgetProps> extends WidgetType {
-  #root: HTMLElement | null = null;
-  #view: EditorView | undefined;
-
-  constructor(
-    readonly id: string,
-    readonly Component: FunctionComponent<TProps>,
-    readonly props: TProps,
-    readonly notifier: XmlWidgetNotifier,
-    readonly streaming?: boolean,
-  ) {
-    super();
-    invariant(id);
-  }
-
-  get root(): HTMLElement | null {
-    return this.#root;
-  }
-
-  override eq(other: this) {
-    // Streaming widgets always need updating (content changes on each tick).
-    if (this.streaming) {
-      return false;
-    }
-
-    return this.id === other.id;
-  }
-
-  override ignoreEvent() {
-    return true;
-  }
-
-  override toDOM(view: EditorView) {
-    this.#view = view;
-    // NOTE: Set min-height to avoid jumps while scrolling.
-    this.#root = Domino.of('div').classNames('min-h-[24px]').root;
-    const props = Object.assign({}, this.props, { view }) as TProps;
-    this.notifier.mounted({ id: this.id, root: this.#root, props, Component: this.Component });
-    return this.#root;
-  }
-
-  override updateDOM(dom: HTMLElement) {
-    this.#root = dom;
-    const props = Object.assign({}, this.props, { view: this.#view }) as TProps;
-    this.notifier.mounted({ id: this.id, root: this.#root, props, Component: this.Component });
-    return true;
-  }
-
-  override destroy(_dom: HTMLElement) {
-    this.notifier.unmounted(this.id);
-    this.#root = null;
-    this.#view = undefined;
-  }
-}

package/src/extensions/tags/xml-util.test.ts

@@ -11,7 +11,7 @@ import { trim } from '@dxos/util';
 import { extendedMarkdown } from './extended-markdown';
 import TEXT from './testing/text.md?raw';
 import { xmlTags } from './xml-tags';
-import { nodeToJson, type Tag } from './xml-util';
+import { type Tag, nodeToJson } from './xml-util';
 
 type ParsedElement = Tag & {
   /** Element spans the entire document (opening through closing tag). */

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export { type Extension, EditorState } from '@codemirror/state';
+export { EditorState, type Extension } from '@codemirror/state';
 export { EditorView, keymap } from '@codemirror/view';
 export { tags } from '@lezer/highlight';
 

package/src/styles/theme.ts

@@ -151,7 +151,6 @@ export const baseTheme = EditorView.baseTheme({
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
-    borderRight: '1px solid var(--color-subdued-separator)',
     color: 'var(--color-subdued)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {

package/dist/types/src/extensions/preview/index.d.ts

@@ -1,2 +0,0 @@
-export * from './preview';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/extensions/preview/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/preview/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/extensions/preview/preview.d.ts

@@ -1,34 +0,0 @@
-import { type EditorState, type Extension } from '@codemirror/state';
-import { type SyntaxNode } from '@lezer/common';
-import { type Database } from '@dxos/echo';
-export type PreviewBlock = {
-    link: PreviewLinkRef;
-    el: HTMLElement;
-};
-export type PreviewLinkRef = {
-    suggest?: boolean;
-    block?: boolean;
-    label: string;
-    dxn: string;
-};
-export type PreviewLinkTarget = {
-    label: string;
-    text?: string;
-    object?: any;
-};
-export type PreviewOptions = {
-    db?: Database.Database;
-    addBlockContainer?: (block: PreviewBlock) => void;
-    removeBlockContainer?: (block: PreviewBlock) => void;
-};
-/**
- * Create preview decorations.
- */
-export declare const preview: (options?: PreviewOptions) => Extension;
-/**
- * Link references.
- *  [Label](echo:/123) Inline reference
- * ![Label](echo:/123) Block reference
- */
-export declare const getLinkRef: (state: EditorState, node: SyntaxNode) => PreviewLinkRef | undefined;
-//# sourceMappingURL=preview.d.ts.map

package/dist/types/src/extensions/preview/preview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/preview/preview.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAE/G,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,QAAQ,EAAU,MAAM,YAAY,CAAC;AAGnD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,WAAW,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,OAAO,aAAa,cAAc,KAAQ,SA8BtD,CAAC;AA0FF;;;;GAIG;AACH,eAAO,MAAM,UAAU,UAAW,WAAW,QAAQ,UAAU,KAAG,cAAc,GAAG,SAclF,CAAC"}

package/dist/types/src/extensions/tags/fader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fader.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/tags/fader.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,mBAAmB,CAAC;AAO5E,MAAM,MAAM,YAAY,GAAG;IACzB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA6KlD,CAAC"}

package/dist/types/src/extensions/tags/typewriter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/tags/typewriter.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,SAAS,EAIf,MAAM,mBAAmB,CAAC;AAK3B,4FAA4F;AAC5F,eAAO,MAAM,gBAAgB,qDAA+B,CAAC;AAE7D;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,sDAAgC,CAAC;AAiCtE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mFAAmF;IACnF,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,aAAa,iBAAiB,KAAQ,SA0N5D,CAAC;AA6MF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,qBAAc,MAoD5D,CAAC"}

package/dist/types/src/extensions/tags/typewriter.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"typewriter.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/tags/typewriter.test.ts"],"names":[],"mappings":""}

package/src/extensions/preview/preview.ts

@@ -1,242 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
-import { type SyntaxNode } from '@lezer/common';
-
-import { type Database, Entity } from '@dxos/echo';
-import { EID, URI } from '@dxos/keys';
-
-export type PreviewBlock = {
-  link: PreviewLinkRef;
-  el: HTMLElement;
-};
-
-export type PreviewLinkRef = {
-  suggest?: boolean;
-  block?: boolean;
-  label: string;
-  dxn: string;
-};
-
-export type PreviewLinkTarget = {
-  label: string;
-  text?: string;
-  object?: any;
-};
-
-export type PreviewOptions = {
-  db?: Database.Database;
-  addBlockContainer?: (block: PreviewBlock) => void;
-  removeBlockContainer?: (block: PreviewBlock) => void;
-};
-
-const labelResolvedEffect = StateEffect.define<void>();
-
-/**
- * Create preview decorations.
- */
-export const preview = (options: PreviewOptions = {}): Extension => {
-  // Mutable ref so the StateField's onLoad callback can dispatch into the view.
-  const viewRef: { current: EditorView | undefined } = { current: undefined };
-
-  return [
-    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins".
-    StateField.define<DecorationSet>({
-      create: (state) => buildDecorations(state, options, viewRef),
-      update: (decorations, tr) => {
-        if (tr.docChanged || tr.effects.some((effect) => effect.is(labelResolvedEffect))) {
-          return buildDecorations(tr.state, options, viewRef);
-        }
-
-        return decorations.map(tr.changes);
-      },
-      provide: (field) => [
-        EditorView.decorations.from(field),
-        EditorView.atomicRanges.of((view) => view.state.field(field)),
-      ],
-    }),
-    ViewPlugin.define((view) => {
-      viewRef.current = view;
-      return {
-        destroy() {
-          viewRef.current = undefined;
-        },
-      };
-    }),
-  ];
-};
-
-/**
- * Resolve a DXN to a display label using the database.
- */
-const resolveLabel = (
-  db: Database.Database,
-  dxnStr: string,
-  viewRef: { current: EditorView | undefined },
-): string | undefined => {
-  const echoUri = EID.tryParse(dxnStr);
-  const dxnRef = echoUri ?? (dxnStr.startsWith('dxn:') ? URI.make(dxnStr) : undefined);
-  if (!dxnRef) {
-    return;
-  }
-
-  const ref = db.makeRef(dxnRef);
-  const target = ref.target;
-  if (target) {
-    return Entity.getLabel(target);
-  }
-
-  // Object not loaded yet — schedule a decoration rebuild when it resolves.
-  void ref.tryLoad().then(() => {
-    viewRef.current?.dispatch({ effects: labelResolvedEffect.of(undefined) });
-  });
-};
-
-/**
- * Echo references are represented as markdown reference links.
- * https://www.markdownguide.org/basic-syntax/#reference-style-links
- */
-const buildDecorations = (
-  state: EditorState,
-  options: PreviewOptions,
-  viewRef: { current: EditorView | undefined },
-): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        //
-        // Inline widget.
-        // [Label](echo:/123)
-        //
-        case 'Link': {
-          const link = getLinkRef(state, node.node);
-          if (link) {
-            const resolved = options.db ? resolveLabel(options.db, link.dxn, viewRef) : undefined;
-            const displayLink = resolved ? { ...link, label: resolved } : link;
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                widget: new PreviewInlineWidget(options, displayLink),
-                side: 1,
-              }),
-            );
-          }
-          return false;
-        }
-
-        //
-        // Block widget (transclusion).
-        // ![Label](echo:/123)
-        //
-        case 'Image': {
-          if (options.addBlockContainer && options.removeBlockContainer) {
-            const link = getLinkRef(state, node.node);
-            if (link) {
-              builder.add(
-                node.from,
-                node.to,
-                Decoration.replace({
-                  block: true,
-                  widget: new PreviewBlockWidget(options, link),
-                }),
-              );
-            }
-          }
-          return false;
-        }
-      }
-    },
-  });
-
-  return builder.finish();
-};
-
-/**
- * Link references.
- *  [Label](echo:/123) Inline reference
- * ![Label](echo:/123) Block reference
- */
-export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
-  const mark = node.getChildren('LinkMark');
-  const urlNode = node.getChild('URL');
-  if (mark && urlNode) {
-    const dxn = state.sliceDoc(urlNode.from, urlNode.to);
-    if (dxn.startsWith('dxn:') || dxn.startsWith('echo:')) {
-      const label = state.sliceDoc(mark[0].to, mark[1].from);
-      return {
-        block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
-        label,
-        dxn,
-      };
-    }
-  }
-};
-
-/**
- * Inline widget.
- *  [Label](echo:/123)
- */
-class PreviewInlineWidget extends WidgetType {
-  constructor(
-    readonly _options: PreviewOptions,
-    readonly _link: PreviewLinkRef,
-  ) {
-    super();
-  }
-
-  // override ignoreEvent() {
-  //   return false;
-  // }
-
-  override eq(other: this) {
-    return this._link.dxn === other._link.dxn && this._link.label === other._link.label;
-  }
-
-  override toDOM(_view: EditorView) {
-    const root = document.createElement('dx-anchor');
-    root.classList.add('dx-tag--anchor');
-    root.textContent = this._link.label;
-    root.setAttribute('dxn', this._link.dxn);
-    return root;
-  }
-}
-
-/**
- * Block widget (e.g., for surfaces).
- * ![Label][echo:/123]
- */
-class PreviewBlockWidget extends WidgetType {
-  constructor(
-    readonly _options: PreviewOptions,
-    readonly _link: PreviewLinkRef,
-  ) {
-    super();
-  }
-
-  // override ignoreEvent() {
-  //   return true;
-  // }
-
-  override eq(other: this) {
-    return this._link.dxn === other._link.dxn;
-  }
-
-  override toDOM(_view: EditorView) {
-    const root = document.createElement('div');
-    root.classList.add('cm-preview-block', 'dx-density-md');
-    this._options.addBlockContainer?.({ link: this._link, el: root });
-    return root;
-  }
-
-  override destroy(root: HTMLDivElement) {
-    this._options.removeBlockContainer?.({ link: this._link, el: root });
-  }
-}