@lv-x-software-house/x_view 1.2.2-dev.11 → 1.2.2-dev.13

package/dist/index.js

@@ -3486,6 +3486,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
   const [selectedItem, setSelectedItem] = (0, import_react4.useState)(null);
   const [searchHistory, setSearchHistory] = (0, import_react4.useState)([]);
   const [activeIndex, setActiveIndex] = (0, import_react4.useState)(0);
+  const [selectedIndices, setSelectedIndices] = (0, import_react4.useState)(/* @__PURE__ */ new Set([0]));
+  const [lastSelectedIndex, setLastSelectedIndex] = (0, import_react4.useState)(0);
   const sectionRefs = (0, import_react4.useRef)([]);
   const [isDropdownOpen, setIsDropdownOpen] = (0, import_react4.useState)(false);
   const inputRef = (0, import_react4.useRef)(null);
@@ -3534,6 +3536,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
   }, [selectedItem]);
   (0, import_react4.useEffect)(() => {
     setActiveIndex(0);
+    setSelectedIndices(/* @__PURE__ */ new Set([0]));
+    setLastSelectedIndex(0);
   }, [selectedItem]);
   (0, import_react4.useEffect)(() => {
     if (selectedItem && sectionRefs.current[activeIndex]) {
@@ -3550,22 +3554,64 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
       if (document.activeElement === inputRef.current) return;
       if (e.key === "ArrowDown" || e.key === "ArrowRight") {
         e.preventDefault();
-        setActiveIndex((prev) => Math.min(prev + 1, itemSections.length - 1));
+        setActiveIndex((prev) => {
+          const next = Math.min(prev + 1, itemSections.length - 1);
+          if (e.shiftKey) {
+            setSelectedIndices((old) => /* @__PURE__ */ new Set([...old, next]));
+          } else if (!e.ctrlKey && !e.metaKey) {
+            setSelectedIndices(/* @__PURE__ */ new Set([next]));
+            setLastSelectedIndex(next);
+          }
+          return next;
+        });
       }
       if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
         e.preventDefault();
-        setActiveIndex((prev) => Math.max(prev - 1, 0));
+        setActiveIndex((prev) => {
+          const next = Math.max(prev - 1, 0);
+          if (e.shiftKey) {
+            setSelectedIndices((old) => /* @__PURE__ */ new Set([...old, next]));
+          } else if (!e.ctrlKey && !e.metaKey) {
+            setSelectedIndices(/* @__PURE__ */ new Set([next]));
+            setLastSelectedIndex(next);
+          }
+          return next;
+        });
       }
       if (e.key === "Enter") {
         e.preventDefault();
-        if (itemSections[activeIndex]) {
-          handleConfirmImport(itemSections[activeIndex]);
-        }
+        handleConfirmImport();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [itemSections, activeIndex, selectedItem]);
+  }, [itemSections, selectedItem]);
+  const handleSectionClick = (index, e) => {
+    e.stopPropagation();
+    if (e.shiftKey && lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      const newSelection = new Set(selectedIndices);
+      for (let i = start; i <= end; i++) {
+        newSelection.add(i);
+      }
+      setSelectedIndices(newSelection);
+    } else if (e.ctrlKey || e.metaKey) {
+      const newSelection = new Set(selectedIndices);
+      if (newSelection.has(index)) {
+        newSelection.delete(index);
+        if (newSelection.size === 0) newSelection.add(index);
+      } else {
+        newSelection.add(index);
+      }
+      setSelectedIndices(newSelection);
+      setLastSelectedIndex(index);
+    } else {
+      setSelectedIndices(/* @__PURE__ */ new Set([index]));
+      setLastSelectedIndex(index);
+    }
+    setActiveIndex(index);
+  };
   const handleSelectItem = (item) => {
     setSelectedItem(item);
     setSearchHistory((prev) => {
@@ -3579,16 +3625,22 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
     setSearchTerm("");
     setIsDropdownOpen(false);
   };
-  const handleConfirmImport = (sectionToImport = null) => {
-    const section = sectionToImport || itemSections[activeIndex];
-    if (!section) return;
+  const handleConfirmImport = () => {
+    if (selectedIndices.size === 0) return;
     const type = selectedItem._type;
     const itemId = selectedItem.id || selectedItem.ancestry_id;
-    if (section.id) {
-      const tag = `[[REF:${type}:${itemId}:${section.id}]]`;
-      onSelect(tag);
+    const indicesToImport = Array.from(selectedIndices).sort((a, b) => a - b);
+    const tagsToImport = [];
+    indicesToImport.forEach((idx) => {
+      const section = itemSections[idx];
+      if (section && section.id) {
+        tagsToImport.push(`[[REF:${type}:${itemId}:${section.id}]]`);
+      }
+    });
+    if (tagsToImport.length > 0) {
+      onSelect(tagsToImport);
     } else {
-      alert("Esta se\xE7\xE3o n\xE3o possui um ID \xFAnico salvo. Salve o node de origem primeiro.");
+      alert("Nenhuma se\xE7\xE3o v\xE1lida selecionada.");
     }
   };
   const renderSectionContent = (content) => {
@@ -3659,7 +3711,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
         /* @__PURE__ */ import_react4.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-sm font-medium text-slate-200 truncate" }, item.name), /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-[10px] text-slate-500 uppercase tracking-wider" }, isNode ? ((_a = item.version_node) == null ? void 0 : _a.is_version) ? "Vers\xE3o" : "Node" : "Ancestralidade"))
       );
     }))), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-1 flex flex-col bg-black/20 relative z-10" }, selectedItem ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pr-8" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full text-sm leading-relaxed text-slate-300 break-words whitespace-pre-wrap" }, itemSections.map((section, index) => {
-      const isActive = index === activeIndex;
+      const isSelected = selectedIndices.has(index);
+      const isFocused = index === activeIndex;
       const match = section.content.match(/^(\s*)([\s\S]*?)(\s*)$/);
       let leadingSpace = match ? match[1] : "";
       const bodyText = match ? match[2] : section.content;
@@ -3677,10 +3730,11 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
               refAssigned = true;
             }
           },
-          onClick: () => setActiveIndex(index),
+          onClick: (e) => handleSectionClick(index, e),
           className: `
                                                                 transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone
-                                                                ${isActive ? "bg-indigo-500/20 ring-1 ring-indigo-500/30" : "hover:bg-white/5"}
+                                                                ${isSelected ? "bg-indigo-500/30 ring-1 ring-indigo-500/50" : "hover:bg-white/5"}
+                                                                ${isFocused && !isSelected ? "ring-1 ring-white/20" : ""}
                                                             `
         },
         renderSectionContent(bodyText)
@@ -3701,8 +3755,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
               CodeBlock,
               {
                 content: part,
-                isActive,
-                onClick: () => setActiveIndex(index)
+                isActive: isSelected,
+                onClick: (e) => handleSectionClick(index, e)
               }
             )
           );
@@ -3712,7 +3766,7 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
           const isLastLine = lineIndex === lines.length - 1;
           const isEmptyLine = line.trim() === "";
           if (isEmptyLine) {
-            return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key: `${index}-${partIndex}-${lineIndex}` }, /* @__PURE__ */ import_react4.default.createElement("br", null));
+            return /* @__PURE__ */ import_react4.default.createElement("br", { key: `${index}-${partIndex}-${lineIndex}` });
           }
           return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key: `${index}-${partIndex}-${lineIndex}` }, /* @__PURE__ */ import_react4.default.createElement(
             "span",
@@ -3723,10 +3777,11 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
                   refAssigned = true;
                 }
               },
-              onClick: () => setActiveIndex(index),
+              onClick: (e) => handleSectionClick(index, e),
               className: `
-                                                                                        transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone
-                                                                                        ${isActive ? "bg-indigo-500/20 text-white ring-1 ring-indigo-500/30" : "hover:bg-white/5 hover:text-slate-200"}
+                                                                                        transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone select-none
+                                                                                        ${isSelected ? "bg-indigo-500/30 text-white ring-1 ring-indigo-500/50 shadow-sm" : "hover:bg-white/5 hover:text-slate-200"}
+                                                                                        ${isFocused && !isSelected ? "ring-1 ring-white/20" : ""}
                                                                                     `
             },
             formatLineContent(line)
@@ -3740,7 +3795,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
         className: "flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-lg shadow-lg shadow-indigo-500/20 transition-all transform active:scale-95"
       },
       /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiDownload, { className: "text-indigo-200" }),
