update editor

src/trash/editorTable.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import {
   DndContext,
   closestCenter,
@@ -14,13 +14,13 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { BiCopy, BiDotsVertical, BiX } from "react-icons/bi";
+import { BiCopy, BiDotsVerticalRounded, BiX } from "react-icons/bi";
 import {
   DengiButton,
   DengiYesOrNoDialog,
   LoadingSpinner,
 } from "./trash-components";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence, LayoutGroup } from "motion/react";
 import {
   BiCheck,
   BiPlus,
@@ -145,7 +145,11 @@ const INITIAL_DATA = [
 ];
 
 function TableInput(props) {
-  return props.useinput ? <input {...props} /> : <textarea {...props} />;
+  return props.useinput ? (
+    <input {...{ ...props, useinput: undefined }} />
+  ) : (
+    <textarea {...{ ...props, useinput: undefined }} />
+  );
 }
 
 function SortableRow({
@@ -178,7 +182,7 @@ function SortableRow({
       ref={setNodeRef}
       style={style}
       className={`${
-        pickmeMode ? "bg-pink-500/35" : "bg-zinc-900"
+        pickmeMode ? "bg-pink-900/35" : "bg-zinc-800/35"
       } bg-grain rounded-lg mb-2`}
     >
       <div className="flex flex-col gap-2">
@@ -205,24 +209,24 @@ function SortableRow({
             />
           ))}
         </div>
-        <span className="w-[98%] mx-auto h-[1px] bg-zinc-500" />
         <div className="flex justify-end w-full">
+          <div
+            {...attributes}
+            {...listeners}
+            className="min-w-12 min-h-12 transition-colors hover:bg-zinc-200 flex items-center justify-center cursor-move touch-none select-none hover:text-black font-black text-white rounded-bl-xl rounded-tr  -xl  "
+          >
+            <BiDotsVerticalRounded size={24} />
+          </div>
+          <div className="w-full"></div>
           <button
             onClick={() => {
               onDuplicate(item.id);
               trigger([{ duration: 25 }], { intensity: 0.7 });
             }}
-            className="min-w-12 min-h-12 transition-colors bg-zinc-600/20 text-zinc-400 hover:bg-zinc-600/40 hover:text-zinc-300  flex items-center justify-center rounded-l-md"
+            className="min-w-12 min-h-12 transition-colors text-zinc-400 hover:bg-zinc-600/40 hover:text-zinc-300  flex items-center justify-center rounded-l-md"
           >
             <BiCopy size={20} />
           </button>
-          <div
-            {...attributes}
-            {...listeners}
-            className="min-w-12 min-h-12 transition-colors hover:bg-zinc-200 flex items-center justify-center cursor-move touch-none select-none hover:text-black font-black text-white  bg-zinc-700/60"
-          >
-            <BiDotsVertical size={24} />
-          </div>
           <button
             onClick={() => {
               onDelete(item.id);
@@ -232,7 +236,7 @@ function SortableRow({
                 { delay: 40, duration: 40, intensity: 0.9 },
               ]);
             }}
-            className="min-w-12 min-h-12 transition-colors bg-red-600/20 text-red-400 hover:bg-red-600/40 hover:text-red-300 active:bg-red-600/60 flex items-center justify-center rounded-r-md"
+            className="min-w-12 min-h-12 transition-colors   text-red-400 hover:bg-red-600/40 hover:text-red-300 active:bg-red-600/60 flex items-center justify-center rounded-r-md"
           >
             <BiX size={24} />
           </button>
@@ -388,7 +392,7 @@ export function TableEditor({
     // Create new item with unique id
     const newItem = {
       ...itemToDuplicate,
-      id: Date.now(), // or use uuid() or any unique id generator
+      id: String(Date.now()), // or use uuid() or any unique id generator
     };
 
     // Insert the new item right after the duplicated item
@@ -462,6 +466,9 @@ export function TableEditor({
   };
   const handlePublish = () => {
     if (isLoading) return;
+    Object.keys(updateTimeoutRef.current).forEach((i) => {
+      clearTimeout(updateTimeoutRef.current[i]);
+    });
     setUndoItems([]);
     setRedoItems([]);
     console.log(convertEditorToApi(items));
@@ -483,7 +490,7 @@ export function TableEditor({
   };
 
   const { trigger } = useWebHaptics();
-  const handleDragOver = (ev) => {
+  const handleDragOver = () => {
     trigger([{ duration: 25 }], { intensity: 0.7 });
   };
 
@@ -493,7 +500,7 @@ export function TableEditor({
       <div>
         <DengiYesOrNoDialog
           content={{
-            message: "ВСЁ БУДЕТ УДАЛЕНО! продолжить?",
+            message: "запись в базе данных будет удалена! продолжить?",
             yesBtn: "да",
             noBtn: "нет",
             yesIcon: <BiTrash />,
@@ -558,7 +565,7 @@ export function TableEditor({
           <div>
             <div className="flex w-full justify-around items-center mb-2">
               {columns.map((col, i) => (
-                <>
+                <Fragment key={col.key + i}>
                   <div
                     key={col.key + i}
                     className={
@@ -581,7 +588,7 @@ export function TableEditor({
                       pickmeMode ? "bg-pink-600" : "bg-zinc-600"
                     } -rotate-45 last:hidden`}
                   />
-                </>
+                </Fragment>
               ))}
             </div>
             <div className="max-w-3xl mx-auto">
@@ -599,7 +606,11 @@ export function TableEditor({
                     <AnimatePresence mode={items.length > 0 ? "sync" : "wait"}>
                       {items.map((item) => (
                         <motion.div
-                          initial={{ x: -15, filter: "blur(5px)", opacity: 0 }}
+                          initial={{
+                            x: -15,
+                            filter: "blur(5px)",
+                            opacity: 0,
+                          }}
                           animate={{ x: 0, filter: "blur(0px)", opacity: 1 }}
                           exit={{ x: 15, filter: "blur(5px)", opacity: 0 }}
                           key={item.id}
@@ -662,13 +673,13 @@ export function TableEditor({
             <LoadingSpinner size={35} />
           </div>
         )}
-        <motion.div layout="position" className="flex w-full justify-end gap-2">
+        <motion.div className="flex w-full justify-end gap-2 fixed pr-20 bottom-2 left-0">
           <DengiButton
             onClick={handleDeleteAll}
             className="border-red-600! md:not-disabled:not-hover:border-red-400!"
           >
             <BiTrash />
-            удалить всё
+            удалить из бд
           </DengiButton>
           <DengiButton onClick={handleAddRow}>
             <BiPlus />