dishui 0.0.97 → 0.0.101

package/dist/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.js

@@ -1,8 +1,9 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { flushSync as a } from "react-dom";
+import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { flushSync as o } from "react-dom";
 //#region src/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.tsx
-var o = [
+var s = [
 	{
 		key: "flowchart",
 		labelKey: "mdTplFlowchart",
@@ -63,28 +64,29 @@ var o = [
 		icon: "🎨",
 		content: "## Mixed Content Example\n\n### Architecture Overview\n\n```mermaid\ngraph LR\n    Client[Client App] --> Gateway[API Gateway]\n    Gateway --> Auth[Auth Service]\n    Gateway --> Core[Core Service]\n    Core --> DB[(PostgreSQL)]\n    Core --> Cache[(Redis)]\n    Auth --> DB\n```\n\n### Performance Formula\n\nThe response time $T$ is calculated as:\n\n$$\nT = T_{network} + T_{processing} + T_{db}\n$$\n\nwhere $T_{db} = O(\\log n)$ with proper indexing.\n\n### Implementation\n\n```python\nfrom fastapi import FastAPI, Depends\nfrom functools import lru_cache\n\napp = FastAPI()\n\n@lru_cache(maxsize=256)\ndef compute_heavy(n: int) -> float:\n    \"\"\"Cached computation: O(log n) amortized.\"\"\"\n    return sum(1.0 / i for i in range(1, n + 1))\n\n@app.get(\"/api/harmonic/{n}\")\nasync def harmonic(n: int):\n    result = compute_heavy(n)\n    return {\"n\": n, \"H_n\": round(result, 6)}\n```\n\n### Project Status\n\n```mermaid\npie title Sprint Progress\n    \"Completed\" : 65\n    \"In Progress\" : 20\n    \"Blocked\" : 10\n    \"Not Started\" : 5\n```\n"
 	}
-], s = ({ labels: s, onSelect: c }) => {
-	let [l, u] = n(!1), d = t(null), f = t(""), p = (e, t) => {
-		let n = e.detail === 0 || f.current !== "touch";
-		a(() => u(!1)), c(t, n);
+], c = ({ labels: c, onSelect: l }) => {
+	let [u, d] = r(!1), f = n(null), p = n(null), m = n(null), h = e(u, p, m), g = n(""), _ = (e, t) => {
+		let n = e.detail === 0 || g.current !== "touch";
+		o(() => d(!1)), l(t, n);
 	};
-	return e(() => {
+	return t(() => {
 		let e = (e) => {
-			d.current && !d.current.contains(e.target) && u(!1);
+			f.current && !f.current.contains(e.target) && d(!1);
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, []), /* @__PURE__ */ i("div", {
-		ref: d,
+	}, []), /* @__PURE__ */ a("div", {
+		ref: f,
 		className: "rte-toolbar__template-menu",
 		onPointerDown: (e) => {
-			f.current = e.pointerType;
+			g.current = e.pointerType;
 		},
-		children: [/* @__PURE__ */ i("button", {
+		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			className: `rte-toolbar__btn ${l ? "rte-toolbar__btn--active" : ""}`,
-			"aria-expanded": l,
-			onClick: () => u(!l),
-			title: s.mdTemplates || "Markdown Templates",
+			ref: p,
+			className: `rte-toolbar__btn ${u ? "rte-toolbar__btn--active" : ""}`,
+			"aria-expanded": u,
+			onClick: () => d(!u),
+			title: c.mdTemplates || "Markdown Templates",
 			style: {
 				width: "auto",
 				padding: "0 6px",
@@ -92,7 +94,7 @@ var o = [
 				display: "inline-flex",
 				alignItems: "center"
 			},
-			children: [/* @__PURE__ */ i("svg", {
+			children: [/* @__PURE__ */ a("svg", {
 				width: "16",
 				height: "16",
 				viewBox: "0 0 24 24",
@@ -102,95 +104,97 @@ var o = [
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ r("rect", {
+					/* @__PURE__ */ i("rect", {
 						x: "3",
 						y: "3",
 						width: "8",
 						height: "8",
 						rx: "1.5"
 					}),
-					/* @__PURE__ */ r("rect", {
+					/* @__PURE__ */ i("rect", {
 						x: "13",
 						y: "3",
 						width: "8",
 						height: "8",
 						rx: "1.5"
 					}),
-					/* @__PURE__ */ r("rect", {
+					/* @__PURE__ */ i("rect", {
 						x: "3",
 						y: "13",
 						width: "8",
 						height: "8",
 						rx: "1.5"
 					}),
-					/* @__PURE__ */ r("path", { d: "M17 14v6M14 17h6" })
+					/* @__PURE__ */ i("path", { d: "M17 14v6M14 17h6" })
 				]
-			}), /* @__PURE__ */ r("svg", {
+			}), /* @__PURE__ */ i("svg", {
 				width: "10",
 				height: "10",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				strokeWidth: "2.5",
-				children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9" })
+				children: /* @__PURE__ */ i("polyline", { points: "6 9 12 15 18 9" })
 			})]
-		}), l && /* @__PURE__ */ i("div", {
+		}), u && /* @__PURE__ */ a("div", {
+			ref: m,
 			className: "rte-toolbar__template-dropdown",
+			style: h,
 			children: [
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Mermaid"
 				}),
-				o.filter((e) => [
+				s.filter((e) => [
 					"flowchart",
 					"sequence",
 					"pie",
 					"gantt",
 					"xychart"
-				].includes(e.key)).map((e) => /* @__PURE__ */ i("button", {
+				].includes(e.key)).map((e) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
-					onClick: (t) => p(t, e.content),
-					children: [/* @__PURE__ */ r("span", {
+					onClick: (t) => _(t, e.content),
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: s[e.labelKey] || e.labelKey })]
+					}), /* @__PURE__ */ i("span", { children: c[e.labelKey] || e.labelKey })]
 				}, e.key)),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Code"
 				}),
-				o.filter((e) => [
+				s.filter((e) => [
 					"python",
 					"typescript",
 					"rust"
-				].includes(e.key)).map((e) => /* @__PURE__ */ i("button", {
+				].includes(e.key)).map((e) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
-					onClick: (t) => p(t, e.content),
-					children: [/* @__PURE__ */ r("span", {
+					onClick: (t) => _(t, e.content),
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: s[e.labelKey] || e.labelKey })]
+					}), /* @__PURE__ */ i("span", { children: c[e.labelKey] || e.labelKey })]
 				}, e.key)),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Math / Mixed"
 				}),
-				o.filter((e) => ["math", "mixed"].includes(e.key)).map((e) => /* @__PURE__ */ i("button", {
+				s.filter((e) => ["math", "mixed"].includes(e.key)).map((e) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
-					onClick: (t) => p(t, e.content),
-					children: [/* @__PURE__ */ r("span", {
+					onClick: (t) => _(t, e.content),
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: s[e.labelKey] || e.labelKey })]
+					}), /* @__PURE__ */ i("span", { children: c[e.labelKey] || e.labelKey })]
 				}, e.key))
 			]
 		})]
 	});
 };
 //#endregion
-export { o as MD_TEMPLATES, s as MarkdownTemplateMenu };
+export { s as MD_TEMPLATES, c as MarkdownTemplateMenu };
 
 //# sourceMappingURL=MarkdownTemplates.js.map

package/dist/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownTemplates.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { flushSync } from 'react-dom';\nimport type { RichTextEditorLabels } from '../types';\n\nexport const MD_TEMPLATES: { key: string; labelKey: keyof RichTextEditorLabels; icon: string; content: string }[] = [\n  {\n    key: 'flowchart', labelKey: 'mdTplFlowchart', icon: '🔀',\n    content: `## Flowchart\n\n\\`\\`\\`mermaid\ngraph TD\n    A[Start] --> B{Is it valid?}\n    B -->|Yes| C[Process Data]\n    B -->|No| D[Show Error]\n    C --> E[Save to DB]\n    E --> F[Send Response]\n    D --> G[Log Warning]\n    G --> A\n    F --> H[End]\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'sequence', labelKey: 'mdTplSequence', icon: '🔄',\n    content: `## Sequence Diagram\n\n\\`\\`\\`mermaid\nsequenceDiagram\n    participant Browser\n    participant Server\n    participant Database\n    participant Cache\n\n    Browser->>Server: POST /api/login\n    Server->>Database: Query user\n    Database-->>Server: User record\n    Server->>Cache: Store session\n    Cache-->>Server: OK\n    Server-->>Browser: 200 JWT Token\n    Browser->>Server: GET /api/data (Bearer token)\n    Server->>Cache: Validate session\n    Cache-->>Server: Valid\n    Server->>Database: Fetch data\n    Database-->>Server: Result set\n    Server-->>Browser: 200 JSON data\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'pie', labelKey: 'mdTplPieChart', icon: '🥧',\n    content: `## Pie Chart\n\n\\`\\`\\`mermaid\npie title Tech Stack Usage 2025\n    \"TypeScript\" : 35\n    \"Python\" : 25\n    \"Rust\" : 15\n    \"Go\" : 12\n    \"Java\" : 8\n    \"Others\" : 5\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'gantt', labelKey: 'mdTplGantt', icon: '📊',\n    content: `## Gantt Chart\n\n\\`\\`\\`mermaid\ngantt\n    title Project Development Timeline\n    dateFormat  YYYY-MM-DD\n    section Design\n        UI/UX Design           :a1, 2025-01-01, 20d\n        API Design             :a2, after a1, 10d\n    section Frontend\n        Component Library      :b1, after a2, 25d\n        Page Integration       :b2, after b1, 15d\n        Testing & Bug Fix      :b3, after b2, 10d\n    section Backend\n        Core API Development   :c1, after a2, 30d\n        Database Optimization  :c2, after c1, 10d\n    section Deployment\n        Staging Deploy         :d1, after b3, 5d\n        Production Release     :milestone, after d1, 0d\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'xychart', labelKey: 'mdTplBarChart', icon: '📈',\n    content: `## Bar Chart (xychart)\n\n\\`\\`\\`mermaid\nxychart-beta\n    title \"Monthly Revenue (in thousands)\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Revenue (USD)\" 0 --> 120\n    bar [52, 48, 61, 55, 72, 68, 85, 90, 78, 95, 102, 110]\n    line [52, 48, 61, 55, 72, 68, 85, 90, 78, 95, 102, 110]\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'python', labelKey: 'mdTplPython', icon: '🐍',\n    content: `## Python Example\n\n\\`\\`\\`python\nimport asyncio\nfrom dataclasses import dataclass, field\nfrom typing import AsyncIterator\n\n\n@dataclass\nclass DataPipeline:\n    \"\"\"Async data processing pipeline.\"\"\"\n    name: str\n    buffer_size: int = 100\n    _queue: asyncio.Queue = field(init=False)\n\n    def __post_init__(self):\n        self._queue = asyncio.Queue(maxsize=self.buffer_size)\n\n    async def produce(self, items: list[int]) -> None:\n        for item in items:\n            transformed = item ** 2 + 2 * item + 1\n            await self._queue.put(transformed)\n        await self._queue.put(None)  # sentinel\n\n    async def consume(self) -> AsyncIterator[int]:\n        while True:\n            item = await self._queue.get()\n            if item is None:\n                break\n            yield item\n\n    async def run(self, data: list[int]) -> list[int]:\n        results: list[int] = []\n        producer = asyncio.create_task(self.produce(data))\n        async for value in self.consume():\n            results.append(value)\n        await producer\n        return results\n\n\nasync def main():\n    pipeline = DataPipeline(name=\"squares\", buffer_size=50)\n    data = list(range(1, 21))\n    results = await pipeline.run(data)\n    print(f\"Processed {len(results)} items: {results[:5]}...\")\n\n\nif __name__ == \"__main__\":\n    asyncio.run(main())\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'typescript', labelKey: 'mdTplTypeScript', icon: '🟦',\n    content: `## TypeScript Example\n\n\\`\\`\\`typescript\ninterface APIResponse<T> {\n  data: T;\n  status: number;\n  message: string;\n  timestamp: Date;\n}\n\ntype HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';\n\nclass TypedFetcher {\n  private baseUrl: string;\n  private headers: Record<string, string>;\n\n  constructor(baseUrl: string, token?: string) {\n    this.baseUrl = baseUrl;\n    this.headers = {\n      'Content-Type': 'application/json',\n      ...(token ? { Authorization: \\\\\\`Bearer \\\\\\${token}\\\\\\` } : {}),\n    };\n  }\n\n  async request<T>(\n    method: HttpMethod,\n    path: string,\n    body?: unknown,\n  ): Promise<APIResponse<T>> {\n    const response = await fetch(\\\\\\`\\\\\\${this.baseUrl}\\\\\\${path}\\\\\\`, {\n      method,\n      headers: this.headers,\n      body: body ? JSON.stringify(body) : undefined,\n    });\n\n    if (!response.ok) {\n      throw new Error(\\\\\\`HTTP \\\\\\${response.status}: \\\\\\${response.statusText}\\\\\\`);\n    }\n\n    return response.json() as Promise<APIResponse<T>>;\n  }\n\n  get<T>(path: string) { return this.request<T>('GET', path); }\n  post<T>(path: string, body: unknown) { return this.request<T>('POST', path, body); }\n  put<T>(path: string, body: unknown) { return this.request<T>('PUT', path, body); }\n  delete<T>(path: string) { return this.request<T>('DELETE', path); }\n}\n\n// Usage\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nconst api = new TypedFetcher('https://api.example.com', 'my-token');\nconst users = await api.get<User[]>('/users');\nconsole.log(users.data);\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'rust', labelKey: 'mdTplRust', icon: '🦀',\n    content: `## Rust Example\n\n\\`\\`\\`rust\nuse std::collections::HashMap;\nuse std::sync::Arc;\nuse tokio::sync::RwLock;\n\n#[derive(Debug, Clone)]\nstruct CacheEntry<V: Clone> {\n    value: V,\n    expires_at: std::time::Instant,\n}\n\n#[derive(Clone)]\nstruct AsyncCache<V: Clone + Send + Sync + 'static> {\n    store: Arc<RwLock<HashMap<String, CacheEntry<V>>>>,\n    ttl: std::time::Duration,\n}\n\nimpl<V: Clone + Send + Sync + 'static> AsyncCache<V> {\n    fn new(ttl_secs: u64) -> Self {\n        Self {\n            store: Arc::new(RwLock::new(HashMap::new())),\n            ttl: std::time::Duration::from_secs(ttl_secs),\n        }\n    }\n\n    async fn get(&self, key: &str) -> Option<V> {\n        let store = self.store.read().await;\n        store.get(key).and_then(|entry| {\n            if entry.expires_at > std::time::Instant::now() {\n                Some(entry.value.clone())\n            } else {\n                None\n            }\n        })\n    }\n\n    async fn set(&self, key: String, value: V) {\n        let mut store = self.store.write().await;\n        store.insert(key, CacheEntry {\n            value,\n            expires_at: std::time::Instant::now() + self.ttl,\n        });\n    }\n\n    async fn cleanup(&self) -> usize {\n        let mut store = self.store.write().await;\n        let now = std::time::Instant::now();\n        let before = store.len();\n        store.retain(|_, entry| entry.expires_at > now);\n        before - store.len()\n    }\n}\n\n#[tokio::main]\nasync fn main() {\n    let cache = AsyncCache::<String>::new(60);\n    cache.set(\"hello\".into(), \"world\".into()).await;\n\n    if let Some(val) = cache.get(\"hello\").await {\n        println!(\"Got: {val}\");\n    }\n}\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'math', labelKey: 'mdTplMath', icon: '🔢',\n    content: `## Math Formulas (TeX)\n\n### Euler's Identity\n\n$$\ne^{i\\\\pi} + 1 = 0\n$$\n\n### Quadratic Formula\n\n$$\nx = \\\\frac{-b \\\\pm \\\\sqrt{b^2 - 4ac}}{2a}\n$$\n\n### Gaussian Integral\n\n$$\n\\\\int_{-\\\\infty}^{\\\\infty} e^{-x^2} \\\\, dx = \\\\sqrt{\\\\pi}\n$$\n\n### Maxwell's Equations\n\n$$\n\\\\nabla \\\\cdot \\\\mathbf{E} = \\\\frac{\\\\rho}{\\\\epsilon_0}\n$$\n\n$$\n\\\\nabla \\\\cdot \\\\mathbf{B} = 0\n$$\n\n$$\n\\\\nabla \\\\times \\\\mathbf{E} = -\\\\frac{\\\\partial \\\\mathbf{B}}{\\\\partial t}\n$$\n\n$$\n\\\\nabla \\\\times \\\\mathbf{B} = \\\\mu_0 \\\\mathbf{J} + \\\\mu_0 \\\\epsilon_0 \\\\frac{\\\\partial \\\\mathbf{E}}{\\\\partial t}\n$$\n\n### Taylor Series Expansion\n\n$$\nf(x) = \\\\sum_{n=0}^{\\\\infty} \\\\frac{f^{(n)}(a)}{n!}(x-a)^n\n$$\n\n### Matrix Notation\n\n$$\n\\\\mathbf{A} = \\\\begin{pmatrix} a_{11} & a_{12} & \\\\cdots & a_{1n} \\\\\\\\ a_{21} & a_{22} & \\\\cdots & a_{2n} \\\\\\\\ \\\\vdots & \\\\vdots & \\\\ddots & \\\\vdots \\\\\\\\ a_{m1} & a_{m2} & \\\\cdots & a_{mn} \\\\end{pmatrix}\n$$\n\n### Inline math: The identity $e^{i\\\\theta} = \\\\cos\\\\theta + i\\\\sin\\\\theta$ is known as Euler's formula.\n`,\n  },\n  {\n    key: 'mixed', labelKey: 'mdTplMixed', icon: '🎨',\n    content: `## Mixed Content Example\n\n### Architecture Overview\n\n\\`\\`\\`mermaid\ngraph LR\n    Client[Client App] --> Gateway[API Gateway]\n    Gateway --> Auth[Auth Service]\n    Gateway --> Core[Core Service]\n    Core --> DB[(PostgreSQL)]\n    Core --> Cache[(Redis)]\n    Auth --> DB\n\\`\\`\\`\n\n### Performance Formula\n\nThe response time $T$ is calculated as:\n\n$$\nT = T_{network} + T_{processing} + T_{db}\n$$\n\nwhere $T_{db} = O(\\\\log n)$ with proper indexing.\n\n### Implementation\n\n\\`\\`\\`python\nfrom fastapi import FastAPI, Depends\nfrom functools import lru_cache\n\napp = FastAPI()\n\n@lru_cache(maxsize=256)\ndef compute_heavy(n: int) -> float:\n    \"\"\"Cached computation: O(log n) amortized.\"\"\"\n    return sum(1.0 / i for i in range(1, n + 1))\n\n@app.get(\"/api/harmonic/{n}\")\nasync def harmonic(n: int):\n    result = compute_heavy(n)\n    return {\"n\": n, \"H_n\": round(result, 6)}\n\\`\\`\\`\n\n### Project Status\n\n\\`\\`\\`mermaid\npie title Sprint Progress\n    \"Completed\" : 65\n    \"In Progress\" : 20\n    \"Blocked\" : 10\n    \"Not Started\" : 5\n\\`\\`\\`\n`,\n  },\n];\n\ninterface MarkdownTemplateMenuProps {\n  labels: RichTextEditorLabels;\n  onSelect: (content: string, focusEditor?: boolean) => void;\n}\n\nexport const MarkdownTemplateMenu: React.FC<MarkdownTemplateMenuProps> = ({ labels, onSelect }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const pointerType = useRef('');\n  const select = (event: React.MouseEvent, content: string) => {\n    // Touch insertion must not enter Android's native editing/IME focus path.\n    const focusEditor = event.detail === 0 || pointerType.current !== 'touch';\n    flushSync(() => setIsOpen(false));\n    onSelect(content, focusEditor);\n  };\n\n  useEffect(() => {\n    const handler = (e: PointerEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\" onPointerDown={(event) => { pointerType.current = event.pointerType; }}>\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        title={labels.mdTemplates || 'Markdown Templates'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center' }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <rect x=\"13\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <path d=\"M17 14v6M14 17h6\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"rte-toolbar__template-dropdown\">\n          <div className=\"rte-toolbar__template-group-label\">Mermaid</div>\n          {MD_TEMPLATES.filter(t => ['flowchart', 'sequence', 'pie', 'gantt', 'xychart'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Code</div>\n          {MD_TEMPLATES.filter(t => ['python', 'typescript', 'rust'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Math / Mixed</div>\n          {MD_TEMPLATES.filter(t => ['math', 'mixed'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkdownTemplates.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { flushSync } from 'react-dom';\nimport type { RichTextEditorLabels } from '../types';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\nexport const MD_TEMPLATES: { key: string; labelKey: keyof RichTextEditorLabels; icon: string; content: string }[] = [\n  {\n    key: 'flowchart', labelKey: 'mdTplFlowchart', icon: '🔀',\n    content: `## Flowchart\n\n\\`\\`\\`mermaid\ngraph TD\n    A[Start] --> B{Is it valid?}\n    B -->|Yes| C[Process Data]\n    B -->|No| D[Show Error]\n    C --> E[Save to DB]\n    E --> F[Send Response]\n    D --> G[Log Warning]\n    G --> A\n    F --> H[End]\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'sequence', labelKey: 'mdTplSequence', icon: '🔄',\n    content: `## Sequence Diagram\n\n\\`\\`\\`mermaid\nsequenceDiagram\n    participant Browser\n    participant Server\n    participant Database\n    participant Cache\n\n    Browser->>Server: POST /api/login\n    Server->>Database: Query user\n    Database-->>Server: User record\n    Server->>Cache: Store session\n    Cache-->>Server: OK\n    Server-->>Browser: 200 JWT Token\n    Browser->>Server: GET /api/data (Bearer token)\n    Server->>Cache: Validate session\n    Cache-->>Server: Valid\n    Server->>Database: Fetch data\n    Database-->>Server: Result set\n    Server-->>Browser: 200 JSON data\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'pie', labelKey: 'mdTplPieChart', icon: '🥧',\n    content: `## Pie Chart\n\n\\`\\`\\`mermaid\npie title Tech Stack Usage 2025\n    \"TypeScript\" : 35\n    \"Python\" : 25\n    \"Rust\" : 15\n    \"Go\" : 12\n    \"Java\" : 8\n    \"Others\" : 5\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'gantt', labelKey: 'mdTplGantt', icon: '📊',\n    content: `## Gantt Chart\n\n\\`\\`\\`mermaid\ngantt\n    title Project Development Timeline\n    dateFormat  YYYY-MM-DD\n    section Design\n        UI/UX Design           :a1, 2025-01-01, 20d\n        API Design             :a2, after a1, 10d\n    section Frontend\n        Component Library      :b1, after a2, 25d\n        Page Integration       :b2, after b1, 15d\n        Testing & Bug Fix      :b3, after b2, 10d\n    section Backend\n        Core API Development   :c1, after a2, 30d\n        Database Optimization  :c2, after c1, 10d\n    section Deployment\n        Staging Deploy         :d1, after b3, 5d\n        Production Release     :milestone, after d1, 0d\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'xychart', labelKey: 'mdTplBarChart', icon: '📈',\n    content: `## Bar Chart (xychart)\n\n\\`\\`\\`mermaid\nxychart-beta\n    title \"Monthly Revenue (in thousands)\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n    y-axis \"Revenue (USD)\" 0 --> 120\n    bar [52, 48, 61, 55, 72, 68, 85, 90, 78, 95, 102, 110]\n    line [52, 48, 61, 55, 72, 68, 85, 90, 78, 95, 102, 110]\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'python', labelKey: 'mdTplPython', icon: '🐍',\n    content: `## Python Example\n\n\\`\\`\\`python\nimport asyncio\nfrom dataclasses import dataclass, field\nfrom typing import AsyncIterator\n\n\n@dataclass\nclass DataPipeline:\n    \"\"\"Async data processing pipeline.\"\"\"\n    name: str\n    buffer_size: int = 100\n    _queue: asyncio.Queue = field(init=False)\n\n    def __post_init__(self):\n        self._queue = asyncio.Queue(maxsize=self.buffer_size)\n\n    async def produce(self, items: list[int]) -> None:\n        for item in items:\n            transformed = item ** 2 + 2 * item + 1\n            await self._queue.put(transformed)\n        await self._queue.put(None)  # sentinel\n\n    async def consume(self) -> AsyncIterator[int]:\n        while True:\n            item = await self._queue.get()\n            if item is None:\n                break\n            yield item\n\n    async def run(self, data: list[int]) -> list[int]:\n        results: list[int] = []\n        producer = asyncio.create_task(self.produce(data))\n        async for value in self.consume():\n            results.append(value)\n        await producer\n        return results\n\n\nasync def main():\n    pipeline = DataPipeline(name=\"squares\", buffer_size=50)\n    data = list(range(1, 21))\n    results = await pipeline.run(data)\n    print(f\"Processed {len(results)} items: {results[:5]}...\")\n\n\nif __name__ == \"__main__\":\n    asyncio.run(main())\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'typescript', labelKey: 'mdTplTypeScript', icon: '🟦',\n    content: `## TypeScript Example\n\n\\`\\`\\`typescript\ninterface APIResponse<T> {\n  data: T;\n  status: number;\n  message: string;\n  timestamp: Date;\n}\n\ntype HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';\n\nclass TypedFetcher {\n  private baseUrl: string;\n  private headers: Record<string, string>;\n\n  constructor(baseUrl: string, token?: string) {\n    this.baseUrl = baseUrl;\n    this.headers = {\n      'Content-Type': 'application/json',\n      ...(token ? { Authorization: \\\\\\`Bearer \\\\\\${token}\\\\\\` } : {}),\n    };\n  }\n\n  async request<T>(\n    method: HttpMethod,\n    path: string,\n    body?: unknown,\n  ): Promise<APIResponse<T>> {\n    const response = await fetch(\\\\\\`\\\\\\${this.baseUrl}\\\\\\${path}\\\\\\`, {\n      method,\n      headers: this.headers,\n      body: body ? JSON.stringify(body) : undefined,\n    });\n\n    if (!response.ok) {\n      throw new Error(\\\\\\`HTTP \\\\\\${response.status}: \\\\\\${response.statusText}\\\\\\`);\n    }\n\n    return response.json() as Promise<APIResponse<T>>;\n  }\n\n  get<T>(path: string) { return this.request<T>('GET', path); }\n  post<T>(path: string, body: unknown) { return this.request<T>('POST', path, body); }\n  put<T>(path: string, body: unknown) { return this.request<T>('PUT', path, body); }\n  delete<T>(path: string) { return this.request<T>('DELETE', path); }\n}\n\n// Usage\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nconst api = new TypedFetcher('https://api.example.com', 'my-token');\nconst users = await api.get<User[]>('/users');\nconsole.log(users.data);\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'rust', labelKey: 'mdTplRust', icon: '🦀',\n    content: `## Rust Example\n\n\\`\\`\\`rust\nuse std::collections::HashMap;\nuse std::sync::Arc;\nuse tokio::sync::RwLock;\n\n#[derive(Debug, Clone)]\nstruct CacheEntry<V: Clone> {\n    value: V,\n    expires_at: std::time::Instant,\n}\n\n#[derive(Clone)]\nstruct AsyncCache<V: Clone + Send + Sync + 'static> {\n    store: Arc<RwLock<HashMap<String, CacheEntry<V>>>>,\n    ttl: std::time::Duration,\n}\n\nimpl<V: Clone + Send + Sync + 'static> AsyncCache<V> {\n    fn new(ttl_secs: u64) -> Self {\n        Self {\n            store: Arc::new(RwLock::new(HashMap::new())),\n            ttl: std::time::Duration::from_secs(ttl_secs),\n        }\n    }\n\n    async fn get(&self, key: &str) -> Option<V> {\n        let store = self.store.read().await;\n        store.get(key).and_then(|entry| {\n            if entry.expires_at > std::time::Instant::now() {\n                Some(entry.value.clone())\n            } else {\n                None\n            }\n        })\n    }\n\n    async fn set(&self, key: String, value: V) {\n        let mut store = self.store.write().await;\n        store.insert(key, CacheEntry {\n            value,\n            expires_at: std::time::Instant::now() + self.ttl,\n        });\n    }\n\n    async fn cleanup(&self) -> usize {\n        let mut store = self.store.write().await;\n        let now = std::time::Instant::now();\n        let before = store.len();\n        store.retain(|_, entry| entry.expires_at > now);\n        before - store.len()\n    }\n}\n\n#[tokio::main]\nasync fn main() {\n    let cache = AsyncCache::<String>::new(60);\n    cache.set(\"hello\".into(), \"world\".into()).await;\n\n    if let Some(val) = cache.get(\"hello\").await {\n        println!(\"Got: {val}\");\n    }\n}\n\\`\\`\\`\n`,\n  },\n  {\n    key: 'math', labelKey: 'mdTplMath', icon: '🔢',\n    content: `## Math Formulas (TeX)\n\n### Euler's Identity\n\n$$\ne^{i\\\\pi} + 1 = 0\n$$\n\n### Quadratic Formula\n\n$$\nx = \\\\frac{-b \\\\pm \\\\sqrt{b^2 - 4ac}}{2a}\n$$\n\n### Gaussian Integral\n\n$$\n\\\\int_{-\\\\infty}^{\\\\infty} e^{-x^2} \\\\, dx = \\\\sqrt{\\\\pi}\n$$\n\n### Maxwell's Equations\n\n$$\n\\\\nabla \\\\cdot \\\\mathbf{E} = \\\\frac{\\\\rho}{\\\\epsilon_0}\n$$\n\n$$\n\\\\nabla \\\\cdot \\\\mathbf{B} = 0\n$$\n\n$$\n\\\\nabla \\\\times \\\\mathbf{E} = -\\\\frac{\\\\partial \\\\mathbf{B}}{\\\\partial t}\n$$\n\n$$\n\\\\nabla \\\\times \\\\mathbf{B} = \\\\mu_0 \\\\mathbf{J} + \\\\mu_0 \\\\epsilon_0 \\\\frac{\\\\partial \\\\mathbf{E}}{\\\\partial t}\n$$\n\n### Taylor Series Expansion\n\n$$\nf(x) = \\\\sum_{n=0}^{\\\\infty} \\\\frac{f^{(n)}(a)}{n!}(x-a)^n\n$$\n\n### Matrix Notation\n\n$$\n\\\\mathbf{A} = \\\\begin{pmatrix} a_{11} & a_{12} & \\\\cdots & a_{1n} \\\\\\\\ a_{21} & a_{22} & \\\\cdots & a_{2n} \\\\\\\\ \\\\vdots & \\\\vdots & \\\\ddots & \\\\vdots \\\\\\\\ a_{m1} & a_{m2} & \\\\cdots & a_{mn} \\\\end{pmatrix}\n$$\n\n### Inline math: The identity $e^{i\\\\theta} = \\\\cos\\\\theta + i\\\\sin\\\\theta$ is known as Euler's formula.\n`,\n  },\n  {\n    key: 'mixed', labelKey: 'mdTplMixed', icon: '🎨',\n    content: `## Mixed Content Example\n\n### Architecture Overview\n\n\\`\\`\\`mermaid\ngraph LR\n    Client[Client App] --> Gateway[API Gateway]\n    Gateway --> Auth[Auth Service]\n    Gateway --> Core[Core Service]\n    Core --> DB[(PostgreSQL)]\n    Core --> Cache[(Redis)]\n    Auth --> DB\n\\`\\`\\`\n\n### Performance Formula\n\nThe response time $T$ is calculated as:\n\n$$\nT = T_{network} + T_{processing} + T_{db}\n$$\n\nwhere $T_{db} = O(\\\\log n)$ with proper indexing.\n\n### Implementation\n\n\\`\\`\\`python\nfrom fastapi import FastAPI, Depends\nfrom functools import lru_cache\n\napp = FastAPI()\n\n@lru_cache(maxsize=256)\ndef compute_heavy(n: int) -> float:\n    \"\"\"Cached computation: O(log n) amortized.\"\"\"\n    return sum(1.0 / i for i in range(1, n + 1))\n\n@app.get(\"/api/harmonic/{n}\")\nasync def harmonic(n: int):\n    result = compute_heavy(n)\n    return {\"n\": n, \"H_n\": round(result, 6)}\n\\`\\`\\`\n\n### Project Status\n\n\\`\\`\\`mermaid\npie title Sprint Progress\n    \"Completed\" : 65\n    \"In Progress\" : 20\n    \"Blocked\" : 10\n    \"Not Started\" : 5\n\\`\\`\\`\n`,\n  },\n];\n\ninterface MarkdownTemplateMenuProps {\n  labels: RichTextEditorLabels;\n  onSelect: (content: string, focusEditor?: boolean) => void;\n}\n\nexport const MarkdownTemplateMenu: React.FC<MarkdownTemplateMenuProps> = ({ labels, onSelect }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, dropdownRef);\n  const pointerType = useRef('');\n  const select = (event: React.MouseEvent, content: string) => {\n    // Touch insertion must not enter Android's native editing/IME focus path.\n    const focusEditor = event.detail === 0 || pointerType.current !== 'touch';\n    flushSync(() => setIsOpen(false));\n    onSelect(content, focusEditor);\n  };\n\n  useEffect(() => {\n    const handler = (e: PointerEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\" onPointerDown={(event) => { pointerType.current = event.pointerType; }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        title={labels.mdTemplates || 'Markdown Templates'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center' }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <rect x=\"13\" y=\"3\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <rect x=\"3\" y=\"13\" width=\"8\" height=\"8\" rx=\"1.5\" />\n          <path d=\"M17 14v6M14 17h6\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div ref={dropdownRef} className=\"rte-toolbar__template-dropdown\" style={dropdownStyle}>\n          <div className=\"rte-toolbar__template-group-label\">Mermaid</div>\n          {MD_TEMPLATES.filter(t => ['flowchart', 'sequence', 'pie', 'gantt', 'xychart'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Code</div>\n          {MD_TEMPLATES.filter(t => ['python', 'typescript', 'rust'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Math / Mixed</div>\n          {MD_TEMPLATES.filter(t => ['math', 'mixed'].includes(t.key)).map(t => (\n            <button\n              key={t.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={(event) => select(event, t.content)}\n            >\n              <span className=\"rte-toolbar__template-icon\">{t.icon}</span>\n              <span>{labels[t.labelKey] || t.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/TableOpsMenu.js

@@ -1,79 +1,81 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/pro/RichTextEditor/Toolbar/TableOpsMenu.tsx
-var a = ({ editor: a, labels: o }) => {
-	let [s, c] = n(!1), l = t(null);
-	e(() => {
+var o = ({ editor: o, labels: s }) => {
+	let [c, l] = r(!1), u = n(null), d = n(null), f = n(null), p = e(c, d, f);
+	t(() => {
 		let e = (e) => {
-			l.current && !l.current.contains(e.target) && c(!1);
+			u.current && !u.current.contains(e.target) && l(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let u = a.isActive("table"), d = [
+	let m = o.isActive("table"), h = [
 		{
-			label: o.tableAddColumnBefore || "Add Column Before",
-			action: () => a.chain().focus().addColumnBefore().run(),
+			label: s.tableAddColumnBefore || "Add Column Before",
+			action: () => o.chain().focus().addColumnBefore().run(),
 			icon: "⇤+"
 		},
 		{
-			label: o.tableAddColumnAfter || "Add Column After",
-			action: () => a.chain().focus().addColumnAfter().run(),
+			label: s.tableAddColumnAfter || "Add Column After",
+			action: () => o.chain().focus().addColumnAfter().run(),
 			icon: "+⇥"
 		},
 		{
-			label: o.tableDeleteColumn || "Delete Column",
-			action: () => a.chain().focus().deleteColumn().run(),
+			label: s.tableDeleteColumn || "Delete Column",
+			action: () => o.chain().focus().deleteColumn().run(),
 			icon: "−⫼"
 		},
 		{
-			label: o.tableAddRowBefore || "Add Row Before",
-			action: () => a.chain().focus().addRowBefore().run(),
+			label: s.tableAddRowBefore || "Add Row Before",
+			action: () => o.chain().focus().addRowBefore().run(),
 			icon: "↑+"
 		},
 		{
-			label: o.tableAddRowAfter || "Add Row After",
-			action: () => a.chain().focus().addRowAfter().run(),
+			label: s.tableAddRowAfter || "Add Row After",
+			action: () => o.chain().focus().addRowAfter().run(),
 			icon: "+↓"
 		},
 		{
-			label: o.tableDeleteRow || "Delete Row",
-			action: () => a.chain().focus().deleteRow().run(),
+			label: s.tableDeleteRow || "Delete Row",
+			action: () => o.chain().focus().deleteRow().run(),
 			icon: "−═"
 		},
 		{
-			label: o.tableMergeCells || "Merge Cells",
-			action: () => a.chain().focus().mergeCells().run(),
+			label: s.tableMergeCells || "Merge Cells",
+			action: () => o.chain().focus().mergeCells().run(),
 			icon: "⊞"
 		},
 		{
-			label: o.tableSplitCell || "Split Cell",
-			action: () => a.chain().focus().splitCell().run(),
+			label: s.tableSplitCell || "Split Cell",
+			action: () => o.chain().focus().splitCell().run(),
 			icon: "⊟"
 		},
 		{
-			label: o.tableDelete || "Delete Table",
-			action: () => a.chain().focus().deleteTable().run(),
+			label: s.tableDelete || "Delete Table",
+			action: () => o.chain().focus().deleteTable().run(),
 			icon: "🗑"
 		}
 	];
-	return /* @__PURE__ */ i("div", {
-		ref: l,
+	return /* @__PURE__ */ a("div", {
+		ref: u,
 		className: "rte-toolbar__template-menu",
-		children: [/* @__PURE__ */ i("button", {
+		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			className: `rte-toolbar__btn ${s ? "rte-toolbar__btn--active" : ""}`,
-			onClick: () => c(!s),
-			disabled: !u,
-			title: o.tableOps || "Table Operations",
+			ref: d,
+			className: `rte-toolbar__btn ${c ? "rte-toolbar__btn--active" : ""}`,
+			onClick: () => l(!c),
+			disabled: !m,
+			title: s.tableOps || "Table Operations",
 			style: {
 				width: "auto",
 				padding: "0 6px",
 				gap: "2px",
 				display: "inline-flex",
 				alignItems: "center",
-				opacity: u ? 1 : .4
+				opacity: m ? 1 : .4
 			},
-			children: [/* @__PURE__ */ i("svg", {
+			children: [/* @__PURE__ */ a("svg", {
 				width: "16",
 				height: "16",
 				viewBox: "0 0 24 24",
@@ -83,115 +85,117 @@ var a = ({ editor: a, labels: o }) => {
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ r("rect", {
+					/* @__PURE__ */ i("rect", {
 						x: "3",
 						y: "3",
 						width: "18",
 						height: "18",
 						rx: "2"
 					}),
-					/* @__PURE__ */ r("line", {
+					/* @__PURE__ */ i("line", {
 						x1: "3",
 						y1: "9",
 						x2: "21",
 						y2: "9"
 					}),
-					/* @__PURE__ */ r("line", {
+					/* @__PURE__ */ i("line", {
 						x1: "3",
 						y1: "15",
 						x2: "21",
 						y2: "15"
 					}),
-					/* @__PURE__ */ r("line", {
+					/* @__PURE__ */ i("line", {
 						x1: "9",
 						y1: "3",
 						x2: "9",
 						y2: "21"
 					}),
-					/* @__PURE__ */ r("line", {
+					/* @__PURE__ */ i("line", {
 						x1: "15",
 						y1: "3",
 						x2: "15",
 						y2: "21"
 					})
 				]
-			}), /* @__PURE__ */ r("svg", {
+			}), /* @__PURE__ */ i("svg", {
 				width: "10",
 				height: "10",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				strokeWidth: "2.5",
-				children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9" })
+				children: /* @__PURE__ */ i("polyline", { points: "6 9 12 15 18 9" })
 			})]
-		}), s && u && /* @__PURE__ */ i("div", {
+		}), c && m && /* @__PURE__ */ a("div", {
+			ref: f,
 			className: "rte-toolbar__template-dropdown",
+			style: p,
 			children: [
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Columns"
 				}),
-				d.slice(0, 3).map((e, t) => /* @__PURE__ */ i("button", {
+				h.slice(0, 3).map((e, t) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
 					onClick: () => {
-						e.action(), c(!1);
+						e.action(), l(!1);
 					},
-					children: [/* @__PURE__ */ r("span", {
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: e.label })]
+					}), /* @__PURE__ */ i("span", { children: e.label })]
 				}, t)),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Rows"
 				}),
-				d.slice(3, 6).map((e, t) => /* @__PURE__ */ i("button", {
+				h.slice(3, 6).map((e, t) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
 					onClick: () => {
-						e.action(), c(!1);
+						e.action(), l(!1);
 					},
-					children: [/* @__PURE__ */ r("span", {
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: e.label })]
+					}), /* @__PURE__ */ i("span", { children: e.label })]
 				}, t)),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Merge / Split"
 				}),
-				d.slice(6, 8).map((e, t) => /* @__PURE__ */ i("button", {
+				h.slice(6, 8).map((e, t) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item",
 					onClick: () => {
-						e.action(), c(!1);
+						e.action(), l(!1);
 					},
-					children: [/* @__PURE__ */ r("span", {
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: e.label })]
+					}), /* @__PURE__ */ i("span", { children: e.label })]
 				}, t)),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ i("div", {
 					className: "rte-toolbar__template-group-label",
 					children: "Table"
 				}),
-				d.slice(8).map((e, t) => /* @__PURE__ */ i("button", {
+				h.slice(8).map((e, t) => /* @__PURE__ */ a("button", {
 					type: "button",
 					className: "rte-toolbar__template-item rte-toolbar__template-item--danger",
 					onClick: () => {
-						e.action(), c(!1);
+						e.action(), l(!1);
 					},
-					children: [/* @__PURE__ */ r("span", {
+					children: [/* @__PURE__ */ i("span", {
 						className: "rte-toolbar__template-icon",
 						children: e.icon
-					}), /* @__PURE__ */ r("span", { children: e.label })]
+					}), /* @__PURE__ */ i("span", { children: e.label })]
 				}, t))
 			]
 		})]
 	});
 };
 //#endregion
-export { a as TableOpsMenu };
+export { o as TableOpsMenu };
 
 //# sourceMappingURL=TableOpsMenu.js.map

package/dist/components/pro/RichTextEditor/Toolbar/TableOpsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableOpsMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/TableOpsMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport type { Editor } from '@tiptap/react';\nimport type { RichTextEditorLabels } from '../types';\n\ninterface TableOpsMenuProps {\n  editor: Editor;\n  labels: RichTextEditorLabels;\n}\n\nexport const TableOpsMenu: React.FC<TableOpsMenuProps> = ({ editor, labels }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  const isInTable = editor.isActive('table');\n\n  const actions: { label: string; action: () => void; icon: string }[] = [\n    { label: labels.tableAddColumnBefore || 'Add Column Before', action: () => editor.chain().focus().addColumnBefore().run(), icon: '⇤+' },\n    { label: labels.tableAddColumnAfter || 'Add Column After', action: () => editor.chain().focus().addColumnAfter().run(), icon: '+⇥' },\n    { label: labels.tableDeleteColumn || 'Delete Column', action: () => editor.chain().focus().deleteColumn().run(), icon: '−⫼' },\n    { label: labels.tableAddRowBefore || 'Add Row Before', action: () => editor.chain().focus().addRowBefore().run(), icon: '↑+' },\n    { label: labels.tableAddRowAfter || 'Add Row After', action: () => editor.chain().focus().addRowAfter().run(), icon: '+↓' },\n    { label: labels.tableDeleteRow || 'Delete Row', action: () => editor.chain().focus().deleteRow().run(), icon: '−═' },\n    { label: labels.tableMergeCells || 'Merge Cells', action: () => editor.chain().focus().mergeCells().run(), icon: '⊞' },\n    { label: labels.tableSplitCell || 'Split Cell', action: () => editor.chain().focus().splitCell().run(), icon: '⊟' },\n    { label: labels.tableDelete || 'Delete Table', action: () => editor.chain().focus().deleteTable().run(), icon: '🗑' },\n  ];\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\">\n      <button\n        type=\"button\"\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setIsOpen(!isOpen)}\n        disabled={!isInTable}\n        title={labels.tableOps || 'Table Operations'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center', opacity: isInTable ? 1 : 0.4 }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" /><line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\" />\n          <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\" /><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && isInTable && (\n        <div className=\"rte-toolbar__template-dropdown\">\n          <div className=\"rte-toolbar__template-group-label\">Columns</div>\n          {actions.slice(0, 3).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Rows</div>\n          {actions.slice(3, 6).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Merge / Split</div>\n          {actions.slice(6, 8).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Table</div>\n          {actions.slice(8).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item rte-toolbar__template-item--danger\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TableOpsMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/TableOpsMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport type { Editor } from '@tiptap/react';\nimport type { RichTextEditorLabels } from '../types';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface TableOpsMenuProps {\n  editor: Editor;\n  labels: RichTextEditorLabels;\n}\n\nexport const TableOpsMenu: React.FC<TableOpsMenuProps> = ({ editor, labels }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, dropdownRef);\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  const isInTable = editor.isActive('table');\n\n  const actions: { label: string; action: () => void; icon: string }[] = [\n    { label: labels.tableAddColumnBefore || 'Add Column Before', action: () => editor.chain().focus().addColumnBefore().run(), icon: '⇤+' },\n    { label: labels.tableAddColumnAfter || 'Add Column After', action: () => editor.chain().focus().addColumnAfter().run(), icon: '+⇥' },\n    { label: labels.tableDeleteColumn || 'Delete Column', action: () => editor.chain().focus().deleteColumn().run(), icon: '−⫼' },\n    { label: labels.tableAddRowBefore || 'Add Row Before', action: () => editor.chain().focus().addRowBefore().run(), icon: '↑+' },\n    { label: labels.tableAddRowAfter || 'Add Row After', action: () => editor.chain().focus().addRowAfter().run(), icon: '+↓' },\n    { label: labels.tableDeleteRow || 'Delete Row', action: () => editor.chain().focus().deleteRow().run(), icon: '−═' },\n    { label: labels.tableMergeCells || 'Merge Cells', action: () => editor.chain().focus().mergeCells().run(), icon: '⊞' },\n    { label: labels.tableSplitCell || 'Split Cell', action: () => editor.chain().focus().splitCell().run(), icon: '⊟' },\n    { label: labels.tableDelete || 'Delete Table', action: () => editor.chain().focus().deleteTable().run(), icon: '🗑' },\n  ];\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__template-menu\">\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`rte-toolbar__btn ${isOpen ? 'rte-toolbar__btn--active' : ''}`}\n        onClick={() => setIsOpen(!isOpen)}\n        disabled={!isInTable}\n        title={labels.tableOps || 'Table Operations'}\n        style={{ width: 'auto', padding: '0 6px', gap: '2px', display: 'inline-flex', alignItems: 'center', opacity: isInTable ? 1 : 0.4 }}\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" /><line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\" />\n          <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\" /><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\" />\n        </svg>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n      {isOpen && isInTable && (\n        <div ref={dropdownRef} className=\"rte-toolbar__template-dropdown\" style={dropdownStyle}>\n          <div className=\"rte-toolbar__template-group-label\">Columns</div>\n          {actions.slice(0, 3).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Rows</div>\n          {actions.slice(3, 6).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Merge / Split</div>\n          {actions.slice(6, 8).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n          <div className=\"rte-toolbar__template-group-label\">Table</div>\n          {actions.slice(8).map((a, i) => (\n            <button key={i} type=\"button\" className=\"rte-toolbar__template-item rte-toolbar__template-item--danger\" onClick={() => { a.action(); setIsOpen(false); }}>\n              <span className=\"rte-toolbar__template-icon\">{a.icon}</span>\n              <span>{a.label}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -7,6 +7,7 @@ interface ToolbarProps {
     labels?: RichTextEditorLabels;
     hasAI?: boolean;
     onAIClick?: () => void;
+    onRequestAIConfig?: () => void;
     onFormatPainterChange?: (active: boolean) => void;
     children?: React.ReactNode;
 }