@autumnsgrove/groveengine 0.3.0 → 0.3.2

package/dist/components/admin/MarkdownEditor.svelte

@@ -1,41 +1,11 @@
 <script>
   import { marked } from "marked";
-  import mermaid from "mermaid";
   import { onMount, tick } from "svelte";
   import { sanitizeMarkdown } from "../../utils/sanitize.js";
   import "../../styles/content.css";
   import { Button, Input } from '@groveengine/ui';
   import Dialog from "../ui/Dialog.svelte";
 
-  // Initialize mermaid with grove-themed dark config
-  mermaid.initialize({
-    startOnLoad: false,
-    theme: "dark",
-    themeVariables: {
-      primaryColor: "#2d5a2d",
-      primaryTextColor: "#d4d4d4",
-      primaryBorderColor: "#4a7c4a",
-      lineColor: "#8bc48b",
-      secondaryColor: "#1e3a1e",
-      tertiaryColor: "#2a2a2a",
-      background: "#1e1e1e",
-      mainBkg: "#252526",
-      secondBkg: "#1e1e1e",
-      nodeBorder: "#4a7c4a",
-      clusterBkg: "#1a2a1a",
-      titleColor: "#8bc48b",
-      edgeLabelBackground: "#252526",
-    },
-    flowchart: {
-      curve: "basis",
-      padding: 15,
-    },
-    sequence: {
-      actorMargin: 50,
-      boxMargin: 10,
-    },
-  });
-
   // Props
   let {
     content = $bindable(""),
@@ -303,43 +273,9 @@
   );
   let charCount = $derived(content.length);
   let lineCount = $derived(content.split("\n").length);
-  // Custom marked renderer for mermaid blocks
-  const renderer = new marked.Renderer();
-  const originalCodeRenderer = renderer.code.bind(renderer);
-
-  renderer.code = function ({ text, lang }) {
-    if (lang === "mermaid") {
-      // Wrap mermaid code in a special container for rendering
-      const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-      return `<div class="mermaid-container"><pre class="mermaid" id="${id}">${text}</pre></div>`;
-    }
-    return originalCodeRenderer({ text, lang });
-  };
-
-  marked.use({ renderer });
 
   let previewHtml = $derived(content ? sanitizeMarkdown(marked.parse(content)) : "");
 
