@imjp/writenex-astro 0.1.0

package/src/client/hooks/useSearch.ts

@@ -0,0 +1,206 @@
+/**
+ * @fileoverview Search hook for editor
+ *
+ * Provides search and replace functionality for markdown content.
+ *
+ * @module @writenex/astro/client/hooks/useSearch
+ */
+
+import { useState, useCallback } from "react";
+import type { SearchOptions } from "../components/SearchReplace";
+
+/**
+ * Search state and handlers
+ */
+export interface UseSearchResult {
+  /** Whether search panel is open */
+  isSearchOpen: boolean;
+  /** Open search panel */
+  openSearch: () => void;
+  /** Close search panel */
+  closeSearch: () => void;
+  /** Toggle search panel */
+  toggleSearch: () => void;
+  /** Current search query */
+  searchQuery: string;
+  /** Array of match positions */
+  searchMatches: number[];
+  /** Current active match index (1-based) */
+  searchActiveIndex: number;
+  /** Total number of matches */
+  totalMatches: number;
+  /** Perform search */
+  handleFind: (query: string, options: SearchOptions) => number;
+  /** Navigate to next match */
+  handleNextMatch: () => void;
+  /** Navigate to previous match */
+  handlePreviousMatch: () => void;
+  /** Replace current match */
+  handleReplace: (
+    replacement: string,
+    content: string,
+    setContent: (content: string) => void
+  ) => void;
+  /** Replace all matches */
+  handleReplaceAll: (
+    replacement: string,
+    content: string,
+    setContent: (content: string) => void
+  ) => number;
+}
+
+/**
+ * Hook for search and replace functionality
+ *
+ * @param getContent - Function to get current content
+ * @returns Search state and handlers
+ */
+export function useSearch(getContent: () => string): UseSearchResult {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchMatches, setSearchMatches] = useState<number[]>([]);
+  const [searchActiveIndex, setSearchActiveIndex] = useState(0);
+
+  const openSearch = useCallback(() => setIsSearchOpen(true), []);
+  const closeSearch = useCallback(() => setIsSearchOpen(false), []);
+  const toggleSearch = useCallback(() => setIsSearchOpen((prev) => !prev), []);
+
+  const handleFind = useCallback(
+    (query: string, options: SearchOptions): number => {
+      setSearchQuery(query);
+
+      if (!query) {
+        setSearchMatches([]);
+        setSearchActiveIndex(0);
+        return 0;
+      }
+
+      const content = getContent();
+      let pattern: RegExp;
+
+      try {
+        let regexPattern = options.regex
+          ? query
+          : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+        if (options.wholeWord) {
+          regexPattern = `\\b${regexPattern}\\b`;
+        }
+
+        pattern = new RegExp(regexPattern, options.caseSensitive ? "g" : "gi");
+      } catch {
+        // Invalid regex
+        setSearchMatches([]);
+        setSearchActiveIndex(0);
+        return 0;
+      }
+
+      const matches: number[] = [];
+      let match;
+      while ((match = pattern.exec(content)) !== null) {
+        matches.push(match.index);
+      }
+
+      setSearchMatches(matches);
+      setSearchActiveIndex(matches.length > 0 ? 1 : 0);
+      return matches.length;
+    },
+    [getContent]
+  );
+
+  const handleNextMatch = useCallback(() => {
+    if (searchMatches.length === 0) return;
+    setSearchActiveIndex((prev) =>
+      prev >= searchMatches.length ? 1 : prev + 1
+    );
+  }, [searchMatches.length]);
+
+  const handlePreviousMatch = useCallback(() => {
+    if (searchMatches.length === 0) return;
+    setSearchActiveIndex((prev) =>
+      prev <= 1 ? searchMatches.length : prev - 1
+    );
+  }, [searchMatches.length]);
+
+  const handleReplace = useCallback(
+    (
+      replacement: string,
+      content: string,
+      setContent: (content: string) => void
+    ) => {
+      if (searchMatches.length === 0) return;
+
+      const matchIndex = searchMatches[searchActiveIndex - 1];
+      if (matchIndex === undefined) return;
+
+      const beforeMatch = content.substring(0, matchIndex);
+      const afterMatch = content.substring(matchIndex + searchQuery.length);
+      const newContent = beforeMatch + replacement + afterMatch;
+
+      setContent(newContent);
+
+      // Re-run search to update matches
+      // Matches after the replacement point need to be adjusted
+      const adjustment = replacement.length - searchQuery.length;
+      const newMatches = searchMatches
+        .filter((_, i) => i !== searchActiveIndex - 1)
+        .map((pos, i) => {
+          if (i >= searchActiveIndex - 1) {
+            return pos + adjustment;
+          }
+          return pos;
+        });
+
+      setSearchMatches(newMatches);
+      if (searchActiveIndex > newMatches.length) {
+        setSearchActiveIndex(newMatches.length > 0 ? 1 : 0);
+      }
+    },
+    [searchMatches, searchActiveIndex, searchQuery]
+  );
+
+  const handleReplaceAll = useCallback(
+    (
+      replacement: string,
+      content: string,
+      setContent: (content: string) => void
+    ): number => {
+      if (searchMatches.length === 0) return 0;
+
+      let newContent = content;
+      let count = 0;
+
+      // Replace from end to start to preserve indices
+      [...searchMatches].reverse().forEach((index) => {
+        newContent =
+          newContent.substring(0, index) +
+          replacement +
+          newContent.substring(index + searchQuery.length);
+        count++;
+      });
+
+      setContent(newContent);
+      setSearchMatches([]);
+      setSearchActiveIndex(0);
+
+      return count;
+    },
+    [searchMatches, searchQuery]
+  );
+
+  return {
+    isSearchOpen,
+    openSearch,
+    closeSearch,
+    toggleSearch,
+    searchQuery,
+    searchMatches,
+    searchActiveIndex,
+    totalMatches: searchMatches.length,
+    handleFind,
+    handleNextMatch,
+    handlePreviousMatch,
+    handleReplace,
+    handleReplaceAll,
+  };
+}

