ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.29k stars 3.21k forks source link

Dnd-kit not working with slatejs: Error: [Slate] initialValue is invalid! Expected a list of elements but got: undefined in React Slate Editor #5655

Open 55Cancri opened 1 month ago

55Cancri commented 1 month ago

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

kernelsoe commented 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>