Open 55Cancri opened 1 month ago
Haven't look into details but recently, we had implemented dnd-kit with slate (v103). Here's the working snippet.
<Slate editor={editor} initialValue={values} onChange={handleEditorChange}>
<DndContext
onDragMove={() => {
setDragMoveCount((prev) => prev + 1)
}}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
onDragCancel={handleDragCancel}
>
<SortableContext items={items} strategy={verticalListSortingStrategy}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
placeholder="Enter some rich text…"
spellCheck
className="outline-none"
onKeyDown={(event) => {
for (const hotkey in HOTKEYS) {
if (isHotkey(hotkey, event)) {
event.preventDefault()
const mark = HOTKEYS[hotkey as keyof typeof HOTKEYS]
toggleMark(editor, mark)
}
}
}}
/>
</SortableContext>
{createPortal(
<DragOverlay adjustScale={false}>
{activeElement && (
<DragOverlayContent
element={activeElement as CustomElement}
renderLeaf={renderLeaf}
HOTKEYS={HOTKEYS}
/>
)}
</DragOverlay>,
document.body
)}
</DndContext>
</Slate>
Having issue why trying to run dnd kit with slate. It works as of version 78. However it is now version 103. Here is the working codesandbox
https://codesandbox.io/p/sandbox/slate-dnd-kit-styled-7qjxm3?file=%2Fpackage.json
Just update the slate dependencies to the latest and watch it break