feat: allow customising dnd indicator classname/style

prevwong · Jul 25, 2024 · 2186c83 · 2186c83
1 parent 46eb68e
commit 2186c83
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/modern-socks-retire.md 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
@@ -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
@@ -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
@@ -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',