@dxos/react-ui-editor 0.8.1-staging.9eaf14f → 0.8.2-main.12df754

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.1-staging.9eaf14f",
+  "version": "0.8.2-main.12df754",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,6 +13,11 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -51,20 +56,21 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.1-staging.9eaf14f",
-    "@dxos/async": "0.8.1-staging.9eaf14f",
-    "@dxos/context": "0.8.1-staging.9eaf14f",
-    "@dxos/automerge": "0.8.1-staging.9eaf14f",
-    "@dxos/debug": "0.8.1-staging.9eaf14f",
-    "@dxos/display-name": "0.8.1-staging.9eaf14f",
-    "@dxos/echo-schema": "0.8.1-staging.9eaf14f",
-    "@dxos/log": "0.8.1-staging.9eaf14f",
-    "@dxos/invariant": "0.8.1-staging.9eaf14f",
-    "@dxos/live-object": "0.8.1-staging.9eaf14f",
-    "@dxos/protocols": "0.8.1-staging.9eaf14f",
-    "@dxos/react-hooks": "0.8.1-staging.9eaf14f",
-    "@dxos/react-ui-menu": "0.8.1-staging.9eaf14f",
-    "@dxos/util": "0.8.1-staging.9eaf14f"
+    "@dxos/app-graph": "0.8.2-main.12df754",
+    "@dxos/async": "0.8.2-main.12df754",
+    "@dxos/context": "0.8.2-main.12df754",
+    "@dxos/debug": "0.8.2-main.12df754",
+    "@dxos/display-name": "0.8.2-main.12df754",
+    "@dxos/echo-schema": "0.8.2-main.12df754",
+    "@dxos/lit-ui": "0.8.2-main.12df754",
+    "@dxos/invariant": "0.8.2-main.12df754",
+    "@dxos/automerge": "0.8.2-main.12df754",
+    "@dxos/log": "0.8.2-main.12df754",
+    "@dxos/live-object": "0.8.2-main.12df754",
+    "@dxos/protocols": "0.8.2-main.12df754",
+    "@dxos/react-hooks": "0.8.2-main.12df754",
+    "@dxos/react-ui-menu": "0.8.2-main.12df754",
+    "@dxos/util": "0.8.2-main.12df754"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -88,23 +94,23 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/automerge": "0.8.1-staging.9eaf14f",
-    "@dxos/config": "0.8.1-staging.9eaf14f",
-    "@dxos/echo-signals": "0.8.1-staging.9eaf14f",
-    "@dxos/keyboard": "0.8.1-staging.9eaf14f",
-    "@dxos/random": "0.8.1-staging.9eaf14f",
-    "@dxos/react-client": "0.8.1-staging.9eaf14f",
-    "@dxos/react-ui": "0.8.1-staging.9eaf14f",
-    "@dxos/react-ui-theme": "0.8.1-staging.9eaf14f",
-    "@dxos/storybook-utils": "0.8.1-staging.9eaf14f"
+    "@dxos/automerge": "0.8.2-main.12df754",
+    "@dxos/config": "0.8.2-main.12df754",
+    "@dxos/echo-signals": "0.8.2-main.12df754",
+    "@dxos/keyboard": "0.8.2-main.12df754",
+    "@dxos/react-client": "0.8.2-main.12df754",
+    "@dxos/react-ui-theme": "0.8.2-main.12df754",
+    "@dxos/random": "0.8.2-main.12df754",
+    "@dxos/storybook-utils": "0.8.2-main.12df754",
+    "@dxos/react-ui": "0.8.2-main.12df754"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.1-staging.9eaf14f",
-    "@dxos/react-ui": "0.8.1-staging.9eaf14f",
-    "@dxos/react-ui-theme": "0.8.1-staging.9eaf14f"
+    "@dxos/react-client": "0.8.2-main.12df754",
+    "@dxos/react-ui": "0.8.2-main.12df754",
+    "@dxos/react-ui-theme": "0.8.2-main.12df754"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -26,8 +26,8 @@ import {
   type EditorToolbarProps,
   editorToolbarSearch,
 } from './util';
