@tangle-network/ui 11.12.0 → 11.13.0

package/dist/editor/editor-provider.js

@@ -0,0 +1,253 @@
+"use client";
+import { loadEditorProviderPeers } from "./editor-peers.js";
+import { retryableLazyEditor } from "./editor-lazy.js";
+import { Suspense, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/editor/editor-provider.tsx
+const EditorContext = createContext(null);
+/**
+* Generate a random color for user presence.
+*/
+function generateUserColor() {
+	const colors = [
+		"#FF6B6B",
+		"#4ECDC4",
+		"#45B7D1",
+		"#96CEB4",
+		"#FFEAA7",
+		"#DDA0DD",
+		"#98D8C8",
+		"#F7DC6F",
+		"#BB8FCE",
+		"#85C1E9"
+	];
+	return colors[Math.floor(Math.random() * colors.length)];
+}
+/**
+* Builds the collaboration provider against loaded yjs and Hocuspocus
+* namespaces. The peers arrive as an argument so that this module reaches
+* them through type-only imports, which a bundler erases.
+*/
+function createEditorProvider(peers) {
+	const { Doc } = peers.yjs;
+	const { HocuspocusProvider } = peers.hocuspocus;
+	return function EditorProvider({ websocketUrl, documentName, token, tokenExpiresAt, user, autoConnect = true, autoReconnect = true, maxReconnectAttempts = 5, onConnectionChange, onSync, onAuthError, onRefreshToken, 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);
+		const tokenRef = useRef(token);
+		const tokenExpiryRef = useRef(tokenExpiresAt);
+		const refreshPromiseRef = useRef(null);
+		const refreshTimerRef = useRef(null);
+		tokenRef.current = token;
+		tokenExpiryRef.current = tokenExpiresAt;
+		if (!docRef.current) docRef.current = new 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 clearRefreshTimer = useCallback(() => {
+			if (refreshTimerRef.current != null) {
+				window.clearTimeout(refreshTimerRef.current);
+				refreshTimerRef.current = null;
+			}
+		}, []);
+		const refreshToken = useCallback(async () => {
+			if (!onRefreshToken) return null;
+			if (refreshPromiseRef.current) return refreshPromiseRef.current;
+			const refreshPromise = (async () => {
+				const next = await onRefreshToken();
+				const resolvedToken = typeof next === "string" ? next : next.token;
+				const resolvedExpiry = typeof next === "string" ? void 0 : next.expiresAt;
+				tokenRef.current = resolvedToken;
+				tokenExpiryRef.current = resolvedExpiry;
+				return resolvedToken;
+			})().catch((error) => {
+				onAuthError?.(error instanceof Error ? error : new Error(String(error)));
+				return null;
+			}).finally(() => {
+				refreshPromiseRef.current = null;
+			});
+			refreshPromiseRef.current = refreshPromise;
+			return refreshPromise;
+		}, [onAuthError, onRefreshToken]);
+		const scheduleTokenRefresh = useCallback(() => {
+			clearRefreshTimer();
+			if (!tokenExpiryRef.current || !onRefreshToken || typeof window === "undefined") return;
+			const delay = tokenExpiryRef.current * 1e3 - 6e4 - Date.now();
+			if (delay <= 0) {
+				refreshToken();
+				return;
+			}
+			refreshTimerRef.current = window.setTimeout(() => {
+				refreshToken();
+			}, delay);
+		}, [
+			clearRefreshTimer,
+			onRefreshToken,
+			refreshToken
+		]);
+		const connect = useCallback(() => {
+			if (providerRef.current) {
+				providerRef.current.connect();
+				return;
+			}
+			updateConnectionState("connecting");
+			const provider = new HocuspocusProvider({
+				url: websocketUrl,
+				name: documentName,
+				document: doc,
+				token: async () => tokenRef.current,
+				onConnect: () => {
+					reconnectAttemptsRef.current = 0;
+					updateConnectionState("connected");
+					scheduleTokenRefresh();
+				},
+				onSynced: () => {
+					setIsSynced(true);
+					updateConnectionState("synced");
+					onSync?.();
+				},
+				onDisconnect: () => {
+					updateConnectionState("disconnected");
+					setIsSynced(false);
+					clearRefreshTimer();
+					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");
+					updateConnectionState("disconnected");
+					clearRefreshTimer();
+					if (onRefreshToken) {
+						refreshToken().then((nextToken) => {
+							if (nextToken && providerRef.current) {
+								providerRef.current.connect();
+								return;
+							}
+							onAuthError?.(error);
+						});
+						return;
+					}
+					onAuthError?.(error);
+				},
+				onAwarenessUpdate: () => {
+					updateCollaborators(provider.awareness);
+				}
+			});
+			provider.awareness?.setLocalStateField("user", {
+				name: user.name,
+				color: userColor,
+				userId: user.userId
+			});
+			providerRef.current = provider;
+		}, [
+			websocketUrl,
+			documentName,
+			doc,
+			user.name,
+			user.userId,
+			userColor,
+			autoReconnect,
+			maxReconnectAttempts,
+			clearRefreshTimer,
+			updateConnectionState,
+			updateCollaborators,
+			onSync,
+			onAuthError,
+			onRefreshToken,
+			refreshToken,
+			scheduleTokenRefresh
+		]);
+		const disconnect = useCallback(() => {
+			if (providerRef.current) {
+				providerRef.current.disconnect();
+				updateConnectionState("disconnected");
+			}
+		}, [updateConnectionState]);
+		useEffect(() => {
+			if (autoConnect) connect();
+			return () => {
+				clearRefreshTimer();
+				if (providerRef.current) {
+					providerRef.current.destroy();
+					providerRef.current = null;
+				}
+			};
+		}, [
+			autoConnect,
+			clearRefreshTimer,
+			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
+		});
+	};
+}
+const lazyEditorProvider = retryableLazyEditor(async () => createEditorProvider(await loadEditorProviderPeers()));
+/**
+* EditorProvider wraps children with Hocuspocus collaboration context.
+* Manages WebSocket connection, Y.Doc, and awareness state. Loads `yjs` and
+* `@hocuspocus/provider` — and no tiptap package — before it renders children,
+* because every child hook reads a context that only the loaded provider can
+* supply. A consumer that drives its own editor from that context therefore
+* needs those two peers alone.
+*/
+function EditorProvider(props) {
+	const LazyEditorProvider = lazyEditorProvider();
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(LazyEditorProvider, { ...props })
+	});
+}
+/**
+* Hook to access the editor context.
+* Must be used within an EditorProvider.
+*/
+function useEditorContext() {
+	const context = useContext(EditorContext);
+	if (!context) throw new Error("useEditorContext must be used within an EditorProvider");
+	return context;
+}
+//#endregion
+export { EditorProvider, createEditorProvider, useEditorContext };

