@dxos/react-ui-editor 0.3.9-main.9ca5eac → 0.3.9-main.9da1d41

package/src/components/TextEditor/TextEditor.tsx

@@ -2,28 +2,29 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBrackets } from '@codemirror/autocomplete';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorView, placeholder } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { vim } from '@replit/codemirror-vim';
+import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type KeyboardEvent,
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useState,
-  useCallback,
-  type HTMLAttributes,
+  type ComponentProps,
 } from 'react';
-import { type StyleSpec } from 'style-mod';
-import { yCollab } from 'y-codemirror.next';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { YText } from '@dxos/text-model';
 
-import { defaultStyles } from './theme';
-import { type EditorModel, type EditorSlots } from '../../model';
+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];
 
 export type CursorInfo = {
   from: number;
@@ -39,71 +40,77 @@ export type TextEditorRef = {
   view?: EditorView;
 };
 
+export type TextEditorSlots = {
+  root?: Omit<ComponentProps<'div'>, 'ref'>;
+  editor?: {
+    className?: string;
+    placeholder?: string;
+    spellCheck?: boolean;
+    tabIndex?: number;
+    theme?: ThemeStyles;
+  };
+};
+
 export type TextEditorProps = {
-  model?: EditorModel;
+  model: EditorModel;
   extensions?: Extension[];
-  theme?: {
-    [selector: string]: StyleSpec;
-  };
-  slots?: EditorSlots;
-  onKeyDown?: (event: KeyboardEvent, info: CursorInfo) => void;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'onBlur' | 'onFocus'>;
+  slots?: TextEditorSlots;
+  editorMode?: EditorMode;
+};
 
 /**
- * Simple text editor.
+ * Base text editor.
+ * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
-    const { id, content } = model ?? {};
+export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
     const { themeMode } = useThemeContext();
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
     const [parent, setParent] = useState<HTMLDivElement | null>(null);
     const [state, setState] = useState<EditorState>();
     const [view, setView] = useState<EditorView>();
-
-    // TODO(burdon): The ref may be instantiated before the view is created.
     useImperativeHandle(
       forwardedRef,
-      () => {
-        return {
-          editor: parent,
-          state,
-          view,
-        };
-      },
-      [view],
+      () => ({
+        editor: parent,
+        state,
+        view,
+      }),
+      [view, state, parent],
     );
 
+    // TODO(burdon): Pass in extension?
+    const collaboration = useCollaboration(model, themeMode);
+
     useEffect(() => {
       if (!parent) {
         return;
       }
 
-      view?.destroy();
-
       const state = EditorState.create({
-        doc: content?.toString(),
+        doc: model.content?.toString(),
         extensions: [
-          bracketMatching(),
-          closeBrackets(),
-          placeholder(slots.editor?.placeholder ?? ''),
-          EditorView.lineWrapping,
-
-          // Themes.
-          EditorView.theme(theme),
-          ...(themeMode === 'dark'
-            ? [syntaxHighlighting(oneDarkHighlightStyle)]
-            : [syntaxHighlighting(defaultHighlightStyle)]),
+          // TODO(burdon): Factor out VIM mode?
+          editorMode === 'vim' && vim(),
 
           // Replication.
-          ...(content instanceof YText ? [yCollab(content, undefined)] : []),
+          collaboration,
+
+          // 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 }));
 
       return () => {
@@ -111,20 +118,65 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [parent, content, themeMode]);
+    }, [parent, model.content, themeMode, editorMode]);
 
-    const handleKeyDown = useCallback(
+    const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
-        if (view) {
-          const { head, from, to } = view.state.selection.ranges[0];
-          const { number } = view.state.doc.lineAt(head);
-          const after = view.state.sliceDoc(from);
-          onKeyDown?.(event, { from, to, line: number, lines: view.state.doc.lines, after });
+        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+        switch (key) {
+          case 'Enter': {
+            view?.contentDOM.focus();
+            break;
+          }
+
+          case 'Escape': {
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            break;
+          }
         }
       },
-      [view],
+      [view, editorMode],
+    );
+
+    return (
+      <div
+        key={model.id}
+        ref={setParent}
+        tabIndex={0}
+        {...slots?.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
+      />
     );
+  },
+);
 
-    return <div key={id} ref={setParent} {...slots.root} onKeyDown={handleKeyDown} {...props} />;
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
+        {...props}
+      />
+    );
+  },
+);
+
+export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
+    return (
+      <BaseTextEditor
+        ref={forwardedRef}
+        extensions={extensions}
+        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
+        {...props}
+      />
+    );
   },
 );

package/src/components/TextEditor/codemirror.stories.ts

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type StoryObj } from '@storybook/html';
+import { basicSetup } from 'codemirror';
+import { yCollab } from 'y-codemirror.next';
+
+import { EventSubscriptions } from '@dxos/async';
+import { generateName } from '@dxos/display-name';
+import { Client, type PublicKey } from '@dxos/react-client';
+import { type Space, TextObject } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
+import { YText } from '@dxos/text-model';
+
+import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
+import { EditorDocument, types as schema } from '../../testing';
+
+export default {
+  title: 'CodeMirror',
+};
+
+const testBuilder = new TestBuilder();
+const views: Record<number, EditorView> = {};
+const subscriptions = new EventSubscriptions();
+
+const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identity, space: Space, text: TextObject) => {
+  const doc = text.doc;
+  const ytext = text.content;
+  if (!(ytext instanceof YText) || !doc) {
+    return;
+  }
+
+  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  awareness.setLocalStateField('user', {
+    name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+    // TODO(wittjosiah): Pick colours from theme based on identity key.
+    color: cursorColor.color,
+    colorLight: cursorColor.light,
+  });
+
+  const state = EditorState.create({
+    doc: ytext.toString(),
+    extensions: [basicSetup, markdown({ base: markdownLanguage }), yCollab(ytext, awareness)],
+  });
+
+  const view = views[id];
+  if (view) {
+    view.setState(state);
+  } else {
+    views[id] = new EditorView({ state, parent: editor });
+  }
+
+  if (id === 0) {
+    subscriptions.clear();
+    subscriptions.add(textGenerator({ text: ytext }));
+  }
+};
+
+const setupEditor = async (id: number, client: Client, spaceKey: PublicKey, editor: HTMLDivElement) => {
+  const space = await client.spaces.get(spaceKey)!;
+  const query = space.db.query(EditorDocument.filter());
+  query.subscribe(({ objects }) => {
+    const text = objects[0]?.content;
+    void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+  });
+
+  const text = query.objects[0]?.content;
+  void (text && updateEditor(id, editor, client.halo.identity.get()!, space, text));
+};
+
+const setupSpace = async (count: number) => {
+  const clients = [...Array(count)].map(() => new Client({ services: testBuilder.createLocal() }));
+  await Promise.all(clients.map((client) => client.initialize()));
+  await Promise.all(clients.map((client) => client.halo.createIdentity()));
+  clients.map((client) => client.spaces.addSchema(schema));
+
+  const space = await clients[0].spaces.create();
+  const text = new TextObject('Hello, Storybook!');
+  const document = new EditorDocument({ content: text });
+  await space.db.add(document);
+
+  await joinCommonSpace(clients, space.key);
+
+  return { clients, spaceKey: space.key };
+};
+
+const count = 2;
+
+export const Default: StoryObj<{ id: number; client: Client; spaceKey: PublicKey }> = {
+  render: ({ id, client, spaceKey }) => {
+    const editor = document.createElement('div');
+    editor.setAttribute('style', 'min-width: 0; flex: 1; padding: 1rem;');
+    void setupEditor(id, client, spaceKey, editor);
+    return editor;
+  },
+  decorators: [
+    (story) => {
+      const container = document.createElement('div');
+      container.setAttribute('style', 'display: flex; justify-content: space-evenly');
+      void setupSpace(count).then(({ clients, spaceKey }) => {
+        clients.forEach((client, id) => {
+          // TODO(wittjosiah): According to the docs these types should be compatible.
+          container.appendChild(story({ args: { id, client, spaceKey } }) as HTMLElement);
+        });
+      });
+      return container;
+    },
+  ],
+};

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

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { placeholder } from '@codemirror/view';
+
+import type { ThemeMode } from '@dxos/react-ui';
+
+export type BasicBundleOptions = {
+  themeMode?: ThemeMode;
+  placeholder?: string;
+};
+
+export const basicBundle = ({ themeMode, placeholder: _placeholder }: BasicBundleOptions): Extension[] =>
+  [
+    bracketMatching(),
+    closeBrackets(),
+    _placeholder && placeholder(_placeholder),
+
+    // 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/change.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StateField } from '@codemirror/state';
+
+/**
+ * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
+ * @param onChange
+ */
+// TODO(burdon): Name?
+export const onChangeExtension = (onChange: (text: string) => void) =>
+  StateField.define({
+    create: () => null,
+    update: (_value, transaction) => {
+      if (transaction.docChanged && onChange) {
+        onChange(transaction.newDoc.toString());
+      }
+
+      return null;
+    },
+  });

package/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright CodeMirror
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+
+// Adapted from:
+// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
+// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
+
+// TODO(burdon): Adapt to make all markdown editable?
+
+// TODO(burdon): Research overlays.
+//  https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor
+//  https://codemirror.net/5/doc/manual.html#addOverlay
+//  https://codemirror.net/5/demo/simplemode.html
+//  https://codemirror.net/5/demo/search.html (Search dialog).
+
+class Link extends WidgetType {
+  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
+    super();
+  }
+
+  override eq(other: any) {
+    return this._text === other.text && this._url === other.url;
+  }
+
+  toDOM(view: EditorView) {
+    const link = document.createElement('a');
+    link.setAttribute('class', 'cm-link');
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute('target', '_blank');
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._anchor,
+          },
+        });
+      };
+    }
+
+    return link;
+  }
+}
+
+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 (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) : '';
+
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              widget: new Link(node.from, text, link ? url : undefined),
+            }),
+          );
+
+          return false;
+        }
+      }
+
+      return true;
+    },
+  });
+
+  return builder.finish();
+};

