修复主题动画掉帧问题

write/src/components/ShortcutPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RefObject } from "react";
-import { Heading2, Heading3, Code, Quote, Image, Link, Minus, Bold, FileCode } from "lucide-react";
+import { Heading2, Heading3, Code, Quote, Image, Link, Minus, Bold, FileCode, Grid3X3 } from "lucide-react";
 
 interface ShortcutPanelProps {
   textareaRef: RefObject<HTMLTextAreaElement | null>;
@@ -28,6 +28,29 @@ export default function ShortcutPanel({ textareaRef, value, onChange }: Shortcut
     }, 0);
   };
 
+  const insertBlock = (template: string) => {
+    const el = textareaRef.current;
+    if (!el) {
+      onChange(value + template);
+      return;
+    }
+    const start = el.selectionStart;
+    const newVal = value.slice(0, start) + template + value.slice(start);
+    onChange(newVal);
+    setTimeout(() => {
+      el.selectionStart = start + template.length;
+      el.selectionEnd = start + template.length;
+      el.focus();
+    }, 0);
+  };
+
+  const gridTemplate = `{{< grid cols="3" >}}
+![描述]()
+![描述]()
+![描述]()
+{{< /grid >}}
+`;
+
   const shortcuts = [
     { label: "H2", icon: Heading2, action: () => insert("## ", "\n", "二级标题") },
     { label: "H3", icon: Heading3, action: () => insert("### ", "\n", "三级标题") },
@@ -36,6 +59,7 @@ export default function ShortcutPanel({ textareaRef, value, onChange }: Shortcut
     { label: "行内代码", icon: Code, action: () => insert("`", "`", "code") },
     { label: "引用", icon: Quote, action: () => insert("> ", "\n", "引用内容") },
     { label: "图片", icon: Image, action: () => insert("![", "]()", "描述") },
+    { label: "图片网格", icon: Grid3X3, action: () => insertBlock(gridTemplate) },
     { label: "链接", icon: Link, action: () => insert("[", "]()", "链接文本") },
     { label: "分割线", icon: Minus, action: () => insert("\n---\n", "", "") },
   ];