package/dist/editor/editor-toolbar.d.ts

@@ -0,0 +1,11 @@
+import { Editor } from "@tiptap/react";
+//#region src/editor/editor-toolbar.d.ts
+/**
+ * Editor toolbar component.
+ * Provides basic formatting controls.
+ */
+export declare function EditorToolbar({ editor, className }: {
+  editor: Editor | null;
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/editor/editor-toolbar.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/editor/editor-toolbar.tsx
+/**
+* Editor toolbar component.
+* Provides basic formatting controls.
+*/
+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__ */ jsx("div", {
+		className: cn("flex items-center gap-1 border-border border-b bg-card p-2", className),
+		children: buttons.map((button) => {
+			if ("type" in button && button.type === "separator") return /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
+			return /* @__PURE__ */ jsx("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);
+		})
+	});
+}
+//#endregion
+export { EditorToolbar };

package/dist/editor/markdown-conversion.js

@@ -0,0 +1,23 @@
+import { marked } from "marked";
+import TurndownService from "turndown";
+//#region src/editor/markdown-conversion.ts
+const turndown = new TurndownService({
+	bulletListMarker: "-",
+	codeBlockStyle: "fenced",
+	emDelimiter: "*",
+	headingStyle: "atx"
+});
+function markdownToHtml(markdown) {
+	return String(marked.parse(markdown, {
+		async: false,
+		gfm: true
+	}));
+}
+function htmlToMarkdown(html) {
+	return turndown.turndown(html);
+}
+function normalizeMarkdown(markdown) {
+	return markdown.replace(/\r\n/g, "\n").trimEnd();
+}
+//#endregion
+export { htmlToMarkdown, markdownToHtml, normalizeMarkdown };

package/dist/editor/markdown-document-editor.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { loadDocumentEditorPeers } from "./editor-peers.js";
+import { retryableLazyEditor } from "./editor-lazy.js";
+import { EditorLoadingPlaceholder } from "./editor-loading.js";
+import { EditorToolbar } from "./editor-toolbar.js";
+import { htmlToMarkdown, markdownToHtml, normalizeMarkdown } from "./markdown-conversion.js";
+import { Suspense, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/editor/markdown-document-editor.tsx
+/**
+* Builds the local markdown editor against loaded tiptap namespaces. The
+* peers arrive as an argument so that this module reaches them through
+* type-only imports, which a bundler erases.
+*/
+function createMarkdownDocumentEditor(peers) {
+	const { EditorContent, useEditor } = peers.react;
+	const StarterKit = peers.starterKit.default;
+	return function MarkdownDocumentEditor({ value = "", placeholder = "Start writing...", readOnly = false, autoFocus = false, className, contentClassName, onChange, onReady }) {
+		const initialHtml = useMemo(() => markdownToHtml(value), []);
+		const lastAppliedMarkdownRef = useRef(normalizeMarkdown(value));
+		const editor = useEditor({
+			extensions: [StarterKit.configure({ codeBlock: { HTMLAttributes: { class: "hljs" } } })],
+			content: initialHtml,
+			editable: !readOnly,
+			autofocus: autoFocus,
+			editorProps: { attributes: {
+				class: cn("prose prose-sm sm:prose-base max-w-none focus:outline-none", "prose-headings:text-foreground prose-p:text-foreground prose-li:text-foreground", "prose-strong:text-foreground prose-code:text-foreground prose-pre:text-foreground", contentClassName),
+				"data-placeholder": placeholder
+			} },
+			onUpdate: ({ editor: currentEditor }) => {
+				const nextMarkdown = normalizeMarkdown(htmlToMarkdown(currentEditor.getHTML()));
+				lastAppliedMarkdownRef.current = nextMarkdown;
+				onChange?.(nextMarkdown, currentEditor);
+			},
+			onCreate: ({ editor: currentEditor }) => {
+				onReady?.(currentEditor);
+			}
+		});
+		useEffect(() => {
+			if (editor) editor.setEditable(!readOnly);
+		}, [editor, readOnly]);
+		useEffect(() => {
+			if (!editor) return;
+			const normalizedValue = normalizeMarkdown(value);
+			if (normalizedValue === lastAppliedMarkdownRef.current) return;
+			editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
+			lastAppliedMarkdownRef.current = normalizedValue;
+		}, [editor, value]);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-h-[14rem] w-full flex-col overflow-hidden rounded-lg border border-border bg-background", className),
+			children: [
+				/* @__PURE__ */ jsx(EditorToolbar, {
+					editor,
+					className: "border-border bg-card px-2 py-2"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-auto px-5 py-4",
+					children: /* @__PURE__ */ jsx(EditorContent, { editor })
+				}),
+				/* @__PURE__ */ jsx("style", { children: `
+        .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          float: left;
+          color: hsl(var(--muted-foreground));
+          pointer-events: none;
+          height: 0;
+        }
+
+        .ProseMirror pre {
+          background: hsl(var(--muted));
+          border: 1px solid hsl(var(--border));
+          border-radius: 0.75rem;
+          padding: 0.875rem 1rem;
+          overflow-x: auto;
+        }
+
+        .ProseMirror code {
+          background: hsl(var(--muted));
+          border-radius: 0.35rem;
+          padding: 0.12rem 0.3rem;
+        }
+
+        .ProseMirror pre code {
+          background: transparent;
+          padding: 0;
+        }
+      ` })
+			]
+		});
+	};
+}
+const lazyMarkdownDocumentEditor = retryableLazyEditor(async () => createMarkdownDocumentEditor(await loadDocumentEditorPeers()));
+/** Local markdown editor. Loads its tiptap peers on first render. */
+function MarkdownDocumentEditor(props) {
+	const LazyMarkdownDocumentEditor = lazyMarkdownDocumentEditor();
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(EditorLoadingPlaceholder, { className: cn("min-h-[14rem]", props.className) }),
+		children: /* @__PURE__ */ jsx(LazyMarkdownDocumentEditor, { ...props })
+	});
+}
+//#endregion
+export { MarkdownDocumentEditor, createMarkdownDocumentEditor };