-      "Importar Se\xE7\xE3o"
+      "Importar ",
+      selectedIndices.size > 1 ? `${selectedIndices.size} Se\xE7\xF5es` : "Se\xE7\xE3o"
     ))) : /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-1 flex flex-col items-center justify-center text-slate-500" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-4" }, /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiSearch, { size: 24, className: "opacity-50" })), /* @__PURE__ */ import_react4.default.createElement("p", null, "Selecione um item \xE0 esquerda para visualizar suas se\xE7\xF5es."))))
   ));
 }
@@ -3874,12 +3930,28 @@ function DescriptionEditModal({
     const uniqueSuffix = v4_default().slice(0, 4);
     insertAtCursor(`*/${nextNum}:${uniqueSuffix}/ `);
   };
-  const handleImportSelect = (tag) => {
-    const nextNum = getNextSectionNumber(text);
-    const uniqueSuffix = v4_default().slice(0, 4);
-    insertAtCursor(`
-*/${nextNum}:${uniqueSuffix}/ ${tag}
-`);
+  const handleImportSelect = (tags) => {
+    const tagsArray = Array.isArray(tags) ? tags : [tags];
+    const el = textareaRef.current;
+    if (!el) return;
+    let currentText = text;
+    let currentNum = getNextSectionNumber(currentText);
+    let blockToInsert = "";
+    tagsArray.forEach((tag) => {
+      const uniqueSuffix = v4_default().slice(0, 4);
+      blockToInsert += `
+*/${currentNum}:${uniqueSuffix}/ ${tag}
+`;
+      currentNum++;
+    });
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const newText = currentText.substring(0, start) + blockToInsert + currentText.substring(end);
+    el.value = newText;
+    el.setSelectionRange(start + blockToInsert.length, start + blockToInsert.length);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+    setText(newText);
     setIsImportModalOpen(false);
   };
   const handleMentionSelect = (node) => {

package/dist/index.mjs

@@ -3442,6 +3442,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
   const [selectedItem, setSelectedItem] = useState4(null);
   const [searchHistory, setSearchHistory] = useState4([]);
   const [activeIndex, setActiveIndex] = useState4(0);
+  const [selectedIndices, setSelectedIndices] = useState4(/* @__PURE__ */ new Set([0]));
+  const [lastSelectedIndex, setLastSelectedIndex] = useState4(0);
   const sectionRefs = useRef4([]);
   const [isDropdownOpen, setIsDropdownOpen] = useState4(false);
   const inputRef = useRef4(null);
@@ -3490,6 +3492,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
   }, [selectedItem]);
   useEffect4(() => {
     setActiveIndex(0);
+    setSelectedIndices(/* @__PURE__ */ new Set([0]));
+    setLastSelectedIndex(0);
   }, [selectedItem]);
   useEffect4(() => {
     if (selectedItem && sectionRefs.current[activeIndex]) {
@@ -3506,22 +3510,64 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
       if (document.activeElement === inputRef.current) return;
       if (e.key === "ArrowDown" || e.key === "ArrowRight") {
         e.preventDefault();
-        setActiveIndex((prev) => Math.min(prev + 1, itemSections.length - 1));
+        setActiveIndex((prev) => {
+          const next = Math.min(prev + 1, itemSections.length - 1);
+          if (e.shiftKey) {
+            setSelectedIndices((old) => /* @__PURE__ */ new Set([...old, next]));
+          } else if (!e.ctrlKey && !e.metaKey) {
+            setSelectedIndices(/* @__PURE__ */ new Set([next]));
+            setLastSelectedIndex(next);
+          }
+          return next;
+        });
       }
       if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
         e.preventDefault();
-        setActiveIndex((prev) => Math.max(prev - 1, 0));
+        setActiveIndex((prev) => {
+          const next = Math.max(prev - 1, 0);
+          if (e.shiftKey) {
+            setSelectedIndices((old) => /* @__PURE__ */ new Set([...old, next]));
+          } else if (!e.ctrlKey && !e.metaKey) {
+            setSelectedIndices(/* @__PURE__ */ new Set([next]));
+            setLastSelectedIndex(next);
+          }
+          return next;
+        });
       }
       if (e.key === "Enter") {
         e.preventDefault();
-        if (itemSections[activeIndex]) {
-          handleConfirmImport(itemSections[activeIndex]);
-        }
+        handleConfirmImport();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [itemSections, activeIndex, selectedItem]);
+  }, [itemSections, selectedItem]);
+  const handleSectionClick = (index, e) => {
+    e.stopPropagation();
+    if (e.shiftKey && lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      const newSelection = new Set(selectedIndices);
+      for (let i = start; i <= end; i++) {
+        newSelection.add(i);
+      }
+      setSelectedIndices(newSelection);
+    } else if (e.ctrlKey || e.metaKey) {
+      const newSelection = new Set(selectedIndices);
+      if (newSelection.has(index)) {
+        newSelection.delete(index);
+        if (newSelection.size === 0) newSelection.add(index);
+      } else {
+        newSelection.add(index);
+      }
+      setSelectedIndices(newSelection);
+      setLastSelectedIndex(index);
+    } else {
+      setSelectedIndices(/* @__PURE__ */ new Set([index]));
+      setLastSelectedIndex(index);
+    }
+    setActiveIndex(index);
+  };
   const handleSelectItem = (item) => {
     setSelectedItem(item);
     setSearchHistory((prev) => {
@@ -3535,16 +3581,22 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
     setSearchTerm("");
     setIsDropdownOpen(false);
   };
-  const handleConfirmImport = (sectionToImport = null) => {
-    const section = sectionToImport || itemSections[activeIndex];
-    if (!section) return;
+  const handleConfirmImport = () => {
+    if (selectedIndices.size === 0) return;
     const type = selectedItem._type;
     const itemId = selectedItem.id || selectedItem.ancestry_id;
-    if (section.id) {
-      const tag = `[[REF:${type}:${itemId}:${section.id}]]`;
-      onSelect(tag);
+    const indicesToImport = Array.from(selectedIndices).sort((a, b) => a - b);
+    const tagsToImport = [];
+    indicesToImport.forEach((idx) => {
+      const section = itemSections[idx];
+      if (section && section.id) {
+        tagsToImport.push(`[[REF:${type}:${itemId}:${section.id}]]`);
+      }
+    });
+    if (tagsToImport.length > 0) {
+      onSelect(tagsToImport);
     } else {
-      alert("Esta se\xE7\xE3o n\xE3o possui um ID \xFAnico salvo. Salve o node de origem primeiro.");
+      alert("Nenhuma se\xE7\xE3o v\xE1lida selecionada.");
     }
   };
   const renderSectionContent = (content) => {
@@ -3615,7 +3667,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
         /* @__PURE__ */ React4.createElement("div", { className: "truncate" }, /* @__PURE__ */ React4.createElement("div", { className: "text-sm font-medium text-slate-200 truncate" }, item.name), /* @__PURE__ */ React4.createElement("div", { className: "text-[10px] text-slate-500 uppercase tracking-wider" }, isNode ? ((_a = item.version_node) == null ? void 0 : _a.is_version) ? "Vers\xE3o" : "Node" : "Ancestralidade"))
       );
     }))), /* @__PURE__ */ React4.createElement("div", { className: "flex-1 flex flex-col bg-black/20 relative z-10" }, selectedItem ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pr-8" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full text-sm leading-relaxed text-slate-300 break-words whitespace-pre-wrap" }, itemSections.map((section, index) => {
-      const isActive = index === activeIndex;
+      const isSelected = selectedIndices.has(index);
+      const isFocused = index === activeIndex;
       const match = section.content.match(/^(\s*)([\s\S]*?)(\s*)$/);
       let leadingSpace = match ? match[1] : "";
       const bodyText = match ? match[2] : section.content;
@@ -3633,10 +3686,11 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
               refAssigned = true;
             }
           },
-          onClick: () => setActiveIndex(index),
+          onClick: (e) => handleSectionClick(index, e),
           className: `
                                                                 transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone
-                                                                ${isActive ? "bg-indigo-500/20 ring-1 ring-indigo-500/30" : "hover:bg-white/5"}
+                                                                ${isSelected ? "bg-indigo-500/30 ring-1 ring-indigo-500/50" : "hover:bg-white/5"}
+                                                                ${isFocused && !isSelected ? "ring-1 ring-white/20" : ""}
                                                             `
         },
         renderSectionContent(bodyText)
