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] 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',