Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue May 27, 2024 · 1 comment
Labels

Comments

@55Cancri
Copy link

55Cancri commented May 27, 2024

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

@55Cancri 55Cancri added the bug label May 27, 2024
@kernelsoe
Copy link

kernelsoe commented Jun 2, 2024

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants