rte-builder 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -8674,8 +8674,1381 @@ init_Emoji();
 init_Fullscreen();
 init_Print();
 init_Indent();
+
+// src/collaboration/CollaborationContext.tsx
+import { createContext, useContext, useReducer, useCallback as useCallback7, useEffect as useEffect9, useRef as useRef8 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var initialState = {
+  status: "disconnected",
+  users: [],
+  error: void 0,
+  isHost: false
+};
+function collaborationReducer(state, action) {
+  switch (action.type) {
+    case "SET_STATUS":
+      return { ...state, status: action.status, error: action.status === "error" ? state.error : void 0 };
+    case "SET_USERS":
+      return { ...state, users: action.users };
+    case "ADD_USER":
+      if (state.users.find((u) => u.id === action.user.id)) {
+        return {
+          ...state,
+          users: state.users.map((u) => u.id === action.user.id ? action.user : u)
+        };
+      }
+      return { ...state, users: [...state.users, action.user] };
+    case "REMOVE_USER":
+      return { ...state, users: state.users.filter((u) => u.id !== action.userId) };
+    case "UPDATE_CURSOR":
+      return {
+        ...state,
+        users: state.users.map(
+          (u) => u.id === action.userId ? { ...u, cursor: action.cursor, lastActive: Date.now() } : u
+        )
+      };
+    case "SET_ERROR":
+      return { ...state, status: "error", error: action.error };
+    case "CLEAR_ERROR":
+      return { ...state, error: void 0 };
+    case "SET_HOST":
+      return { ...state, isHost: action.isHost };
+    default:
+      return state;
+  }
+}
+var CollaborationContext = createContext(null);
+function generateUserColor() {
+  const colors = [
+    "#f87171",
+    "#fb923c",
+    "#fbbf24",
+    "#a3e635",
+    "#4ade80",
+    "#2dd4bf",
+    "#22d3ee",
+    "#60a5fa",
+    "#a78bfa",
+    "#e879f9"
+  ];
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+function CollaborationProvider({
+  children,
+  config,
+  onStatusChange,
+  onUsersChange
+}) {
+  const [state, dispatch] = useReducer(collaborationReducer, initialState);
+  const wsRef = useRef8(null);
+  const reconnectTimeoutRef = useRef8(null);
+  const reconnectAttemptsRef = useRef8(0);
+  useEffect9(() => {
+    onStatusChange?.(state.status);
+  }, [state.status, onStatusChange]);
+  useEffect9(() => {
+    onUsersChange?.(state.users);
+  }, [state.users, onUsersChange]);
+  const connect = useCallback7(async () => {
+    if (!config) return;
+    dispatch({ type: "SET_STATUS", status: "connecting" });
+    try {
+      if (config.provider === "websocket" && config.serverUrl) {
+        const url = new URL(config.serverUrl);
+        url.searchParams.set("room", config.roomId);
+        if (config.token) {
+          url.searchParams.set("token", config.token);
+        }
+        const ws = new WebSocket(url.toString());
+        wsRef.current = ws;
+        ws.onopen = () => {
+          dispatch({ type: "SET_STATUS", status: "connected" });
+          reconnectAttemptsRef.current = 0;
+          ws.send(JSON.stringify({
+            type: "join",
+            user: {
+              id: config.user.id,
+              name: config.user.name,
+              avatar: config.user.avatar,
+              color: config.user.color || generateUserColor()
+            }
+          }));
+        };
+        ws.onmessage = (event) => {
+          try {
+            const message = JSON.parse(event.data);
+            handleCollaborationEvent(message);
+          } catch {
+            console.error("Failed to parse collaboration message");
+          }
+        };
+        ws.onclose = () => {
+          dispatch({ type: "SET_STATUS", status: "disconnected" });
+          handleReconnect();
+        };
+        ws.onerror = () => {
+          dispatch({ type: "SET_ERROR", error: "Connection error" });
+        };
+      } else if (config.provider === "webrtc") {
+        dispatch({ type: "SET_ERROR", error: "WebRTC provider not yet implemented" });
+      } else if (config.provider === "custom") {
+        dispatch({ type: "SET_STATUS", status: "connected" });
+      }
+    } catch (error) {
+      dispatch({ type: "SET_ERROR", error: error instanceof Error ? error.message : "Connection failed" });
+    }
+  }, [config]);
+  const handleCollaborationEvent = useCallback7((event) => {
+    switch (event.type) {
+      case "user-joined":
+        dispatch({ type: "ADD_USER", user: event.user });
+        break;
+      case "user-left":
+        dispatch({ type: "REMOVE_USER", userId: event.userId });
+        break;
+      case "cursor-moved":
+        dispatch({ type: "UPDATE_CURSOR", userId: event.userId, cursor: event.cursor });
+        break;
+      case "status-changed":
+        dispatch({ type: "SET_STATUS", status: event.status });
+        break;
+      case "error":
+        dispatch({ type: "SET_ERROR", error: event.message });
+        break;
+    }
+  }, []);
+  const handleReconnect = useCallback7(() => {
+    if (!config?.autoReconnect) return;
+    const maxAttempts = config.maxReconnectAttempts ?? 5;
+    const interval = config.reconnectInterval ?? 3e3;
+    if (reconnectAttemptsRef.current >= maxAttempts) {
+      dispatch({ type: "SET_ERROR", error: "Max reconnection attempts reached" });
+      return;
+    }
+    dispatch({ type: "SET_STATUS", status: "reconnecting" });
+    reconnectAttemptsRef.current++;
+    reconnectTimeoutRef.current = setTimeout(() => {
+      connect();
+    }, interval);
+  }, [config, connect]);
+  const disconnect = useCallback7(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    dispatch({ type: "SET_STATUS", status: "disconnected" });
+    dispatch({ type: "SET_USERS", users: [] });
+  }, []);
+  const updateCursor = useCallback7((cursor) => {
+    if (!config || !wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+    wsRef.current.send(JSON.stringify({
+      type: "cursor",
+      userId: config.user.id,
+      cursor
+    }));
+  }, [config]);
+  useEffect9(() => {
+    return () => {
+      disconnect();
+    };
+  }, [disconnect]);
+  const value = {
+    state,
+    config: config ?? null,
+    connect,
+    disconnect,
+    updateCursor,
+    isEnabled: !!config
+  };
+  return /* @__PURE__ */ jsx10(CollaborationContext.Provider, { value, children });
+}
+function useCollaboration() {
+  const context = useContext(CollaborationContext);
+  if (!context) {
+    throw new Error("useCollaboration must be used within a CollaborationProvider");
+  }
+  return context;
+}
+function useCollaborationOptional() {
+  return useContext(CollaborationContext);
+}
+
+// src/collaboration/PresenceIndicator.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function getInitials(name) {
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+function UserAvatar({ user, showName }) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: "rte-presence-avatar",
+      style: { borderColor: user.color },
+      title: user.name,
+      children: [
+        user.avatar ? /* @__PURE__ */ jsx11("img", { src: user.avatar, alt: user.name }) : /* @__PURE__ */ jsx11("span", { style: { backgroundColor: user.color }, children: getInitials(user.name) }),
+        user.isActive && /* @__PURE__ */ jsx11("div", { className: "rte-presence-active-dot" }),
+        showName && /* @__PURE__ */ jsx11("div", { className: "rte-presence-name", children: user.name })
+      ]
+    }
+  );
+}
+function StatusBadge({ status }) {
+  const statusConfig = {
+    connected: { label: "Connected", color: "#22c55e" },
+    connecting: { label: "Connecting...", color: "#eab308" },
+    reconnecting: { label: "Reconnecting...", color: "#f97316" },
+    disconnected: { label: "Disconnected", color: "#6b7280" },
+    error: { label: "Error", color: "#ef4444" }
+  };
+  const config = statusConfig[status] || statusConfig.disconnected;
+  return /* @__PURE__ */ jsxs10("div", { className: "rte-presence-status", style: { color: config.color }, children: [
+    /* @__PURE__ */ jsx11("div", { className: "rte-presence-status-dot", style: { backgroundColor: config.color } }),
+    config.label
+  ] });
+}
+function PresenceIndicator({
+  maxAvatars = 5,
+  showNames = false,
+  className = ""
+}) {
+  const collaboration = useCollaborationOptional();
+  if (!collaboration?.isEnabled) {
+    return null;
+  }
+  const { state } = collaboration;
+  const visibleUsers = state.users.slice(0, maxAvatars);
+  const remainingCount = Math.max(0, state.users.length - maxAvatars);
+  return /* @__PURE__ */ jsxs10("div", { className: `rte-presence-indicator ${className}`, children: [
+    /* @__PURE__ */ jsx11(StatusBadge, { status: state.status }),
+    state.users.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "rte-presence-avatars", children: [
+      visibleUsers.map((user) => /* @__PURE__ */ jsx11(UserAvatar, { user, showName: showNames }, user.id)),
+      remainingCount > 0 && /* @__PURE__ */ jsxs10("div", { className: "rte-presence-avatar rte-presence-more", children: [
+        "+",
+        remainingCount
+      ] })
+    ] }),
+    state.error && /* @__PURE__ */ jsx11("div", { className: "rte-presence-error", title: state.error, children: "!" })
+  ] });
+}
+
+// src/comments/types.ts
+var DEFAULT_REACTION_EMOJIS = ["\u{1F44D}", "\u{1F44E}", "\u2764\uFE0F", "\u{1F389}", "\u{1F604}", "\u{1F615}", "\u{1F440}", "\u{1F680}"];
+
+// src/comments/CommentsContext.tsx
+import { createContext as createContext2, useContext as useContext2, useReducer as useReducer2, useCallback as useCallback8, useEffect as useEffect10 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var initialState2 = {
+  threads: [],
+  activeThreadId: null,
+  isPanelOpen: false,
+  filter: "all",
+  currentUser: null
+};
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function commentsReducer(state, action) {
+  switch (action.type) {
+    case "SET_THREADS":
+      return { ...state, threads: action.threads };
+    case "ADD_THREAD":
+      return { ...state, threads: [...state.threads, action.thread] };
+    case "DELETE_THREAD":
+      return {
+        ...state,
+        threads: state.threads.filter((t) => t.id !== action.threadId),
+        activeThreadId: state.activeThreadId === action.threadId ? null : state.activeThreadId
+      };
+    case "RESOLVE_THREAD":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? { ...t, status: "resolved", resolvedAt: Date.now(), resolvedBy: action.resolvedBy } : t
+        )
+      };
+    case "REOPEN_THREAD":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? { ...t, status: "open", resolvedAt: void 0, resolvedBy: void 0 } : t
+        )
+      };
+    case "ADD_COMMENT":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? { ...t, comments: [...t.comments, action.comment] } : t
+        )
+      };
+    case "UPDATE_COMMENT":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? {
+            ...t,
+            comments: t.comments.map(
+              (c) => c.id === action.comment.id ? action.comment : c
+            )
+          } : t
+        )
+      };
+    case "DELETE_COMMENT":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? { ...t, comments: t.comments.filter((c) => c.id !== action.commentId) } : t
+        )
+      };
+    case "ADD_REACTION":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? {
+            ...t,
+            comments: t.comments.map((c) => {
+              if (c.id !== action.commentId) return c;
+              const reactions = c.reactions || [];
+              const existingReaction = reactions.find((r) => r.emoji === action.emoji);
+              if (existingReaction) {
+                return {
+                  ...c,
+                  reactions: reactions.map(
+                    (r) => r.emoji === action.emoji ? { ...r, users: [...r.users, action.user] } : r
+                  )
+                };
+              }
+              return {
+                ...c,
+                reactions: [...reactions, { emoji: action.emoji, users: [action.user] }]
+              };
+            })
+          } : t
+        )
+      };
+    case "REMOVE_REACTION":
+      return {
+        ...state,
+        threads: state.threads.map(
+          (t) => t.id === action.threadId ? {
+            ...t,
+            comments: t.comments.map((c) => {
+              if (c.id !== action.commentId) return c;
+              return {
+                ...c,
+                reactions: (c.reactions || []).map(
+                  (r) => r.emoji === action.emoji ? { ...r, users: r.users.filter((u) => u.id !== action.userId) } : r
+                ).filter((r) => r.users.length > 0)
+              };
+            })
+          } : t
+        )
+      };
+    case "SET_ACTIVE_THREAD":
+      return { ...state, activeThreadId: action.threadId };
+    case "TOGGLE_PANEL":
+      return { ...state, isPanelOpen: action.isOpen ?? !state.isPanelOpen };
+    case "SET_FILTER":
+      return { ...state, filter: action.filter };
+    case "SET_CURRENT_USER":
+      return { ...state, currentUser: action.user };
+    default:
+      return state;
+  }
+}
+var CommentsContext = createContext2(null);
+function CommentsProvider({
+  children,
+  config,
+  initialThreads = [],
+  onThreadsChange
+}) {
+  const [state, dispatch] = useReducer2(commentsReducer, {
+    ...initialState2,
+    threads: initialThreads,
+    currentUser: config?.currentUser ?? null
+  });
+  const subscribersRef = { current: /* @__PURE__ */ new Set() };
+  useEffect10(() => {
+    if (config?.onLoad) {
+      config.onLoad().then((threads) => {
+        dispatch({ type: "SET_THREADS", threads });
+      });
+    }
+  }, [config]);
+  useEffect10(() => {
+    onThreadsChange?.(state.threads);
+    if (config?.onSave) {
+      config.onSave(state.threads);
+    }
+  }, [state.threads, onThreadsChange, config]);
+  useEffect10(() => {
+    if (config?.currentUser) {
+      dispatch({ type: "SET_CURRENT_USER", user: config.currentUser });
+    }
+  }, [config?.currentUser]);
+  const emitEvent = useCallback8((event) => {
+    subscribersRef.current.forEach((callback) => callback(event));
+  }, []);
+  const createThread = useCallback8((range, initialComment) => {
+    if (!state.currentUser) return null;
+    const threadId = generateId();
+    const commentId = generateId();
+    const now = Date.now();
+    const comment = {
+      id: commentId,
+      threadId,
+      content: initialComment,
+      author: state.currentUser,
+      createdAt: now,
+      isEdited: false
+    };
+    const thread = {
+      id: threadId,
+      range,
+      comments: [comment],
+      status: "open",
+      createdAt: now
+    };
+    dispatch({ type: "ADD_THREAD", thread });
+    emitEvent({ type: "thread-created", thread });
+    return thread;
+  }, [state.currentUser, emitEvent]);
+  const deleteThread = useCallback8((threadId) => {
+    if (config?.allowDelete === false) return;
+    dispatch({ type: "DELETE_THREAD", threadId });
+    emitEvent({ type: "thread-deleted", threadId });
+  }, [config, emitEvent]);
+  const resolveThread = useCallback8((threadId) => {
+    if (!state.currentUser || config?.allowResolve === false) return;
+    dispatch({ type: "RESOLVE_THREAD", threadId, resolvedBy: state.currentUser });
+    emitEvent({ type: "thread-resolved", threadId, resolvedBy: state.currentUser });
+  }, [state.currentUser, config, emitEvent]);
+  const reopenThread = useCallback8((threadId) => {
+    dispatch({ type: "REOPEN_THREAD", threadId });
+    emitEvent({ type: "thread-reopened", threadId });
+  }, [emitEvent]);
+  const addComment = useCallback8((threadId, content) => {
+    if (!state.currentUser) return null;
+    const comment = {
+      id: generateId(),
+      threadId,
+      content,
+      author: state.currentUser,
+      createdAt: Date.now(),
+      isEdited: false
+    };
+    dispatch({ type: "ADD_COMMENT", threadId, comment });
+    emitEvent({ type: "comment-added", threadId, comment });
+    return comment;
+  }, [state.currentUser, emitEvent]);
+  const updateComment = useCallback8((threadId, commentId, content) => {
+    if (config?.allowEdit === false) return;
+    const thread = state.threads.find((t) => t.id === threadId);
+    const existingComment = thread?.comments.find((c) => c.id === commentId);
+    if (!existingComment) return;
+    const updatedComment = {
+      ...existingComment,
+      content,
+      updatedAt: Date.now(),
+      isEdited: true
+    };
+    dispatch({ type: "UPDATE_COMMENT", threadId, comment: updatedComment });
+    emitEvent({ type: "comment-updated", threadId, comment: updatedComment });
+  }, [state.threads, config, emitEvent]);
+  const deleteComment = useCallback8((threadId, commentId) => {
+    if (config?.allowDelete === false) return;
+    dispatch({ type: "DELETE_COMMENT", threadId, commentId });
+    emitEvent({ type: "comment-deleted", threadId, commentId });
+  }, [config, emitEvent]);
+  const addReaction = useCallback8((threadId, commentId, emoji) => {
+    if (!state.currentUser || config?.allowReactions === false) return;
+    const allowedEmojis = config?.reactionEmojis ?? DEFAULT_REACTION_EMOJIS;
+    if (!allowedEmojis.includes(emoji)) return;
+    dispatch({ type: "ADD_REACTION", threadId, commentId, emoji, user: state.currentUser });
+    emitEvent({ type: "reaction-added", threadId, commentId, emoji, user: state.currentUser });
+  }, [state.currentUser, config, emitEvent]);
+  const removeReaction = useCallback8((threadId, commentId, emoji) => {
+    if (!state.currentUser) return;
+    dispatch({ type: "REMOVE_REACTION", threadId, commentId, emoji, userId: state.currentUser.id });
+    emitEvent({ type: "reaction-removed", threadId, commentId, emoji, userId: state.currentUser.id });
+  }, [state.currentUser, emitEvent]);
+  const setActiveThread = useCallback8((threadId) => {
+    dispatch({ type: "SET_ACTIVE_THREAD", threadId });
+  }, []);
+  const togglePanel = useCallback8((isOpen) => {
+    dispatch({ type: "TOGGLE_PANEL", isOpen });
+  }, []);
+  const setFilter = useCallback8((filter) => {
+    dispatch({ type: "SET_FILTER", filter });
+  }, []);
+  const getThreadByRange = useCallback8((from, to) => {
+    return state.threads.find((t) => t.range.from === from && t.range.to === to);
+  }, [state.threads]);
+  const getFilteredThreads = useCallback8(() => {
+    if (state.filter === "all") return state.threads;
+    return state.threads.filter((t) => t.status === state.filter);
+  }, [state.threads, state.filter]);
+  const subscribe = useCallback8((callback) => {
+    subscribersRef.current.add(callback);
+    return () => {
+      subscribersRef.current.delete(callback);
+    };
+  }, []);
+  const value = {
+    state,
+    config: config ?? null,
+    createThread,
+    deleteThread,
+    resolveThread,
+    reopenThread,
+    addComment,
+    updateComment,
+    deleteComment,
+    addReaction,
+    removeReaction,
+    setActiveThread,
+    togglePanel,
+    setFilter,
+    getThreadByRange,
+    getFilteredThreads,
+    subscribe,
+    isEnabled: !!config
+  };
+  return /* @__PURE__ */ jsx12(CommentsContext.Provider, { value, children });
+}
+function useComments() {
+  const context = useContext2(CommentsContext);
+  if (!context) {
+    throw new Error("useComments must be used within a CommentsProvider");
+  }
+  return context;
+}
+function useCommentsOptional() {
+  return useContext2(CommentsContext);
+}
+
+// src/comments/CommentsPanel.tsx
+import { useState as useState8 } from "react";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function formatRelativeTime(timestamp) {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  const days = Math.floor(diff / 864e5);
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+function CommentItem({
+  comment,
+  threadId,
+  isFirst
+}) {
+  const comments = useCommentsOptional();
+  const [isEditing, setIsEditing] = useState8(false);
+  const [editContent, setEditContent] = useState8(comment.content);
+  const [showReactions, setShowReactions] = useState8(false);
+  if (!comments) return null;
+  const { config, updateComment, deleteComment, addReaction, removeReaction, state } = comments;
+  const canEdit = config?.allowEdit !== false && comment.author.id === state.currentUser?.id;
+  const canDelete = config?.allowDelete !== false && comment.author.id === state.currentUser?.id;
+  const canReact = config?.allowReactions !== false;
+  const reactionEmojis = config?.reactionEmojis ?? DEFAULT_REACTION_EMOJIS;
+  const handleSaveEdit = () => {
+    updateComment(threadId, comment.id, editContent);
+    setIsEditing(false);
+  };
+  const handleToggleReaction = (emoji) => {
+    const reaction = comment.reactions?.find((r) => r.emoji === emoji);
+    const hasReacted = reaction?.users.some((u) => u.id === state.currentUser?.id);
+    if (hasReacted) {
+      removeReaction(threadId, comment.id, emoji);
+    } else {
+      addReaction(threadId, comment.id, emoji);
+    }
+    setShowReactions(false);
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: `rte-comment ${isFirst ? "rte-comment-first" : ""}`, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "rte-comment-header", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "rte-comment-author", children: [
+        comment.author.avatar ? /* @__PURE__ */ jsx13("img", { src: comment.author.avatar, alt: comment.author.name, className: "rte-comment-avatar" }) : /* @__PURE__ */ jsx13("div", { className: "rte-comment-avatar-placeholder", children: comment.author.name.charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsx13("span", { className: "rte-comment-author-name", children: comment.author.name })
+      ] }),
+      /* @__PURE__ */ jsxs11("span", { className: "rte-comment-time", children: [
+        formatRelativeTime(comment.createdAt),
+        comment.isEdited && " (edited)"
+      ] })
+    ] }),
+    isEditing ? /* @__PURE__ */ jsxs11("div", { className: "rte-comment-edit", children: [
+      /* @__PURE__ */ jsx13(
+        "textarea",
+        {
+          value: editContent,
+          onChange: (e) => setEditContent(e.target.value),
+          className: "rte-comment-edit-input"
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "rte-comment-edit-actions", children: [
+        /* @__PURE__ */ jsx13("button", { onClick: handleSaveEdit, className: "rte-comment-btn-save", children: "Save" }),
+        /* @__PURE__ */ jsx13("button", { onClick: () => setIsEditing(false), className: "rte-comment-btn-cancel", children: "Cancel" })
+      ] })
+    ] }) : /* @__PURE__ */ jsx13("div", { className: "rte-comment-content", dangerouslySetInnerHTML: { __html: comment.content } }),
+    comment.reactions && comment.reactions.length > 0 && /* @__PURE__ */ jsx13("div", { className: "rte-comment-reactions", children: comment.reactions.map((reaction) => /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        className: `rte-comment-reaction ${reaction.users.some((u) => u.id === state.currentUser?.id) ? "active" : ""}`,
+        onClick: () => handleToggleReaction(reaction.emoji),
+        title: reaction.users.map((u) => u.name).join(", "),
+        children: [
+          reaction.emoji,
+          " ",
+          reaction.users.length
+        ]
+      },
+      reaction.emoji
+    )) }),
+    /* @__PURE__ */ jsxs11("div", { className: "rte-comment-actions", children: [
+      canReact && /* @__PURE__ */ jsxs11("div", { className: "rte-comment-reaction-picker", children: [
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "rte-comment-action-btn",
+            onClick: () => setShowReactions(!showReactions),
+            children: "\u{1F60A}"
+          }
+        ),
+        showReactions && /* @__PURE__ */ jsx13("div", { className: "rte-comment-reaction-dropdown", children: reactionEmojis.map((emoji) => /* @__PURE__ */ jsx13("button", { onClick: () => handleToggleReaction(emoji), children: emoji }, emoji)) })
+      ] }),
+      canEdit && /* @__PURE__ */ jsx13("button", { className: "rte-comment-action-btn", onClick: () => setIsEditing(true), children: "Edit" }),
+      canDelete && !isFirst && /* @__PURE__ */ jsx13(
+        "button",
+        {
+          className: "rte-comment-action-btn rte-comment-action-delete",
+          onClick: () => deleteComment(threadId, comment.id),
+          children: "Delete"
+        }
+      )
+    ] })
+  ] });
+}
+function ThreadItem({ thread }) {
+  const comments = useCommentsOptional();
+  const [replyContent, setReplyContent] = useState8("");
+  const [showReply, setShowReply] = useState8(false);
+  if (!comments) return null;
+  const { state, setActiveThread, addComment, resolveThread, reopenThread, deleteThread, config } = comments;
+  const isActive = state.activeThreadId === thread.id;
+  const canResolve = config?.allowResolve !== false;
+  const handleReply = () => {
+    if (replyContent.trim()) {
+      addComment(thread.id, replyContent);
+      setReplyContent("");
+      setShowReply(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: `rte-thread ${isActive ? "rte-thread-active" : ""} ${thread.status === "resolved" ? "rte-thread-resolved" : ""}`,
+      onClick: () => setActiveThread(thread.id),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "rte-thread-header", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "rte-thread-quote", children: [
+            '"',
+            thread.range.text.slice(0, 50),
+            '..."'
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { className: "rte-thread-meta", children: [
+            /* @__PURE__ */ jsx13("span", { className: `rte-thread-status rte-thread-status-${thread.status}`, children: thread.status }),
+            /* @__PURE__ */ jsxs11("span", { className: "rte-thread-count", children: [
+              thread.comments.length,
+              " comment",
+              thread.comments.length !== 1 ? "s" : ""
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: "rte-thread-comments", children: thread.comments.map((comment, index) => /* @__PURE__ */ jsx13(
+          CommentItem,
+          {
+            comment,
+            threadId: thread.id,
+            isFirst: index === 0
+          },
+          comment.id
+        )) }),
+        thread.status === "open" && /* @__PURE__ */ jsx13("div", { className: "rte-thread-reply", children: showReply ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+          /* @__PURE__ */ jsx13(
+            "textarea",
+            {
+              value: replyContent,
+              onChange: (e) => setReplyContent(e.target.value),
+              placeholder: "Write a reply...",
+              className: "rte-thread-reply-input"
+            }
+          ),
+          /* @__PURE__ */ jsxs11("div", { className: "rte-thread-reply-actions", children: [
+            /* @__PURE__ */ jsx13("button", { onClick: handleReply, className: "rte-btn-primary", disabled: !replyContent.trim(), children: "Reply" }),
+            /* @__PURE__ */ jsx13("button", { onClick: () => setShowReply(false), className: "rte-btn-secondary", children: "Cancel" })
+          ] })
+        ] }) : /* @__PURE__ */ jsx13("button", { onClick: () => setShowReply(true), className: "rte-thread-reply-btn", children: "Reply" }) }),
+        /* @__PURE__ */ jsxs11("div", { className: "rte-thread-actions", children: [
+          canResolve && thread.status === "open" && /* @__PURE__ */ jsx13("button", { onClick: () => resolveThread(thread.id), className: "rte-btn-resolve", children: "\u2713 Resolve" }),
+          thread.status === "resolved" && /* @__PURE__ */ jsx13("button", { onClick: () => reopenThread(thread.id), className: "rte-btn-reopen", children: "Reopen" }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                deleteThread(thread.id);
+              },
+              className: "rte-btn-delete-thread",
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CommentsPanel({ position = "right", className = "" }) {
+  const comments = useCommentsOptional();
+  if (!comments?.isEnabled || !comments.state.isPanelOpen) {
+    return null;
+  }
+  const { state, togglePanel, setFilter, getFilteredThreads } = comments;
+  const filteredThreads = getFilteredThreads();
+  return /* @__PURE__ */ jsxs11("div", { className: `rte-comments-panel rte-comments-panel-${position} ${className}`, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "rte-comments-panel-header", children: [
+      /* @__PURE__ */ jsx13("h3", { children: "Comments" }),
+      /* @__PURE__ */ jsx13("button", { onClick: () => togglePanel(false), className: "rte-comments-close-btn", children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "rte-comments-filters", children: ["all", "open", "resolved"].map((filter) => /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        className: `rte-comments-filter ${state.filter === filter ? "active" : ""}`,
+        onClick: () => setFilter(filter),
+        children: [
+          filter.charAt(0).toUpperCase() + filter.slice(1),
+          /* @__PURE__ */ jsx13("span", { className: "rte-comments-filter-count", children: filter === "all" ? state.threads.length : state.threads.filter((t) => t.status === filter).length })
+        ]
+      },
+      filter
+    )) }),
+    /* @__PURE__ */ jsx13("div", { className: "rte-comments-list", children: filteredThreads.length === 0 ? /* @__PURE__ */ jsx13("div", { className: "rte-comments-empty", children: state.filter === "all" ? "No comments yet. Select text and add a comment." : `No ${state.filter} comments.` }) : filteredThreads.map((thread) => /* @__PURE__ */ jsx13(ThreadItem, { thread }, thread.id)) })
+  ] });
+}
+
+// src/history/VersionHistoryContext.tsx
+import { createContext as createContext3, useContext as useContext3, useReducer as useReducer3, useCallback as useCallback9, useEffect as useEffect11, useRef as useRef9 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var initialState3 = {
+  versions: [],
+  viewingVersionId: null,
+  isPanelOpen: false,
+  isComparing: false,
+  compareFromId: null,
+  compareToId: null,
+  autoSaveEnabled: true,
+  autoSaveInterval: 6e4
+};
+function generateId2() {
+  return `v-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function versionHistoryReducer(state, action) {
+  switch (action.type) {
+    case "SET_VERSIONS":
+      return { ...state, versions: action.versions };
+    case "ADD_VERSION":
+      return {
+        ...state,
+        versions: [action.version, ...state.versions]
+      };
+    case "DELETE_VERSION":
+      return {
+        ...state,
+        versions: state.versions.filter((v) => v.id !== action.versionId),
+        viewingVersionId: state.viewingVersionId === action.versionId ? null : state.viewingVersionId
+      };
+    case "PIN_VERSION":
+      return {
+        ...state,
+        versions: state.versions.map(
+          (v) => v.id === action.versionId ? { ...v, isPinned: true } : v
+        )
+      };
+    case "UNPIN_VERSION":
+      return {
+        ...state,
+        versions: state.versions.map(
+          (v) => v.id === action.versionId ? { ...v, isPinned: false } : v
+        )
+      };
+    case "RENAME_VERSION":
+      return {
+        ...state,
+        versions: state.versions.map(
+          (v) => v.id === action.versionId ? { ...v, title: action.title } : v
+        )
+      };
+    case "SET_VIEWING_VERSION":
+      return { ...state, viewingVersionId: action.versionId };
+    case "TOGGLE_PANEL":
+      return { ...state, isPanelOpen: action.isOpen ?? !state.isPanelOpen };
+    case "START_COMPARE":
+      return {
+        ...state,
+        isComparing: true,
+        compareFromId: action.fromId,
+        compareToId: action.toId
+      };
+    case "STOP_COMPARE":
+      return {
+        ...state,
+        isComparing: false,
+        compareFromId: null,
+        compareToId: null
+      };
+    case "SET_AUTO_SAVE":
+      return { ...state, autoSaveEnabled: action.enabled };
+    case "SET_AUTO_SAVE_INTERVAL":
+      return { ...state, autoSaveInterval: action.interval };
+    default:
+      return state;
+  }
+}
+function countWords(text) {
+  return text.trim().split(/\s+/).filter(Boolean).length;
+}
+function computeDiff(oldText, newText) {
+  const changes = [];
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  let i = 0;
+  let j = 0;
+  while (i < oldLines.length || j < newLines.length) {
+    if (i >= oldLines.length) {
+      changes.push({
+        type: "addition",
+        content: newLines[j],
+        position: j
+      });
+      j++;
+    } else if (j >= newLines.length) {
+      changes.push({
+        type: "deletion",
+        content: oldLines[i],
+        position: i
+      });
+      i++;
+    } else if (oldLines[i] === newLines[j]) {
+      i++;
+      j++;
+    } else {
+      const oldLineInNew = newLines.indexOf(oldLines[i], j);
+      const newLineInOld = oldLines.indexOf(newLines[j], i);
+      if (oldLineInNew === -1 && newLineInOld === -1) {
+        changes.push({
+          type: "modification",
+          content: `${oldLines[i]} -> ${newLines[j]}`,
+          position: i
+        });
+        i++;
+        j++;
+      } else if (oldLineInNew === -1) {
+        changes.push({
+          type: "deletion",
+          content: oldLines[i],
+          position: i
+        });
+        i++;
+      } else {
+        changes.push({
+          type: "addition",
+          content: newLines[j],
+          position: j
+        });
+        j++;
+      }
+    }
+  }
+  return changes;
+}
+var VersionHistoryContext = createContext3(null);
+function VersionHistoryProvider({
+  children,
+  config,
+  initialVersions = [],
+  onVersionsChange,
+  getCurrentContent
+}) {
+  const [state, dispatch] = useReducer3(versionHistoryReducer, {
+    ...initialState3,
+    versions: initialVersions,
+    autoSaveEnabled: config?.autoSave ?? true,
+    autoSaveInterval: config?.autoSaveInterval ?? 6e4
+  });
+  const subscribersRef = useRef9(/* @__PURE__ */ new Set());
+  const autoSaveTimerRef = useRef9(null);
+  const lastContentRef = useRef9("");
+  const versionNumberRef = useRef9(initialVersions.length);
+  useEffect11(() => {
+    if (config?.onLoad) {
+      config.onLoad().then((versions) => {
+        dispatch({ type: "SET_VERSIONS", versions });
+        versionNumberRef.current = versions.length;
+      });
+    }
+  }, [config]);
+  useEffect11(() => {
+    onVersionsChange?.(state.versions);
+    if (config?.onSave) {
+      config.onSave(state.versions);
+    }
+  }, [state.versions, onVersionsChange, config]);
+  useEffect11(() => {
+    if (!state.autoSaveEnabled || !config || !getCurrentContent) return;
+    autoSaveTimerRef.current = setInterval(() => {
+      const { html, json } = getCurrentContent();
+      if (html !== lastContentRef.current) {
+        lastContentRef.current = html;
+        createVersion(html, json, { isAutoSave: true });
+      }
+    }, state.autoSaveInterval);
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearInterval(autoSaveTimerRef.current);
+      }
+    };
+  }, [state.autoSaveEnabled, state.autoSaveInterval, config, getCurrentContent]);
+  const emitEvent = useCallback9((event) => {
+    subscribersRef.current.forEach((callback) => callback(event));
+  }, []);
+  const createVersion = useCallback9((content, jsonContent, options) => {
+    if (!config?.currentUser) return null;
+    const maxVersions = config.maxVersions ?? 100;
+    let versions = state.versions;
+    if (versions.length >= maxVersions) {
+      const oldestUnpinned = [...versions].reverse().find((v) => !v.isPinned);
+      if (oldestUnpinned) {
+        versions = versions.filter((v) => v.id !== oldestUnpinned.id);
+      }
+    }
+    versionNumberRef.current++;
+    const textContent = content.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+    const version = {
+      id: generateId2(),
+      number: versionNumberRef.current,
+      title: options?.title,
+      content,
+      jsonContent,
+      textContent,
+      author: config.currentUser,
+      createdAt: Date.now(),
+      wordCount: countWords(textContent),
+      characterCount: textContent.length,
+      isAutoSave: options?.isAutoSave ?? false,
+      isPinned: false
+    };
+    dispatch({ type: "ADD_VERSION", version });
+    emitEvent({ type: "version-created", version });
+    return version;
+  }, [config, state.versions, emitEvent]);
+  const deleteVersion = useCallback9((versionId) => {
+    dispatch({ type: "DELETE_VERSION", versionId });
+    emitEvent({ type: "version-deleted", versionId });
+  }, [emitEvent]);
+  const restoreVersion = useCallback9((versionId) => {
+    const version = state.versions.find((v) => v.id === versionId);
+    if (!version) return null;
+    config?.onRestore?.(version);
+    emitEvent({ type: "version-restored", versionId });
+    return version.content;
+  }, [state.versions, config, emitEvent]);
+  const pinVersion = useCallback9((versionId) => {
+    dispatch({ type: "PIN_VERSION", versionId });
+    emitEvent({ type: "version-pinned", versionId });
+  }, [emitEvent]);
+  const unpinVersion = useCallback9((versionId) => {
+    dispatch({ type: "UNPIN_VERSION", versionId });
+    emitEvent({ type: "version-unpinned", versionId });
+  }, [emitEvent]);
+  const renameVersion = useCallback9((versionId, title) => {
+    dispatch({ type: "RENAME_VERSION", versionId, title });
+    emitEvent({ type: "version-renamed", versionId, title });
+  }, [emitEvent]);
+  const viewVersion = useCallback9((versionId) => {
+    dispatch({ type: "SET_VIEWING_VERSION", versionId });
+  }, []);
+  const getVersionContent = useCallback9((versionId) => {
+    const version = state.versions.find((v) => v.id === versionId);
+    return version?.content ?? null;
+  }, [state.versions]);
+  const compareVersions = useCallback9((fromId, toId) => {
+    const fromVersion = state.versions.find((v) => v.id === fromId);
+    const toVersion = state.versions.find((v) => v.id === toId);
+    if (!fromVersion || !toVersion) return null;
+    const changes = computeDiff(fromVersion.textContent, toVersion.textContent);
+    return {
+      fromVersionId: fromId,
+      toVersionId: toId,
+      changes,
+      stats: {
+        additions: changes.filter((c) => c.type === "addition").length,
+        deletions: changes.filter((c) => c.type === "deletion").length,
+        modifications: changes.filter((c) => c.type === "modification").length
+      }
+    };
+  }, [state.versions]);
+  const startCompare = useCallback9((fromId, toId) => {
+    dispatch({ type: "START_COMPARE", fromId, toId });
+  }, []);
+  const stopCompare = useCallback9(() => {
+    dispatch({ type: "STOP_COMPARE" });
+  }, []);
+  const togglePanel = useCallback9((isOpen) => {
+    dispatch({ type: "TOGGLE_PANEL", isOpen });
+  }, []);
+  const setAutoSave = useCallback9((enabled) => {
+    dispatch({ type: "SET_AUTO_SAVE", enabled });
+    emitEvent({ type: "auto-save-toggled", enabled });
+  }, [emitEvent]);
+  const getVersion = useCallback9((versionId) => {
+    return state.versions.find((v) => v.id === versionId);
+  }, [state.versions]);
+  const getLatestVersion = useCallback9(() => {
+    return state.versions[0];
+  }, [state.versions]);
+  const getPinnedVersions = useCallback9(() => {
+    return state.versions.filter((v) => v.isPinned);
+  }, [state.versions]);
+  const subscribe = useCallback9((callback) => {
+    subscribersRef.current.add(callback);
+    return () => {
+      subscribersRef.current.delete(callback);
+    };
+  }, []);
+  const value = {
+    state,
+    config: config ?? null,
+    createVersion,
+    deleteVersion,
+    restoreVersion,
+    pinVersion,
+    unpinVersion,
+    renameVersion,
+    viewVersion,
+    getVersionContent,
+    compareVersions,
+    startCompare,
+    stopCompare,
+    togglePanel,
+    setAutoSave,
+    getVersion,
+    getLatestVersion,
+    getPinnedVersions,
+    subscribe,
+    isEnabled: !!config
+  };
+  return /* @__PURE__ */ jsx14(VersionHistoryContext.Provider, { value, children });
+}
+function useVersionHistory() {
+  const context = useContext3(VersionHistoryContext);
+  if (!context) {
+    throw new Error("useVersionHistory must be used within a VersionHistoryProvider");
+  }
+  return context;
+}
+function useVersionHistoryOptional() {
+  return useContext3(VersionHistoryContext);
+}
+
+// src/history/VersionHistoryPanel.tsx
+import { useState as useState9 } from "react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function formatDate(timestamp) {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const isToday = date.toDateString() === now.toDateString();
+  if (isToday) {
+    return `Today at ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `Yesterday at ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+  return date.toLocaleDateString([], {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function VersionItem({
+  version,
+  isViewing,
+  isCompareFrom,
+  isCompareTo,
+  onView,
+  onRestore,
+  onPin,
+  onRename,
+  onDelete,
+  onCompareSelect
+}) {
+  const [isRenaming, setIsRenaming] = useState9(false);
+  const [newTitle, setNewTitle] = useState9(version.title || "");
+  const handleRename = () => {
+    onRename(newTitle);
+    setIsRenaming(false);
+  };
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: `rte-version-item ${isViewing ? "rte-version-viewing" : ""} ${isCompareFrom ? "rte-version-compare-from" : ""} ${isCompareTo ? "rte-version-compare-to" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: "rte-version-header", onClick: onView, children: [
+          /* @__PURE__ */ jsxs12("div", { className: "rte-version-info", children: [
+            isRenaming ? /* @__PURE__ */ jsx15(
+              "input",
+              {
+                type: "text",
+                value: newTitle,
+                onChange: (e) => setNewTitle(e.target.value),
+                onBlur: handleRename,
+                onKeyDown: (e) => e.key === "Enter" && handleRename(),
+                className: "rte-version-rename-input",
+                onClick: (e) => e.stopPropagation(),
+                autoFocus: true
+              }
+            ) : /* @__PURE__ */ jsxs12("span", { className: "rte-version-title", children: [
+              version.title || `Version ${version.number}`,
+              version.isPinned && /* @__PURE__ */ jsx15("span", { className: "rte-version-pin-icon", children: "\u{1F4CC}" }),
+              version.isAutoSave && /* @__PURE__ */ jsx15("span", { className: "rte-version-auto-badge", children: "Auto" })
+            ] }),
+            /* @__PURE__ */ jsx15("span", { className: "rte-version-time", children: formatDate(version.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: "rte-version-author", children: [
+            version.author.avatar ? /* @__PURE__ */ jsx15("img", { src: version.author.avatar, alt: version.author.name, className: "rte-version-avatar" }) : /* @__PURE__ */ jsx15("div", { className: "rte-version-avatar-placeholder", children: version.author.name.charAt(0).toUpperCase() }),
+            /* @__PURE__ */ jsx15("span", { children: version.author.name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "rte-version-stats", children: [
+          /* @__PURE__ */ jsxs12("span", { children: [
+            version.wordCount,
+            " words"
+          ] }),
+          /* @__PURE__ */ jsxs12("span", { children: [
+            version.characterCount,
+            " chars"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "rte-version-actions", children: [
+          /* @__PURE__ */ jsx15("button", { onClick: onRestore, className: "rte-version-btn", title: "Restore this version", children: "\u21BA Restore" }),
+          /* @__PURE__ */ jsx15("button", { onClick: onCompareSelect, className: "rte-version-btn", title: "Compare with another version", children: "\u21C4 Compare" }),
+          /* @__PURE__ */ jsx15("button", { onClick: onPin, className: "rte-version-btn", title: version.isPinned ? "Unpin" : "Pin", children: version.isPinned ? "\u{1F4CC} Unpin" : "\u{1F4CC} Pin" }),
+          /* @__PURE__ */ jsx15(
+            "button",
+            {
+              onClick: () => setIsRenaming(true),
+              className: "rte-version-btn",
+              title: "Rename version",
+              children: "\u270F\uFE0F"
+            }
+          ),
+          !version.isPinned && /* @__PURE__ */ jsx15("button", { onClick: onDelete, className: "rte-version-btn rte-version-btn-delete", title: "Delete", children: "\u{1F5D1}\uFE0F" })
+        ] })
+      ]
+    }
+  );
+}
+function ComparisonView({
+  fromVersion,
+  toVersion,
+  onClose
+}) {
+  const versionHistory = useVersionHistoryOptional();
+  if (!versionHistory) return null;
+  const comparison = versionHistory.compareVersions(fromVersion.id, toVersion.id);
+  return /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison-header", children: [
+      /* @__PURE__ */ jsx15("h4", { children: "Comparing Versions" }),
+      /* @__PURE__ */ jsx15("button", { onClick: onClose, className: "rte-version-comparison-close", children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison-info", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison-from", children: [
+        /* @__PURE__ */ jsx15("span", { className: "rte-version-comparison-label", children: "From:" }),
+        fromVersion.title || `Version ${fromVersion.number}`
+      ] }),
+      /* @__PURE__ */ jsx15("span", { className: "rte-version-comparison-arrow", children: "\u2192" }),
+      /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison-to", children: [
+        /* @__PURE__ */ jsx15("span", { className: "rte-version-comparison-label", children: "To:" }),
+        toVersion.title || `Version ${toVersion.number}`
+      ] })
+    ] }),
+    comparison && /* @__PURE__ */ jsxs12("div", { className: "rte-version-comparison-stats", children: [
+      /* @__PURE__ */ jsxs12("span", { className: "rte-comparison-stat rte-comparison-additions", children: [
+        "+",
+        comparison.stats.additions,
+        " additions"
+      ] }),
+      /* @__PURE__ */ jsxs12("span", { className: "rte-comparison-stat rte-comparison-deletions", children: [
+        "-",
+        comparison.stats.deletions,
+        " deletions"
+      ] }),
+      /* @__PURE__ */ jsxs12("span", { className: "rte-comparison-stat rte-comparison-modifications", children: [
+        "~",
+        comparison.stats.modifications,
+        " modifications"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "rte-version-comparison-diff", children: comparison?.changes.map((change, index) => /* @__PURE__ */ jsxs12("div", { className: `rte-diff-line rte-diff-${change.type}`, children: [
+      /* @__PURE__ */ jsx15("span", { className: "rte-diff-indicator", children: change.type === "addition" ? "+" : change.type === "deletion" ? "-" : "~" }),
+      /* @__PURE__ */ jsx15("span", { className: "rte-diff-content", children: change.content })
+    ] }, index)) })
+  ] });
+}
+function VersionHistoryPanel({ position = "right", className = "" }) {
+  const versionHistory = useVersionHistoryOptional();
+  const [compareFromId, setCompareFromId] = useState9(null);
+  if (!versionHistory?.isEnabled || !versionHistory.state.isPanelOpen) {
+    return null;
+  }
+  const {
+    state,
+    togglePanel,
+    viewVersion,
+    restoreVersion,
+    pinVersion,
+    unpinVersion,
+    renameVersion,
+    deleteVersion,
+    setAutoSave,
+    getVersion,
+    createVersion,
+    stopCompare
+  } = versionHistory;
+  const handleRestore = (versionId) => {
+    const content = restoreVersion(versionId);
+    if (content) {
+      viewVersion(null);
+    }
+  };
+  const handleCompareSelect = (versionId) => {
+    if (!compareFromId) {
+      setCompareFromId(versionId);
+    } else {
+      versionHistory.startCompare(compareFromId, versionId);
+      setCompareFromId(null);
+    }
+  };
+  const handleCancelCompare = () => {
+    setCompareFromId(null);
+    stopCompare();
+  };
+  const compareFromVersion = state.compareFromId ? getVersion(state.compareFromId) : void 0;
+  const compareToVersion = state.compareToId ? getVersion(state.compareToId) : void 0;
+  return /* @__PURE__ */ jsxs12("div", { className: `rte-version-panel rte-version-panel-${position} ${className}`, children: [
+    /* @__PURE__ */ jsxs12("div", { className: "rte-version-panel-header", children: [
+      /* @__PURE__ */ jsx15("h3", { children: "Version History" }),
+      /* @__PURE__ */ jsx15("button", { onClick: () => togglePanel(false), className: "rte-version-close-btn", children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "rte-version-autosave", children: [
+      /* @__PURE__ */ jsxs12("label", { className: "rte-version-autosave-label", children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.autoSaveEnabled,
+            onChange: (e) => setAutoSave(e.target.checked)
+          }
+        ),
+        "Auto-save versions"
+      ] }),
+      /* @__PURE__ */ jsx15(
+        "button",
+        {
+          onClick: () => createVersion("", void 0, { isAutoSave: false }),
+          className: "rte-version-save-btn",
+          children: "Save Now"
+        }
+      )
+    ] }),
+    compareFromId && !state.isComparing && /* @__PURE__ */ jsxs12("div", { className: "rte-version-compare-mode", children: [
+      /* @__PURE__ */ jsx15("span", { children: "Select another version to compare" }),
+      /* @__PURE__ */ jsx15("button", { onClick: handleCancelCompare, children: "Cancel" })
+    ] }),
+    state.isComparing && compareFromVersion && compareToVersion && /* @__PURE__ */ jsx15(
+      ComparisonView,
+      {
+        fromVersion: compareFromVersion,
+        toVersion: compareToVersion,
+        onClose: handleCancelCompare
+      }
+    ),
+    !state.isComparing && /* @__PURE__ */ jsx15("div", { className: "rte-version-list", children: state.versions.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "rte-version-empty", children: "No versions saved yet. Changes will be auto-saved periodically." }) : /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      state.versions.some((v) => v.isPinned) && /* @__PURE__ */ jsxs12("div", { className: "rte-version-section", children: [
+        /* @__PURE__ */ jsx15("div", { className: "rte-version-section-title", children: "\u{1F4CC} Pinned" }),
+        state.versions.filter((v) => v.isPinned).map((version) => /* @__PURE__ */ jsx15(
+          VersionItem,
+          {
+            version,
+            isViewing: state.viewingVersionId === version.id,
+            isCompareFrom: compareFromId === version.id,
+            isCompareTo: false,
+            onView: () => viewVersion(version.id),
+            onRestore: () => handleRestore(version.id),
+            onPin: () => unpinVersion(version.id),
+            onRename: (title) => renameVersion(version.id, title),
+            onDelete: () => deleteVersion(version.id),
+            onCompareSelect: () => handleCompareSelect(version.id)
+          },
+          version.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: "rte-version-section", children: [
+        /* @__PURE__ */ jsx15("div", { className: "rte-version-section-title", children: "Recent" }),
+        state.versions.filter((v) => !v.isPinned).map((version) => /* @__PURE__ */ jsx15(
+          VersionItem,
+          {
+            version,
+            isViewing: state.viewingVersionId === version.id,
+            isCompareFrom: compareFromId === version.id,
+            isCompareTo: false,
+            onView: () => viewVersion(version.id),
+            onRestore: () => handleRestore(version.id),
+            onPin: () => pinVersion(version.id),
+            onRename: (title) => renameVersion(version.id, title),
+            onDelete: () => deleteVersion(version.id),
+            onCompareSelect: () => handleCompareSelect(version.id)
+          },
+          version.id
+        ))
+      ] })
+    ] }) }),
+    state.viewingVersionId && /* @__PURE__ */ jsxs12("div", { className: "rte-version-viewing-indicator", children: [
+      /* @__PURE__ */ jsxs12("span", { children: [
+        "Viewing: ",
+        getVersion(state.viewingVersionId)?.title || `Version ${getVersion(state.viewingVersionId)?.number}`
+      ] }),
+      /* @__PURE__ */ jsx15("button", { onClick: () => viewVersion(null), className: "rte-version-back-btn", children: "\u2190 Back to current" })
+    ] })
+  ] });
+}
 export {
+  CollaborationProvider,
+  CommentsPanel,
+  CommentsProvider,
   DEFAULT_FEATURES,
+  DEFAULT_REACTION_EMOJIS,
   EMOJI_CATEGORIES,
   EditorRegistry,
   Emoji,
@@ -8683,12 +10056,15 @@ export {
   Fullscreen,
   Indent,
   LineHeight,
+  PresenceIndicator,
   Print,
   RichTextEditor,
   TipTapAdapter,
   TipTapEditorComponent,
   TipTapToolbar,
   UnifiedEditor,
+  VersionHistoryPanel,
+  VersionHistoryProvider,
   Video,
   blogToolbar,
   codeToolbar,
@@ -8710,6 +10086,12 @@ export {
   registerAdapter,
   simpleToolbar,
   toolbarPresets,
-  unregisterAdapter
+  unregisterAdapter,
+  useCollaboration,
+  useCollaborationOptional,
+  useComments,
+  useCommentsOptional,
+  useVersionHistory,
+  useVersionHistoryOptional
 };
 //# sourceMappingURL=index.mjs.map