@@ -3657,8 +3711,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
               CodeBlock,
               {
                 content: part,
-                isActive,
-                onClick: () => setActiveIndex(index)
+                isActive: isSelected,
+                onClick: (e) => handleSectionClick(index, e)
               }
             )
           );
@@ -3668,7 +3722,7 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
           const isLastLine = lineIndex === lines.length - 1;
           const isEmptyLine = line.trim() === "";
           if (isEmptyLine) {
-            return /* @__PURE__ */ React4.createElement(React4.Fragment, { key: `${index}-${partIndex}-${lineIndex}` }, /* @__PURE__ */ React4.createElement("br", null));
+            return /* @__PURE__ */ React4.createElement("br", { key: `${index}-${partIndex}-${lineIndex}` });
           }
           return /* @__PURE__ */ React4.createElement(React4.Fragment, { key: `${index}-${partIndex}-${lineIndex}` }, /* @__PURE__ */ React4.createElement(
             "span",
@@ -3679,10 +3733,11 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
                   refAssigned = true;
                 }
               },
-              onClick: () => setActiveIndex(index),
+              onClick: (e) => handleSectionClick(index, e),
               className: `
-                                                                                        transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone
-                                                                                        ${isActive ? "bg-indigo-500/20 text-white ring-1 ring-indigo-500/30" : "hover:bg-white/5 hover:text-slate-200"}
+                                                                                        transition-colors duration-200 cursor-pointer rounded-md px-1 py-0.5 -mx-1 box-decoration-clone select-none
+                                                                                        ${isSelected ? "bg-indigo-500/30 text-white ring-1 ring-indigo-500/50 shadow-sm" : "hover:bg-white/5 hover:text-slate-200"}
+                                                                                        ${isFocused && !isSelected ? "ring-1 ring-white/20" : ""}
                                                                                     `
             },
             formatLineContent(line)
