@autumnsgrove/groveengine 0.4.7 → 0.4.9

package/dist/components/admin/MarkdownEditor.svelte

@@ -39,6 +39,7 @@
   let showPreview = $state(true);
   let cursorLine = $state(1);
   let cursorCol = $state(1);
+  let isUpdating = $state(false);
 
   // Image upload state
   let isDragging = $state(false);
@@ -326,7 +327,8 @@
 
   // Text manipulation helpers
   function wrapSelection(before, after) {
-    if (!textareaRef) return;
+    if (!textareaRef || isUpdating) return;
+    isUpdating = true;
     const start = textareaRef.selectionStart;
     const end = textareaRef.selectionEnd;
     const selectedText = content.substring(start, end);
@@ -335,16 +337,19 @@
       textareaRef.selectionStart = start + before.length;
       textareaRef.selectionEnd = end + before.length;
       textareaRef.focus();
+      isUpdating = false;
     }, 0);
   }
 
   function insertAtCursor(text) {
-    if (!textareaRef) return;
+    if (!textareaRef || isUpdating) return;
+    isUpdating = true;
     const start = textareaRef.selectionStart;
     content = content.substring(0, start) + text + content.substring(start);
     setTimeout(() => {
       textareaRef.selectionStart = textareaRef.selectionEnd = start + text.length;
       textareaRef.focus();
+      isUpdating = false;
     }, 0);
   }
 