package/src/components/TextEditor/extensions/{hyperlinkTooltip.tsx → hyperlink/hyperlinkTooltip.tsx}

@@ -15,6 +15,7 @@ export type OnHyperlinkHover = (el: Element, url: string) => void;
  * https://codemirror.net/docs/ref/#view.hoverTooltip
  * https://github.com/codemirror/view/blob/main/src/tooltip.ts
  */
+// TODO(burdon): Create config object.
 export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
   hoverTooltip((view, pos) => {
     const { from, text } = view.state.doc.lineAt(pos);

package/src/components/TextEditor/extensions/{hyperlink.tsx → hyperlink/hyperlinkWidget.tsx}

@@ -15,14 +15,20 @@ import {
 
 // Notes: Can't edit widget content (or cursor nav through them).
 // - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
-//   Widgets intentionally always get set to contenteditable=false, or they would become part of CodeMirror’s editable content element.
+//   Widgets intentionally always get set to contenteditable=false,
+//   or they would become part of CodeMirror’s editable content element.
 //   You should be able to introduce new contenteditable=true child elements inside of them.
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 
+/**
+ * Custom link decorator.
+ * NOTE: The default markdown extension formats links by default.
+ * @deprecated
+ */
 const linkDecorator = () =>
   new MatchDecorator({
-    regexp: markdownLinkRegexp, // regexp || defaultRegexp,
+    regexp: markdownLinkRegexp,
     decorate: (add, from, to, match, view) => {
       const [_, label, url] = match;
       const p0 = {
@@ -45,16 +51,21 @@ const linkDecorator = () =>
         end: p1.end + 1 + url.length + 2,
       };
 
-      // TODO(burdon): Wrap with tagName?
-      add(p0.start, p0.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
+      add(
+        p0.start,
+        p0.end,
+        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
+      );
       add(p1.start, p1.end, Decoration.mark({ class: 'cm-hyperlink-label' }));
-      add(p2.start, p2.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', __attributes: { style: 'display: none' } }));
+      add(
+        p2.start,
+        p2.end,
+        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
+      );
+      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', _attributes: { style: 'display: none' } }));
     },
   });
 
-// const anchor = (dom: HTMLAnchorElement) => dom;
-
 export function hyperLinkExtension() {
   return ViewPlugin.fromClass(
     class HyperLinkView {
@@ -91,7 +102,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperLinkStyle = EditorView.baseTheme({
+export const hyperlinkStyle = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -105,4 +116,4 @@ export const hyperLinkStyle = EditorView.baseTheme({
   },
 });
 
-export const hyperlink: Extension = [hyperLinkExtension(), hyperLinkStyle];
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

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

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './basic';
+export * from './change';
 export * from './hyperlink';
-export * from './hyperlinkTooltip';
+export * from './markdown';