@@ -3696,7 +3751,8 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
         className: "flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-lg shadow-lg shadow-indigo-500/20 transition-all transform active:scale-95"
       },
       /* @__PURE__ */ React4.createElement(FiDownload, { className: "text-indigo-200" }),
-      "Importar Se\xE7\xE3o"
+      "Importar ",
+      selectedIndices.size > 1 ? `${selectedIndices.size} Se\xE7\xF5es` : "Se\xE7\xE3o"
     ))) : /* @__PURE__ */ React4.createElement("div", { className: "flex-1 flex flex-col items-center justify-center text-slate-500" }, /* @__PURE__ */ React4.createElement("div", { className: "w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-4" }, /* @__PURE__ */ React4.createElement(FiSearch, { size: 24, className: "opacity-50" })), /* @__PURE__ */ React4.createElement("p", null, "Selecione um item \xE0 esquerda para visualizar suas se\xE7\xF5es."))))
   ));
 }
@@ -3830,12 +3886,28 @@ function DescriptionEditModal({
     const uniqueSuffix = v4_default().slice(0, 4);
     insertAtCursor(`*/${nextNum}:${uniqueSuffix}/ `);
   };
-  const handleImportSelect = (tag) => {
-    const nextNum = getNextSectionNumber(text);
-    const uniqueSuffix = v4_default().slice(0, 4);
-    insertAtCursor(`
-*/${nextNum}:${uniqueSuffix}/ ${tag}
-`);
+  const handleImportSelect = (tags) => {
+    const tagsArray = Array.isArray(tags) ? tags : [tags];
+    const el = textareaRef.current;
+    if (!el) return;
+    let currentText = text;
+    let currentNum = getNextSectionNumber(currentText);
+    let blockToInsert = "";
+    tagsArray.forEach((tag) => {
+      const uniqueSuffix = v4_default().slice(0, 4);
+      blockToInsert += `
+*/${currentNum}:${uniqueSuffix}/ ${tag}
+`;
+      currentNum++;
+    });
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const newText = currentText.substring(0, start) + blockToInsert + currentText.substring(end);
+    el.value = newText;
+    el.setSelectionRange(start + blockToInsert.length, start + blockToInsert.length);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+    setText(newText);
     setIsImportModalOpen(false);
   };
   const handleMentionSelect = (node) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lv-x-software-house/x_view",
-    "version": "1.2.2-dev.11",
+    "version": "1.2.2-dev.13",
     "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
     "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
     "license": "UNLICENSED",