package/src/client/hooks/useVersionHistory.ts

@@ -0,0 +1,451 @@
+/**
+ * @fileoverview Version history hook for Writenex client
+ *
+ * Custom React hook for managing version history operations.
+ * Provides methods for listing, creating, restoring, and deleting versions.
+ *
+ * @module @writenex/astro/client/hooks/useVersionHistory
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type { VersionEntry, Version } from "../../types";
+
+/**
+ * Version history API client configuration
+ */
+interface VersionApiConfig {
+  apiBase: string;
+}
+
+/** Version API client type */
+export type VersionApiClient = ReturnType<typeof createVersionApiClient>;
+
+/**
+ * Diff data returned from API
+ */
+export interface DiffData {
+  version: Version;
+  current: {
+    content: string;
+    frontmatter: Record<string, unknown>;
+    body: string;
+  };
+}
+
+/**
+ * Create version history API client functions
+ */
+export function createVersionApiClient(config: VersionApiConfig) {
+  const { apiBase } = config;
+
+  return {
+    /**
+     * List all versions for a content item
+     */
+    async listVersions(
+      collection: string,
+      contentId: string
+    ): Promise<VersionEntry[]> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}`
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch versions");
+      }
+      const data = await response.json();
+      return data.versions;
+    },
+
+    /**
+     * Get a specific version with full content
+     */
+    async getVersion(
+      collection: string,
+      contentId: string,
+      versionId: string
+    ): Promise<Version> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}/${versionId}`
+      );
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Version not found");
+        }
+        throw new Error("Failed to fetch version");
+      }
+      const data = await response.json();
+      return data.version;
+    },
+
+    /**
+     * Create a manual version snapshot
+     */
+    async createVersion(
+      collection: string,
+      contentId: string,
+      label?: string
+    ): Promise<{ success: boolean; version?: VersionEntry; error?: string }> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ label }),
+        }
+      );
+      return response.json();
+    },
+
+    /**
+     * Restore a version to current content
+     */
+    async restoreVersion(
+      collection: string,
+      contentId: string,
+      versionId: string
+    ): Promise<{
+      success: boolean;
+      content?: string;
+      safetySnapshot?: VersionEntry;
+      error?: string;
+    }> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}/${versionId}/restore`,
+        { method: "POST" }
+      );
+      return response.json();
+    },
+
+    /**
+     * Get diff data between version and current content
+     */
+    async getDiff(
+      collection: string,
+      contentId: string,
+      versionId: string
+    ): Promise<DiffData> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}/${versionId}/diff`
+      );
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Version not found");
+        }
+        throw new Error("Failed to fetch diff data");
+      }
+      const data = await response.json();
+      return { version: data.version, current: data.current };
+    },
+
+    /**
+     * Delete a specific version
+     */
+    async deleteVersion(
+      collection: string,
+      contentId: string,
+      versionId: string
+    ): Promise<{ success: boolean; error?: string }> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}/${versionId}`,
+        { method: "DELETE" }
+      );
+      return response.json();
+    },
+
+    /**
+     * Clear all versions for a content item
+     */
+    async clearVersions(
+      collection: string,
+      contentId: string
+    ): Promise<{ success: boolean; error?: string }> {
+      const response = await fetch(
+        `${apiBase}/versions/${collection}/${contentId}`,
+        { method: "DELETE" }
+      );
+      return response.json();
+    },
+  };
+}
+
+/**
+ * Hook state for version history
+ */
+export interface UseVersionHistoryState {
+  /** List of versions */
+  versions: VersionEntry[];
+  /** Loading state */
+  loading: boolean;
+  /** Error message if any */
+  error: string | null;
+  /** Currently selected version for viewing */
+  selectedVersion: Version | null;
+  /** Loading state for selected version */
+  loadingVersion: boolean;
+}
+
+/**
+ * Hook actions for version history
+ */
+export interface UseVersionHistoryActions {
+  /** Refresh the version list */
+  refresh: () => Promise<void>;
+  /** Get a specific version with full content */
+  getVersion: (versionId: string) => Promise<Version | null>;
+  /** Create a manual version snapshot */
+  createVersion: (label?: string) => Promise<boolean>;
+  /** Restore a version to current content */
+  restoreVersion: (versionId: string) => Promise<string | null>;
+  /** Delete a specific version */
+  deleteVersion: (versionId: string) => Promise<boolean>;
+  /** Clear all versions */
+  clearVersions: () => Promise<boolean>;
+  /** Get diff data between version and current */
+  getDiff: (versionId: string) => Promise<DiffData | null>;
+  /** Clear selected version */
+  clearSelectedVersion: () => void;
+}
+
+/**
+ * Hook for managing version history
+ *
+ * Provides state and actions for version history operations.
+ *
+ * @param apiBaseOrClient - Base URL for API calls or a pre-created version API client
+ * @param collection - Collection name
+ * @param contentId - Content ID (slug)
+ * @returns State and actions for version history
+ *
+ * @example
+ * ```tsx
+ * const { versions, loading, refresh, restoreVersion } = useVersionHistory(
+ *   apiBase,
+ *   "blog",
+ *   "my-post"
+ * );
+ * ```
+ */
+export function useVersionHistory(
+  apiBaseOrClient: string | VersionApiClient,
+  collection: string | null,
+  contentId: string | null
+): UseVersionHistoryState & UseVersionHistoryActions {
+  const client = useMemo(() => {
+    if (typeof apiBaseOrClient === "string") {
+      return createVersionApiClient({ apiBase: apiBaseOrClient });
+    }
+    return apiBaseOrClient;
+  }, [apiBaseOrClient]);
+
+  const [versions, setVersions] = useState<VersionEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedVersion, setSelectedVersion] = useState<Version | null>(null);
+  const [loadingVersion, setLoadingVersion] = useState(false);
+
+  /**
+   * Refresh the version list
+   */
+  const refresh = useCallback(async () => {
+    if (!collection || !contentId) {
+      setVersions([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await client.listVersions(collection, contentId);
+      setVersions(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch versions");
+      setVersions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, collection, contentId]);
+
+  /**
+   * Get a specific version with full content
+   */
+  const getVersion = useCallback(
+    async (versionId: string): Promise<Version | null> => {
+      if (!collection || !contentId) return null;
+
+      setLoadingVersion(true);
+      setError(null);
+
+      try {
+        const version = await client.getVersion(
+          collection,
+          contentId,
+          versionId
+        );
+        setSelectedVersion(version);
+        return version;
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to fetch version"
+        );
+        return null;
+      } finally {
+        setLoadingVersion(false);
+      }
+    },
+    [client, collection, contentId]
+  );
+
+  /**
+   * Create a manual version snapshot
+   */
+  const createVersion = useCallback(
+    async (label?: string): Promise<boolean> => {
+      if (!collection || !contentId) return false;
+
+      setError(null);
+
+      try {
+        const result = await client.createVersion(collection, contentId, label);
+        if (result.success) {
+          await refresh();
+          return true;
+        }
+        setError(result.error ?? "Failed to create version");
+        return false;
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to create version"
+        );
+        return false;
+      }
+    },
+    [client, collection, contentId, refresh]
+  );
+
+  /**
+   * Restore a version to current content
+   */
+  const restoreVersion = useCallback(
+    async (versionId: string): Promise<string | null> => {
+      if (!collection || !contentId) return null;
+
+      setError(null);
+
+      try {
+        const result = await client.restoreVersion(
+          collection,
+          contentId,
+          versionId
+        );
+        if (result.success && result.content) {
+          await refresh();
+          return result.content;
+        }
+        setError(result.error ?? "Failed to restore version");
+        return null;
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to restore version"
+        );
+        return null;
+      }
+    },
+    [client, collection, contentId, refresh]
+  );
+
+  /**
+   * Delete a specific version
+   */
+  const deleteVersion = useCallback(
+    async (versionId: string): Promise<boolean> => {
+      if (!collection || !contentId) return false;
+
+      setError(null);
+
+      try {
+        const result = await client.deleteVersion(
+          collection,
+          contentId,
+          versionId
+        );
+        if (result.success) {
+          await refresh();
+          return true;
+        }
+        setError(result.error ?? "Failed to delete version");
+        return false;
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to delete version"
+        );
+        return false;
+      }
+    },
+    [client, collection, contentId, refresh]
+  );
+
+  /**
+   * Clear all versions
+   */
+  const clearVersions = useCallback(async (): Promise<boolean> => {
+    if (!collection || !contentId) return false;
+
+    setError(null);
+
+    try {
+      const result = await client.clearVersions(collection, contentId);
+      if (result.success) {
+        setVersions([]);
+        return true;
+      }
+      setError(result.error ?? "Failed to clear versions");
+      return false;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to clear versions");
+      return false;
+    }
+  }, [client, collection, contentId]);
+
+  /**
+   * Get diff data between version and current content
+   */
+  const getDiff = useCallback(
+    async (versionId: string): Promise<DiffData | null> => {
+      if (!collection || !contentId) return null;
+
+      setError(null);
+
+      try {
+        return await client.getDiff(collection, contentId, versionId);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch diff");
+        return null;
+      }
+    },
+    [client, collection, contentId]
+  );
+
+  /**
+   * Clear selected version
+   */
+  const clearSelectedVersion = useCallback(() => {
+    setSelectedVersion(null);
+  }, []);
+
+  return {
+    versions,
+    loading,
+    error,
+    selectedVersion,
+    loadingVersion,
+    refresh,
+    getVersion,
+    createVersion,
+    restoreVersion,
+    deleteVersion,
+    clearVersions,
+    getDiff,
+    clearSelectedVersion,
+  };
+}

package/src/client/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * @fileoverview Client entry point for Writenex editor
+ *
+ * This is the main entry point for the React-based editor UI.
+ * It bootstraps the application and mounts it to the DOM.
+ *
+ * @module @writenex/astro/client
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import { ThemeProvider } from "./context/ThemeContext";
+import { ApiProvider } from "./context/ApiContext";
+
+/**
+ * Configuration injected by the server
+ */
+declare global {
+  interface Window {
+    __WRITENEX_CONFIG__?: {
+      basePath: string;
+      apiBase: string;
+    };
+  }
+}
+
+/**
+ * Get the configuration from the window object
+ */
+function getConfig() {
+  return (
+    window.__WRITENEX_CONFIG__ ?? {
+      basePath: "/_writenex",
+      apiBase: "/_writenex/api",
+    }
+  );
+}
+
+/**
+ * Initialize and mount the application
+ */
+function mount() {
+  const container = document.getElementById("root");
+
+  if (!container) {
+    console.error("[writenex] Root element not found");
+    return;
+  }
+
+  const config = getConfig();
+  const root = createRoot(container);
+
+  root.render(
+    <StrictMode>
+      <ThemeProvider>
+        <ApiProvider apiBase={config.apiBase}>
+          <App />
+        </ApiProvider>
+      </ThemeProvider>
+    </StrictMode>
+  );
+}
+
+// Mount when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", mount);
+} else {
+  mount();
+}