@vizel/react 0.0.1-alpha.6 → 1.1.0

package/README.md

@@ -1,11 +1,11 @@
 # @vizel/react
 
-React components for Vizel block-based Markdown editor.
+React 19 components and hooks for Vizel block-based Markdown editor.
 
 ## Installation
 
 ```bash
-npm install @vizel/react @vizel/core
+npm install @vizel/react
 ```
 
 ## Requirements
@@ -22,7 +22,7 @@ import { Vizel } from "@vizel/react";
 import "@vizel/core/styles.css";
 
 function App() {
-  return <Vizel />;
+  return <Vizel placeholder="Type '/' for commands..." />;
 }
 ```
 
@@ -33,12 +33,16 @@ import { VizelEditor, VizelBubbleMenu, useVizelEditor } from "@vizel/react";
 import "@vizel/core/styles.css";
 
 function App() {
-  const editor = useVizelEditor();
+  const editor = useVizelEditor({
+    features: {
+      image: { onUpload: async (file) => "https://example.com/image.png" },
+    },
+  });
 
   return (
     <>
-      <VizelEditor editor={editor.current} />
-      <VizelBubbleMenu editor={editor.current} />
+      <VizelEditor editor={editor} />
+      {editor && <VizelBubbleMenu editor={editor} />}
     </>
   );
 }
@@ -51,14 +55,9 @@ import { useVizelEditor, useVizelMarkdown } from "@vizel/react";
 
 function App() {
   const editor = useVizelEditor();
-  const { getMarkdown, setMarkdown } = useVizelMarkdown(() => editor.current);
-
-  const handleExport = () => {
-    const markdown = getMarkdown();
-    console.log(markdown);
-  };
+  const { markdown, setMarkdown } = useVizelMarkdown(() => editor);
 
-  return <VizelEditor editor={editor.current} />;
+  return <VizelEditor editor={editor} />;
 }
 ```
 
@@ -66,20 +65,45 @@ function App() {
 
 | Component | Description |
 |-----------|-------------|
-| `Vizel` | All-in-one editor with bubble menu |
+| `Vizel` | All-in-one editor with bubble menu and optional toolbar |
 | `VizelEditor` | Editor component |
 | `VizelBubbleMenu` | Floating formatting toolbar |
+| `VizelBubbleMenuDefault` | Default bubble menu layout |
+| `VizelBubbleMenuButton` | Bubble menu button |
+| `VizelBubbleMenuDivider` | Bubble menu divider |
+| `VizelBubbleMenuColorPicker` | Bubble menu color picker |
 | `VizelSlashMenu` | Slash command menu |
+| `VizelSlashMenuItem` | Slash command menu item |
+| `VizelSlashMenuEmpty` | Slash command empty state |
+| `VizelToolbar` | Fixed toolbar |
+| `VizelToolbarDefault` | Default toolbar layout |
+| `VizelToolbarButton` | Toolbar button |
+| `VizelToolbarDivider` | Toolbar divider |
+| `VizelLinkEditor` | Link editing popover |
+| `VizelNodeSelector` | Node type selector |
+| `VizelColorPicker` | Color picker |
+| `VizelFindReplace` | Find and replace panel |
+| `VizelSaveIndicator` | Auto-save status indicator |
+| `VizelEmbedView` | Embed content viewer |
 | `VizelIconProvider` | Custom icon provider |
+| `VizelThemeProvider` | Theme provider |
+| `VizelProvider` | Editor context provider |
+| `VizelPortal` | Portal component |
 
 ## Hooks
 
 | Hook | Description |
 |------|-------------|
 | `useVizelEditor` | Create and manage editor instance |
-| `useVizelMarkdown` | Markdown import/export |
-| `useVizelAutoSave` | Auto-save functionality |
-| `useVizelState` | Editor state management |
+| `useVizelEditorState` | Track editor state changes |
+| `useVizelState` | Trigger re-renders on editor updates |
+| `useVizelMarkdown` | Two-way Markdown synchronization |
+| `useVizelAutoSave` | Auto-save to localStorage or custom backend |
+| `useVizelCollaboration` | Real-time collaboration management |
+| `useVizelComment` | Comment and annotation management |
+| `useVizelVersionHistory` | Document version history |
+| `useVizelContext` | Access editor from context |
+| `useVizelTheme` | Access theme from context |
 
 ## Documentation
 

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentProps } from 'react';
 import { CustomIconMap } from '@vizel/core';
 import { default as default_2 } from 'react';
 import { Editor } from '@vizel/core';
