@dxos/react-ui-editor 0.3.10-main.ee543cf → 0.3.10-next.3e4f36f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.10-main.ee543cf",
+  "version": "0.3.10-next.3e4f36f",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,30 +28,42 @@
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.1.1",
     "@replit/codemirror-vim": "^6.0.14",
+    "@tiptap/core": "2.0.0-beta.220",
+    "@tiptap/extension-collaboration": "2.0.0-beta.220",
+    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.220",
+    "@tiptap/extension-heading": "2.0.0-beta.220",
+    "@tiptap/extension-list-item": "2.0.0-beta.220",
+    "@tiptap/extension-placeholder": "2.0.0-beta.220",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/react": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
     "codemirror": "6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
+    "prosemirror-model": "^1.19.0",
+    "prosemirror-state": "^1.4.2",
+    "prosemirror-view": "^1.30.1",
     "style-mod": "^4.1.0",
     "y-codemirror.next": "^0.3.2",
+    "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/debug": "0.3.10-main.ee543cf",
-    "@dxos/automerge": "0.3.10-main.ee543cf",
-    "@dxos/display-name": "0.3.10-main.ee543cf",
-    "@dxos/echo-schema": "0.3.10-main.ee543cf",
-    "@dxos/invariant": "0.3.10-main.ee543cf",
-    "@dxos/log": "0.3.10-main.ee543cf",
-    "@dxos/protocols": "0.3.10-main.ee543cf",
-    "@dxos/react-ui": "0.3.10-main.ee543cf",
-    "@dxos/react-ui-theme": "0.3.10-main.ee543cf",
-    "@dxos/util": "0.3.10-main.ee543cf",
-    "@dxos/react-async": "0.3.10-main.ee543cf",
-    "@dxos/text-model": "0.3.10-main.ee543cf"
+    "@dxos/automerge": "0.3.10-next.3e4f36f",
+    "@dxos/debug": "0.3.10-next.3e4f36f",
+    "@dxos/display-name": "0.3.10-next.3e4f36f",
+    "@dxos/echo-schema": "0.3.10-next.3e4f36f",
+    "@dxos/invariant": "0.3.10-next.3e4f36f",
+    "@dxos/protocols": "0.3.10-next.3e4f36f",
+    "@dxos/log": "0.3.10-next.3e4f36f",
+    "@dxos/react-async": "0.3.10-next.3e4f36f",
+    "@dxos/react-ui-theme": "0.3.10-next.3e4f36f",
+    "@dxos/util": "0.3.10-next.3e4f36f",
+    "@dxos/text-model": "0.3.10-next.3e4f36f",
+    "@dxos/react-ui": "0.3.10-next.3e4f36f"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
-    "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -60,17 +72,17 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/echo-typegen": "0.3.10-main.ee543cf",
-    "@dxos/config": "0.3.10-main.ee543cf",
-    "@dxos/react-client": "0.3.10-main.ee543cf",
-    "@dxos/react-ui": "0.3.10-main.ee543cf",
-    "@dxos/storybook-utils": "0.3.10-main.ee543cf"
+    "@dxos/echo-typegen": "0.3.10-next.3e4f36f",
+    "@dxos/config": "0.3.10-next.3e4f36f",
+    "@dxos/react-ui": "0.3.10-next.3e4f36f",
+    "@dxos/storybook-utils": "0.3.10-next.3e4f36f",
+    "@dxos/react-client": "0.3.10-next.3e4f36f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.10-main.ee543cf"
+    "@dxos/react-client": "0.3.10-next.3e4f36f"
   },
   "publishConfig": {
     "access": "public"

package/src/{hooks/automerge → automerge}/automerge.stories.tsx

@@ -12,8 +12,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { type Prop } from '@dxos/automerge/automerge';
 import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { type IDocHandle } from './handle';
-import { automergePlugin } from './plugin';
+import { type IDocHandle, automergePlugin } from './automerge-plugin';
 
 type EditorProps = {
   handle: IDocHandle;

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -3,46 +3,63 @@
 //
 
 import '@dxosTheme';
-
-import defaultsDeep from 'lodash.defaultsdeep';
-import React, { useRef, useState } from 'react';
+import { markdown } from '@codemirror/lang-markdown';
+import { ArrowCircleUp } from '@phosphor-icons/react';
+import React, { StrictMode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
-import { textTheme } from './themes';
+import { TextEditor } from './TextEditor';
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
 import { useTextModel } from '../../hooks';
 
-const initialText = [
-  '# TextEditor',
+const text = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
   '',
-  'This is the basic plain text editor within minimal formatting.',
-  'You can add custom styles and create custom extensions.',
-  'Or use the MarkdownEditor to edit documents.',
   '',
-  'https://dxos.org',
 ].join('\n');
 
-const Story = ({
-  text,
-  automerge,
-  ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
-  const ref = useRef<TextEditorRef>(null);
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+const hyperLinkTooltip = () =>
+  createHyperlinkTooltip((el, url) => {
+    const web = new URL(url);
+    createRoot(el).render(
+      <StrictMode>
+        <div className='flex gap-1 items-center'>
+          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
+          <p className='pr-1'>{web.origin}</p>
+        </div>
+      </StrictMode>,
+    );
+  });
+
+const Story = ({ automerge }: { automerge?: boolean }) => {
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
-    return null;
+    return <></>;
   }
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
-        <div className='flex flex-col w-[800px] py-16'>
-          <TextEditor ref={ref} model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
+      <div className='flex justify-center p-8'>
+        <div className='w-[800px]'>
+          <TextEditor
+            model={model}
+            extensions={[
+              markdown(),
+              hyperlinkDecoration({ link: false }),
+              hyperLinkTooltip(),
+              // EditorView.domEventHandlers({
+              //   mousedown: (e, view) => {},
+              // }),
+            ]}
+            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+          />
         </div>
       </div>
     </div>
@@ -50,33 +67,13 @@ const Story = ({
 };
 
 export default {
-  title: 'react-ui-editor/TextEditor',
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
 };
 
-export const Default = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
-};
+export const Default = {};
 
 export const Automerge = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-      automerge
-    />
-  ),
+  render: () => <Story automerge />,
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -7,24 +7,23 @@ import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
+import get from 'lodash.get';
 import React, {
-  type ComponentProps,
   type KeyboardEvent,
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useState,
+  type ComponentProps,
 } from 'react';
 
-import { generateName } from '@dxos/display-name';
+import { isDocAccessor } from '@dxos/echo-schema';
 import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle } from './extensions';
-import { defaultTheme, textTheme } from './themes';
-import { type EditorModel } from '../../hooks';
-import { type ThemeStyles } from '../../styles';
+import { basicBundle, basicTheme, markdownBundle, markdownTheme } from './extensions';
+import { type EditorModel, useCollaboration } from '../../hooks';
+import type { ThemeStyles } from '../../styles';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
@@ -38,7 +37,7 @@ export type CursorInfo = {
 };
 
 export type TextEditorRef = {
-  root: HTMLDivElement | null;
+  editor: HTMLDivElement | null;
   state?: EditorState;
   view?: EditorView;
 };
@@ -66,65 +65,66 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
+  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
-    // TODO(burdon): Factor out?
-    const { awareness, peer } = model;
-    useEffect(() => {
-      if (awareness && peer) {
-        awareness.setLocalStateField('user', {
-          name: peer.name ?? generateName(peer.id),
-          color: getColorForValue({ value: peer.id, type: 'color' }),
-          colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-        });
-      }
-    }, [awareness, peer, themeMode]);
-
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
+    const [parent, setParent] = useState<HTMLDivElement | null>(null);
     const [state, setState] = useState<EditorState>();
     const [view, setView] = useState<EditorView>();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        editor: parent,
+        state,
+        view,
+      }),
+      [view, state, parent],
+    );
+
+    // TODO(burdon): Pass in extension?
+    const collaboration = useCollaboration(model, themeMode);
 
     useEffect(() => {
-      if (!root) {
+      if (!parent) {
         return;
       }
 
+      const initialText = isDocAccessor(model.content)
+        ? get(model.content.handle.docSync(), model.content.path)
+        : model.content?.toString();
+
       const state = EditorState.create({
-        doc: model.text(),
+        doc: initialText,
         extensions: [
           // TODO(burdon): Factor out VIM mode?
           editorMode === 'vim' && vim(),
 
-          // Theme.
-          EditorView.baseTheme(defaultTheme),
-          EditorView.theme(slots?.editor?.theme ?? {}),
-          // TODO(burdon): themeMode doesn't change in storybooks.
-          EditorView.darkTheme.of(themeMode === 'dark'),
+          // Replication.
+          collaboration,
 
-          // Storage and replication.
-          model.extension,
+          // Theme.
+          slots?.editor?.theme && EditorView.theme(slots?.editor?.theme),
 
           // Custom.
           ...extensions,
         ].filter(Boolean) as Extension[],
       });
 
+      setState(state);
+
       // NOTE: This repaints the editor.
       // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
       // Ideally this should not be hit except when changing between text objects.
       view?.destroy();
-      setView(new EditorView({ state, parent: root }));
-      setState(state);
+      setView(new EditorView({ state, parent }));
 
       return () => {
         view?.destroy();
         setView(undefined);
         setState(undefined);
       };
-    }, [root, model, themeMode, editorMode]);
+    }, [parent, model.content, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -136,7 +136,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
             break;
           }
         }
