@tangle-network/sandbox-ui 0.2.0

package/dist/editor.js

@@ -0,0 +1,713 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/editor/editor-provider.tsx
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import * as Y from "yjs";
+import { jsx } from "react/jsx-runtime";
+var EditorContext = createContext(null);
+function generateUserColor() {
+  const colors = [
+    "#FF6B6B",
+    // Red
+    "#4ECDC4",
+    // Teal
+    "#45B7D1",
+    // Blue
+    "#96CEB4",
+    // Green
+    "#FFEAA7",
+    // Yellow
+    "#DDA0DD",
+    // Plum
+    "#98D8C8",
+    // Mint
+    "#F7DC6F",
+    // Gold
+    "#BB8FCE",
+    // Purple
+    "#85C1E9"
+    // Sky
+  ];
+  return colors[Math.floor(Math.random() * colors.length)];
+}
+function EditorProvider({
+  websocketUrl,
+  documentName,
+  token,
+  user,
+  autoConnect = true,
+  autoReconnect = true,
+  maxReconnectAttempts = 5,
+  onConnectionChange,
+  onSync,
+  onAuthError,
+  children
+}) {
+  const [connectionState, setConnectionState] = useState("disconnected");
+  const [collaborators, setCollaborators] = useState([]);
+  const [isSynced, setIsSynced] = useState(false);
+  const docRef = useRef(null);
+  const providerRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  if (!docRef.current) {
+    docRef.current = new Y.Doc();
+  }
+  const doc = docRef.current;
+  const userColor = useMemo(
+    () => user.color ?? generateUserColor(),
+    [user.color]
+  );
+  const updateConnectionState = useCallback(
+    (state) => {
+      setConnectionState(state);
+      onConnectionChange?.(state);
+    },
+    [onConnectionChange]
+  );
+  const updateCollaborators = useCallback(
+    (awareness) => {
+      if (!awareness) return;
+      const states = awareness.getStates();
+      const collabs = [];
+      states.forEach((state, clientId) => {
+        if (clientId === awareness.clientID) return;
+        if (state.user) {
+          collabs.push({
+            clientId,
+            user: state.user
+          });
+        }
+      });
+      setCollaborators(collabs);
+    },
+    []
+  );
+  const connect = useCallback(() => {
+    if (providerRef.current) {
+      providerRef.current.connect();
+      return;
+    }
+    updateConnectionState("connecting");
+    const provider = new HocuspocusProvider({
+      url: websocketUrl,
+      name: documentName,
+      document: doc,
+      token,
+      // @ts-expect-error -- connect is valid at runtime but missing from type defs
+      connect: true,
+      onConnect: () => {
+        reconnectAttemptsRef.current = 0;
+        updateConnectionState("connected");
+      },
+      onSynced: () => {
+        setIsSynced(true);
+        updateConnectionState("synced");
+        onSync?.();
+      },
+      onDisconnect: () => {
+        updateConnectionState("disconnected");
+        setIsSynced(false);
+        if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current += 1;
+          const delay = Math.min(
+            1e3 * 2 ** reconnectAttemptsRef.current,
+            3e4
+          );
+          setTimeout(() => {
+            if (providerRef.current && !providerRef.current.isConnected) {
+              providerRef.current.connect();
+            }
+          }, delay);
+        }
+      },
+      onAuthenticationFailed: ({ reason }) => {
+        const error = new Error(reason ?? "Authentication failed");
+        onAuthError?.(error);
+        updateConnectionState("disconnected");
+      },
+      onAwarenessUpdate: () => {
+        updateCollaborators(provider.awareness);
+      }
+    });
+    provider.awareness?.setLocalStateField("user", {
+      name: user.name,
+      color: userColor,
+      userId: user.userId
+    });
+    providerRef.current = provider;
+  }, [
+    websocketUrl,
+    documentName,
+    doc,
+    token,
+    user.name,
+    user.userId,
+    userColor,
+    autoReconnect,
+    maxReconnectAttempts,
+    updateConnectionState,
+    updateCollaborators,
+    onSync,
+    onAuthError
+  ]);
+  const disconnect = useCallback(() => {
+    if (providerRef.current) {
+      providerRef.current.disconnect();
+      updateConnectionState("disconnected");
+    }
+  }, [updateConnectionState]);
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      if (providerRef.current) {
+        providerRef.current.destroy();
+        providerRef.current = null;
+      }
+    };
+  }, [autoConnect, connect]);
+  const contextValue = useMemo(
+    () => ({
+      doc,
+      provider: providerRef.current,
+      connectionState,
+      collaborators,
+      isSynced,
+      connect,
+      disconnect
+    }),
+    [doc, connectionState, collaborators, isSynced, connect, disconnect]
+  );
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children });
+}
+function useEditorContext() {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditorContext must be used within an EditorProvider");
+  }
+  return context;
+}
+
+// src/editor/tiptap-editor.tsx
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var cursorColors = {
+  "#FF6B6B": { background: "#FF6B6B", text: "#FFFFFF" },
+  "#4ECDC4": { background: "#4ECDC4", text: "#000000" },
+  "#45B7D1": { background: "#45B7D1", text: "#000000" },
+  "#96CEB4": { background: "#96CEB4", text: "#000000" },
+  "#FFEAA7": { background: "#FFEAA7", text: "#000000" },
+  "#DDA0DD": { background: "#DDA0DD", text: "#000000" },
+  "#98D8C8": { background: "#98D8C8", text: "#000000" },
+  "#F7DC6F": { background: "#F7DC6F", text: "#000000" },
+  "#BB8FCE": { background: "#BB8FCE", text: "#000000" },
+  "#85C1E9": { background: "#85C1E9", text: "#000000" }
+};
+function getCursorColors(color) {
+  return cursorColors[color] ?? { background: color, text: "#FFFFFF" };
+}
+function TiptapEditor({
+  initialContent,
+  placeholder = "Start writing...",
+  readOnly = false,
+  autoFocus = false,
+  className,
+  contentClassName,
+  onUpdate,
+  onSelectionUpdate,
+  onReady
+}) {
+  const { doc, provider, connectionState } = useEditorContext();
+  const fragment = useMemo2(() => doc.getXmlFragment("prosemirror"), [doc]);
+  const extensions = useMemo2(() => {
+    const baseExtensions = [
+      StarterKit.configure({
+        // Disable history - Y.js handles undo/redo
+        ...{ history: false },
+        // Configure code block for syntax highlighting placeholder
+        codeBlock: {
+          HTMLAttributes: {
+            class: "hljs"
+          }
+        }
+      }),
+      Collaboration.configure({
+        fragment
+      })
+    ];
+    if (provider?.awareness) {
+      baseExtensions.push(
+        CollaborationCursor.configure({
+          provider,
+          user: provider.awareness.getLocalState()?.user ?? {
+            name: "Anonymous",
+            color: "#808080"
+          },
+          render: (user) => {
+            const { background, text } = getCursorColors(user.color);
+            const cursor = document.createElement("span");
+            cursor.className = "collaboration-cursor";
+            cursor.style.borderColor = background;
+            const label = document.createElement("span");
+            label.className = "collaboration-cursor-label";
+            label.style.backgroundColor = background;
+            label.style.color = text;
+            label.textContent = user.name;
+            cursor.appendChild(label);
+            return cursor;
+          }
+        })
+      );
+    }
+    return baseExtensions;
+  }, [fragment, provider]);
+  const editor = useEditor({
+    extensions,
+    editable: !readOnly,
+    autofocus: autoFocus,
+    editorProps: {
+      attributes: {
+        class: cn(
+          "prose prose-sm sm:prose-base dark:prose-invert max-w-none",
+          "focus:outline-none",
+          contentClassName
+        ),
+        "data-placeholder": placeholder
+      }
+    },
+    onUpdate: ({ editor: ed }) => {
+      onUpdate?.(ed);
+    },
+    onSelectionUpdate: ({ editor: ed }) => {
+      onSelectionUpdate?.(ed);
+    },
+    onCreate: ({ editor: ed }) => {
+      onReady?.(ed);
+    }
+  });
+  useEffect2(() => {
+    if (editor) {
+      editor.setEditable(!readOnly);
+    }
+  }, [editor, readOnly]);
+  useEffect2(() => {
+    if (editor && initialContent && connectionState === "synced" && editor.isEmpty) {
+      editor.commands.setContent(initialContent);
+    }
+  }, [editor, initialContent, connectionState]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative min-h-[200px] w-full rounded-lg border border-border",
+        "bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx2(ConnectionIndicator, { state: connectionState }) }),
+        /* @__PURE__ */ jsx2("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }),
+        /* @__PURE__ */ jsx2("style", { children: `
+        .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          float: left;
+          color: var(--muted-foreground, #999);
+          pointer-events: none;
+          height: 0;
+        }
+
+        .collaboration-cursor {
+          position: relative;
+          border-left: 2px solid;
+          margin-left: -1px;
+          margin-right: -1px;
+          pointer-events: none;
+          word-break: normal;
+        }
+
+        .collaboration-cursor-label {
+          position: absolute;
+          top: -1.4em;
+          left: -1px;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          padding: 2px 6px;
+          border-radius: 4px 4px 4px 0;
+          white-space: nowrap;
+          user-select: none;
+        }
+
+        .ProseMirror pre {
+          background: var(--muted, #f4f4f5);
+          border-radius: 0.375rem;
+          padding: 0.75rem 1rem;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+          font-size: 0.875rem;
+          overflow-x: auto;
+        }
+
+        .dark .ProseMirror pre {
+          background: var(--muted, #27272a);
+        }
+
+        .ProseMirror code {
+          background: var(--muted, #f4f4f5);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.25rem;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+          font-size: 0.875em;
+        }
+
+        .dark .ProseMirror code {
+          background: var(--muted, #27272a);
+        }
+
+        .ProseMirror pre code {
+          background: transparent;
+          padding: 0;
+          font-size: inherit;
+        }
+      ` })
+      ]
+    }
+  );
+}
+function ConnectionIndicator({
+  state
+}) {
+  const config = {
+    disconnected: {
+      color: "bg-red-500",
+      label: "Disconnected"
+    },
+    connecting: {
+      color: "bg-yellow-500 animate-pulse",
+      label: "Connecting..."
+    },
+    connected: {
+      color: "bg-blue-500",
+      label: "Connected"
+    },
+    synced: {
+      color: "bg-green-500",
+      label: "Synced"
+    }
+  }[state];
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [
+    /* @__PURE__ */ jsx2("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
+    /* @__PURE__ */ jsx2("span", { children: config.label })
+  ] });
+}
+function CollaboratorsList({
+  collaborators,
+  className
+}) {
+  if (collaborators.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
+    collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "flex h-6 w-6 items-center justify-center rounded-full font-medium text-xs",
+        style: { backgroundColor: collab.user.color },
+        title: collab.user.name,
+        children: collab.user.name.charAt(0).toUpperCase()
+      },
+      collab.clientId
+    )),
+    collaborators.length > 5 && /* @__PURE__ */ jsxs("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs", children: [
+      "+",
+      collaborators.length - 5
+    ] })
+  ] });
+}
+function EditorToolbar({
+  editor,
+  className
+}) {
+  if (!editor) {
+    return null;
+  }
+  const buttons = [
+    {
+      id: "bold",
+      label: "Bold",
+      action: () => editor.chain().focus().toggleBold().run(),
+      isActive: editor.isActive("bold"),
+      shortcut: "Ctrl+B"
+    },
+    {
+      id: "italic",
+      label: "Italic",
+      action: () => editor.chain().focus().toggleItalic().run(),
+      isActive: editor.isActive("italic"),
+      shortcut: "Ctrl+I"
+    },
+    {
+      id: "strike",
+      label: "Strike",
+      action: () => editor.chain().focus().toggleStrike().run(),
+      isActive: editor.isActive("strike"),
+      shortcut: "Ctrl+Shift+X"
+    },
+    {
+      id: "code",
+      label: "Code",
+      action: () => editor.chain().focus().toggleCode().run(),
+      isActive: editor.isActive("code"),
+      shortcut: "Ctrl+E"
+    },
+    { id: "sep-1", type: "separator" },
+    {
+      id: "h1",
+      label: "H1",
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: editor.isActive("heading", { level: 1 })
+    },
+    {
+      id: "h2",
+      label: "H2",
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: editor.isActive("heading", { level: 2 })
+    },
+    {
+      id: "h3",
+      label: "H3",
+      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: editor.isActive("heading", { level: 3 })
+    },
+    { id: "sep-2", type: "separator" },
+    {
+      id: "bullet-list",
+      label: "Bullet List",
+      action: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: editor.isActive("bulletList")
+    },
+    {
+      id: "ordered-list",
+      label: "Ordered List",
+      action: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: editor.isActive("orderedList")
+    },
+    {
+      id: "code-block",
+      label: "Code Block",
+      action: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: editor.isActive("codeBlock")
+    },
+    {
+      id: "blockquote",
+      label: "Blockquote",
+      action: () => editor.chain().focus().toggleBlockquote().run(),
+      isActive: editor.isActive("blockquote")
+    }
+  ];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 border-border border-b bg-muted/50 p-2",
+        className
+      ),
+      children: buttons.map((button) => {
+        if ("type" in button && button.type === "separator") {
+          return /* @__PURE__ */ jsx2("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
+        }
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: button.action,
+            type: "button",
+            title: "shortcut" in button ? `${button.label} (${button.shortcut})` : button.label,
+            className: cn(
+              "rounded px-2 py-1 font-medium text-xs transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              button.isActive && "bg-accent text-accent-foreground"
+            ),
+            children: button.label
+          },
+          button.id
+        );
+      })
+    }
+  );
+}
+
+// src/editor/use-editor.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+function useEditorConnection() {
+  const { connectionState, isSynced, connect, disconnect } = useEditorContext();
+  const isConnected = connectionState === "connected" || connectionState === "synced";
+  const isConnecting = connectionState === "connecting";
+  const isDisconnected = connectionState === "disconnected";
+  return {
+    /** Current connection state string */
+    state: connectionState,
+    /** Whether connected to the server (connected or synced) */
+    isConnected,
+    /** Whether currently attempting to connect */
+    isConnecting,
+    /** Whether disconnected from the server */
+    isDisconnected,
+    /** Whether the document is synced with the server */
+    isSynced,
+    /** Connect to the collaboration server */
+    connect,
+    /** Disconnect from the collaboration server */
+    disconnect
+  };
+}
+function useCollaborators() {
+  const { collaborators } = useEditorContext();
+  const count = collaborators.length;
+  const hasOthers = count > 0;
+  return {
+    /** List of active collaborators (excluding self) */
+    collaborators,
+    /** Number of other collaborators */
+    count,
+    /** Whether there are other collaborators present */
+    hasOthers
+  };
+}
+function useCollaboratorPresence(userId) {
+  const { collaborators } = useEditorContext();
+  return collaborators.find((c) => c.user.userId === userId) ?? null;
+}
+function useYjsState(key, initialValue) {
+  const { doc } = useEditorContext();
+  const [value, setLocalValue] = useState2(initialValue);
+  const metaMap = doc.getMap("metadata");
+  useEffect3(() => {
+    const updateValue = () => {
+      const stored = metaMap.get(key);
+      if (stored !== void 0) {
+        setLocalValue(stored);
+      }
+    };
+    updateValue();
+    metaMap.observe(updateValue);
+    return () => {
+      metaMap.unobserve(updateValue);
+    };
+  }, [metaMap, key]);
+  const setValue = useCallback2(
+    (newValue) => {
+      doc.transact(() => {
+        metaMap.set(key, newValue);
+      });
+    },
+    [doc, metaMap, key]
+  );
+  return [value, setValue];
+}
+function useDocumentChanges(onSave) {
+  const { doc } = useEditorContext();
+  const [isDirty, setIsDirty] = useState2(false);
+  const [isSaving, setIsSaving] = useState2(false);
+  const [lastSaved, setLastSaved] = useState2(null);
+  useEffect3(() => {
+    const handleUpdate = () => {
+      setIsDirty(true);
+    };
+    doc.on("update", handleUpdate);
+    return () => {
+      doc.off("update", handleUpdate);
+    };
+  }, [doc]);
+  const save = useCallback2(async () => {
+    if (!onSave || isSaving) return;
+    setIsSaving(true);
+    try {
+      await onSave();
+      setIsDirty(false);
+      setLastSaved(/* @__PURE__ */ new Date());
+    } finally {
+      setIsSaving(false);
+    }
+  }, [onSave, isSaving]);
+  return {
+    /** Whether there are unsaved changes */
+    isDirty,
+    /** Whether save is in progress */
+    isSaving,
+    /** When the document was last saved */
+    lastSaved,
+    /** Save the document */
+    save
+  };
+}
+function useAwareness() {
+  const { provider } = useEditorContext();
+  const [localState, setLocalStateValue] = useState2(
+    {}
+  );
+  const awareness = provider?.awareness;
+  useEffect3(() => {
+    if (!awareness) return;
+    const updateState = () => {
+      setLocalStateValue(awareness.getLocalState() ?? {});
+    };
+    updateState();
+    awareness.on("change", updateState);
+    return () => {
+      awareness.off("change", updateState);
+    };
+  }, [awareness]);
+  const setLocalState = useCallback2(
+    (state) => {
+      if (!awareness) return;
+      const current = awareness.getLocalState() ?? {};
+      awareness.setLocalState({ ...current, ...state });
+    },
+    [awareness]
+  );
+  const setLocalStateField = useCallback2(
+    (field, value) => {
+      if (!awareness) return;
+      awareness.setLocalStateField(field, value);
+    },
+    [awareness]
+  );
+  return {
+    /** Current local awareness state */
+    localState,
+    /** Set the entire local state (merges with existing) */
+    setLocalState,
+    /** Set a single field in the local state */
+    setLocalStateField,
+    /** The raw awareness instance */
+    awareness
+  };
+}
+export {
+  CollaboratorsList,
+  EditorProvider,
+  EditorToolbar,
+  TiptapEditor,
+  useAwareness,
+  useCollaboratorPresence,
+  useCollaborators,
+  useDocumentChanges,
+  useEditorConnection,
+  useEditorContext,
+  useYjsState
+};