@dxos/react-ui-editor 0.3.11-main.7ff9773 → 0.3.11-main.80db41b

package/src/extensions/markdown/formatting.ts

@@ -0,0 +1,188 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { snippet } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import {
+  type Command,
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  keymap,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view';
+import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
+
+export type FormattingOptions = {};
+
+export const setHeading =
+  (level: number): Command =>
+  (view: EditorView) => {
+    const {
+      selection: { ranges },
+      doc,
+    } = view.state;
+    const changes = [];
+    for (const range of ranges) {
+      const { number } = doc.lineAt(range.anchor);
+      const { from, to } = doc.line(number);
+
+      // Check heading doesn't already exist.
+      const line = doc.sliceString(from, to);
+      const [_, marks, spaces] = line.match(/(#+)(\s+)/) ?? [];
+      const current = marks?.length ?? 0;
+      if (level !== current) {
+        changes.push({
+          from,
+          to: from + current + (spaces?.length ?? 0),
+          insert: '#'.repeat(level) + (level > 0 ? ' ' : ''),
+        });
+      }
+    }
+
+    if (changes.length) {
+      view.dispatch({ changes });
+    }
+
+    return true;
+  };
+
+export const toggleStyle =
+  (mark: string): Command =>
+  (view) => {
+    const { ranges } = view.state.selection;
+    for (const range of ranges) {
+      if (range.from === range.to) {
+        return false;
+      }
+
+      // TODO(burdon): Detect if already styled (or nested).
+      view.dispatch({
+        changes: [
+          {
+            from: range.from,
+            insert: mark,
+          },
+          {
+            from: range.to,
+            insert: mark,
+          },
+        ],
+      });
+    }
+
+    return true;
+  };
+
+// TODO(burdon): Define and trigger snippets for codeblock, table, etc.
+const snippets = {
+  codeblock: snippet(['```#{lang}', '\t#{}', '```'].join('\n')),
+  table: snippet(
+    ['| #{col1} | #{col2} |', '| ---- | ---- |', '| #{val1} | #{val2} |', '| #{val3} | #{val4} |'].join('\n'),
+  ),
+};
+
+export const insertCodeblock = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.codeblock(view, null, from, from);
+};
+
+export const insertTable = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.table(view, null, from, from);
+};
+
+export const toggleBold = toggleStyle('**');
+export const toggleItalic = toggleStyle('_');
+export const toggleStrikethrough = toggleStyle('~~');
+
+export const toggleList = (view: EditorView) => {};
+
+export const formatting = (options: FormattingOptions = {}): Extension => {
+  return [
+    keymap.of([
+      {
+        key: 'meta-b',
+        run: toggleBold,
+      },
+    ]),
+    styling(),
+  ];
+};
+
+// https://github.github.com/gfm
+// https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
+
+const styling = (): Extension => {
+  const buildDecorations = (view: EditorView): DecorationSet => {
+    const builder = new RangeSetBuilder<Decoration>();
+    const { state } = view;
+    const cursor = state.selection.main.head;
+
+    // TODO(burdon): Bug if '***foo***' (since StrongEmphasis is nested inside EmphasisMark).
+    //  Ranges must be added sorted by `from` position and `startSide`.
+    const replace = (node: SyntaxNodeRef, marks: SyntaxNode[]) => {
+      if (cursor <= node.from || cursor >= node.to) {
+        for (const mark of marks) {
+          builder.add(mark.from, mark.to, Decoration.replace({}));
+        }
+      }
+    };
+
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case 'Emphasis':
+            case 'StrongEmphasis': {
+              const marks = node.node.getChildren('EmphasisMark');
+              replace(node, marks);
+              break;
+            }
+
+            case 'Strikethrough': {
+              const marks = node.node.getChildren('StrikethroughMark');
+              replace(node, marks);
+              break;
+            }
+          }
+        },
+        from,
+        to,
+      });
+    }
+
+    return builder.finish();
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+  ];
+};

package/src/extensions/markdown/heading.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case 'ATXHeading1':
+          case 'ATXHeading2':
+          case 'ATXHeading3':
+          case 'ATXHeading4':
+          case 'ATXHeading5':
+          case 'ATXHeading6': {
+            const mark = node.node.getChild('HeaderMark');
+            if (mark) {
+              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+              }
+            }
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const heading = () => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+  ];
+};

package/src/extensions/markdown/highlight.ts

@@ -128,13 +128,13 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // Markdown marks.
       {
         tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: readonly ? 'hidden' : mark,
+        class: mark,
       },
 
       // E.g., code block language (after ```).
       {
         tag: [tags.function(tags.variableName), tags.labelName],
-        class: readonly ? 'hidden' : codeMark,
+        class: codeMark,
       },
 
       {
@@ -143,12 +143,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       },
 
       // Headings.