@@ -147,7 +147,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        ref={setParent}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -157,16 +157,15 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
-// TODO(burdon): Set default text theme?
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultTextSlots);
+    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[basicBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
         {...props}
       />
     );
@@ -174,29 +173,16 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultSlots);
+    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={[markdownBundle({ themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
         {...props}
       />
     );
   },
 );
-
-export const defaultSlots: TextEditorSlots = {
-  root: {
-    className: mx('p-2', inputSurface),
-  },
-};
-
-export const defaultTextSlots: TextEditorSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
-};

package/src/components/TextEditor/extensions/{basic.ts → basic/bundle.ts}

@@ -17,14 +17,12 @@ export type BasicBundleOptions = {
 
 export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
   [
-    // TODO(burdon): Compare with minimalSetup.
-    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
     bracketMatching(),
     closeBrackets(),
-    EditorView.lineWrapping,
-
     _placeholder && placeholder(_placeholder),
 
+    EditorView.lineWrapping,
+
     // TODO(burdon): Is this required?
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
   ].filter(Boolean) as Extension[];

package/src/components/TextEditor/extensions/basic/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './bundle';
+export * from './theme';

package/src/components/TextEditor/extensions/basic/theme.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
+
+import { tokens } from '../../../../styles';
+
+/**
+ * Minimal styles.
+ * NOTE: The '&' prefix denotes the CM editor root.
+ * https://codemirror.net/examples/styling
+ */
+// TODO(burdon): Remove?
+export const basicTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-line': {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: '1.6em',
+  },
+  '& .cm-line *': {
+    lineHeight: 1.6,
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    overflow: 'visible',
+  },
+  '& .cm-content': {
+    padding: 0,
+    caretColor: 'black',
+  },
+  '.dark & .cm-content': {
+    caretColor: 'white',
+  },
+  '& .cm-tooltip': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+  '& .cm-link': {
+    color: get(tokens, 'extend.colors.primary.500'),
+    textDecoration: 'underline',
+  },
+};

