@dxos/react-ui-editor 0.3.11-main.508f304 → 0.3.11-main.514e6e4

package/dist/types/src/styles/markdown.d.ts

@@ -1,6 +1,6 @@
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const headings: Record<HeadingLevel, string[]>;
-export declare const heading: (level: HeadingLevel, readonly?: boolean) => string;
+export declare const headings: Record<HeadingLevel, string>;
+export declare const heading: (level: HeadingLevel) => string;
 export declare const text = "text-neutral-800 dark:text-neutral-200";
 export declare const light = "text-neutral-200 dark:text-neutral-800";
 export declare const mark: string;

package/dist/types/src/styles/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAIjD,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,EAAE,CAOnD,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,YAAY,aAAa,OAAO,WAG9D,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAE1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAE9G,eAAO,MAAM,cAAc,0GAC8E,CAAC;AAG1G,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,CAAC"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAIjD,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAOjD,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,YAAY,WAE1C,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAE1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAE9G,eAAO,MAAM,cAAc,0GAC8E,CAAC;AAG1G,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,CAAC"}

package/dist/types/src/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAiO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WA+N1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.508f304",
+  "version": "0.3.11-main.514e6e4",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,23 +35,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "y-codemirror.next": "^0.3.2",
-    "y-protocols": "^1.0.5",
-    "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.508f304",
-    "@dxos/context": "0.3.11-main.508f304",
-    "@dxos/automerge": "0.3.11-main.508f304",
-    "@dxos/display-name": "0.3.11-main.508f304",
-    "@dxos/echo-schema": "0.3.11-main.508f304",
-    "@dxos/debug": "0.3.11-main.508f304",
-    "@dxos/log": "0.3.11-main.508f304",
-    "@dxos/invariant": "0.3.11-main.508f304",
-    "@dxos/react-ui": "0.3.11-main.508f304",
-    "@dxos/protocols": "0.3.11-main.508f304",
-    "@dxos/react-async": "0.3.11-main.508f304",
-    "@dxos/react-ui-theme": "0.3.11-main.508f304",
-    "@dxos/text-model": "0.3.11-main.508f304",
-    "@dxos/util": "0.3.11-main.508f304"
+    "@dxos/async": "0.3.11-main.514e6e4",
+    "@dxos/context": "0.3.11-main.514e6e4",
+    "@dxos/display-name": "0.3.11-main.514e6e4",
+    "@dxos/debug": "0.3.11-main.514e6e4",
+    "@dxos/echo-schema": "0.3.11-main.514e6e4",
+    "@dxos/invariant": "0.3.11-main.514e6e4",
+    "@dxos/automerge": "0.3.11-main.514e6e4",
+    "@dxos/log": "0.3.11-main.514e6e4",
+    "@dxos/protocols": "0.3.11-main.514e6e4",
+    "@dxos/react-async": "0.3.11-main.514e6e4",
+    "@dxos/react-ui-theme": "0.3.11-main.514e6e4",
+    "@dxos/text-model": "0.3.11-main.514e6e4",
+    "@dxos/react-ui": "0.3.11-main.514e6e4",
+    "@dxos/util": "0.3.11-main.514e6e4"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -67,24 +64,24 @@
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.11-main.508f304",
-    "@dxos/keyboard": "0.3.11-main.508f304",
-    "@dxos/echo-typegen": "0.3.11-main.508f304",
-    "@dxos/echo-signals": "0.3.11-main.508f304",
-    "@dxos/react-ui": "0.3.11-main.508f304",
-    "@dxos/react-client": "0.3.11-main.508f304",
-    "@dxos/storybook-utils": "0.3.11-main.508f304"
+    "@dxos/echo-signals": "0.3.11-main.514e6e4",
+    "@dxos/config": "0.3.11-main.514e6e4",
+    "@dxos/keyboard": "0.3.11-main.514e6e4",
+    "@dxos/echo-typegen": "0.3.11-main.514e6e4",
+    "@dxos/react-ui": "0.3.11-main.514e6e4",
+    "@dxos/storybook-utils": "0.3.11-main.514e6e4",
+    "@dxos/react-client": "0.3.11-main.514e6e4"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.508f304"
+    "@dxos/react-client": "0.3.11-main.514e6e4"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "prebuild": "dxtype src/testing/proto/schema.proto src/testing/proto/gen/schema.ts"
+    "test": "true"
   }
 }

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