+import { Extensions } from '@vizel/core';
 import { Icon } from '@iconify/react';
 import { JSONContent } from '@vizel/core';
 import { JSX } from 'react/jsx-runtime';
@@ -9,7 +10,12 @@ import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { SuggestionOptions } from '@vizel/core';
 import { VizelAutoSaveOptions } from '@vizel/core';
+import { VizelCollaborationOptions } from '@vizel/core';
+import { VizelCollaborationUser } from '@vizel/core';
 import { VizelColorDefinition } from '@vizel/core';
+import { VizelComment } from '@vizel/core';
+import { VizelCommentOptions } from '@vizel/core';
+import { VizelCommentReply } from '@vizel/core';
 import { VizelCreateEditorOptions } from '@vizel/core';
 import { VizelEditorState } from '@vizel/core';
 import { VizelEmbedData } from '@vizel/core';
@@ -24,6 +30,10 @@ import { VizelSlashCommandItem } from '@vizel/core';
 import { VizelSlashMenuRendererOptions } from '@vizel/core';
 import { VizelThemeProviderOptions } from '@vizel/core';
 import { VizelThemeState } from '@vizel/core';
+import { VizelToolbarAction } from '@vizel/core';
+import { VizelVersionHistoryOptions } from '@vizel/core';
+import { VizelVersionSnapshot } from '@vizel/core';
+import { VizelYjsProvider } from '@vizel/core';
 
 /**
  * Creates a suggestion render configuration for the SlashCommand extension.
@@ -91,6 +101,148 @@ export declare interface UseVizelAutoSaveResult {
     restore: () => Promise<JSONContent | null>;
 }
 
+/**
+ * Hook for tracking real-time collaboration state with a Yjs provider.
+ *
+ * This hook manages event listeners on the provider to track connection status,
+ * sync state, and peer count. It does NOT create the Yjs document or provider —
+ * users must create those themselves and pass them in.
+ *
+ * @param getProvider - Function that returns the Yjs provider instance
+ * @param options - Collaboration options including user info and callbacks
+ * @returns Collaboration state and controls
+ *
+ * @example
+ * ```tsx
+ * import * as Y from "yjs";
+ * import { WebsocketProvider } from "y-websocket";
+ * import Collaboration from "@tiptap/extension-collaboration";
+ * import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+ * import { useVizelEditor, useVizelCollaboration } from "@vizel/react";
+ *
+ * function CollaborativeEditor() {
+ *   const [doc] = useState(() => new Y.Doc());
+ *   const [provider] = useState(
+ *     () => new WebsocketProvider("ws://localhost:1234", "my-doc", doc)
+ *   );
+ *
+ *   const { isConnected, peerCount } = useVizelCollaboration(
+ *     () => provider,
+ *     { user: { name: "Alice", color: "#ff0000" } }
+ *   );
+ *
+ *   const editor = useVizelEditor({
+ *     features: { collaboration: true },
+ *     extensions: [
+ *       Collaboration.configure({ document: doc }),
+ *       CollaborationCursor.configure({
+ *         provider,
+ *         user: { name: "Alice", color: "#ff0000" },
+ *       }),
+ *     ],
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <span>{isConnected ? "Connected" : "Disconnected"} ({peerCount} peers)</span>
+ *       <VizelEditor editor={editor} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelCollaboration(getProvider: () => VizelYjsProvider | null | undefined, options?: VizelCollaborationOptions): UseVizelCollaborationResult;
+
+/**
+ * Collaboration hook result
+ */
+export declare interface UseVizelCollaborationResult {
+    /** Whether connected to the collaboration server */
+    isConnected: boolean;
+    /** Whether the initial document sync is complete */
+    isSynced: boolean;
+    /** Number of currently connected peers (including self) */
+    peerCount: number;
+    /** Last error that occurred */
+    error: Error | null;
+    /** Connect to the collaboration server */
+    connect: () => void;
+    /** Disconnect from the collaboration server */
+    disconnect: () => void;
+    /** Update the current user's cursor information */
+    updateUser: (user: VizelCollaborationUser) => void;
+}
+
+/**
+ * Hook for managing document comments and annotations.
+ *
+ * @param getEditor - Function that returns the editor instance
+ * @param options - Comment configuration options
+ * @returns Comment state and controls
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const editor = useVizelEditor({
+ *     features: { comment: true },
+ *   });
+ *   const { comments, addComment, resolveComment, setActiveComment } =
+ *     useVizelComment(() => editor, { key: "my-comments" });
+ *
+ *   const handleAddComment = () => {
+ *     const text = prompt("Enter comment:");
+ *     if (text) addComment(text, "Author");
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <VizelEditor editor={editor} />
+ *       <button onClick={handleAddComment}>Add Comment</button>
+ *       <ul>
+ *         {comments.map((c) => (
+ *           <li key={c.id} onClick={() => setActiveComment(c.id)}>
+ *             {c.text} {c.resolved ? "(resolved)" : ""}
+ *             <button onClick={() => resolveComment(c.id)}>Resolve</button>
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelComment(getEditor: () => Editor | null | undefined, options?: VizelCommentOptions): UseVizelCommentResult;
+
+/**
+ * Comment hook result
+ */
+export declare interface UseVizelCommentResult {
+    /** All stored comments (newest first) */
+    comments: VizelComment[];
+    /** Currently active comment ID */
+    activeCommentId: string | null;
+    /** Whether comments are loading */
+    isLoading: boolean;
+    /** Last error that occurred */
+    error: Error | null;
+    /** Add a comment to the current selection */
+    addComment: (text: string, author?: string) => Promise<VizelComment | null>;
+    /** Remove a comment and its mark */
+    removeComment: (commentId: string) => Promise<void>;
+    /** Mark a comment as resolved */
+    resolveComment: (commentId: string) => Promise<boolean>;
+    /** Reopen a resolved comment */
+    reopenComment: (commentId: string) => Promise<boolean>;
+    /** Add a reply to a comment */
+    replyToComment: (commentId: string, text: string, author?: string) => Promise<VizelCommentReply | null>;
+    /** Set the active comment */
+    setActiveComment: (commentId: string | null) => void;
+    /** Load all comments from storage */
+    loadComments: () => Promise<VizelComment[]>;
+    /** Get a comment by its ID */
+    getCommentById: (commentId: string) => VizelComment | undefined;
+}
+
 /**
  * Hook to access the editor instance from context.
  *
@@ -296,6 +448,63 @@ export declare function useVizelTheme(): VizelThemeState;
  */
 export declare function useVizelThemeSafe(): VizelThemeState | null;
 