package/src/components/TextEditor/extensions/{listener.ts → change.ts}

@@ -4,12 +4,12 @@
 
 import { StateField } from '@codemirror/state';
 
-export type TextListener = (text: string) => void;
-
 /**
  * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
+ * @param onChange
  */
-export const listener = (onChange: TextListener) =>
+// TODO(burdon): Name?
+export const onChangeExtension = (onChange: (text: string) => void) =>
   StateField.define({
     create: () => null,
     update: (_value, transaction) => {

package/src/components/TextEditor/extensions/{link.ts → hyperlink/hyperlinkDecoration.ts}

@@ -4,14 +4,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
+import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 // Adapted from:
@@ -26,33 +19,13 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 //  https://codemirror.net/5/demo/simplemode.html
 //  https://codemirror.net/5/demo/search.html (Search dialog).
 
-class LinkButton extends WidgetType {
-  constructor(
-    private readonly _pos: number,
-    private readonly _url: string,
-    private readonly _onAttach: LinkOptions['onRender'],
-  ) {
+class Link extends WidgetType {
+  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
     super();
   }
 
-  override eq(other: LinkButton) {
-    return this._pos === other._pos && this._url === other._url;
-  }
-
-  toDOM(view: EditorView) {
-    const el = document.createElement('span');
-    this._onAttach!(el, this._url);
-    return el;
-  }
-}
-
-class LinkText extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _text: string, private readonly _url?: string) {
-    super();
-  }
-
-  override eq(other: LinkText) {
-    return this._pos === other._pos && this._url === other._url;
+  override eq(other: any) {
+    return this._text === other.text && this._url === other.url;
   }
 
   toDOM(view: EditorView) {
@@ -60,14 +33,13 @@ class LinkText extends WidgetType {
     link.setAttribute('class', 'cm-link');
     link.textContent = this._text;
     if (this._url) {
-      link.setAttribute('rel', 'noreferrer');
       link.setAttribute('target', '_blank');
       link.href = this._url;
     } else {
       link.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._pos,
+            anchor: this._anchor,
           },
         });
       };
@@ -77,37 +49,45 @@ class LinkText extends WidgetType {
   }
 }
 
-const update = (state: EditorState, options: LinkOptions) => {
+type HyperlinkDecorationConfig = {
+  link?: boolean;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const hyperlinkDecoration = ({ link }: HyperlinkDecorationConfig = {}) => {
+  return StateField.define<RangeSet<any>>({
+    create: (state) => update(state, link),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, link),
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};
+
+const update = (state: EditorState, link?: boolean) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
       // Check if cursor is inside text.
-      if (node.name === 'Link') {
-        const marks = node.node.getChildren('LinkMark');
-        const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
+      if (cursor < node.from || cursor > node.to) {
+        if (node.name === 'Link') {
+          const marks = node.node.getChildren('LinkMark');
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
 
-        const urlNode = node.node.getChild('URL');
-        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+          const urlNode = node.node.getChild('URL');
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
 
-        if (cursor < node.from || cursor > node.to) {
           builder.add(
             node.from,
             node.to,
             Decoration.replace({
-              widget: new LinkText(node.from, text, options.link ? url : undefined),
+              widget: new Link(node.from, text, link ? url : undefined),
             }),
           );
-        }
 
-        if (options.onRender) {
-          builder.add(
-            node.to,
-            node.to,
-            Decoration.replace({
-              widget: new LinkButton(node.from, url, options.onRender),
-            }),
-          );
+          return false;
         }
       }
 
@@ -117,20 +97,3 @@ const update = (state: EditorState, options: LinkOptions) => {
 
   return builder.finish();
 };
-
-export type LinkOptions = {
-  link?: boolean;
-  onRender?: (el: Element, url: string) => void;
-};
-
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export const link = (options: LinkOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};