@autumnsgrove/groveengine 0.4.8 → 0.4.10

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/utils/api.js

@@ -11,99 +11,115 @@
  * @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 }),
+    ...(csrfToken && { "csrf-token": csrfToken }), // fallback header
+    ...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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autumnsgrove/groveengine",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Multi-tenant blog engine for Grove Platform. Features gutter annotations, markdown editing, magic code auth, and Cloudflare Workers deployment.",
   "author": "AutumnsGrove",
   "license": "MIT",