@dxos/react-ui-editor 0.3.11-main.b00882f → 0.3.11-main.b3f97d8

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,10 +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,93 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { EditorView } from '@codemirror/view';
+
+import type { ToolbarProps } from '../components';
+import {
+  createComment,
+  insertTable,
+  setHeading,
+  setStyle,
+  toggleStyle,
+  addLink,
+  removeLink,
+  Inline,
+  List,
+  addList,
+  removeList,
+  toggleList,
+  addBlockquote,
+  removeBlockquote,
+  addCodeblock,
+  removeCodeblock,
+  toggleBlockquote,
+} from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+
+    let inlineType, listType;
+    switch (action.type) {
+      case 'heading':
+        setHeading(parseInt(action.data))(view);
+        break;
+
+      case 'strong':
+      case 'emphasis':
+      case 'strikethrough':
+      case 'code':
+        inlineType =
+          action.type === 'strong'
+            ? Inline.Strong
+            : action.type === 'emphasis'
+              ? Inline.Emphasis
+              : action.type === 'strikethrough'
+                ? Inline.Strikethrough
+                : Inline.Code;
+        (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+        break;
+
+      case 'list-ordered':
+      case 'list-bullet':
+      case 'list-tasks':
+        listType =
+          action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
+        (action.data === false
+          ? removeList(listType)
+          : action.data === true
+            ? addList(listType)
+            : toggleList(listType))(view);
+        break;
+
+      case 'blockquote':
+        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+        break;
+      case 'codeblock':
+        (action.data === false ? removeCodeblock : addCodeblock)(view);
+        break;
+      case 'table':
+        insertTable(view);
+        break;
+
+      case 'link':
+        (action.data === false ? removeLink : addLink)(view);
+        break;
+
+      case 'comment':
+        createComment(view);
+        break;
+    }
+
+    // TODO(burdon): Hack otherwise remains on heading selector.
+    setTimeout(() => {
+      if (!view.hasFocus) {
+        view.focus();
+      }
+    });
+  };
+};

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,
+  ];
+};

package/src/hooks/useTextEditor.ts

@@ -2,28 +2,152 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import { type RefCallback, useState } from 'react';
+import {
+  EditorSelection,
+  EditorState,
+  type EditorStateConfig,
+  type Extension,
+  type StateEffect,
+} from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type RefObject, useEffect, useRef, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
+
+import { type ThemeStyles } from '..//styles';
+import { defaultTheme } from '../themes';
+import { logChanges } from '../util';
+
+export type UseTextEditorOptions = {
+  autoFocus?: boolean;
+  scrollTo?: StateEffect<any>;
+  debug?: boolean;
+} & EditorStateConfig;
+
+export type UseTextEditor = {
+  parentRef: RefObject<HTMLDivElement>;
+  view?: EditorView;
+};
 
 /**
- * Hook for accessing the editor view.
- *
- * ```tsx
- * const Test = () => {
- *   const [editorRef, editorView] = useTextEditor();
- *   useEffect(() => {
- *     editorView?.focus();
- *   }, [editorView]);
- *   return <TextEditor ref={editorRef} />;
- * };
- * ```
+ * Hook for creating editor.
  */
-export const useTextEditor = (): [RefCallback<EditorView | null>, EditorView | null] => {
-  const [view, setView] = useState<EditorView | null>(null);
+export const useTextEditor = ({
+  autoFocus,
+  scrollTo,
+  debug,
+  doc,
+  selection,
+  extensions,
+}: UseTextEditorOptions = {}): UseTextEditor => {
+  const onUpdate = useRef<() => void>();
+  const [view, setView] = useState<EditorView>();
+  const parentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (parentRef.current) {
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      const state = EditorState.create({
+        doc,
+        selection,
+        extensions: [
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView.exceptionSink.of((err) => {
+            log.catch(err);
+          }),
+          extensions,
+          EditorView.updateListener.of(() => {
+            onUpdate.current?.();
+          }),
+        ].filter(isNotFalsy),
+      });
+
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      const view = new EditorView({
+        parent: parentRef.current,
+        scrollTo,
+        state,
+        // NOTE: Uncomment to debug/monitor all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatchTransactions: (trs, view) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view.update(trs);
+        },
+      });
+
+      setView(view);
+    }
+
+    return () => {
+      view?.destroy();
+    };
+  }, [parentRef]);
+
+  useEffect(() => {
+    if (view) {
+      // Select end of line if not specified.
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection.single(view.state.doc.line(1).to);
+      }
+
+      // Set selection after first update (since content may rerender on focus).
+      // TODO(burdon): BUG on first render may appear in middle of formatted heading.
+      // TODO(burdon): Make invisible until first render?
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = undefined;
+          view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
+        };
+      }
+
+      if (autoFocus) {
+        view.focus();
+      }
+    }
+  }, [view, autoFocus, selection, scrollTo]);
+
+  return { parentRef, view };
+};
+
+// TODO(burdon): Factor out extension factories.
+
+export type DataExtensionsOptions = {
+  readonly?: boolean;
+};
+
+// TODO(burdon): Pass in TextObject (remove model).
+export const createDataExtensions = ({ readonly = false } = {}): Extension => {
   return [
-    (ref: EditorView | null) => {
-      setView(ref);
-    },
-    view,
+    //
+    EditorState.readOnly.of(readonly),
+    EditorView.editable.of(!readonly),
   ];
 };
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  lineWrap?: boolean;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
+  return [
+    //
+    EditorView.baseTheme(defaultTheme),
+    theme && EditorView.theme(theme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
+    EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
+  ].filter(isNotFalsy);
+};