dishui 0.0.72 → 0.0.74

package/dist/components/pro/RichTextEditor/SlashMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlashMenu.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/SlashMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport type { Editor } from '@tiptap/react';\n\ninterface SlashMenuItem {\n  label: string;\n  icon: string;\n  description: string;\n  action: (editor: Editor) => void;\n  keywords?: string[];\n}\n\nconst SLASH_ITEMS: SlashMenuItem[] = [\n  { label: 'Text', icon: 'Aa', description: 'Plain text', keywords: ['paragraph', 'text', 'plain'],\n    action: (e) => e.chain().focus().setParagraph().run() },\n  { label: 'Heading 1', icon: 'H1', description: 'Large heading', keywords: ['h1', 'title'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },\n  { label: 'Heading 2', icon: 'H2', description: 'Medium heading', keywords: ['h2', 'subtitle'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },\n  { label: 'Heading 3', icon: 'H3', description: 'Small heading', keywords: ['h3'],\n    action: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },\n  { label: 'Bullet List', icon: '•', description: 'Unordered list', keywords: ['ul', 'bullet', 'unordered'],\n    action: (e) => e.chain().focus().toggleBulletList().run() },\n  { label: 'Numbered List', icon: '1.', description: 'Ordered list', keywords: ['ol', 'ordered', 'number'],\n    action: (e) => e.chain().focus().toggleOrderedList().run() },\n  { label: 'Task List', icon: '☑', description: 'To-do list', keywords: ['todo', 'checkbox', 'task'],\n    action: (e) => e.chain().focus().toggleTaskList().run() },\n  { label: 'Blockquote', icon: '\"', description: 'Quote block', keywords: ['quote', 'blockquote'],\n    action: (e) => e.chain().focus().toggleBlockquote().run() },\n  { label: 'Code Block', icon: '</>', description: 'Code snippet', keywords: ['code', 'pre', 'snippet'],\n    action: (e) => e.chain().focus().toggleNode('codeBlock', 'paragraph').run() },\n  { label: 'Divider', icon: '—', description: 'Horizontal rule', keywords: ['hr', 'divider', 'separator', 'line'],\n    action: (e) => e.chain().focus().setHorizontalRule().run() },\n  { label: 'Table', icon: '⊞', description: 'Insert 3×3 table', keywords: ['table', 'grid'],\n    action: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },\n  { label: 'Image', icon: '🖼', description: 'Insert image by URL', keywords: ['image', 'picture', 'photo'],\n    action: (e) => {\n      const url = window.prompt('Image URL:');\n      if (url) e.chain().focus().setImage({ src: url }).run();\n    }},\n];\n\ninterface SlashMenuProps {\n  editor: Editor;\n}\n\nconst SlashMenu: React.FC<SlashMenuProps> = ({ editor }) => {\n  const [visible, setVisible] = useState(false);\n  const [query, setQuery] = useState('');\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const [selected, setSelected] = useState(0);\n  const [slashPos, setSlashPos] = useState<number | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const filtered = query\n    ? SLASH_ITEMS.filter((item) => {\n        const q = query.toLowerCase();\n        return item.label.toLowerCase().includes(q)\n          || item.description.toLowerCase().includes(q)\n          || item.keywords?.some((k) => k.includes(q));\n      })\n    : SLASH_ITEMS;\n\n  const close = useCallback(() => {\n    setVisible(false);\n    setQuery('');\n    setSlashPos(null);\n    setSelected(0);\n  }, []);\n\n  const executeItem = useCallback((item: SlashMenuItem) => {\n    if (slashPos !== null) {\n      const { from } = editor.state.selection;\n      editor.chain().focus().deleteRange({ from: slashPos, to: from }).run();\n    }\n    item.action(editor);\n    close();\n  }, [editor, slashPos, close]);\n\n  useEffect(() => {\n    const handleUpdate = () => {\n      const { $from } = editor.state.selection;\n      const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);\n      const slashMatch = /\\/([a-zA-Z0-9]*)$/.exec(textBefore);\n\n      if (slashMatch) {\n        const start = $from.start() + slashMatch.index;\n        setSlashPos(start);\n        setQuery(slashMatch[1]);\n        setSelected(0);\n\n        const coords = editor.view.coordsAtPos($from.pos);\n        const editorRect = editor.view.dom.closest('.rte-editor-wrapper')?.getBoundingClientRect();\n        if (editorRect) {\n          setPos({\n            x: coords.left - editorRect.left,\n            y: coords.bottom - editorRect.top + 4,\n          });\n        }\n        setVisible(true);\n      } else {\n        if (visible) close();\n      }\n    };\n\n    editor.on('selectionUpdate', handleUpdate);\n    editor.on('update', handleUpdate);\n    return () => {\n      editor.off('selectionUpdate', handleUpdate);\n      editor.off('update', handleUpdate);\n    };\n  }, [editor, visible, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setSelected((s) => (s + 1) % filtered.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setSelected((s) => (s - 1 + filtered.length) % filtered.length);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        if (filtered[selected]) executeItem(filtered[selected]);\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [visible, filtered, selected, executeItem, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handler = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) close();\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [visible, close]);\n\n  if (!visible || filtered.length === 0) return null;\n\n  return (\n    <div ref={menuRef} className=\"rte-slash-menu\" style={{ left: pos.x, top: pos.y }}>\n      {filtered.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={`rte-slash-menu__item ${i === selected ? 'rte-slash-menu__item--active' : ''}`}\n          onClick={() => executeItem(item)}\n          onMouseEnter={() => setSelected(i)}\n        >\n          <span className=\"rte-slash-menu__icon\">{item.icon}</span>\n          <div className=\"rte-slash-menu__text\">\n            <span className=\"rte-slash-menu__label\">{item.label}</span>\n            <span className=\"rte-slash-menu__desc\">{item.description}</span>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default SlashMenu;\n"],"mappings":"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"}
+{"version":3,"file":"SlashMenu.js","names":[],"sources":["../../../../src/components/pro/RichTextEditor/SlashMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react';\nimport type { Editor } from '@tiptap/react';\nimport type { ChainedCommands } from '@tiptap/core';\nimport { TextSelection } from '@tiptap/pm/state';\n\ninterface SlashMenuItem {\n  label: string;\n  icon: string;\n  description: string;\n  action: (chain: ChainedCommands) => ChainedCommands;\n  keywords?: string[];\n}\n\nconst SLASH_ITEMS: SlashMenuItem[] = [\n  { label: 'Text', icon: 'Aa', description: 'Plain text', keywords: ['paragraph', 'text', 'plain'],\n    action: (e) => e.setParagraph() },\n  { label: 'Heading 1', icon: 'H1', description: 'Large heading', keywords: ['h1', 'title'],\n    action: (e) => e.setHeading({ level: 1 }) },\n  { label: 'Heading 2', icon: 'H2', description: 'Medium heading', keywords: ['h2', 'subtitle'],\n    action: (e) => e.setHeading({ level: 2 }) },\n  { label: 'Heading 3', icon: 'H3', description: 'Small heading', keywords: ['h3'],\n    action: (e) => e.setHeading({ level: 3 }) },\n  { label: 'Bullet List', icon: '•', description: 'Unordered list', keywords: ['ul', 'bullet', 'unordered'],\n    action: (e) => e.toggleBulletList() },\n  { label: 'Numbered List', icon: '1.', description: 'Ordered list', keywords: ['ol', 'ordered', 'number'],\n    action: (e) => e.toggleOrderedList() },\n  { label: 'Task List', icon: '☑', description: 'To-do list', keywords: ['todo', 'checkbox', 'task'],\n    action: (e) => e.toggleTaskList() },\n  { label: 'Blockquote', icon: '\"', description: 'Quote block', keywords: ['quote', 'blockquote'],\n    action: (e) => e.toggleBlockquote() },\n  { label: 'Code Block', icon: '</>', description: 'Code snippet', keywords: ['code', 'pre', 'snippet'],\n    action: (e) => e.setNode('codeBlock') },\n  { label: 'Divider', icon: '—', description: 'Horizontal rule', keywords: ['hr', 'divider', 'separator', 'line'],\n    action: (e) => e.setHorizontalRule() },\n  { label: 'Table', icon: '⊞', description: 'Insert 3×3 table', keywords: ['table', 'grid'],\n    action: (e) => e.insertTable({ rows: 3, cols: 3, withHeaderRow: true }) },\n  { label: 'Image', icon: '🖼', description: 'Insert image by URL', keywords: ['image', 'picture', 'photo'],\n    action: (e) => e},\n];\n\ninterface SlashMenuProps {\n  editor: Editor;\n}\n\nconst SlashMenu: React.FC<SlashMenuProps> = ({ editor }) => {\n  const [visible, setVisible] = useState(false);\n  const [query, setQuery] = useState('');\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const [selected, setSelected] = useState(0);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const activeRange = useRef<{ from: number; to: number; query: string } | null>(null);\n  const dismissed = useRef<string | null>(null);\n  const composing = useRef(false);\n\n  const getRange = useCallback(() => {\n    if (editor.isDestroyed || !editor.isEditable || editor.view.composing || composing.current) return null;\n    const selection = editor.state.selection;\n    if (!(selection instanceof TextSelection) || !selection.empty || selection.$from.parent.type.spec.code || selection.$from.marks().some((mark) => mark.type.spec.code)) return null;\n    const { $from } = selection;\n    // textContent drops inline atoms and hard breaks, so its offsets are not document offsets.\n    const text = $from.parent.textBetween(0, $from.parentOffset, '\\n', (node) => node.type.name === 'hardBreak' ? '\\n' : '\\ufffc');\n    const match = /(?:^|\\s)\\/([^\\s/]*)$/.exec(text);\n    if (!match) return null;\n    return { from: $from.pos - match[1].length - 1, to: $from.pos, query: match[1] };\n  }, [editor]);\n\n  const filtered = query\n    ? SLASH_ITEMS.filter((item) => {\n        const q = query.toLowerCase();\n        return item.label.toLowerCase().includes(q)\n          || item.description.toLowerCase().includes(q)\n          || item.keywords?.some((k) => k.includes(q));\n      })\n    : SLASH_ITEMS;\n\n  const close = useCallback(() => {\n    setVisible(false);\n    setQuery('');\n    const range = activeRange.current;\n    if (range) dismissed.current = `${range.from}:${range.to}:${range.query}`;\n    activeRange.current = null;\n    setSelected(0);\n  }, []);\n\n  const executeItem = useCallback((item: SlashMenuItem) => {\n    const range = getRange();\n    const active = activeRange.current;\n    if (!range || !active || range.from !== active.from || range.to !== active.to || range.query !== active.query) {\n      close();\n      return;\n    }\n    const url = item.label === 'Image' ? window.prompt('Image URL:')?.trim() : undefined;\n    if (item.label === 'Image' && !url) { close(); return; }\n    close();\n    // Delete the trigger and insert/convert in one transaction (one undo step).\n    const chain = editor.chain().focus().deleteRange(range);\n    (url ? chain.setImage({ src: url }) : item.action(chain)).run();\n  }, [editor, getRange, close]);\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const handleUpdate = () => {\n      const range = editor.isFocused ? getRange() : null;\n      if (!range) {\n        activeRange.current = null;\n        dismissed.current = null;\n        setVisible(false);\n        return;\n      }\n      if (dismissed.current === `${range.from}:${range.to}:${range.query}`) return;\n      if (activeRange.current?.query !== range.query || activeRange.current?.from !== range.from) setSelected(0);\n      activeRange.current = range;\n      setQuery(range.query);\n      setVisible(true);\n    };\n    const start = () => { composing.current = true; close(); };\n    const end = () => {\n      composing.current = false;\n      dismissed.current = null;\n      timer = setTimeout(handleUpdate, 0);\n    };\n    const dom = editor.view.dom;\n    editor.on('transaction', handleUpdate);\n    editor.on('blur', close);\n    dom.addEventListener('compositionstart', start);\n    dom.addEventListener('compositionend', end);\n    return () => {\n      clearTimeout(timer);\n      editor.off('transaction', handleUpdate);\n      editor.off('blur', close);\n      dom.removeEventListener('compositionstart', start);\n      dom.removeEventListener('compositionend', end);\n    };\n  }, [editor, getRange, close]);\n\n  useLayoutEffect(() => {\n    if (!visible || !filtered.length) return;\n    const wrapper = editor.view.dom.closest('.rte-editor-wrapper') as HTMLElement | null;\n    const menu = menuRef.current;\n    if (!wrapper || !menu) return;\n    const place = () => {\n      const range = getRange();\n      if (!range) { close(); return; }\n      const coords = editor.view.coordsAtPos(range.to);\n      const rect = wrapper.getBoundingClientRect();\n      const left = Math.max(8, rect.left + wrapper.clientLeft);\n      const right = Math.min(window.innerWidth - 8, rect.right);\n      const top = Math.max(8, rect.top + wrapper.clientTop);\n      const bottom = Math.min(window.innerHeight - 8, rect.bottom);\n      // Clamp the anchor into the visible area instead of closing: on small /\n      // scrollable (phone) containers the cursor can sit at the very edge, and\n      // closing the menu makes block insertion feel broken (\" stuck \").\n      const anchorTop = Math.min(Math.max(coords.top, top), bottom);\n      const anchorBottom = Math.min(Math.max(coords.bottom, top), bottom);\n      menu.style.minWidth = '0';\n      menu.style.width = `${Math.min(280, Math.max(120, right - left))}px`;\n      const below = bottom - anchorBottom - 4;\n      const above = anchorTop - top - 4;\n      const flip = below < Math.min(300, menu.scrollHeight) && above > below;\n      // Keep a minimum visible height: a 0-height menu still hijacks Enter and\n      // arrow keys, which looks like a frozen editor.\n      menu.style.maxHeight = `${Math.max(120, Math.min(300, flip ? above : below))}px`;\n      const x = Math.max(left, Math.min(coords.left, right - menu.offsetWidth));\n      const y = flip ? anchorTop - menu.offsetHeight - 4 : anchorBottom + 4;\n      setPos({ x: x - rect.left - wrapper.clientLeft + wrapper.scrollLeft,\n        y: y - rect.top - wrapper.clientTop + wrapper.scrollTop });\n    };\n    place();\n    window.addEventListener('scroll', place, true);\n    window.addEventListener('resize', place);\n    editor.on('transaction', place);\n    return () => {\n      window.removeEventListener('scroll', place, true);\n      window.removeEventListener('resize', place);\n      editor.off('transaction', place);\n    };\n  }, [editor, visible, filtered.length, getRange, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const menu = menuRef.current;\n    const item = menu?.children[selected] as HTMLElement | undefined;\n    if (!menu || !item) return;\n    if (item.offsetTop < menu.scrollTop) menu.scrollTop = item.offsetTop;\n    else if (item.offsetTop + item.offsetHeight > menu.scrollTop + menu.clientHeight) {\n      menu.scrollTop = item.offsetTop + item.offsetHeight - menu.clientHeight;\n    }\n  }, [selected, visible]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!editor.view.dom.contains(e.target as Node) || !editor.isFocused || e.isComposing || e.keyCode === 229 || editor.view.composing || composing.current || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;\n      if (!filtered.length && e.key !== 'Escape') return;\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) e.stopImmediatePropagation();\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setSelected((s) => (s + 1) % filtered.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setSelected((s) => (s - 1 + filtered.length) % filtered.length);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        if (filtered[selected]) executeItem(filtered[selected]);\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown, true);\n    return () => document.removeEventListener('keydown', handleKeyDown, true);\n  }, [editor, visible, filtered, selected, executeItem, close]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const handler = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) close();\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [visible, close]);\n\n  if (!visible || filtered.length === 0) return null;\n\n  return (\n    <div ref={menuRef} className=\"rte-slash-menu\" role=\"menu\" aria-label=\"Insert block\" style={{ left: pos.x, top: pos.y }} onMouseDown={(e) => e.preventDefault()}>\n      {filtered.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          role=\"menuitem\"\n          tabIndex={-1}\n          className={`rte-slash-menu__item ${i === selected ? 'rte-slash-menu__item--active' : ''}`}\n          onClick={() => executeItem(item)}\n          onMouseEnter={() => setSelected(i)}\n        >\n          <span className=\"rte-slash-menu__icon\">{item.icon}</span>\n          <div className=\"rte-slash-menu__text\">\n            <span className=\"rte-slash-menu__label\">{item.label}</span>\n            <span className=\"rte-slash-menu__desc\">{item.description}</span>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default SlashMenu;\n"],"mappings":"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"}

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

@@ -4,6 +4,8 @@ interface ColorPickerProps {
     onChange: (color: string) => void;
     title?: string;
     icon: React.ReactNode;
+    /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */
+    buttonClassName?: string;
 }
 export declare const ColorPicker: React.FC<ColorPickerProps>;
 export {};

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

@@ -1,40 +1,40 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx
-var a = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), o = ({ value: o, onChange: s, title: c, icon: l }) => {
-	let [u, d] = n(!1), f = t(null);
+var a = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), o = ({ value: o, onChange: s, title: c, icon: l, buttonClassName: u = "rte-toolbar__btn" }) => {
+	let [d, f] = n(!1), p = t(null);
 	return e(() => {
 		let e = (e) => {
-			f.current && !f.current.contains(e.target) && d(!1);
+			p.current && !p.current.contains(e.target) && f(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []), /* @__PURE__ */ i("div", {
-		ref: f,
+		ref: p,
 		className: "rte-toolbar__color-picker",
 		children: [/* @__PURE__ */ i("button", {
 			type: "button",
-			className: "rte-toolbar__btn",
-			onClick: () => d(!u),
+			className: u,
+			onClick: () => f(!d),
 			title: c,
 			children: [l, /* @__PURE__ */ r("span", {
 				className: "rte-toolbar__color-indicator",
 				style: { backgroundColor: o || "#000" }
 			})]
-		}), u && /* @__PURE__ */ i("div", {
+		}), d && /* @__PURE__ */ i("div", {
 			className: "rte-toolbar__color-dropdown",
 			children: [a.map((e) => /* @__PURE__ */ r("button", {
 				type: "button",
 				className: `rte-toolbar__color-swatch ${e === o ? "rte-toolbar__color-swatch--active" : ""}`,
 				style: { backgroundColor: e },
 				onClick: () => {
-					s(e), d(!1);
+					s(e), f(!1);
 				},
 				title: e
 			}, e)), /* @__PURE__ */ r("button", {
 				type: "button",
 				className: "rte-toolbar__color-clear",
 				onClick: () => {
-					s(""), d(!1);
+					s(""), f(!1);
 				},
 				children: "Clear"
 			})]

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon: React.ReactNode;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon }) => {\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  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\">\n      <button\n        type=\"button\"\n        className=\"rte-toolbar__btn\"\n        onClick={() => setIsOpen(!isOpen)}\n        title={title}\n      >\n        {icon}\n        <span\n          className=\"rte-toolbar__color-indicator\"\n          style={{ backgroundColor: value || '#000' }}\n        />\n      </button>\n      {isOpen && (\n        <div className=\"rte-toolbar__color-dropdown\">\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={c}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;AASA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,cAAW;CAC3F,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI;CAYvC,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EAAzB,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,eAAe,EAAU,CAAC,CAAM;GACzB;GAJT,UAAA,CAMG,GACD,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,KAAS,OAAO;GAC3C,CAAA,CACK;EACP,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO;GACR,GANM,CAMN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IAClD,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon: React.ReactNode;\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, buttonClassName = 'rte-toolbar__btn' }) => {\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  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\">\n      <button\n        type=\"button\"\n        className={buttonClassName}\n        onClick={() => setIsOpen(!isOpen)}\n        title={title}\n      >\n        {icon}\n        <span\n          className=\"rte-toolbar__color-indicator\"\n          style={{ backgroundColor: value || '#000' }}\n        />\n      </button>\n      {isOpen && (\n        <div className=\"rte-toolbar__color-dropdown\">\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={c}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;AAWA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,SAAM,qBAAkB,yBAAyB;CACjI,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI;CAYvC,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EAAzB,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,WAAW;GACX,eAAe,EAAU,CAAC,CAAM;GACzB;GAJT,UAAA,CAMG,GACD,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,KAAS,OAAO;GAC3C,CAAA,CACK;EACP,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO;GACR,GANM,CAMN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IAClD,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}

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

@@ -210,22 +210,17 @@ var a = [
 				children: [
 					/* @__PURE__ */ r("rect", {
 						x: "2",
-						y: "3",
-						width: "20",
-						height: "18",
+						y: "4",
+						width: "13",
+						height: "10",
 						rx: "2"
 					}),
+					/* @__PURE__ */ r("path", { d: "M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2" }),
 					/* @__PURE__ */ r("line", {
-						x1: "2",
-						y1: "8",
-						x2: "22",
-						y2: "8"
-					}),
-					/* @__PURE__ */ r("line", {
-						x1: "8",
-						y1: "3",
-						x2: "8",
-						y2: "8"
+						x1: "7",
+						y1: "14",
+						x2: "13",
+						y2: "14"
 					})
 				]
 			}), /* @__PURE__ */ r("svg", {

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingDialogMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport type { RichTextEditorLabels } from '../types';\n\ninterface FloatingDialogMenuProps {\n  labels: RichTextEditorLabels;\n  onInsert: (layout: 'block' | 'wrap-left' | 'wrap-right' | 'float') => void;\n}\n\nconst DIALOG_LAYOUT_OPTIONS: { key: 'block' | 'wrap-left' | 'wrap-right' | 'float'; labelKey: keyof RichTextEditorLabels; icon: React.ReactNode }[] = [\n  {\n    key: 'block', labelKey: 'layoutBlock',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"3\" /><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\" /></svg>,\n  },\n  {\n    key: 'wrap-left', labelKey: 'layoutWrapLeft',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"2\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"15\" y1=\"5\" x2=\"22\" y2=\"5\" /><line x1=\"15\" y1=\"8\" x2=\"22\" y2=\"8\" /><line x1=\"15\" y1=\"11\" x2=\"22\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'wrap-right', labelKey: 'layoutWrapRight',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"12\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"2\" y1=\"5\" x2=\"9\" y2=\"5\" /><line x1=\"2\" y1=\"8\" x2=\"9\" y2=\"8\" /><line x1=\"2\" y1=\"11\" x2=\"9\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'float', labelKey: 'layoutFloat',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M2 2h4M18 2h4M2 22h4M18 22h4\" strokeDasharray=\"2 2\" /><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" strokeDasharray=\"2 2\" /><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" strokeDasharray=\"2 2\" /></svg>,\n  },\n];\n\nexport const FloatingDialogMenu: React.FC<FloatingDialogMenuProps> = ({ labels, onInsert }) => {\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)) setIsOpen(false);\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\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        title={labels.floatingDialog || 'Floating Dialog'}\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=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\" />\n          <line x1=\"2\" y1=\"8\" x2=\"22\" y2=\"8\" />\n          <line x1=\"8\" y1=\"3\" x2=\"8\" y2=\"8\" />\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\" style={{ minWidth: 140 }}>\n          {DIALOG_LAYOUT_OPTIONS.map((opt) => (\n            <button\n              key={opt.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={() => { onInsert(opt.key); setIsOpen(false); }}\n            >\n              <span className=\"rte-toolbar__template-icon\" style={{ display: 'flex', alignItems: 'center' }}>{opt.icon}</span>\n              <span>{labels[opt.labelKey] || opt.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FloatingDialogMenu.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport type { RichTextEditorLabels } from '../types';\n\ninterface FloatingDialogMenuProps {\n  labels: RichTextEditorLabels;\n  onInsert: (layout: 'block' | 'wrap-left' | 'wrap-right' | 'float') => void;\n}\n\nconst DIALOG_LAYOUT_OPTIONS: { key: 'block' | 'wrap-left' | 'wrap-right' | 'float'; labelKey: keyof RichTextEditorLabels; icon: React.ReactNode }[] = [\n  {\n    key: 'block', labelKey: 'layoutBlock',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"3\" /><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"21\" /></svg>,\n  },\n  {\n    key: 'wrap-left', labelKey: 'layoutWrapLeft',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"2\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"15\" y1=\"5\" x2=\"22\" y2=\"5\" /><line x1=\"15\" y1=\"8\" x2=\"22\" y2=\"8\" /><line x1=\"15\" y1=\"11\" x2=\"22\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'wrap-right', labelKey: 'layoutWrapRight',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"12\" y=\"4\" width=\"10\" height=\"8\" rx=\"1\" /><line x1=\"2\" y1=\"5\" x2=\"9\" y2=\"5\" /><line x1=\"2\" y1=\"8\" x2=\"9\" y2=\"8\" /><line x1=\"2\" y1=\"11\" x2=\"9\" y2=\"11\" /><line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\" /><line x1=\"2\" y1=\"18\" x2=\"22\" y2=\"18\" /></svg>,\n  },\n  {\n    key: 'float', labelKey: 'layoutFloat',\n    icon: <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M2 2h4M18 2h4M2 22h4M18 22h4\" strokeDasharray=\"2 2\" /><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\" strokeDasharray=\"2 2\" /><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\" strokeDasharray=\"2 2\" /></svg>,\n  },\n];\n\nexport const FloatingDialogMenu: React.FC<FloatingDialogMenuProps> = ({ labels, onInsert }) => {\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)) setIsOpen(false);\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\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        title={labels.floatingDialog || 'Floating Dialog'}\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=\"2\" y=\"4\" width=\"13\" height=\"10\" rx=\"2\" />\n          <path d=\"M9 10h11a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-2\" />\n          <line x1=\"7\" y1=\"14\" x2=\"13\" y2=\"14\" />\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\" style={{ minWidth: 140 }}>\n          {DIALOG_LAYOUT_OPTIONS.map((opt) => (\n            <button\n              key={opt.key}\n              type=\"button\"\n              className=\"rte-toolbar__template-item\"\n              onClick={() => { onInsert(opt.key); setIsOpen(false); }}\n            >\n              <span className=\"rte-toolbar__template-icon\" style={{ display: 'flex', alignItems: 'center' }}>{opt.icon}</span>\n              <span>{labels[opt.labelKey] || opt.labelKey}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -94,9 +94,28 @@ var a = [
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ r("path", { d: "M2 3h20v18H2z" }),
-					/* @__PURE__ */ r("path", { d: "M5 15V9l3 3.5L11 9v6" }),
-					/* @__PURE__ */ r("path", { d: "M17 9l-2.5 3H17v3" })
+					/* @__PURE__ */ r("rect", {
+						x: "3",
+						y: "3",
+						width: "8",
+						height: "8",
+						rx: "1.5"
+					}),
+					/* @__PURE__ */ r("rect", {
+						x: "13",
+						y: "3",
+						width: "8",
+						height: "8",
+						rx: "1.5"
+					}),
+					/* @__PURE__ */ r("rect", {
+						x: "3",
+						y: "13",
+						width: "8",
+						height: "8",
+						rx: "1.5"
+					}),
+					/* @__PURE__ */ r("path", { d: "M17 14v6M14 17h6" })
 				]
 			}), /* @__PURE__ */ r("svg", {
 				width: "10",

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 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) => void;\n}\n\nexport const MarkdownTemplateMenu: React.FC<MarkdownTemplateMenuProps> = ({ labels, onSelect }) => {\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  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        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          <path d=\"M2 3h20v18H2z\" />\n          <path d=\"M5 15V9l3 3.5L11 9v6\" />\n          <path d=\"M17 9l-2.5 3H17v3\" />\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={() => { onSelect(t.content); setIsOpen(false); }}\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={() => { onSelect(t.content); setIsOpen(false); }}\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={() => { onSelect(t.content); setIsOpen(false); }}\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 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) => void;\n}\n\nexport const MarkdownTemplateMenu: React.FC<MarkdownTemplateMenuProps> = ({ labels, onSelect }) => {\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  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        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={() => { onSelect(t.content); setIsOpen(false); }}\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={() => { onSelect(t.content); setIsOpen(false); }}\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={() => { onSelect(t.content); setIsOpen(false); }}\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/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Editor } from '@tiptap/react';
+import { type Editor } from '@tiptap/react';
 import type { ToolbarSection, RichTextEditorLabels } from '../types';
 interface ToolbarProps {
     editor: Editor;