-import { createViewMode } from './viewMode';
-import { stackItemContentToolbarClassNames } from '../../fragments';
+import { createViewMode } from './view-mode';
+import { stackItemContentToolbarClassNames } from '../../defaults';
 
 const createToolbar = ({
   state,

package/src/components/EditorToolbar/util.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { live, type Live } from '@dxos/live-object';
 import { type Label, type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
@@ -23,7 +23,7 @@ export type EditorToolbarState = Formatting &
   Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
 
 export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
-  return useMemo(() => create<EditorToolbarState>(initialState), []);
+  return useMemo(() => live<EditorToolbarState>(initialState), []);
 };
 
 export type EditorToolbarFeatureFlags = Partial<{
@@ -37,7 +37,7 @@ export type EditorToolbarFeatureFlags = Partial<{
 }>;
 
 export type EditorToolbarActionGraphProps = {
-  state: ReactiveObject<EditorToolbarState>;
+  state: Live<EditorToolbarState>;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
   onAction: (action: EditorAction) => void;

package/src/defaults.ts

@@ -17,7 +17,9 @@ const margin = '!mt-[1rem]';
  * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
  */
 // TOOD(burdon): Adjust depending on
-export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-4rem)]');
+export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
+
+export const editorContent = mx(margin, editorWidth);
 
 /**
  * Margin for numbers.
@@ -50,6 +52,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator',
-    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+    'attention-surface is-full border-be !border-separator relative z-[1]',
+    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

package/src/extensions/automerge/automerge.stories.tsx

@@ -10,15 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import {
-  DocAccessor,
-  Filter,
-  create,
-  createDocAccessor,
-  useQuery,
-  useSpace,
-  type Space,
-} from '@dxos/react-client/echo';
+import { DocAccessor, Filter, live, createDocAccessor, useQuery, useSpace, type Space } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
@@ -139,9 +131,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            create({
+            live({
               type: 'test',
-              content: create(Expando, { content: initialContent }),
+              content: live(Expando, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/command/action.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { type KeyBinding, type Command, type EditorView } from '@codemirror/view';
+
+import { commandState } from './state';
+
+export type Action =
+  | {
+      type: 'insert';
+      text: string;
+    }
+  | {
+      type: 'cancel';
+    };
+
+export type ActionHandler = (action: Action) => void;
+
+export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
+export const closeEffect = StateEffect.define<null>();
+
+export const openCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const closeCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({ effects: closeEffect.of(null) });
+    return true;
+  }
+
+  return false;
+};
+
+export const commandKeyBindings: readonly KeyBinding[] = [
+  { key: '/', run: openCommand },
+  { key: 'Escape', run: closeCommand },
+];

package/src/extensions/command/command.ts

@@ -5,35 +5,25 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
-import { hintViewPlugin } from './hint';
-import { floatingMenu } from './menu';
-import { preview, type PreviewOptions } from './preview';
-import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
+import { closeEffect, commandKeyBindings } from './action';
+import { hintViewPlugin, type HintOptions } from './hint';
+import { floatingMenu, type FloatingMenuOptions } from './menu';
+import { commandConfig, commandState, type PopupOptions } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
 // https://github.com/saminzadeh/codemirror-extension-inline-suggestion
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
 
-// TODO(burdon): Discriminated union.
-export type CommandAction = {
-  insert?: string;
-};
-
-export type CommandOptions = {
-  onHint: () => string | undefined;
-  onRenderDialog: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
-  onRenderMenu: (el: HTMLElement, cb: () => void) => void;
-} & Pick<PreviewOptions, 'onRenderPreview'>;
+export type CommandOptions = Partial<PopupOptions & FloatingMenuOptions & HintOptions>;
 
-export const command = (options: CommandOptions): Extension => {
+export const command = (options: CommandOptions = {}): Extension => {
   return [
+    keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    keymap.of(commandKeyBindings),
-    preview(options),
-    floatingMenu(options),
-    hintViewPlugin(options),
+    options.renderMenu ? floatingMenu({ renderMenu: options.renderMenu }) : [],
+    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
@@ -41,14 +31,6 @@ export const command = (options: CommandOptions): Extension => {
       '.cm-tooltip': {
         background: 'transparent',
       },
-      '.cm-preview': {
-        marginLeft: '-1rem',
-        marginRight: '-1rem',
-        padding: '1rem',
-        borderRadius: '1rem',
-        background: 'var(--dx-modalSurface)',
-        border: '1px solid var(--dx-separator)',
-      },
     }),
   ];
 };

package/src/extensions/command/hint.ts

@@ -5,10 +5,42 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
-import { type CommandOptions } from './command';
 import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
+export type HintOptions = {
+  onHint: () => string | undefined;
+};
+
+export const hintViewPlugin = ({ onHint }: HintOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      deco = Decoration.none;
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const cState = update.view.state.field(commandState, false);
+        if (!cState?.tooltip) {
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+          // Only show if blank line.
+          // TODO(burdon): Clashes with placeholder if pos === 0.
+          // TODO(burdon): Show after delay or if blank line above?
+          if (selection.from === selection.to && line.from === line.to) {
+            const hint = onHint();
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
+            }
+          }
+        }
+
+        this.deco = builder.finish();
+      }
+    },
+    {
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
+    },
+  );
+
 class CommandHint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {
     super();
@@ -48,32 +80,3 @@ class CommandHint extends WidgetType {
     return false;
   }
 }
-
-export const hintViewPlugin = ({ onHint }: CommandOptions) =>
-  ViewPlugin.fromClass(
-    class {
-      deco = Decoration.none;
-      update(update: ViewUpdate) {
-        const builder = new RangeSetBuilder<Decoration>();
-        const cState = update.view.state.field(commandState, false);
-        if (!cState?.tooltip) {
-          const selection = update.view.state.selection.main;
-          const line = update.view.state.doc.lineAt(selection.from);
-          // Only show if blank line.
-          // TODO(burdon): Clashes with placeholder if pos === 0.
-          // TODO(burdon): Show after delay or if blank line above?
-          if (selection.from === selection.to && line.from === line.to) {
-            const hint = onHint();
-            if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
-            }
-          }
-        }
-
-        this.deco = builder.finish();
-      }
-    },
-    {
-      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
-    },
-  );

package/src/extensions/command/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './action';
 export * from './command';

package/src/extensions/command/menu.ts

@@ -4,12 +4,16 @@
 
 import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { type CommandOptions } from './command';
-import { closeEffect, openCommand, openEffect } from './state';
+import { closeEffect, openCommand, openEffect } from './action';
+import { type RenderCallback } from '../../types';
+
+export type FloatingMenuOptions = {
+  renderMenu: RenderCallback<{ onAction: () => void }>;
+};
 
 // TODO(burdon): Trigger completion on click.
 // TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: CommandOptions) =>
+export const floatingMenu = (options: FloatingMenuOptions) =>
   ViewPlugin.fromClass(
     class {
       button: HTMLElement;
@@ -31,13 +35,11 @@ export const floatingMenu = (options: CommandOptions) =>
         this.button.style.zIndex = '10';
         this.button.style.display = 'none';
 
-        options.onRenderMenu(this.button, () => {
-          openCommand(view);
-        });
+        options.renderMenu(this.button, { onAction: () => openCommand(view) }, view);
         container.appendChild(this.button);
 
         // Listen for scroll events.
-        container.addEventListener('scroll', this.scheduleUpdate);
+        container.addEventListener('scroll', this.scheduleUpdate.bind(this));
         this.scheduleUpdate();
       }
 
@@ -56,7 +58,8 @@ export const floatingMenu = (options: CommandOptions) =>
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
-        this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
+
+        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
       }
 
       updateButtonPosition() {

package/src/extensions/command/state.ts

@@ -2,25 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StateEffect, StateField } from '@codemirror/state';
-import {
-  showTooltip,
-  type Command,
-  type EditorView,
-  type KeyBinding,
-  type Tooltip,
-  type TooltipView,
-} from '@codemirror/view';
+import { StateField } from '@codemirror/state';
+import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
 
+import { closeEffect, type Action, openEffect } from './action';
 import { type CommandOptions } from './command';
+import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
+export const commandConfig = singleValueFacet<CommandOptions>();
+
+export type PopupOptions = {
+  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
+};
+
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
-export const commandConfig = singleValueFacet<CommandOptions>();
-
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),
   update: (state, tr) => {
@@ -29,8 +28,8 @@ export const commandState = StateField.define<CommandState>({
         return {};
       }
 
-      if (effect.is(openEffect)) {
-        const options = tr.state.facet(commandConfig);
+      const { renderDialog } = tr.state.facet(commandConfig);
+      if (effect.is(openEffect) && renderDialog) {
         const { pos, fullWidth } = effect.value;
         const tooltip: Tooltip = {
           pos,
@@ -38,38 +37,49 @@ export const commandState = StateField.define<CommandState>({
           arrow: false,
           strictSide: true,
           create: (view: EditorView) => {
-            const dom = document.createElement('div');
+            const root = document.createElement('div');
+
             const tooltipView: TooltipView = {
-              dom,
+              dom: root,
               mount: (view: EditorView) => {
                 if (fullWidth) {
-                  const parent = dom.parentElement!;
+                  const parent = root.parentElement!;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  dom.style.width = `${widthWithoutPadding}px`;
+                  root.style.width = `${widthWithoutPadding}px`;
                 }
 
                 // Render react component.
-                options.onRenderDialog(dom, (action) => {
-                  view.dispatch({ effects: closeEffect.of(null) });
-                  if (action?.insert?.length) {
-                    // Insert into editor.
-                    const text = action.insert + '\n';
-                    view.dispatch({
-                      changes: { from: pos, insert: text },
-                      selection: { anchor: pos + text.length },
-                    });
-                  }
-
-                  // NOTE: Truncates text if set focus immediately.
-                  requestAnimationFrame(() => view.focus());
-                });
+                renderDialog(
+                  root,
+                  {
+                    onAction: (action) => {
+                      view.dispatch({ effects: closeEffect.of(null) });
+                      switch (action?.type) {
+                        case 'insert': {
+                          // Insert into editor.
+                          const text = action.text + '\n';
+                          view.dispatch({
+                            changes: { from: pos, insert: text },
+                            selection: { anchor: pos + text.length },
+                          });
+                          break;
+                        }
+                      }
+
+                      // NOTE: Truncates text if set focus immediately.
+                      requestAnimationFrame(() => view.focus());
+                    },
+                  },
+                  view,
+                );
               },
             };
 
             return tooltipView;
           },
         };
+
         return { tooltip };
       }
     }
@@ -78,33 +88,3 @@ export const commandState = StateField.define<CommandState>({
   },
   provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
-
-export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
-export const closeEffect = StateEffect.define<null>();
-
-export const openCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    const selection = view.state.selection.main;
-    const line = view.state.doc.lineAt(selection.from);
-    if (line.from === selection.from && line.from === line.to) {
-      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const closeCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    view.dispatch({ effects: closeEffect.of(null) });
-    return true;
-  }
-
-  return false;
-};
-
-export const commandKeyBindings: readonly KeyBinding[] = [
-  { key: '/', run: openCommand },
-  { key: 'Escape', run: closeCommand },
-];

package/src/extensions/comments.ts

@@ -25,13 +25,13 @@ import sortBy from 'lodash.sortby';
 import { useEffect, useMemo } from 'react';
 
 import { debounce, type CleanupFn } from '@dxos/async';
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
 import { type EditorToolbarState } from '../components';
-import { type Comment, type Range } from '../types';
+import { type RenderCallback, type Comment, type Range } from '../types';
 import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
 
 //
@@ -345,6 +345,10 @@ export type CommentsOptions = {
    * Key shortcut to create a new thread.
    */
   key?: string;
+  /**
+   * Called to render tooltip.
+   */
+  renderTooltip?: RenderCallback<{ shortcut: string }>;
   /**
    * Called to create a new thread and return the thread id.
    */
@@ -361,10 +365,6 @@ export type CommentsOptions = {
    * Called to notify which thread is currently closest to the cursor.
    */
   onSelect?: (state: CommentsState) => void;
-  /**
-   * Called to render tooltip.
-   */
-  onHover?: (el: Element, shortcut: string) => void;
 };
 
 const optionsFacet = singleValueFacet<CommentsOptions>();
@@ -408,7 +408,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover &&
+    options.renderTooltip &&
       hoverTooltip(
         (view, pos) => {
           const selection = view.state.selection.main;
@@ -419,7 +419,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
               above: true,
               create: () => {
                 const el = document.createElement('div');
-                options.onHover!(el, shortcut);
+                options.renderTooltip!(el, { shortcut }, view);
                 return { dom: el, offset: { x: 0, y: 8 } };
               },
             };
@@ -606,7 +606,7 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+export const useCommentState = (state: Live<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/folding.tsx

@@ -29,7 +29,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
       const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
         el,
-        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+        <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),

package/src/extensions/index.ts

@@ -18,5 +18,6 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './preview';
 export * from './selection';
 export * from './typewriter';