+/**
+ * Hook for managing document version history.
+ *
+ * @param getEditor - Function that returns the editor instance
+ * @param options - Version history configuration options
+ * @returns Version history state and controls
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const editor = useVizelEditor({ ... });
+ *   const { snapshots, saveVersion, restoreVersion } = useVizelVersionHistory(
+ *     () => editor,
+ *     { maxVersions: 20, key: 'my-doc-versions' }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <VizelEditor editor={editor} />
+ *       <button onClick={() => saveVersion("Manual save")}>Save Version</button>
+ *       <ul>
+ *         {snapshots.map(s => (
+ *           <li key={s.id}>
+ *             {s.description} - {new Date(s.timestamp).toLocaleString()}
+ *             <button onClick={() => restoreVersion(s.id)}>Restore</button>
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVizelVersionHistory(getEditor: () => Editor | null | undefined, options?: VizelVersionHistoryOptions): UseVizelVersionHistoryResult;
+
+/**
+ * Version history hook result
+ */
+export declare interface UseVizelVersionHistoryResult {
+    /** All stored snapshots (newest first) */
+    snapshots: VizelVersionSnapshot[];
+    /** Whether history is loading */
+    isLoading: boolean;
+    /** Last error that occurred */
+    error: Error | null;
+    /** Save current document as a new version */
+    saveVersion: (description?: string, author?: string) => Promise<VizelVersionSnapshot | null>;
+    /** Restore document to a specific version */
+    restoreVersion: (versionId: string) => Promise<boolean>;
+    /** Load all versions from storage */
+    loadVersions: () => Promise<VizelVersionSnapshot[]>;
+    /** Delete a specific version */
+    deleteVersion: (versionId: string) => Promise<void>;
+    /** Delete all versions */
+    clearVersions: () => Promise<void>;
+}
+
 /**
  * Vizel - All-in-one editor component
  *
@@ -333,7 +542,7 @@ export declare function useVizelThemeSafe(): VizelThemeState | null;
  * }
  * ```
  */