@@ -362,10 +367,18 @@
   }
 
   function insertCodeBlock() {
+    if (!textareaRef || isUpdating) return;
+    isUpdating = true;
     const start = textareaRef.selectionStart;
-    const selectedText = content.substring(start, textareaRef.selectionEnd);
+    const end = textareaRef.selectionEnd;
+    const selectedText = content.substring(start, end);
     const codeBlock = "```\n" + (selectedText || "code here") + "\n```";
-    content = content.substring(0, start) + codeBlock + content.substring(textareaRef.selectionEnd);
+    content = content.substring(0, start) + codeBlock + content.substring(end);
+    setTimeout(() => {
+      textareaRef.selectionStart = textareaRef.selectionEnd = start + codeBlock.length;
+      textareaRef.focus();
+      isUpdating = false;
+    }, 0);
   }
 
   function insertList() {
@@ -691,7 +704,9 @@
         </div>
         <div class="preview-content" bind:this={previewRef}>
           {#if previewHtml}
-            {@html previewHtml}
+            {#key previewHtml}
+              <div>{@html previewHtml}</div>
+            {/key}
           {:else}
             <p class="preview-placeholder">
               Your rendered markdown will appear here...
@@ -1006,7 +1021,9 @@
 
           <div class="content-body">
             {#if previewHtml}
-              {@html previewHtml}
+              {#key previewHtml}
+                <div>{@html previewHtml}</div>
+              {/key}
             {:else}
               <p class="preview-placeholder">Start writing to see your content here...</p>
             {/if}
@@ -1845,8 +1862,9 @@
     border: 1px solid var(--light-border-primary);
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-    z-index: 1001;
+    z-index: 1003; /* above modals and gutters */
     animation: slide-up 0.2s ease;
+    overflow: hidden;
   }
   @keyframes slide-up {
     from { opacity: 0; transform: translateY(10px); }

package/dist/components/custom/ContentWithGutter.svelte

@@ -401,10 +401,10 @@
 	// Sanitize HTML content to prevent XSS attacks (browser-only for SSR compatibility)
 	let DOMPurify = $state(null);
 
-	// Load DOMPurify only in browser
+	// Load DOMPurify only in browser (avoids jsdom dependency for SSR)
 	onMount(async () => {
 		if (browser) {
-			const module = await import('isomorphic-dompurify');
+			const module = await import('dompurify');
 			DOMPurify = module.default;
 		}
 	});

package/dist/utils/api.js

@@ -11,99 +11,114 @@
  * @throws {Error} If request fails
  */
 export async function apiRequest(url, options = {}) {
-	const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
 
-	// Build headers - don't set Content-Type for FormData (browser sets it with boundary)
-	const headers = {
-		...(csrfToken && { 'X-CSRF-Token': csrfToken }),
-		...options.headers
-	};
+  // Debug logging
+  if (typeof console !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.debug("[apiRequest]", {
+      url,
+      csrfToken: csrfToken ? "present" : "missing",
+    });
+  }
 
-	// Only add Content-Type if not FormData
-	if (!(options.body instanceof FormData)) {
-		headers['Content-Type'] = 'application/json';
-	}
+  // Build headers - don't set Content-Type for FormData (browser sets it with boundary)
+  const headers = {
+    ...(csrfToken && { "X-CSRF-Token": csrfToken }),
+    ...options.headers,
+  };
 
-	const response = await fetch(url, {
-		...options,
-		headers
-	});
+  // Only add Content-Type if not FormData
+  if (!(options.body instanceof FormData)) {
+    headers["Content-Type"] = "application/json";
+  }
 
-	if (!response.ok) {
-		let errorMessage = 'Request failed';
-		try {
-			const error = await response.json();
-			errorMessage = error.message || errorMessage;
-		} catch {
-			errorMessage = `${response.status} ${response.statusText}`;
-		}
-		throw new Error(errorMessage);
-	}
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  });
 
-	// Handle empty responses (204 No Content)
-	if (response.status === 204) {
-		return null;
-	}
+  if (!response.ok) {
+    let errorMessage = "Request failed";
+    try {
+      const error = await response.json();
+      errorMessage = error.message || errorMessage;
+    } catch {
+      errorMessage = `${response.status} ${response.statusText}`;
+    }
+    // Include CSRF debug info
+    if (response.status === 403 && errorMessage.includes("CSRF")) {
+      console.error("[apiRequest] CSRF token validation failed", {
+        csrfToken,
+        headers: Object.fromEntries(response.headers.entries()),
+        url,
+      });
+    }
+    throw new Error(errorMessage);
+  }
 
-	return response.json();
+  // Handle empty responses (204 No Content)
+  if (response.status === 204) {
+    return null;
+  }
+
+  return response.json();
 }
 
 /**
  * Convenience methods for common HTTP verbs
  */
 export const api = {
-	/**
-	 * GET request
-	 * @param {string} url - API endpoint
-	 * @param {RequestInit} options - Additional fetch options
-	 */
-	get: (url, options = {}) =>
-		apiRequest(url, { ...options, method: 'GET' }),
+  /**
+   * GET request
+   * @param {string} url - API endpoint
+   * @param {RequestInit} options - Additional fetch options
+   */
+  get: (url, options = {}) => apiRequest(url, { ...options, method: "GET" }),
 
-	/**
-	 * POST request
-	 * @param {string} url - API endpoint
-	 * @param {any} body - Request body (will be JSON stringified)
-	 * @param {RequestInit} options - Additional fetch options
-	 */
-	post: (url, body, options = {}) =>
-		apiRequest(url, {
-			...options,
-			method: 'POST',
-			body: JSON.stringify(body)
-		}),
+  /**
+   * POST request
+   * @param {string} url - API endpoint
+   * @param {any} body - Request body (will be JSON stringified)
+   * @param {RequestInit} options - Additional fetch options
+   */
+  post: (url, body, options = {}) =>
+    apiRequest(url, {
+      ...options,
+      method: "POST",
+      body: JSON.stringify(body),
+    }),
 
-	/**
-	 * PUT request
-	 * @param {string} url - API endpoint
-	 * @param {any} body - Request body (will be JSON stringified)
-	 * @param {RequestInit} options - Additional fetch options
-	 */
-	put: (url, body, options = {}) =>
-		apiRequest(url, {
-			...options,
-			method: 'PUT',
-			body: JSON.stringify(body)
-		}),
+  /**
+   * PUT request
+   * @param {string} url - API endpoint
+   * @param {any} body - Request body (will be JSON stringified)
+   * @param {RequestInit} options - Additional fetch options
+   */
+  put: (url, body, options = {}) =>
+    apiRequest(url, {
+      ...options,
+      method: "PUT",
+      body: JSON.stringify(body),
+    }),
 
-	/**
-	 * DELETE request
-	 * @param {string} url - API endpoint
-	 * @param {RequestInit} options - Additional fetch options
-	 */
-	delete: (url, options = {}) =>
-		apiRequest(url, { ...options, method: 'DELETE' }),
+  /**
+   * DELETE request
+   * @param {string} url - API endpoint
+   * @param {RequestInit} options - Additional fetch options
+   */
+  delete: (url, options = {}) =>
+    apiRequest(url, { ...options, method: "DELETE" }),
 
-	/**
-	 * PATCH request
-	 * @param {string} url - API endpoint
-	 * @param {any} body - Request body (will be JSON stringified)
-	 * @param {RequestInit} options - Additional fetch options
-	 */
-	patch: (url, body, options = {}) =>
-		apiRequest(url, {
-			...options,
-			method: 'PATCH',
-			body: JSON.stringify(body)
-		})
+  /**
+   * PATCH request
+   * @param {string} url - API endpoint
+   * @param {any} body - Request body (will be JSON stringified)
+   * @param {RequestInit} options - Additional fetch options
+   */
+  patch: (url, body, options = {}) =>
+    apiRequest(url, {
+      ...options,
+      method: "PATCH",
+      body: JSON.stringify(body),
+    }),
 };

package/dist/utils/sanitize.js

@@ -1,9 +1,23 @@
 /**
  * Centralized sanitization utilities for XSS prevention
- * Uses isomorphic-dompurify for both server-side and client-side sanitization
+ *
+ * Uses DOMPurify for client-side sanitization. On the server (SSR),
+ * content is passed through unsanitized since it will be sanitized
+ * when the page hydrates on the client.
+ *
+ * This approach avoids bundling jsdom (required by isomorphic-dompurify)
+ * which doesn't work in Cloudflare Workers.
  */
 
-import DOMPurify from "isomorphic-dompurify";
+import { browser } from "$app/environment";
+
+// Dynamically import DOMPurify only in browser
+let DOMPurify = null;
+if (browser) {
+  import("dompurify").then((module) => {
+    DOMPurify = module.default;
+  });
+}
 
 /**
  * Sanitize HTML content to prevent XSS attacks
@@ -15,6 +29,11 @@ export function sanitizeHTML(html) {
     return "";
   }
 
+  // On server, pass through - will be sanitized on client hydration
+  if (!browser || !DOMPurify) {
+    return html;
+  }
+
   const config = {
     FORBID_TAGS: [
       "script",
@@ -61,6 +80,11 @@ export function sanitizeSVG(svg) {
     return "";
   }
 
+  // On server, pass through - will be sanitized on client hydration
+  if (!browser || !DOMPurify) {
+    return svg;
+  }
+
   return DOMPurify.sanitize(svg, {
     USE_PROFILES: { svg: true, svgFilters: true },
     ALLOWED_TAGS: [
@@ -156,6 +180,11 @@ export function sanitizeMarkdown(markdownHTML) {
     return "";
   }
 
+  // On server, pass through - will be sanitized on client hydration
+  if (!browser || !DOMPurify) {
+    return markdownHTML;
+  }
+
   // For markdown, we allow a broader set of tags but still sanitize
   return DOMPurify.sanitize(markdownHTML, {
     ALLOWED_TAGS: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autumnsgrove/groveengine",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Multi-tenant blog engine for Grove Platform. Features gutter annotations, markdown editing, magic code auth, and Cloudflare Workers deployment.",
   "author": "AutumnsGrove",
   "license": "MIT",
@@ -181,7 +181,7 @@
     "@types/dompurify": "^3.0.5",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
-    "isomorphic-dompurify": "^2.33.0",
+    "dompurify": "^3.3.0",
     "gray-matter": "^4.0.3",
     "lucide-svelte": "^0.554.0",
     "marked": "^17.0.1",