package/dist/editor/tiptap-editor.d.ts

@@ -0,0 +1,45 @@
+import "./editor-peers.js";
+import { Collaborator } from "./editor-provider.js";
+import { EditorToolbar } from "./editor-toolbar.js";
+import "react";
+import { Editor } from "@tiptap/react";
+//#region src/editor/tiptap-editor.d.ts
+/**
+ * Props for TiptapEditor component.
+ */
+export interface TiptapEditorProps {
+  /** Initial content for new documents (markdown string) */
+  initialContent?: string;
+  /** Placeholder text when editor is empty */
+  placeholder?: string;
+  /** Whether the editor is read-only */
+  readOnly?: boolean;
+  /** Whether to auto-focus on mount */
+  autoFocus?: boolean;
+  /** Custom className for the editor wrapper */
+  className?: string;
+  /** Custom className for the editor content area */
+  contentClassName?: string;
+  /** Callback when content changes */
+  onUpdate?: (editor: Editor) => void;
+  /** Callback when selection changes */
+  onSelectionUpdate?: (editor: Editor) => void;
+  /** Callback when editor is ready */
+  onReady?: (editor: Editor) => void;
+}
+/**
+ * TiptapEditor - Collaborative markdown editor with Y.js sync.
+ * Must be used within an EditorProvider. Loads its tiptap, Hocuspocus and
+ * yjs peers on first render.
+ */
+export declare function TiptapEditor(props: TiptapEditorProps): import("react").JSX.Element;
+/**
+ * Collaborators list component.
+ * Shows active users in the document.
+ */
+export declare function CollaboratorsList({ collaborators, className }: {
+  collaborators: Collaborator[];
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+export { EditorToolbar };