-export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, className, showBubbleMenu, enableEmbed, bubbleMenuContent, children, onUpdate, onCreate, onDestroy, onSelectionUpdate, onFocus, onBlur, }: VizelProps): ReactNode;
+export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, extensions, className, showToolbar, toolbarContent, showBubbleMenu, enableEmbed, bubbleMenuContent, children, onUpdate, onCreate, onDestroy, onSelectionUpdate, onFocus, onBlur, }: VizelProps): ReactNode;
 
 /**
  * A floating menu that appears when text is selected.
@@ -556,6 +765,20 @@ export declare interface VizelExposed {
     container: HTMLDivElement | null;
 }
 
+/**
+ * Find & Replace panel component for React
+ */
+export declare function VizelFindReplace({ editor, className, onClose }: VizelFindReplaceProps): JSX.Element | null;
+
+export declare interface VizelFindReplaceProps {
+    /** The Tiptap editor instance */
+    editor: Editor | null;
+    /** Custom class name */
+    className?: string;
+    /** Callback when the panel is closed */
+    onClose?: () => void;
+}
+
 /**
  * Icon component that renders Iconify icons based on semantic icon names.
  * Uses Lucide icons by default, but can be customized via:
@@ -764,8 +987,14 @@ export declare interface VizelProps {
     autofocus?: boolean | "start" | "end" | "all" | number;
     /** Feature configuration */
     features?: VizelFeatureOptions;
+    /** Additional Tiptap extensions */
+    extensions?: Extensions;
     /** Custom class name for the editor container */
     className?: string;
+    /** Whether to show the toolbar (default: false) */
+    showToolbar?: boolean;
+    /** Custom toolbar content */
+    toolbarContent?: ReactNode;
     /** Whether to show the bubble menu (default: true) */
     showBubbleMenu?: boolean;
     /** Enable embed option in bubble menu link editor (requires Embed extension) */
@@ -962,4 +1191,105 @@ export declare interface VizelThemeProviderProps extends VizelThemeProviderOptio
     children: ReactNode;
 }
 
