feat: allow customising dnd indicator classname/style (#683)

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

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
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',

diff --git 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}}>