@retikolo/drag-drop-content-types 1.7.0 → 2.0.0

package/README.md

@@ -5,55 +5,73 @@
 
 ![dragdropcrop](https://user-images.githubusercontent.com/37687705/212884821-356ec68c-b71a-4b89-9e99-8a625f84cfbe.gif)
 
+Inspired by the [Drag-Drop-Content-Type Strapi 4 plugin](https://github.com/plantagoIT/strapi-drag-drop-content-type-plugin).
+Drag-drop feature completely rewritten to use dndkit because react-sortable-hoc is deprecated and not compatible with React 18.
+
+## 🔄 Strapi 5 Compatibility
+
+This version (2.0.0) has been updated for **Strapi 5** compatibility with the following changes:
+
+### Key Updates
+- **Removed Redux dependency**: Strapi 5 changed its internal architecture, so the Redux-based list view refresh has been replaced with a page reload mechanism that triggers when closing the sort modal after making changes
+- **Updated @dnd-kit**: Migrated from react-sortable-hoc to @dnd-kit for drag-and-drop functionality (React 18 compatible)
+- **Strapi 5 Admin API**: Updated to use new Strapi 5 admin hooks (`useFetchClient`, `useNotification`, `useAPIErrorHandler`)
+- **Improved UX**: You can now drag and reorder multiple items in one session - the page only refreshes once when you close the modal, preserving your changes
+
+### Known Considerations
+- After sorting items, the content manager list view refreshes when you close the sort modal to display the updated order
+- Uses Strapi 5's new Popover component with controlled state for better stability
+
+### Strapi 4 Compatibility
+If you are still using Strapi 4, you can use version 1.7.1 of this plugin, which is available on the `strapi4` branch.
+
 ## ⏳ Installation
 
+Install with NPM.
+```bash
+npm i @retikolo/drag-drop-content-types-strapi
+```
+Install with Yarn.
 ```bash
-# with npm
-npm i @retikolo/drag-drop-content-types
-# with yarn
-yarn add @retikolo/drag-drop-content-types
+yarn add @retikolo/drag-drop-content-types-strapi
 ```
 
 ## 🔧 Configuration
 
 ### In your config
-1. Add this to your `config/plugins.js` file (create it, if it doesn't exist yet):
+1. Add the following to your `config/plugins.ts` file. Create the file, if it doesn't exist.
 ```js
-module.exports = {
+export default () => ({
   // ...
   'drag-drop-content-types': {
     enabled: true
   }
-}
+})
 ```
-2. Run `npm run build` and (re)start the app
+2. Run `npm run build` and restart the app using `npm run develop`.
 
 ### In the app
-Go to `Settings` -> `Drag Drop Content Type` -> `Configuration`:
-* Specify how the rank field is called in your content-types. Default value is `rank`.
-* Add the `rank` fields to your content type. With the default value this would be `rank` (Number (Number format: integer)).
-* (Give permissions for the `rank` field to roles such as "Editor" if needed).
+1. Go to `Settings` → `Drag Drop Content Type` → `Configuration`.
+2. Specify the `Rank Field Name` used for sorting or leave the default field name `rank`.
+3. Add a `Number` field with `Name: myRankFieldName` and `Number format: integer` to the sortable _ContentType_.
+4. Configure the view of your _ContentType_ by adding `Default sort attribute → rank` and `Default sort order → ASC` to update the view after dragging.
+5. If needed: grant permissions for the `rank` field to your roles.
 
 #### Hints
-* Add "Default sort attribute" `rank`, "Default sort order" `ASC` and remove the `rank` attribute from the view using "Configure the view" button.
-* You can also set a `title` value that is displayed in the menu instead of the default.
-* If you want a second field to be displayed in the drag and drop menu, you can add s `subtitle` in the settings. The subtitle should either be:
-- A field containing a string or number or something like that.
-- It can be an object (like a relation), but it must have the `title` field specified in the settings (it won't recognize automatically!).
+* You can set a `title` value that will be displayed in the menu instead of the default field.
+* A second field can be displayed in the menu via the `subtitle` setting. It can be either a string-like field or an object such as a relation, that has a `title` field as configured in the settings.
+* You can enable webhooks to trigger something after updating the order.
 
 ### In your frontend
-Assuming you go with the default settings, you can make a request on the following url to get the ordered items:
+You can make a request in the frontend to get the ordered items. In this example the _ContentType_ is called `Foo` and ordered via the `rank` field. 
 
 ```
 http://localhost:1337/api/foo?sort=rank:asc
 ```
 
-## 🐞 Known issues
-Due to changes in the Strapi core, the plugin causes a full page reload after sorting. This is a known issue, and will be fixed ASAP if possible.
-
 ## 🤝 Contribute
 Feel free to fork and make pull requests to this plugin. All input is welcome - thanks for all contributions so far!
 
 
 ## ⭐️ Support
-I you like this project, please give it a star. Maybe this will help it getting integrated to strapi's core some day 😊.
+I you like this project, please give it a star ⭐️. Maybe this will help it getting integrated to strapi's core some day 😊.