+/**
+ * Fixed toolbar component for the Vizel editor.
+ * Displays formatting buttons above the editor content area.
+ *
+ * @example
+ * ```tsx
+ * // Default toolbar with all formatting buttons
+ * <VizelToolbar editor={editor} />
+ *
+ * // Custom toolbar content
+ * <VizelToolbar editor={editor}>
+ *   <VizelToolbarButton onClick={() => editor.chain().focus().toggleBold().run()}>
+ *     <strong>B</strong>
+ *   </VizelToolbarButton>
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbar({ editor: editorProp, className, showDefaultToolbar, children, }: VizelToolbarProps): JSX.Element | null;
+
+/**
+ * A button component for use in the VizelToolbar.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbarButton
+ *   onClick={() => editor.chain().focus().toggleBold().run()}
+ *   isActive={editor.isActive("bold")}
+ *   title="Bold (Cmd+B)"
+ * >
+ *   <VizelIcon name="bold" />
+ * </VizelToolbarButton>
+ * ```
+ */
+export declare function VizelToolbarButton({ onClick, isActive, disabled, children, title, className, action, }: VizelToolbarButtonProps): JSX.Element;
+
+export declare interface VizelToolbarButtonProps {
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether the action is currently active */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Button content (typically an icon) */
+    children: ReactNode;
+    /** Tooltip text */
+    title?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Action identifier for testing */
+    action?: string;
+}
+
+/**
+ * The default toolbar content for VizelToolbar.
+ * Provides formatting buttons grouped by category with dividers between groups.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbar>
+ *   <VizelToolbarDefault editor={editor} />
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbarDefault({ editor, className, actions, }: VizelToolbarDefaultProps): JSX.Element;
+
+export declare interface VizelToolbarDefaultProps {
+    editor: Editor;
+    className?: string;
+    /** Custom toolbar actions (defaults to vizelDefaultToolbarActions) */
+    actions?: VizelToolbarAction[];
+}
+
+/**
+ * A divider component for separating groups of buttons in the VizelToolbar.
+ *
+ * @example
+ * ```tsx
+ * <VizelToolbar>
+ *   <VizelToolbarButton>B</VizelToolbarButton>
+ *   <VizelToolbarDivider />
+ *   <VizelToolbarButton>H1</VizelToolbarButton>
+ * </VizelToolbar>
+ * ```
+ */
+export declare function VizelToolbarDivider({ className }: VizelToolbarDividerProps): JSX.Element;
+
+export declare interface VizelToolbarDividerProps {
+    className?: string;
+}
+
+export declare interface VizelToolbarProps {
+    /** Editor instance. Falls back to context if not provided. */
+    editor?: Editor | null;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to show the default toolbar (default: true). Set to false when using custom children. */
+    showDefaultToolbar?: boolean;
+    /** Custom toolbar content. When provided, replaces the default toolbar. */
+    children?: ReactNode;
+}
+
 export { }

package/dist/index.js

@@ -6,63 +6,79 @@ import "./index6.js";
 import "./index7.js";
 import "./index8.js";
 import "./index9.js";
-import { Vizel as f } from "./index10.js";
+import { Vizel as z } from "./index10.js";
 import { VizelBubbleMenu as u } from "./index11.js";
 import { VizelBubbleMenuButton as a } from "./index12.js";
-import { VizelBubbleMenuColorPicker as d } from "./index13.js";
+import { VizelBubbleMenuColorPicker as b } from "./index13.js";
 import { VizelBubbleMenuDefault as S } from "./index14.js";
 import { VizelBubbleMenuDivider as c } from "./index15.js";
 import { VizelColorPicker as v } from "./index16.js";