@@ -34,6 +34,7 @@ import {
   type CommentsOptions,
   type LinkOptions,
   useComments,
+  heading,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
 
@@ -82,7 +83,7 @@ const text = {
     '## Code',
     '',
     '```',
-    'const x = 100;',
+    '$ ls -las',
     '```',
     '',
     '```tsx',
@@ -248,6 +249,7 @@ const defaults = [
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
+  heading(),
   hr(),
   image(),
   link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
@@ -290,11 +292,11 @@ export const Links = {
 };
 
 export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} readonly />,
+  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
 };
 
 export const Image = {
-  render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
+  render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
 };
 
 export const Lists = {
@@ -366,7 +368,7 @@ export const Comments = {
                   'update',
                   JSON.stringify({
                     comments: state.comments.length,
-                    active: state.selection.active?.slice(0, 8),
+                    active: state.selection.current?.slice(0, 8),
                     closest: state.selection.closest?.slice(0, 8),
                   }),
                 );

package/src/components/TextEditor/TextEditor.tsx

@@ -20,9 +20,9 @@ import React, {
 
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { inputSurface, mx } from '@dxos/react-ui-theme';
+import { attentionSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle, useAwareness } from '../../extensions';
+import { basicBundle, markdownBundle } from '../../extensions';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
@@ -53,10 +53,10 @@ export type TextEditorSlots = {
 
 // TODO(burdon): Spellcheck?
 export type TextEditorProps = {
-  model: EditorModel;
+  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
-  autofocus?: boolean;
-  multiline?: boolean;
+  autoFocus?: boolean;
+  lineWrapping?: boolean;
   scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
   editorMode?: EditorMode; // TODO(burdon): Factor out.
@@ -75,7 +75,7 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     {
       model,
       readonly,
-      autofocus,
+      autoFocus,
       scrollTo,
       selection,
       editorMode,
@@ -98,13 +98,10 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
     // Set focus.
     useEffect(() => {
-      if (autofocus) {
+      if (autoFocus) {
         view?.focus();
       }
-    }, [view, autofocus]);
-
-    // Monitor awareness.
-    useAwareness(model);
+    }, [view, autoFocus]);
 
     // Create editor state and view.
     // The view is recreated if the model or extensions are changed.
@@ -214,14 +211,14 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
 
 // TODO(burdon): Single-line/scroll.
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, placeholder, multiline, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ themeMode, placeholder, multiline }), ...extensions]}
+        extensions={[basicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -238,7 +235,7 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ themeMode, readonly, placeholder }), ...extensions]}
+        extensions={[markdownBundle({ themeMode, placeholder }), ...extensions]}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -250,7 +247,7 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 export const defaultSlots: TextEditorSlots = {
   root: {
     // TODO(burdon): Add focusRing by default/as property?
-    className: mx('flex flex-col grow overflow-y-auto', inputSurface),
+    className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
   },
   editor: {
     className: 'h-full p-2',

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

@@ -153,7 +153,7 @@ const Thread: FC<{
       <div ref={containerRef} onClick={() => onSelect()} className='flex'>
         <TextEditor
           ref={editorRef}
-          autofocus={focus}
+          autoFocus={focus}
           model={model}
           placeholder={'Enter comment...'}
           slots={{ root: { className: 'grow rounded-b' } }}
@@ -241,7 +241,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
           : [],
       },
     ]);
-    setSelected(id);
+    setSelected(id); // TODO(burdon): Not required.
     return id;
   };
 
@@ -273,8 +273,8 @@ const Story = ({ text, autoCreate }: StoryProps) => {
     );
   };
 