-      { tag: tags.heading1, class: heading(1, readonly) },
-      { tag: tags.heading2, class: heading(2, readonly) },
-      { tag: tags.heading3, class: heading(3, readonly) },
-      { tag: tags.heading4, class: heading(4, readonly) },
-      { tag: tags.heading5, class: heading(5, readonly) },
-      { tag: tags.heading6, class: heading(6, readonly) },
+      { tag: tags.heading1, class: heading(1) },
+      { tag: tags.heading2, class: heading(2) },
+      { tag: tags.heading3, class: heading(3) },
+      { tag: tags.heading4, class: heading(4) },
+      { tag: tags.heading5, class: heading(5) },
+      { tag: tags.heading6, class: heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: italic },
@@ -165,7 +165,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
       // when a language is specified. In this case, the syntax highlighting extensions will colorize
       // the code, but all other CSS properties will be inherited.
-      // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+      // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
         class: code,
@@ -180,12 +180,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
         tag: [markdownTags.TableCell],
         class: 'font-mono',
       },
-
-      // Main content, paragraphs, etc.
-      // {
-      //   tag: [tags.content],
-      //   fontFamily: getToken('fontFamily.body', []).join(','),
-      // },
     ],
     {
       scope: markdownLanguage,

package/src/extensions/{hr.ts → markdown/hr.ts}

@@ -6,7 +6,7 @@ import { syntaxTree } from '@codemirror/language';
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { getToken } from '../styles';
+import { getToken } from '../../styles';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
@@ -51,11 +51,9 @@ const buildDecorations = (view: EditorView): DecorationSet => {
 
 export const hr = () => {
   return [
-    styles,
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -65,8 +63,9 @@ export const hr = () => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
+    styles,
   ];
 };

package/src/extensions/markdown/index.ts

@@ -3,4 +3,12 @@
 //
 
 export * from './bundle';
+export * from './code';
+export * from './formatting';
+export * from './heading';
 export * from './highlight';
+export * from './hr';
+export * from './image';
+export * from './link';
+export * from './table';
+export * from './tasklist';

package/src/extensions/{link.ts → markdown/link.ts}

@@ -22,6 +22,7 @@ import { tooltipContent } from '@dxos/react-ui-theme';
 // 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): Callback to dynamically lookup title of linked pages.
 export type LinkOptions = {
   link?: boolean;
   onHover?: (el: Element, url: string) => void;
@@ -37,7 +38,6 @@ export const link = (options: LinkOptions = {}): Extension => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view, options);
         }
@@ -49,7 +49,7 @@ export const link = (options: LinkOptions = {}): Extension => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];
@@ -65,10 +65,12 @@ export const link = (options: LinkOptions = {}): Extension => {
         for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
           link = node.name === 'Link' ? node : null;
         }
+
         const url = link && link.getChild('URL');
         if (!url || !link) {
           return null;
         }
+
         const urlText = view.state.sliceDoc(url.from, url.to);
         return {
           pos: link.from,
@@ -89,7 +91,10 @@ export const link = (options: LinkOptions = {}): Extension => {
 };
 
 class LinkButton extends WidgetType {
-  constructor(private readonly _url: string, private readonly _onAttach: LinkOptions['onRender']) {
+  constructor(
+    private readonly _url: string,
+    private readonly _onAttach: LinkOptions['onRender'],
+  ) {
     super();
   }
 
@@ -105,7 +110,10 @@ class LinkButton extends WidgetType {
 }
 
 class LinkText extends WidgetType {
-  constructor(private readonly _text: string, private readonly _url?: string) {
+  constructor(
+    private readonly _text: string,
+    private readonly _url?: string,
+  ) {
     super();
   }
 
@@ -158,6 +166,7 @@ const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet
             return false;
           }
 
+          // TODO(burdon): Don't expand if moving cursor up/down.
           if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(
               node.from,

package/src/extensions/{tasklist.ts → markdown/tasklist.ts}

@@ -6,7 +6,7 @@ import { syntaxTree } from '@codemirror/language';
 import { RangeSetBuilder } from '@codemirror/state';
 import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
 
-import { getToken } from '../styles';
+import { getToken } from '../../styles';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
@@ -91,7 +91,6 @@ export const tasklist = (options: TasklistOptions = {}) => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -103,7 +102,7 @@ export const tasklist = (options: TasklistOptions = {}) => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
     styles,

package/src/hooks/awareness-provider.ts

@@ -29,9 +29,10 @@ export type AwarenessProviderParams = {
   info: AwarenessInfo;
 };
 
+/**
+ * Receives and broadcasts profile and cursor position.
+ */
 export class SpaceAwarenessProvider implements AwarenessProvider {
-  public readonly remoteStateChange = new Event<void>();
-
   private readonly _remoteStates = new Map<string, AwarenessState>();
 
   private readonly _space: Space;
@@ -39,9 +40,11 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
   private readonly _peerId: string;
   private readonly _info: AwarenessInfo;
 
-  private _localState?: AwarenessState;
-  private _postTask?: DeferredTask;
   private _ctx?: Context;
+  private _postTask?: DeferredTask;
+  private _localState?: AwarenessState;
+
+  public readonly remoteStateChange = new Event<void>();
 
   constructor(params: AwarenessProviderParams) {
     this._space = params.space;
@@ -63,19 +66,20 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       }
     });
 
-    const unsubscribe = this._space.listen(this._channel, (message: GossipMessage) => {
-      switch (message.payload.kind) {
-        case 'query': {
-          this._handleQueryMessage();
-          break;
+    this._ctx.onDispose(
+      this._space.listen(this._channel, (message: GossipMessage) => {
+        switch (message.payload.kind) {
+          case 'query': {
+            this._handleQueryMessage();
+            break;
+          }
+          case 'post': {
+            this._handlePostMessage(message.payload);
+            break;
+          }
         }
-        case 'post': {
-          this._handlePostMessage(message.payload);
-          break;
-        }
-      }
-    });
-    this._ctx.onDispose(unsubscribe);
+      }),
+    );
 
     void this._space
       .postMessage(this._channel, {
@@ -92,6 +96,10 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask = undefined;
   }
 
+  getRemoteStates(): AwarenessState[] {
+    return Array.from(this._remoteStates.values());
+  }
+
   update(position: AwarenessPosition | undefined): void {
     invariant(this._postTask);
     this._localState = {
@@ -103,10 +111,6 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask.schedule();
   }
 
-  getRemoteStates(): AwarenessState[] {
-    return Array.from(this._remoteStates.values());
-  }
-
   private _handleQueryMessage() {
     invariant(this._postTask);
     this._postTask.schedule();

package/src/hooks/defs.ts

@@ -3,10 +3,8 @@
 //
 
 import { type Extension, StateField } from '@codemirror/state';
-import type * as YP from 'y-protocols/awareness';
 
 import { type DocAccessor } from '@dxos/echo-schema';
-import type { YText, YXmlFragment } from '@dxos/text-model';
 
 // Runtime data structure.
 export type Range = {
@@ -26,10 +24,7 @@ export type EditorModel = {
   extension?: Extension;
 
   // TODO(burdon): Remove.
-  content: string | YText | YXmlFragment | DocAccessor;
-
-  // TODO(burdon): Move into extension.
-  awareness?: YP.Awareness;
+  content: string | DocAccessor;
 
   // TODO(burdon): Remove.
   peer?: {

package/src/hooks/index.ts

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './automerge';
 export * from './awareness-provider';
 export * from './defs';
-export * from './yjs';
 
+export * from './useActionHandler';
+export * from './useEditorView';
+export * from './useTextEditor';
 export * from './useTextModel';

package/src/hooks/useActionHandler.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { EditorView } from '@codemirror/view';
+
+import type { ToolbarProps } from '../components';
+import {
+  createComment,
+  insertCodeblock,
+  insertTable,
+  setHeading,
+  toggleBold,
+  toggleItalic,
+  toggleList,
+  toggleStrikethrough,
+} from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+
+    switch (action.type) {
+      case 'heading':
+        setHeading(parseInt(action.data))(view);
+        break;
+
+      case 'bold':
+        toggleBold(view);
+        break;
+      case 'italic':
+        toggleItalic(view);
+        break;
+      case 'strikethrough':
+        toggleStrikethrough(view);
+        break;
+
+      case 'list':
+        toggleList(view);
+        break;
+
+      case 'codeblock':
+        insertCodeblock(view);
+        break;
+      case 'table':
+        insertTable(view);
+        break;
+
+      case 'comment':
+        createComment(view);
+        break;
+    }
+
+    // TODO(burdon): Hack otherwise remains on heading selector.
+    setTimeout(() => {
+      view.focus();
+      view.dispatch({ selection: view.state.selection });
+    });
+  };
+};

package/src/hooks/useEditorView.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefCallback, useState } from 'react';
+
+/**
+ * Hook for accessing the editor view.
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const [editorRef, editorView] = useEditorView();
+ *   useEffect(() => {
+ *     editorView?.focus();
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
+  const [view, setView] = useState<EditorView | null>(null);
+  return [
+    (ref: EditorView | null) => {
+      setView(ref);
+    },
+    view,
+  ];
+};