-import { useVizelContext as E, useVizelContextSafe as P } from "./index17.js";
-import { VizelEditor as I } from "./index18.js";
-import { VizelEmbedView as T } from "./index19.js";
-import { VizelIcon as D } from "./index20.js";
-import { VizelIconProvider as A, useVizelIconContext as L } from "./index21.js";
-import { VizelLinkEditor as R } from "./index22.js";
-import { VizelNodeSelector as j } from "./index23.js";
-import { VizelPortal as F } from "./index24.js";
-import { VizelProvider as H } from "./index25.js";
-import { VizelSaveIndicator as K } from "./index26.js";
-import { VizelSlashMenu as Q } from "./index27.js";
-import { VizelSlashMenuEmpty as W } from "./index28.js";
-import { VizelSlashMenuItem as Y } from "./index29.js";
-import { VizelThemeProvider as _, useVizelTheme as $, useVizelThemeSafe as ee } from "./index30.js";
-import { createVizelSlashMenuRenderer as re } from "./index31.js";
-import { useVizelAutoSave as ie } from "./index32.js";
-import { useVizelEditor as me } from "./index33.js";
-import { useVizelEditorState as Ve } from "./index34.js";
-import { useVizelMarkdown as fe } from "./index35.js";
-import { useVizelState as ue } from "./index36.js";
+import { useVizelContext as C, useVizelContextSafe as T } from "./index17.js";
+import { VizelEditor as P } from "./index18.js";
+import { VizelEmbedView as k } from "./index19.js";
+import { VizelFindReplace as w } from "./index20.js";
+import { VizelIcon as R } from "./index21.js";
+import { VizelIconProvider as F, useVizelIconContext as H } from "./index22.js";
+import { VizelLinkEditor as N } from "./index23.js";
+import { VizelNodeSelector as j } from "./index24.js";
+import { VizelPortal as G } from "./index25.js";
+import { VizelProvider as K } from "./index26.js";
+import { VizelSaveIndicator as Q } from "./index27.js";
+import { VizelSlashMenu as W } from "./index28.js";
+import { VizelSlashMenuEmpty as Y } from "./index29.js";
+import { VizelSlashMenuItem as _ } from "./index30.js";
+import { VizelThemeProvider as ee, useVizelTheme as oe, useVizelThemeSafe as re } from "./index31.js";
+import { VizelToolbar as ie } from "./index32.js";
+import { VizelToolbarButton as me } from "./index33.js";
+import { VizelToolbarDefault as Ve } from "./index34.js";
+import { VizelToolbarDivider as ze } from "./index35.js";
+import { createVizelSlashMenuRenderer as ue } from "./index36.js";
+import { useVizelAutoSave as ae } from "./index37.js";
+import { useVizelCollaboration as be } from "./index38.js";
+import { useVizelComment as Se } from "./index39.js";
+import { useVizelEditor as ce } from "./index40.js";
+import { useVizelEditorState as ve } from "./index41.js";
+import { useVizelMarkdown as Ce } from "./index42.js";
+import { useVizelState as Ee } from "./index43.js";
+import { useVizelVersionHistory as Ie } from "./index44.js";
 export {
-  f as Vizel,
+  z as Vizel,
   u as VizelBubbleMenu,
   a as VizelBubbleMenuButton,
-  d as VizelBubbleMenuColorPicker,
+  b as VizelBubbleMenuColorPicker,
   S as VizelBubbleMenuDefault,
   c as VizelBubbleMenuDivider,
   v as VizelColorPicker,
-  I as VizelEditor,
-  T as VizelEmbedView,
-  D as VizelIcon,
-  A as VizelIconProvider,
-  R as VizelLinkEditor,
+  P as VizelEditor,
+  k as VizelEmbedView,
+  w as VizelFindReplace,
+  R as VizelIcon,
+  F as VizelIconProvider,
+  N as VizelLinkEditor,
   j as VizelNodeSelector,
-  F as VizelPortal,
-  H as VizelProvider,
-  K as VizelSaveIndicator,
-  Q as VizelSlashMenu,
-  W as VizelSlashMenuEmpty,
-  Y as VizelSlashMenuItem,
-  _ as VizelThemeProvider,
-  re as createVizelSlashMenuRenderer,
-  ie as useVizelAutoSave,
-  E as useVizelContext,
-  P as useVizelContextSafe,
-  me as useVizelEditor,
-  Ve as useVizelEditorState,
-  L as useVizelIconContext,
-  fe as useVizelMarkdown,
-  ue as useVizelState,
-  $ as useVizelTheme,
-  ee as useVizelThemeSafe
+  G as VizelPortal,
+  K as VizelProvider,
+  Q as VizelSaveIndicator,
+  W as VizelSlashMenu,
+  Y as VizelSlashMenuEmpty,
+  _ as VizelSlashMenuItem,
+  ee as VizelThemeProvider,
+  ie as VizelToolbar,
+  me as VizelToolbarButton,
+  Ve as VizelToolbarDefault,
+  ze as VizelToolbarDivider,
+  ue as createVizelSlashMenuRenderer,
+  ae as useVizelAutoSave,
+  be as useVizelCollaboration,
+  Se as useVizelComment,
+  C as useVizelContext,
+  T as useVizelContextSafe,
+  ce as useVizelEditor,
+  ve as useVizelEditorState,
+  H as useVizelIconContext,
+  Ce as useVizelMarkdown,
+  Ee as useVizelState,
+  oe as useVizelTheme,
+  re as useVizelThemeSafe,
+  Ie as useVizelVersionHistory
 };