-  // Render mermaid diagrams after preview updates
-  async function renderMermaidDiagrams() {
-    await tick();
-    const mermaidElements = document.querySelectorAll(".preview-content .mermaid, .full-preview-scroll .mermaid");
-    if (mermaidElements.length > 0) {
-      try {
-        await mermaid.run({ nodes: mermaidElements });
-      } catch (e) {
-        console.warn("Mermaid rendering error:", e);
-      }
-    }
-  }
-
-  // Trigger mermaid rendering when preview HTML changes
-  $effect(() => {
-    if (previewHtml && (showPreview || showFullPreview)) {
-      renderMermaidDiagrams();
-    }
-  });
-
   // Reading time estimate (average 200 words per minute)
   let readingTime = $derived(() => {
     const minutes = Math.ceil(wordCount / 200);
@@ -533,7 +469,6 @@
     { id: "heading2", label: "Heading 2", insert: "## " },
     { id: "heading3", label: "Heading 3", insert: "### " },
     { id: "code", label: "Code Block", insert: "```\n\n```", cursorOffset: 4 },
-    { id: "mermaid", label: "Mermaid Diagram", insert: "```mermaid\nflowchart TD\n    A[Start] --> B[End]\n```", cursorOffset: 32 },
     { id: "quote", label: "Quote", insert: "> " },
     { id: "list", label: "Bullet List", insert: "- " },
     { id: "numbered", label: "Numbered List", insert: "1. " },
@@ -2619,30 +2554,6 @@
     color: #6a6a6a;
     font-family: "JetBrains Mono", monospace;
   }
-  /* Mermaid Diagram Styles */
-  :global(.mermaid-container) {
-    margin: 1.5rem 0;
-    padding: 1rem;
-    background: var(--light-bg-primary);
-    border: 1px solid var(--light-border-primary);
-    border-radius: 8px;
-    overflow-x: auto;
-  }
-  :global(.mermaid) {
-    display: flex;
-    justify-content: center;
-  }
-  :global(.mermaid svg) {
-    max-width: 100%;
-    height: auto;
-  }
-  /* Mermaid error styling */
-  :global(.mermaid-container .error) {
-    color: #e07030;
-    padding: 0.5rem;
-    font-family: monospace;
-    font-size: 0.85rem;
-  }
   /* Mode Transitions */
   .editor-container {
     transition: border-color 0.3s ease, box-shadow 0.3s ease;

package/dist/components/custom/ContentWithGutter.svelte

@@ -406,16 +406,42 @@
 		DOMPurify
 			? DOMPurify.sanitize(processedContent, {
 					ALLOWED_TAGS: [
+						// Headings
 						'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-						'p', 'a', 'ul', 'ol', 'li', 'blockquote',
-						'code', 'pre', 'strong', 'em', 'img',
-						'table', 'thead', 'tbody', 'tr', 'th', 'td',
-						'br', 'hr', 'div', 'span', 'sup', 'sub',
-						'del', 'ins'
+						// Block elements
+						'p', 'blockquote', 'pre', 'hr', 'br', 'div',
+						// Lists
+						'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+						// Inline elements
+						'a', 'span', 'code', 'strong', 'em', 'b', 'i', 'u',
+						'sup', 'sub', 'del', 'ins', 'mark', 'small', 'abbr',
+						'kbd', 'samp', 'var', 'q', 's',
+						// Tables
+						'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption',
+						// Media
+						'img', 'figure', 'figcaption', 'picture', 'source',
+						// Forms (for task lists)
+						'input', 'label',
+						// Code block copy buttons
+						'button', 'svg', 'path', 'rect', 'g', 'line', 'circle', 'polyline'
 					],
 					ALLOWED_ATTR: [
-						'href', 'src', 'alt', 'title', 'class', 'id',
-						'data-anchor', 'data-language', 'data-line-numbers'
+						// Links and media
+						'href', 'src', 'alt', 'title', 'target', 'rel',
+						// Styling and identification
+						'class', 'id', 'style',
+						// Data attributes for custom functionality
+						'data-anchor', 'data-language', 'data-line-numbers', 'data-code',
+						// Accessibility
+						'aria-label', 'aria-hidden', 'role',
+						// Form elements (for task lists)
+						'type', 'checked', 'disabled',
+						// SVG attributes
+						'viewBox', 'fill', 'stroke', 'stroke-width', 'stroke-linecap',
+						'stroke-linejoin', 'd', 'width', 'height', 'x', 'y', 'x1', 'y1',
+						'x2', 'y2', 'r', 'cx', 'cy', 'points', 'xmlns',
+						// Tables
+						'colspan', 'rowspan', 'scope'
 					],
 					ALLOW_DATA_ATTR: true
 			  })

package/dist/components/ui/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Toaster } from "sonner";
+	import { Toaster } from "svelte-sonner";
 
 	interface Props {
 		position?:

package/dist/components/ui/toast.js

@@ -1,4 +1,4 @@
-import { toast as sonnerToast } from "sonner";
+import { toast as sonnerToast } from "svelte-sonner";
 /**
  * Toast notification utility for displaying temporary messages
  * Wraps sonner toast with consistent defaults and API

package/dist/utils/markdown.d.ts

@@ -11,17 +11,6 @@ export function extractHeaders(markdown: string): any[];
  * @returns {string} HTML with anchor markers converted to spans
  */
 export function processAnchorTags(html: string): string;
-/**
- * Process Mermaid diagrams in markdown content
- * @param {string} markdown - The markdown content
- * @returns {string} Processed markdown with Mermaid diagrams
- */
-export function processMermaidDiagrams(markdown: string): string;
-/**
- * Render Mermaid diagrams in the DOM
- * This should be called after the content is mounted
- */
-export function renderMermaidDiagrams(): Promise<void>;
 /**
  * Parse markdown content and convert to HTML
  * @param {string} markdownContent - The raw markdown content (may include frontmatter)

package/dist/utils/markdown.js

@@ -1,14 +1,6 @@
 import { marked } from "marked";
 import matter from "gray-matter";
-import mermaid from "mermaid";
-import { sanitizeSVG, sanitizeMarkdown } from './sanitize.js';
-
-// Configure Mermaid
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "strict",
-});
+import { sanitizeMarkdown } from './sanitize.js';
 
 // Configure marked renderer for GitHub-style code blocks
 const renderer = new marked.Renderer();
@@ -142,42 +134,6 @@ export function processAnchorTags(html) {
   );
 }
 
-/**
- * Process Mermaid diagrams in markdown content
- * @param {string} markdown - The markdown content
- * @returns {string} Processed markdown with Mermaid diagrams
- */
-export function processMermaidDiagrams(markdown) {
-  // Replace Mermaid code blocks with special divs that will be processed later
-  return markdown.replace(
-    /```mermaid\n([\s\S]*?)```/g,
-    (match, diagramCode) => {
-      const diagramId = "mermaid-" + Math.random().toString(36).substr(2, 9);
-      return `<div class="mermaid-container" id="${diagramId}" data-diagram="${encodeURIComponent(diagramCode.trim())}"></div>`;
-    },
-  );
-}
-
-/**
- * Render Mermaid diagrams in the DOM
- * This should be called after the content is mounted
- */
-export async function renderMermaidDiagrams() {
-  const containers = document.querySelectorAll(".mermaid-container");
-
-  for (const container of containers) {
-    try {
-      const diagramCode = decodeURIComponent(container.dataset.diagram);
-      const { svg } = await mermaid.render(container.id, diagramCode);
-      // Sanitize SVG output before injecting into DOM to prevent XSS
-      container.innerHTML = sanitizeSVG(svg);
-    } catch (error) {
-      console.error("Error rendering Mermaid diagram:", error);
-      container.innerHTML = '<p class="error">Error rendering diagram</p>';
-    }
-  }
-}
-
 /**
  * Parse markdown content and convert to HTML
  * @param {string} markdownContent - The raw markdown content (may include frontmatter)
@@ -186,9 +142,7 @@ export async function renderMermaidDiagrams() {
 export function parseMarkdownContent(markdownContent) {
   const { data, content: markdown } = matter(markdownContent);
 
-  // Process Mermaid diagrams in the content
-  const processedContent = processMermaidDiagrams(markdown);
-  let htmlContent = marked.parse(processedContent);
+  let htmlContent = marked.parse(markdown);
 
   // Process anchor tags in the HTML content
   htmlContent = processAnchorTags(htmlContent);

package/dist/utils/sanitize.js

@@ -1,9 +1,10 @@
 /**
  * Centralized sanitization utilities for XSS prevention
- * Uses isomorphic-dompurify for both server-side and client-side sanitization
+ * Uses dompurify for client-side sanitization
+ * Note: For Cloudflare Workers, DOM APIs are available so we use client-side dompurify
  */
 
-import DOMPurify from 'isomorphic-dompurify';
+import DOMPurify from 'dompurify';
 
 /**
  * Sanitize HTML content to prevent XSS attacks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autumnsgrove/groveengine",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Multi-tenant blog engine for Grove Platform. Features gutter annotations, markdown editing, magic code auth, and Cloudflare Workers deployment.",
   "author": "AutumnsGrove",
   "license": "MIT",
@@ -86,8 +86,8 @@
     "test:watch": "vitest watch"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
+    "svelte": "^5.0.0",
     "tailwindcss": "^3.4.0"
   },
   "devDependencies": {
@@ -114,17 +114,15 @@
     "vitest": "^4.0.14"
   },
   "dependencies": {
-    "@groveengine/ui": "^0.3.0",
+    "@groveengine/ui": "workspace:*",
     "@types/dompurify": "^3.0.5",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.3.0",
     "gray-matter": "^4.0.3",
-    "isomorphic-dompurify": "^2.33.0",
     "lucide-svelte": "^0.554.0",
     "marked": "^17.0.1",
-    "mermaid": "^11.12.1",
-    "sonner": "^2.0.7",
+    "svelte-sonner": "^1.0.7",
     "tailwind-merge": "^3.4.0"
   }
 }