@dxos/react-ui-editor 0.3.9-main.dd8d283 → 0.3.9-main.de60860

package/src/components/Markdown/Markdown.tsx

@@ -15,7 +15,7 @@ import {
 import { languages } from '@codemirror/language-data';
 import { lintKeymap } from '@codemirror/lint';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, StateField, type Text } from '@codemirror/state';
+import { EditorState, type Extension, StateField, type Text } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   keymap,
@@ -30,6 +30,7 @@ import {
   EditorView,
 } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { GFM } from '@lezer/markdown';
 import { vim } from '@replit/codemirror-vim';
 import React, {
   type KeyboardEvent,
@@ -48,16 +49,18 @@ import { getColorForValue } from '@dxos/react-ui-theme';
 import { YText } from '@dxos/text-model';
 
 import { markdownTagsExtension } from './markdownTags';
-import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
+import { markdownHighlightStyle, markdownTheme } from './markdownTheme';
 import { type EditorModel, type EditorSlots } from '../../model';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
 
 export type MarkdownEditorProps = {
-  model?: EditorModel;
+  model: EditorModel;
   slots?: EditorSlots;
   editorMode?: EditorMode;
+  showWidgets?: boolean;
+  extensions?: Extension[];
   onChange?: (content: string | Text) => void;
 };
 
@@ -68,7 +71,7 @@ export type MarkdownEditorRef = {
 };
 
 export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, onChange, editorMode }, forwardedRef) => {
+  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
     const { id, content, provider, peer } = model ?? {};
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -115,50 +118,77 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       const state = EditorState.create({
         doc: content?.toString(),
         extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
           listenChangesExtension,
 
-          ...(editorMode === 'vim' ? [vim()] : []),
-
+          // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
           // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          drawSelection(),
-          dropCursor(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          // https://codemirror.net/docs/ref/#codemirror.basicSetup
+          autocompletion(),
           bracketMatching(),
           closeBrackets(),
-          autocompletion(),
-          rectangularSelection(),
           crosshairCursor(),
+          dropCursor(),
+          drawSelection(),
           highlightActiveLine(),
+          highlightActiveLineGutter(),
           highlightSelectionMatches(),
+          highlightSpecialChars(),
+          history(),
+          indentOnInput(),
           placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
+          rectangularSelection(),
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          EditorState.allowMultipleSelections.of(true),
+          EditorView.lineWrapping,
+
           keymap.of([
             ...closeBracketsKeymap,
+            ...completionKeymap,
             ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
             ...foldKeymap,
-            ...completionKeymap,
+            ...historyKeymap,
             ...lintKeymap,
+            ...searchKeymap,
             indentWithTab,
           ]),
-          EditorView.lineWrapping,
-          // Theme
-          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
+
+          // Main extension.
+          // https://github.com/codemirror/lang-markdown
+          markdown({
+            base: markdownLanguage,
+            codeLanguages: languages,
+            extensions: [
+              // TODO(burdon): This seems to upgrade the parser.
+              // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+              // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+              // https://github.github.com/gfm
+              // GFM,
+
+              // Custom styling.
+              markdownTagsExtension,
+            ],
+          }),
+
+          // Theme.
           EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
           ...(themeMode === 'dark'
             ? [syntaxHighlighting(oneDarkHighlightStyle)]
             : [syntaxHighlighting(defaultHighlightStyle)]),
+
           // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-          syntaxHighlighting(markdownDarkHighlighting),
+          syntaxHighlighting(markdownHighlightStyle),
+
+          // Settings.
+          ...(editorMode === 'vim' ? [vim()] : []),
 
-          // Collaboration
+          // TODO(burdon): Move to extensions.
+          // Replication and awareness (incl. remote selection).
+          // https://codemirror.net/docs/ref/#collab
           ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+
+          // Custom.
+          ...extensions,
         ],
       });
 
@@ -178,15 +208,18 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     }, [parent, content, provider?.awareness, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
-      ({ key, altKey, shiftKey, metaKey, ctrlKey }: KeyboardEvent) => {
+      (event: KeyboardEvent) => {
+        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter':
+          case 'Enter': {
             view?.contentDOM.focus();
             break;
+          }
 
-          case 'Escape':
+          case 'Escape': {
             editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
             break;
+          }
         }
       },
       [view, editorMode],
@@ -195,11 +228,11 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     return (
       <div
         tabIndex={0}
+        ref={setParent}
         key={id}
         {...slots.root}
-        onKeyUp={handleKeyUp}
         {...(editorMode !== 'vim' ? tabsterDOMAttribute : {})}
-        ref={setParent}
+        onKeyUp={handleKeyUp}
       />
     );
   },

package/src/components/Markdown/markdownTheme.ts

