@vizel/react 1.0.0 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @vizel/react
 
-React components for Vizel block-based Markdown editor.
+React 19 components and hooks for Vizel block-based Markdown editor.
 
 ## Installation
 
@@ -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} />
-      <VizelBubbleMenu editor={editor} />
+      {editor && <VizelBubbleMenu editor={editor} />}
     </>
   );
 }
@@ -51,12 +55,7 @@ import { useVizelEditor, useVizelMarkdown } from "@vizel/react";
 
 function App() {
   const editor = useVizelEditor();
-  const { getMarkdown, setMarkdown } = useVizelMarkdown(() => editor);
-
-  const handleExport = () => {
-    const markdown = getMarkdown();
-    console.log(markdown);
-  };
+  const { markdown, setMarkdown } = useVizelMarkdown(() => editor);
 
   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

@@ -1,30 +1,39 @@
 import { ComponentProps } from 'react';
-import { CustomIconMap } from '@vizel/core';
+import { CustomIconMap } from '../../packages/core/src/index.ts';
 import { default as default_2 } from 'react';
-import { Editor } from '@vizel/core';
+import { Editor } from '../../packages/core/src/index.ts';
+import { Extensions } from '../../packages/core/src/index.ts';
 import { Icon } from '@iconify/react';
-import { JSONContent } from '@vizel/core';
+import { JSONContent } from '../../packages/core/src/index.ts';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
-import { SuggestionOptions } from '@vizel/core';
-import { VizelAutoSaveOptions } from '@vizel/core';
-import { VizelColorDefinition } from '@vizel/core';
-import { VizelCreateEditorOptions } from '@vizel/core';
-import { VizelEditorState } from '@vizel/core';
-import { VizelEmbedData } from '@vizel/core';
-import { VizelFeatureOptions } from '@vizel/core';
-import { VizelIconContextValue } from '@vizel/core';
-import { VizelIconName } from '@vizel/core';
-import { VizelMarkdownSyncOptions } from '@vizel/core';
-import { VizelNodeTypeOption } from '@vizel/core';
-import { VizelPortalLayer } from '@vizel/core';
-import { VizelSaveStatus } from '@vizel/core';
-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 { SuggestionOptions } from '../../packages/core/src/index.ts';
+import { VizelAutoSaveOptions } from '../../packages/core/src/index.ts';
+import { VizelCollaborationOptions } from '../../packages/core/src/index.ts';
+import { VizelCollaborationUser } from '../../packages/core/src/index.ts';
+import { VizelColorDefinition } from '../../packages/core/src/index.ts';
+import { VizelComment } from '../../packages/core/src/index.ts';
+import { VizelCommentOptions } from '../../packages/core/src/index.ts';
+import { VizelCommentReply } from '../../packages/core/src/index.ts';
+import { VizelCreateEditorOptions } from '../../packages/core/src/index.ts';
+import { VizelEditorState } from '../../packages/core/src/index.ts';
+import { VizelEmbedData } from '../../packages/core/src/index.ts';
+import { VizelFeatureOptions } from '../../packages/core/src/index.ts';
+import { VizelIconContextValue } from '../../packages/core/src/index.ts';
+import { VizelIconName } from '../../packages/core/src/index.ts';
+import { VizelMarkdownSyncOptions } from '../../packages/core/src/index.ts';
+import { VizelNodeTypeOption } from '../../packages/core/src/index.ts';
+import { VizelPortalLayer } from '../../packages/core/src/index.ts';
+import { VizelSaveStatus } from '../../packages/core/src/index.ts';
+import { VizelSlashCommandItem } from '../../packages/core/src/index.ts';
+import { VizelSlashMenuRendererOptions } from '../../packages/core/src/index.ts';
+import { VizelThemeProviderOptions } from '../../packages/core/src/index.ts';
+import { VizelThemeState } from '../../packages/core/src/index.ts';
+import { VizelToolbarAction } from '../../packages/core/src/index.ts';
+import { VizelVersionHistoryOptions } from '../../packages/core/src/index.ts';
+import { VizelVersionSnapshot } from '../../packages/core/src/index.ts';
+import { VizelYjsProvider } from '../../packages/core/src/index.ts';
 
 /**
  * Creates a suggestion render configuration for the SlashCommand extension.
@@ -92,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.
  *
@@ -297,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
  *
@@ -334,7 +542,7 @@ export declare function useVizelThemeSafe(): VizelThemeState | null;
  * }
  * ```
  */
-export declare function Vizel({ ref, initialContent, initialMarkdown, transformDiagramsOnImport, placeholder, editable, autofocus, features, className, showToolbar, toolbarContent, 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.
@@ -557,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:
@@ -765,6 +987,8 @@ 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) */

package/dist/index.js

@@ -9,68 +9,76 @@ import "./index9.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 T, useVizelContextSafe as E } from "./index17.js";
-import { VizelEditor as C } from "./index18.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 { VizelIcon as w } 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 { VizelToolbar as re } from "./index31.js";
-import { VizelToolbarButton as ie } from "./index32.js";
-import { VizelToolbarDefault as me } from "./index33.js";
-import { VizelToolbarDivider as Ve } from "./index34.js";
-import { createVizelSlashMenuRenderer as ze } from "./index35.js";
-import { useVizelAutoSave as ue } from "./index36.js";
-import { useVizelEditor as ae } from "./index37.js";
-import { useVizelEditorState as de } from "./index38.js";
-import { useVizelMarkdown as Se } from "./index39.js";
-import { useVizelState as ce } from "./index40.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 {
   z as Vizel,
   u as VizelBubbleMenu,
   a as VizelBubbleMenuButton,
-  d as VizelBubbleMenuColorPicker,
+  b as VizelBubbleMenuColorPicker,
   S as VizelBubbleMenuDefault,
   c as VizelBubbleMenuDivider,
   v as VizelColorPicker,
-  C as VizelEditor,
+  P as VizelEditor,
   k as VizelEmbedView,
-  w as VizelIcon,
-  A as VizelIconProvider,
-  R as VizelLinkEditor,
+  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 VizelToolbar,
-  ie as VizelToolbarButton,
-  me as VizelToolbarDefault,
-  Ve as VizelToolbarDivider,
-  ze as createVizelSlashMenuRenderer,
-  ue as useVizelAutoSave,
-  T as useVizelContext,
-  E as useVizelContextSafe,
-  ae as useVizelEditor,
-  de as useVizelEditorState,
-  L as useVizelIconContext,
-  Se as useVizelMarkdown,
-  ce 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
 };

package/dist/index10.js

@@ -1,62 +1,64 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { useImperativeHandle as A } from "react";
-import { useVizelEditor as G } from "./index37.js";
-import { VizelBubbleMenu as H } from "./index11.js";
-import { VizelEditor as J } from "./index18.js";
-import { VizelToolbar as I } from "./index31.js";
-function T({
-  ref: N,
+import { jsxs as G, jsx as r } from "react/jsx-runtime";
+import { useImperativeHandle as J } from "react";
+import { useVizelEditor as K } from "./index40.js";
+import { VizelBubbleMenu as N } from "./index11.js";
+import { VizelEditor as L } from "./index18.js";
+import { VizelToolbar as $ } from "./index32.js";
+function X({
+  ref: e,
   initialContent: m,
   initialMarkdown: o,
-  transformDiagramsOnImport: $ = !0,
+  transformDiagramsOnImport: g = !0,
   placeholder: f,
-  editable: g = !0,
-  autofocus: h = !1,
+  editable: h = !0,
+  autofocus: q = !1,
   features: z,
-  className: q,
-  showToolbar: s = !1,
+  extensions: p,
+  className: u,
+  showToolbar: V = !1,
   toolbarContent: d,
-  showBubbleMenu: p = !0,
-  enableEmbed: V = !1,
+  showBubbleMenu: l = !0,
+  enableEmbed: s = !1,
   bubbleMenuContent: v,
-  children: t,
-  onUpdate: l,
-  onCreate: c,
+  children: A,
+  onUpdate: c,
+  onCreate: j,
   onDestroy: x,
-  onSelectionUpdate: e,
-  onFocus: j,
-  onBlur: E
+  onSelectionUpdate: E,
+  onFocus: H,
+  onBlur: I
 }) {
-  const i = G({
+  const i = K({
     ...m !== void 0 && { initialContent: m },
     ...o !== void 0 && { initialMarkdown: o },
-    transformDiagramsOnImport: $,
+    transformDiagramsOnImport: g,
     ...f !== void 0 && { placeholder: f },
-    editable: g,
-    autofocus: h,
+    editable: h,
+    autofocus: q,
     ...z !== void 0 && { features: z },
-    ...l !== void 0 && { onUpdate: l },
-    ...c !== void 0 && { onCreate: c },
+    ...p !== void 0 && { extensions: p },
+    ...c !== void 0 && { onUpdate: c },
+    ...j !== void 0 && { onCreate: j },
     ...x !== void 0 && { onDestroy: x },
-    ...e !== void 0 && { onSelectionUpdate: e },
-    ...j !== void 0 && { onFocus: j },
-    ...E !== void 0 && { onBlur: E }
+    ...E !== void 0 && { onSelectionUpdate: E },
+    ...H !== void 0 && { onFocus: H },
+    ...I !== void 0 && { onBlur: I }
   });
-  return A(
-    N,
+  return J(
+    e,
     () => ({
       editor: i
     }),
     [i]
-  ), /* @__PURE__ */ u("div", { className: `vizel-root ${q ?? ""}`, "data-vizel-root": "", children: [
-    s && i && d && /* @__PURE__ */ r(I, { editor: i, children: d }),
-    s && i && !d && /* @__PURE__ */ r(I, { editor: i }),
-    /* @__PURE__ */ r(J, { editor: i }),
-    p && i && v && /* @__PURE__ */ r(H, { editor: i, enableEmbed: V, children: v }),
-    p && i && !v && /* @__PURE__ */ r(H, { editor: i, enableEmbed: V }),
-    t
+  ), /* @__PURE__ */ G("div", { className: `vizel-root ${u ?? ""}`, "data-vizel-root": "", children: [
+    V && i && d && /* @__PURE__ */ r($, { editor: i, children: d }),
+    V && i && !d && /* @__PURE__ */ r($, { editor: i }),
+    /* @__PURE__ */ r(L, { editor: i }),
+    l && i && v && /* @__PURE__ */ r(N, { editor: i, enableEmbed: s, children: v }),
+    l && i && !v && /* @__PURE__ */ r(N, { editor: i, enableEmbed: s }),
+    A
   ] });
 }
 export {
-  T as Vizel
+  X as Vizel
 };

package/dist/index13.js

@@ -2,7 +2,7 @@ import { jsxs as V, jsx as l } from "react/jsx-runtime";
 import { getVizelRecentColors as H, addVizelRecentColor as u, VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as O } from "@vizel/core";
 import { useState as h, useRef as E, useEffect as g, useCallback as I } from "react";
 import { VizelColorPicker as T } from "./index16.js";
-import { VizelIcon as C } from "./index20.js";
+import { VizelIcon as C } from "./index21.js";
 function A({
   editor: o,
   type: e,