How to configure drag & drop

[templth]

Hello,

I wonder how to configure the drag & drop feature to move blocks.

Thanks very much,
Thierry

[zbeyens]

You can find the documented options there https://slate-plugins-api.netlify.app/globals.html#getselectableelement

[templth]

Hello @zbeyens,

Thanks very much for your answer!

Yes, I saw getSelectableElement and also the dnd.stories.tsx file. I implement something similar:

import {
  pipe,
  DEFAULTS_ALIGN,
  DEFAULTS_BLOCKQUOTE,
  DEFAULTS_BOLD,
  DEFAULTS_CODE,
  DEFAULTS_CODE_BLOCK,
  DEFAULTS_HEADING,
  DEFAULTS_HIGHLIGHT,
  DEFAULTS_IMAGE,
  DEFAULTS_ITALIC,
  DEFAULTS_KBD,
  DEFAULTS_LINK,
  DEFAULTS_LIST,
  DEFAULTS_MEDIA_EMBED,
  DEFAULTS_MENTION,
  DEFAULTS_PARAGRAPH,
  DEFAULTS_SEARCH_HIGHLIGHT,
  DEFAULTS_STRIKETHROUGH,
  DEFAULTS_SUBSUPSCRIPT,
  DEFAULTS_TABLE,
  DEFAULTS_TODO_LIST,
  DEFAULTS_UNDERLINE,
  ELEMENT_H1,
  ELEMENT_H2,
  ELEMENT_H3,
  ELEMENT_H4,
  ELEMENT_H5,
  ELEMENT_H6,
  setDefaults,
  ParagraphPlugin,
  UnderlinePlugin,
  SoftBreakPlugin,
  AlignPlugin,
  BalloonToolbar,
  BlockquotePlugin,
  BoldPlugin,
  CodeBlockPlugin,
  CodePlugin,
  decorateSearchHighlight,
  EditablePlugins,
  ExitBreakPlugin,
  getSelectableElement,
  HeadingPlugin,
  HeadingToolbar,
  HighlightPlugin,
  ImagePlugin,
  ItalicPlugin,
  LinkPlugin,
  ListPlugin,
  ResetBlockTypePlugin,
  ResetBlockTypePluginOptions,
  isBlockAboveEmpty,
  isSelectionAtBlockStart
} from '@udecode/slate-plugins';

const defaultOptions = {
  ...setDefaults(DEFAULTS_PARAGRAPH, {}),
  ...setDefaults(DEFAULTS_MENTION, {}),
  ...setDefaults(DEFAULTS_BLOCKQUOTE, {}),
  ...setDefaults(DEFAULTS_CODE_BLOCK, {}),
  ...setDefaults(DEFAULTS_LINK, {}),
  ...setDefaults(DEFAULTS_IMAGE, {}),
  ...setDefaults(DEFAULTS_MEDIA_EMBED, {}),
  ...setDefaults(DEFAULTS_TODO_LIST, {}),
  ...setDefaults(DEFAULTS_TABLE, {}),
  ...setDefaults(DEFAULTS_LIST, {}),
  ...setDefaults(DEFAULTS_HEADING, {}),
  ...setDefaults(DEFAULTS_ALIGN, {}),
  ...setDefaults(DEFAULTS_BOLD, {}),
  ...setDefaults(DEFAULTS_ITALIC, {}),
  ...setDefaults(DEFAULTS_UNDERLINE, {}),
  ...setDefaults(DEFAULTS_STRIKETHROUGH, {}),
  ...setDefaults(DEFAULTS_CODE, {}),
  ...setDefaults(DEFAULTS_KBD, {}),
  ...setDefaults(DEFAULTS_SUBSUPSCRIPT, {}),
  ...setDefaults(DEFAULTS_HIGHLIGHT, {}),
  ...setDefaults(DEFAULTS_SEARCH_HIGHLIGHT, {}),
};

const draggableComponentOptions = [
  // { ...defaultOptions.p, level: 1 },
  defaultOptions.p,
  defaultOptions.blockquote,
  defaultOptions.todo_li,
  defaultOptions.h1,
  defaultOptions.h2,
  defaultOptions.h3,
  defaultOptions.h4,
  defaultOptions.h5,
  defaultOptions.h6,
  defaultOptions.img,
  defaultOptions.link,
  defaultOptions.ol,
  defaultOptions.ul,
  defaultOptions.table,
  defaultOptions.media_embed,
  defaultOptions.code_block,
].map(
  ({
    type,
    level,
    component,
    ...options
  }: {
    type: string;
    level?: number;
    component: any;
  }) => [
    type,
    {
      ...options,
      component: getSelectableElement({
        component,
        level,
        dragIcon: (
          <DragIndicator
            style={{
              width: 18,
              height: 18,
              color: 'rgba(55, 53, 47, 0.3)',
            }}
          />
        ),
        styles: {
          blockAndGutter: {
            padding: '4px 0',
          },
          blockToolbarWrapper: {
            height: '1.5em',
          },
        },
      }),
      rootProps: {
        styles: {
          root: {
            margin: 0,
            lineHeight: '1.5',
          },
        },
      },
    },
  ]
);

const options = {
  ...defaultOptions,
  ...Object.fromEntries(draggableComponentOptions),
};

const resetBlockTypesCommonRule = {
  types: [options.bold.type, options.code_block.type, options.todo_li.type],
  defaultType: options.p.type,
};

export const headingTypes = [
  ELEMENT_H1,
  ELEMENT_H2,
  ELEMENT_H3,
  ELEMENT_H4,
  ELEMENT_H5,
  ELEMENT_H6,
];

export const optionsResetBlockTypes: ResetBlockTypePluginOptions = {
  rules: [
    {
      ...resetBlockTypesCommonRule,
      hotkey: 'Enter',
      predicate: isBlockAboveEmpty,
    },
    {
      ...resetBlockTypesCommonRule,
      hotkey: 'Backspace',
      predicate: isSelectionAtBlockStart,
    },
  ],
};

const plugins = [
  withPlaceholders({
    types: ['paragraph']
  }),
  renderPlaceholders(),
  ParagraphPlugin(options),
  BlockquotePlugin(options),
  HeadingPlugin(options),
  ImagePlugin(options),
  LinkPlugin(options),
  ListPlugin(options),
  CodeBlockPlugin(options),
  AlignPlugin(options),
  BoldPlugin(options),
  CodePlugin(options),
  ItalicPlugin(options),
  HighlightPlugin(options),
  UnderlinePlugin(options),
  ResetBlockTypePlugin(optionsResetBlockTypes),
  SoftBreakPlugin({
    rules: [
      { hotkey: 'shift+enter' },
      {
        hotkey: 'enter',
        query: {
          allow: [
            options.code_block.type,
            options.blockquote.type,
            options.td.type,
            'sql'
          ],
        },
      },
    ],
  }),
  ExitBreakPlugin({
    rules: [
      {
        hotkey: 'mod+enter',
      },
      {
        hotkey: 'mod+shift+enter',
        before: true,
      },
      {
        hotkey: 'enter',
        query: {
          start: true,
          end: true,
          allow: headingTypes,
        },
      },
    ],
  })
];

cosnt TestEditor = () => {
  const [value, setValue] = useState<any>([
    {
      type: options.h1.type,
      data: {
        placeholderText: "my custom placeholder text"
      },
      children: [{ text: 'Some title' }],
    },
    {
      type:  options.p.type,
      data: {
        placeholderText: "my custom placeholder text"
      },
      children: [{ text: 'A line of text in a paragraph.' }],
    }
  ]);

  return (
    <DndProvider backend={HTML5Backend}>
      <Slate
        editor={editor}
        value={value}
        onChange={newValue => setValue(newValue)}
      >
        <EditablePlugins
          style={{
            padding: 20,
          }}
          plugins={plugins}
          placeholder="Enter some text..." />
      </Slate>
    </DndProvider>
  );
};

The drag works but I can't drop block. Also SoftBreakPlugin and ExitBreakPlugin don't work as expected. I should have missed something.

Thierry

[zbeyens]

Check this working sandbox for soft break and exit break, you should set the level option in the rules if you're value structure is different

[templth]

Thanks @zbeyens ! It works for soft break and exit break... It remains the problem on drag & drop...

[zbeyens]

Can you reproduce it on a sandbox so I can debug it?

[templth]

Here is a sandbox you can try: https://codesandbox.io/s/slate-plugins-reproductions-forked-f1nog?file=/index.tsx. As you can there is no drop line so the drag block can't be dropped...

[templth]

@zbeyens I dig a bit into code and I think the problem comes from ids on nodes because I got dragId and hoverId null within the getHoverDirection method.

I also saw that into the dnd.stories.tsx file:

  
  const setNodeId = (nodes: any[]) => {
    let id = 10000;
    nodes.forEach((node) => {
      const children = node.children as any[];
      children?.forEach((block) => {
        block.id = id;
        id++;
      });
    });
  };
  
  setNodeId(initialValue);

[zbeyens]

Yes you need to have ids on your initial nodes, then use a plugin like withNodeID to auto-generate ids on nodes