Drag list item

[linonetwo]

List level dragging and drop to reorder list items.

Currently, the list item can't be dragged. How to modify the list plugin or dnd plugin to enable this?

2022-04-13.22.57.31.mov

[linonetwo]

Simply delete

    {
      keys: [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL],
      level: 0,
    },

This limits it only show handle on level 0.

And replace it with:

    {
      // only element that registered keys here will have dnd grabber
      keys: [ELEMENT_LI],
    },

[linonetwo]

But this will generate tree like this: bare li on the root

We need a normalization to recreate its parent, and may need li contain information about its parent.

@zbeyens do you think there is a better solution? I'm working on this. I'm very curious about how Notion handles this.

[linonetwo]

my attempt:

1. allow li drag, not ul/ol

    {
      key: ELEMENT_LI,
    },

2. when drag, assign parentType to the dnd item

export const useDragBlock = <V extends Value>(editor: TEditor<V>, element: EElement<V>, path: Path) => {
  return useDrag(
    () => ({
      type: 'block',
      item(): DragItemWithParent {
        editor.isDragging = true;
        document.body.classList.add('dragging');
        const parentNode = Editor.above(editor as Editor, { at: path })?.[0] as EElement<V> | undefined;
        return { id: element.id as string, type: element.type, parentType: parentNode?.type };
      },

3. when drop, wrap li with ol/li based on parentType

  return useDrop({
    accept: 'block',
    drop: (dragItem: DragItemBlock, monitor: DropTargetMonitor) => {

...

        const to = before ? dropPath : Path.next(dropPath);

        withoutNormalizing(editor, () => {
          Transforms.moveNodes(editor as ReactEditor, {
            at: dragPath,
            to,
          });
          postDropNormalize(editor, dragItem, to);
        });


import { DragItemBlock, TReactEditor, Value } from '@udecode/plate';
import { Path, Transforms } from 'slate';
import { ReactEditor } from 'slate-react';
import type { DragItemWithParent } from './useDragBlock';

export function postDropNormalize<V extends Value>(editor: TReactEditor<V>, dragItem: DragItemBlock, path: Path): void {
  if ('parentType' in dragItem) {
    const dragItemWithParent = dragItem as DragItemWithParent;
    if (dragItemWithParent.type === 'li' && (dragItemWithParent.parentType === 'ol' || dragItemWithParent.parentType === 'ul')) {
      Transforms.wrapNodes(editor as ReactEditor, { type: dragItemWithParent.parentType }, { at: path });
    }
  }
}

[linonetwo]

@zbeyens I know, you just omit the plate-list plugin. But without it, pasting list will resulted in plain text:

copy from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4

So if you are using @udecode/plate-indent + @udecode/plate-indent-list alone, are you using additional normalization method?

[zbeyens]

There is no html deserializer yet for it but that should be feasible.

[zbeyens]

I didn't make the announcement yet but you can already play with https://platejs.org

Enjoy the new docs 😁 (Not yet released – CLI is WIP)

[linonetwo]

I see, the new doc is very clean and clear, looking forward to its full completion and announcement!

[linonetwo]

There is no html deserializer yet for it but that should be feasible.

I see, I may take time to build one. And I may write a (simpler) wikitext deserializer first to learn how to do it first.

[linonetwo]

In "@udecode/plate-ui-dnd": "21.3.2", "@udecode/plate-list": "21.3.2", :

  {
    // allow li drag, not ul/ol, because ol/ul will move entire list tree. While user might just want to move a single line of li.
    keys: [ELEMENT_LI /* , ELEMENT_OL, ELEMENT_UL */],
    draggableProps: {
      styles: {
        // fix list item mark (dot on the left) covered by drag handle
        gutterLeft: { transform: 'translateX(-200%)' },
        block: {
          // fix list item mark (dot on the left) not visible
          overflow: 'visible',
        },
      },
    },
    level: null,
  },

This solve the drag handle invisible bug on list item, but still need to solve wrap parent issue:

#1491 (comment)

[linonetwo]

My serialization target (wikitext) don't have indent support, so I won't be able to use indent-list, I will still use normal list plugin instead.

So I may need an API to allow passing in a postDropNormalize function to dnd plugin, will that be possible? @zbeyens

An example normalization function is as simple as

import { DragItemNode } from '@udecode/plate-dnd';
import type { Value } from '@udecode/slate';
import type { TReactEditor } from '@udecode/slate-react';
import { Path, Transforms } from 'slate';
import type { ReactEditor } from 'slate-react';

export function postDropNormalize<V extends Value>(editor: TReactEditor<V>, dragItem: DragItemNode, path: Path): void {
  if ('parentType' in dragItem) {
    const dragItemWithParent = dragItem;
    if (dragItemWithParent.type === 'li' && (dragItemWithParent.parentType === 'ol' || dragItemWithParent.parentType === 'ul')) {
      // @ts-expect-error Object literal may only specify known properties, and 'type' does not exist in type 'BaseElement'.ts(2345)
      Transforms.wrapNodes(editor as ReactEditor, { type: dragItemWithParent.parentType }, { at: path });
    }
  }
}

I just need an API to pass it in (instead of fork & modify the dnd plugin), thanks.

Or can I PR to add this function to this codebase?

[zbeyens]

Sure

[linonetwo]

I managed to use this postDropNormalize by putting it in every element's draggableProps.onDropHandler

tiddly-gittly/slate-write@bbe85df (If someone need the same feature, can copy from here)

But I need this to run after drop. Currently I use a setTimetout as a workaround, but I may need to add a afterDropHandler to the dnd plugin by a PR.