From d90903980b0947d364594133997c505146736e96 Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Thu, 25 Jul 2024 15:10:42 +0800
Subject: [PATCH 1/2] feat: allow customising dnd indicator classname/style

---
 .changeset/modern-socks-retire.md                  | 6 ++++++
 packages/core/src/events/RenderEditorIndicator.tsx | 2 ++
 packages/core/src/interfaces/editor.ts             | 2 ++
 packages/utils/src/RenderIndicator.tsx             | 8 +++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-socks-retire.md

diff --git a/.changeset/modern-socks-retire.md b/.changeset/modern-socks-retire.md
new file mode 100644
index 000000000..f78074f6b
--- /dev/null
+++ b/.changeset/modern-socks-retire.md
@@ -0,0 +1,6 @@
+---
+'@craftjs/utils': patch
+'@craftjs/core': patch
+---
+
+Allow customising dnd indicator style/classname
diff --git a/packages/core/src/events/RenderEditorIndicator.tsx b/packages/core/src/events/RenderEditorIndicator.tsx
index 910a41ba0..e2ab13d45 100644
--- a/packages/core/src/events/RenderEditorIndicator.tsx
+++ b/packages/core/src/events/RenderEditorIndicator.tsx
@@ -35,6 +35,7 @@ export const RenderEditorIndicator = () => {
   }
 
   return React.createElement(RenderIndicator, {
+    className: indicatorOptions.className,
     style: {
       ...movePlaceholder(
         indicator.placement,
@@ -47,6 +48,7 @@ export const RenderEditorIndicator = () => {
         ? indicatorOptions.error
         : indicatorOptions.success,
       transition: indicatorOptions.transition || '0.2s ease-in',
+      ...(indicatorOptions.style ?? {}),
     },
     parentDom: indicator.placement.parent.dom,
   });
diff --git a/packages/core/src/interfaces/editor.ts b/packages/core/src/interfaces/editor.ts
index 114069c4e..742b792a4 100644
--- a/packages/core/src/interfaces/editor.ts
+++ b/packages/core/src/interfaces/editor.ts
@@ -23,6 +23,8 @@ export type Options = {
     error: string;
     transition: string;
     thickness: number;
+    className: string;
+    style: React.CSSProperties;
   }>;
   handlers: (store: EditorStore) => CoreEventHandlers;
   normalizeNodes: (
diff --git a/packages/utils/src/RenderIndicator.tsx b/packages/utils/src/RenderIndicator.tsx
index 3199ea266..609dbba00 100644
--- a/packages/utils/src/RenderIndicator.tsx
+++ b/packages/utils/src/RenderIndicator.tsx
@@ -3,12 +3,18 @@ import ReactDOM from 'react-dom';
 
 type RenderIndicatorProps = {
   style: React.CSSProperties;
+  className?: string;
   parentDom?: HTMLElement;
 };
 
-export const RenderIndicator = ({ style, parentDom }: RenderIndicatorProps) => {
+export const RenderIndicator = ({
+  style,
+  className,
+  parentDom,
+}: RenderIndicatorProps) => {
   const indicator = (
     <div
+      className={className}
       style={{
         position: 'fixed',
         display: 'block',

From 9572b112ad20baec12f22e9947748d9f55929178 Mon Sep 17 00:00:00 2001
From: Prev Wong <prevwong@gmail.com>
Date: Thu, 25 Jul 2024 15:14:37 +0800
Subject: [PATCH 2/2] chore: docs

---
 site/docs/api/Editor.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/docs/api/Editor.md b/site/docs/api/Editor.md
index f4e9bd489..515b20363 100644
--- a/site/docs/api/Editor.md
+++ b/site/docs/api/Editor.md
@@ -53,9 +53,9 @@ const App = () => {
 ```
 In the above example, every user element will now be wrapped in a black `div`.
 
-### Specifying the Drop Indicator colour
+### Customising the drag-and-drop indicator
 
-You could change the colours of the drag and drop indicators like so:
+You could also change the colours/style of the drag-and-drop indicator like so:
 
 ```jsx {6-9}
 import {Editor} from "@craftjs/core";
@@ -65,7 +65,11 @@ const App = () => {
     <Editor
       indicator={{
         'success': '#2d9d78', // green
-        'error': '#e34850' // red
+        'error': '#e34850', // red
+        'style': { // custom CSS properties
+          boxShadow: '...
+        },
+        'className': 'your-css-class' // custom CSS class
       }}
     >
       <Frame resolver={{Hero}}>