-  const handleSelectComment: CommentsOptions['onSelect'] = ({ comments, selection: { active, closest } }) => {
-    log.info('select', { active: active?.slice(0, 4), closest: closest?.slice(0, 4) });
+  const handleSelectComment: CommentsOptions['onSelect'] = ({ comments, selection: { current, closest } }) => {
+    log.info('select', { active: current?.slice(0, 4), closest: closest?.slice(0, 4) });
     setThreads((threads) =>
       threads.map((thread) => {
         const comment = comments.find(({ comment }) => comment.id === thread.id);
@@ -287,7 +287,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
       }),
     );
 
-    setSelected(active ?? closest);
+    setSelected(current ?? closest);
   };
 
   const handleSelectThread = (id: string) => {

package/src/extensions/awareness.ts

@@ -12,16 +12,11 @@ import {
   type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
-import { useEffect } from 'react';
 
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
-import { generateName } from '@dxos/display-name';
-import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue } from '@dxos/react-ui-theme';
 
 import { Cursor, type CursorConverter } from './cursor';
-import { type EditorModel } from '../hooks';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;
@@ -29,8 +24,8 @@ export interface AwarenessProvider {
   open(): void;
   close(): void;
 
-  update(position: AwarenessPosition | undefined): void;
   getRemoteStates(): AwarenessState[];
+  update(position: AwarenessPosition | undefined): void;
 }
 
 const dummyProvider: AwarenessProvider = {
@@ -39,8 +34,8 @@ const dummyProvider: AwarenessProvider = {
   open: () => {},
   close: () => {},
 
-  update: () => {},
   getRemoteStates: () => [],
+  update: () => {},
 };
 
 export const AwarenessProvider = Facet.define<AwarenessProvider, AwarenessProvider>({
@@ -81,19 +76,6 @@ export const awareness = (provider = dummyProvider): Extension => {
   ];
 };
 
-export const useAwareness = ({ awareness, peer }: EditorModel) => {
-  const { themeMode } = useThemeContext();
-  useEffect(() => {
-    if (awareness && peer) {
-      awareness.setLocalStateField('user', {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({ value: peer.id, type: 'color' }),
-        colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-      });
-    }
-  }, [awareness, peer, themeMode]);
-};
-
 /**
  * Generates selection decorations from remote peers.
  */
@@ -268,7 +250,6 @@ class RemoteCaretWidget extends WidgetType {
   }
 }
 
-// TODO(burdon): Mixed case?
 const styles = EditorView.baseTheme({
   '.cm-collab-selection': {},
   '.cm-collab-selectionLine': {
@@ -283,38 +264,40 @@ const styles = EditorView.baseTheme({
     marginRight: '-1px',
     boxSizing: 'border-box',
     display: 'inline',
+    cursor: 'pointer',
   },
   '.cm-collab-selectionCaretDot': {
     borderRadius: '50%',
     position: 'absolute',
-    width: '.4em',
-    height: '.4em',
-    top: '-.2em',
-    left: '-.2em',
+    width: '.5em',
+    height: '.5em',
+    top: '-.25em',
+    left: '-.25em',
     backgroundColor: 'inherit',
     transition: 'transform .3s ease-in-out',
     boxSizing: 'border-box',
   },
   '.cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot': {
-    transformOrigin: 'bottom center',
     transform: 'scale(0)',
+    transformOrigin: 'center',
   },
   '.cm-collab-selectionInfo': {
     position: 'absolute',
-    top: '-1.05em',
-    left: '-1px',
+    transform: 'translate(-50%, 0)',
+    top: '-20px',
+    left: 0,
     fontSize: '.75em',
-    fontFamily: 'serif',
+    fontFamily: 'sans-serif',
     fontStyle: 'normal',
     fontWeight: 'normal',
     lineHeight: 'normal',
     userSelect: 'none',
     color: 'white',
-    paddingLeft: '2px',
-    paddingRight: '2px',
+    padding: '2px',
     zIndex: 101,
     transition: 'opacity .3s ease-in-out',
     backgroundColor: 'inherit',
+    borderRadius: '2px',
     // These should be separate.
     opacity: 0,
     transitionDelay: '0s',

package/src/extensions/basic.ts

@@ -15,14 +15,14 @@ import { type TextEditorProps } from '../components';
 
 export type BasicBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'placeholder' | 'multiline'>;
+} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
 
 export const basicBundle = ({
   themeMode,
   placeholder: _placeholder,
-  multiline = true,
+  lineWrapping = true,
 }: BasicBundleOptions): Extension[] => [
-  multiline ? EditorView.lineWrapping : [],
+  lineWrapping ? EditorView.lineWrapping : [],
 
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),

package/src/extensions/comments.ts

@@ -21,14 +21,14 @@ const styles = EditorView.baseTheme({
   '& .cm-comment': {
     backgroundColor: getToken('extend.colors.yellow.50'),
   },
-  '& .cm-comment-active': {
+  '& .cm-comment-current': {
     backgroundColor: getToken('extend.colors.yellow.100'),
   },
 });
 
 const marks = {
   highlight: Decoration.mark({ class: 'cm-comment' }),
-  highlightActive: Decoration.mark({ class: 'cm-comment-active' }),
+  highlightActive: Decoration.mark({ class: 'cm-comment-current' }),
 };
 
 type CommentState = {
@@ -38,7 +38,7 @@ type CommentState = {
 };
 
 type SelectionState = {
-  active?: string;
+  current?: string;
   closest?: string;
 };
 
@@ -60,7 +60,7 @@ export const setFocus = (view: EditorView, id: string, center = true) => {
       effects: [
         //
         EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined),
-        setSelection.of({ active: id }),
+        setSelection.of({ current: id }),
       ],
     });
   }
@@ -117,7 +117,7 @@ const commentsState = StateField.define<CommentsState>({
  */
 const highlightDecorations = EditorView.decorations.compute([commentsState], (state) => {
   const {
-    selection: { active },
+    selection: { current },
     comments,
   } = state.field(commentsState);
 
@@ -129,7 +129,7 @@ const highlightDecorations = EditorView.decorations.compute([commentsState], (st
         return undefined;
       }
 
-      if (comment.comment.id === active) {
+      if (comment.comment.id === current) {
         return marks.highlightActive.range(range.from, range.to);
       } else {
         return marks.highlight.range(range.from, range.to);
@@ -279,7 +279,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       if (id) {
         // Update range.
         view.dispatch({
-          effects: setSelection.of({ active: id }),
+          effects: setSelection.of({ current: id }),
           selection: { anchor: from },
         });
 
@@ -371,10 +371,10 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     //
     // Track selection/proximity.
     //
-    EditorView.updateListener.of(({ view, state, changes }) => {
+    EditorView.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const {
-        selection: { active, closest },
+        selection: { current, closest },
         comments,
       } = state.field(commentsState);
 
@@ -382,11 +382,11 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       const selection: SelectionState = {};
       comments.forEach(({ comment, range }) => {
         if (head >= range.from && head <= range.to) {
-          selection.active = comment.id;
+          selection.current = comment.id;
           selection.closest = undefined;
         }
 
-        if (!selection.active) {
+        if (!selection.current) {
           const d = Math.min(Math.abs(head - range.from), Math.abs(head - range.to));
           if (d < min) {
             selection.closest = comment.id;
@@ -395,7 +395,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         }
       });
 
-      if (selection.active !== active || selection.closest !== closest) {
+      if (selection.current !== current || selection.closest !== closest) {
         view.dispatch({ effects: setSelection.of(selection) });
 
         // Update callback.
@@ -415,11 +415,11 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 };
 
 /**
- * Update state field.
+ * Update comments state field.
  */
-export const useComments = (view?: EditorView | null, comments?: Comment[]) => {
+export const useComments = (view: EditorView | null, comments: Comment[] = []) => {
   useEffect(() => {
-    if (view && comments) {
+    if (view) {
       view.dispatch({
         effects: setComments.of(comments),
       });

package/src/extensions/index.ts

@@ -7,17 +7,10 @@ export * from './automerge';
 export * from './awareness';
 export * from './basic';
 export * from './blast';
-export * from './code';
 export * from './comments';
 export * from './cursor';
-export * from './hr';
-export * from './image';
-export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './outliner';
-export * from './table';
-export * from './tasklist';
 export * from './typewriter';
-export * from './yjs';

package/src/extensions/markdown/bundle.ts

@@ -27,7 +27,7 @@ import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'readonly' | 'placeholder'>;
+} & Pick<TextEditorProps, 'placeholder'>;
 
 /**
  * Markdown bundle.
@@ -36,11 +36,7 @@ export type MarkdownBundleOptions = {
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
 // TODO(burdon): Add Composer here: https://codemirror.net/docs/community
-export const markdownBundle = ({
-  readonly,
-  themeMode,
-  placeholder: _placeholder,
-}: MarkdownBundleOptions): Extension[] => {
+export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
@@ -82,7 +78,7 @@ export const markdownBundle = ({
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
 
     // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle(readonly)),
+    syntaxHighlighting(markdownHighlightStyle()),
 
     keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab