From 418dbee54dacbf9a2f1dbfd959fbe755a2df4f69 Mon Sep 17 00:00:00 2001
From: The Nguyen <6950941+treoden@users.noreply.github.com>
Date: Sun, 1 Sep 2024 17:31:50 +0700
Subject: [PATCH 1/3] Fix editor rows drag and drop issue

---
 .../components/common/form/fields/Editor.jsx  | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/evershop/src/components/common/form/fields/Editor.jsx b/packages/evershop/src/components/common/form/fields/Editor.jsx
index e0686f1c6..c183f84c5 100644
--- a/packages/evershop/src/components/common/form/fields/Editor.jsx
+++ b/packages/evershop/src/components/common/form/fields/Editor.jsx
@@ -57,7 +57,7 @@ export default function Editor({
   uploadApi,
   folderCreateApi
 }) {
-  const [draggable, setDragable] = React.useState(null);
+  const draggable = React.useRef(null);
   const [fileBrowser, setFileBrowser] = React.useState(null);
   const [rows, setRows] = React.useState(
     value
@@ -84,10 +84,6 @@ export default function Editor({
 
   React.useEffect(() => {
     async function initSwappable() {
-      if (draggable) {
-        draggable.destroy();
-      }
-
       const Swappable = await loadSwappable();
       // eslint-disable-next-line new-cap
       const swappable = new Swappable(document.querySelectorAll(`div#rows`), {
@@ -110,7 +106,11 @@ export default function Editor({
         }
         setRows((originRows) => {
           // Swap the source and destination in the rows array
-          const newRows = [...originRows];
+          const newRows = originRows.map((r) => {
+            const newRow = { ...r };
+            newRow.columns = r.columns.map((c) => ({ ...c }));
+            return newRow;
+          });
           const sourceIndex = newRows.findIndex((r) => r.id === source);
           const destinationIndex = newRows.findIndex(
             (r) => r.id === destination
@@ -121,10 +121,10 @@ export default function Editor({
           return newRows;
         });
       });
-      setDragable(swappable);
+      draggable.current = swappable;
     }
     initSwappable();
-  }, [rows]);
+  }, []);
 
   React.useEffect(() => {
     const initEditors = async () => {
@@ -200,16 +200,10 @@ export default function Editor({
   }, []);
 
   const removeRow = (rowId) => {
-    if (draggable) {
-      draggable.destroy();
-    }
     setRows(rows.filter((i) => i.id !== rowId));
   };
 
   const addRow = (row) => {
-    if (draggable) {
-      draggable.destroy();
-    }
     setRows(rows.concat(row));
   };
 

From ce5e754333aa981acae1dbae1340d983420d5063 Mon Sep 17 00:00:00 2001
From: The Nguyen <6950941+treoden@users.noreply.github.com>
Date: Sun, 1 Sep 2024 17:50:49 +0700
Subject: [PATCH 2/3] Fix editor rows drag and drop issue

---
 packages/evershop/src/components/common/form/fields/Editor.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/evershop/src/components/common/form/fields/Editor.jsx b/packages/evershop/src/components/common/form/fields/Editor.jsx
index c183f84c5..292e7df7c 100644
--- a/packages/evershop/src/components/common/form/fields/Editor.jsx
+++ b/packages/evershop/src/components/common/form/fields/Editor.jsx
@@ -282,6 +282,7 @@ export default function Editor({
         type="hidden"
         value={JSON.stringify(
           rows.map((row) => ({
+            id: row.id,
             size: row.size,
             columns: row.columns.map((column) => ({
               id: column.id,

From 58cd3eb9d47a27b6c2515d5c2436a3322655ca79 Mon Sep 17 00:00:00 2001
From: The Nguyen <6950941+treoden@users.noreply.github.com>
Date: Sun, 1 Sep 2024 19:27:28 +0700
Subject: [PATCH 3/3] Improve the logo styling

---
 .../evershop/src/components/frontStore/widgets/BasicMenu.jsx | 2 +-
 .../evershop/src/modules/cms/pages/frontStore/all/Logo.jsx   | 2 +-
 .../evershop/src/modules/cms/pages/frontStore/all/Logo.scss  | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/evershop/src/components/frontStore/widgets/BasicMenu.jsx b/packages/evershop/src/components/frontStore/widgets/BasicMenu.jsx
index b0eaed6f4..bbd5b8c51 100644
--- a/packages/evershop/src/components/frontStore/widgets/BasicMenu.jsx
+++ b/packages/evershop/src/components/frontStore/widgets/BasicMenu.jsx
@@ -55,7 +55,7 @@ export default function BasicMenu({
                     {item.name}
                   </a>
                   {item.children.length > 0 && (
-                    <ul className="md:absolute left-0 top-full mt-0 md:mt-3 w-48 bg-white md:shadow-lg rounded-md md:opacity-0 md:group-hover:opacity-100 md:group-hover:translate-y-0 transform transition-all duration-300 ease-in-out min-w-full md:min-w-[250px] z-30 border-t-4">
+                    <ul className="md:absolute left-0 top-full mt-0 md:mt-3 w-48 bg-white md:shadow-lg rounded-md md:opacity-0 md:group-hover:opacity-100 md:group-hover:translate-y-0 transform transition-all duration-300 ease-in-out min-w-full md:min-w-[250px] z-30 md:border-t-4">
                       {item.children.map((subItem, subIndex) => (
                         <li key={subIndex}>
                           <a
diff --git a/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.jsx b/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.jsx
index 0abfd1bb0..89533f58b 100644
--- a/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.jsx
+++ b/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.jsx
@@ -8,7 +8,7 @@ export default function Logo({
   }
 }) {
   return (
-    <div className="logo ml-9 md:ml-0 flex justify-center">
+    <div className="logo md:ml-0 flex justify-center items-center">
       {src && (
         <a href="/" className="logo-icon">
           <img src={src} alt={alt} width={width} height={height} />
diff --git a/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.scss b/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.scss
index 718b12ec1..f74da3c85 100644
--- a/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.scss
+++ b/packages/evershop/src/modules/cms/pages/frontStore/all/Logo.scss
@@ -1,9 +1,8 @@
 .logo {
   a.logo-icon {
     svg {
-      width: 3rem;
-      height: 3rem;
+      width: 4rem;
+      height: 4rem;
     }
-    margin-right: 0.5rem;
   }
 }