@@ -32,6 +32,10 @@ export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
+// TODO(burdon): Subtle difference in layout for documents and stacks.
+// TODO(burdon): On first character, height of editor changes by a few pixels.
+// TODO(burdon): Is the '&' prefix required? If so, document.
+
 export const markdownTheme = {
   // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
@@ -71,24 +75,28 @@ export const markdownTheme = {
   //   color: '#ddd'
   // },
 
-  '.dark & .cm-tooltip': {
+  '.cm-tooltip': {
+    backgroundColor: 'transparent',
     border: 'none',
-    backgroundColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      backgroundColor: highlightBackground,
-      color: ivory,
-    },
   },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
   '&.cm-focused': {
     outline: 'none',
   },
@@ -160,6 +168,13 @@ export const markdownTheme = {
   '& .cm-yLineSelection': {
     margin: '0',
   },
+  '.cm-link': {
+    color: 'rgb(20 89 208)',
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+  },
   ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
     const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
     // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
@@ -170,7 +185,7 @@ export const markdownTheme = {
   }, {}),
 };
 
-export const markdownDarkHighlighting = HighlightStyle.define(
+export const markdownHighlightStyle = HighlightStyle.define(
   [
     {
       tag: [

package/src/components/RichText/RichText.stories.tsx

@@ -8,15 +8,17 @@ import React, { useState } from 'react';
 
 import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
-import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { RichTextEditor, type RichTextEditorProps } from './RichText';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
   component: RichTextEditor,
+  decorators: [withTheme],
 };
 
 export const Default = {
@@ -29,40 +31,42 @@ export const Default = {
 };
 
 const replicator = new Replicator(TextKind.RICH);
-export const WithYjs = {
-  render: (args: Omit<RichTextEditorProps, 'model'>) => {
-    const [generate, setGenerate] = useState(false);
-    const generateId = useId('generate');
 
-    const [id] = useState(PublicKey.random().toHex());
-    const model = useYjsModel({ id, replicator });
+const Story = (args: Omit<RichTextEditorProps, 'model'>) => {
+  const [generate, setGenerate] = useState(false);
+  const generateId = useId('generate');
 
-    useDataGenerator({
-      generator: generate ? textGenerator : undefined,
-      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
-    });
+  const [id] = useState(PublicKey.random().toHex());
+  const model = useYjsModel({ id, replicator });
 
-    return (
-      <main className='flex-1 min-w-0 p-4'>
-        <div id={generateId} className='flex'>
-          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
-          Generate Data
-        </div>
-        <RichTextEditor
-          {...args}
-          model={model}
-          slots={{
-            editor: {
-              className: mx(
-                'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
-                args.slots?.editor?.className,
-              ),
-            },
-          }}
-        />
-      </main>
-    );
-  },
+  useDataGenerator({
+    generator: generate ? textGenerator : undefined,
+    options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+  });
+
+  return (
+    <main className='flex-1 min-w-0 p-4'>
+      <div id={generateId} className='flex'>
+        <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+        Generate Data
+      </div>
+      <RichTextEditor
+        {...args}
+        model={model}
+        slots={{
+          editor: {
+            className: mx(
+              'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
+              args.slots?.editor?.className,
+            ),
+          },
+        }}
+      />
+    </main>
+  );
+};
+
+export const WithYjs = {
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
-  decorators: [ClientDecorator({ count: 2 })],
+  render: () => <ClientRepeater count={2} Component={Story} />,
 };

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

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+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, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { useTextModel } from '../../model';
+
+const text = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  '',
+].join('\n');
+
+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 = () => {
+  const [item] = useState({ text: new TextObject(text) });
+  const model = useTextModel({ text: item.text });
+
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <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>
+  );
+};
+
+export default {
+  component: TextEditor,
+  decorators: [withTheme],
+  render: Story,
+};
+
+export const Default = {};

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,131 @@
+//
+// 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 React, {
+  type KeyboardEvent,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  type HTMLAttributes,
+} 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';
+
+export type CursorInfo = {
+  from: number;
+  to: number;
+  line: number;
+  lines: number;
+  after?: string;
+};
+
+export type TextEditorRef = {
+  editor: HTMLDivElement | null;
+  state?: EditorState;
+  view?: EditorView;
+};
+
+export type TextEditorProps = {
+  model?: EditorModel;
+  extensions?: Extension[];
+  theme?: {
+    [selector: string]: StyleSpec;
+  };
+  slots?: EditorSlots;
+  onKeyDown?: (event: KeyboardEvent, info: CursorInfo) => void;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onBlur' | 'onFocus'>;
+
+/**
+ * Simple text editor.
+ */
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
+    const { id, content } = model ?? {};
+    const { themeMode } = useThemeContext();
+
+    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],
+    );
+
+    useEffect(() => {
+      if (!parent) {
+        return;
+      }
+
+      view?.destroy();
+
+      const state = EditorState.create({
+        doc: content?.toString(),
+        extensions: [
+          bracketMatching(),
+          closeBrackets(),
+          placeholder(slots.editor?.placeholder ?? ''),
+          EditorView.lineWrapping,
+
+          // Themes.
+          EditorView.theme(theme),
+          ...(themeMode === 'dark'
+            ? [syntaxHighlighting(oneDarkHighlightStyle)]
+            : [syntaxHighlighting(defaultHighlightStyle)]),
+
+          // Replication.
+          // TODO(burdon): Move to default extensions.
+          ...(content instanceof YText ? [yCollab(content, undefined)] : []),
+
+          // Custom.
+          ...extensions,
+        ],
+      });
+
+      setState(state);
+      setView(new EditorView({ state, parent }));
+
+      return () => {
+        view?.destroy();
+        setView(undefined);
+        setState(undefined);
+      };
+    }, [parent, content, themeMode]);
+
+    const handleKeyDown = 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 });
+        }
+      },
+      [view],
+    );
+
+    return <div key={id} ref={setParent} {...slots.root} onKeyDown={handleKeyDown} {...props} />;
+  },
+);

package/src/components/TextEditor/extensions/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();
+};