From d8d9184f3f5dda40b3fa4b49efecde4cdbcfd73f Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 30 Jun 2023 17:21:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BB=84=E4=BB=B6=E6=A0=91?=
 =?UTF-8?q?=E4=B8=8A=E7=9A=84=E8=8A=82=E7=82=B9=E6=8B=96=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E4=B8=AD=E5=87=BA=E9=94=99=EF=BC=8C=E5=BA=94=E8=AF=A5?=
 =?UTF-8?q?=E4=B8=8D=E5=93=8D=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #519
---
 .../src/layouts/sidebar/ComponentListPanel.vue    |  7 +++----
 packages/editor/src/layouts/workspace/Stage.vue   | 15 +++++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index bd1265bb..f26d106b 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -83,14 +83,13 @@ const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
-      'data',
+      'text/html',
       serialize({
         name: text,
         type,
         ...data,
-      }).replace(/"(\w+)":\s/g, '$1: '),
+      }),
     );
   }
 };
@@ -121,6 +120,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+  timeout = stage.value.delayedMarkContainer(e);
 };
 </script>
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 2d042afd..167feede 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -146,9 +146,8 @@ const contextmenuHandler = (e: MouseEvent) => {
 
 const dragoverHandler = (e: DragEvent) => {
   e.preventDefault();
-  if (e.dataTransfer) {
-    e.dataTransfer.dropEffect = 'move';
-  }
+  if (!e.dataTransfer) return;
+  e.dataTransfer.dropEffect = 'move';
 };
 
 const dropHandler = async (e: DragEvent) => {
@@ -164,7 +163,15 @@ const dropHandler = async (e: DragEvent) => {
 
   if (e.dataTransfer && parent && stageContainer.value && stage) {
     const parseDSL = getConfig('parseDSL');
-    const config = parseDSL(`(${e.dataTransfer.getData('data')})`);
+
+    const data = e.dataTransfer.getData('text/html');
+
+    if (!data) return;
+
+    const config = parseDSL(`(${data})`);
+
+    if (!config) return;
+
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();