how to got multi-line ordered-list or bullet-list

[SunnyCheung-cp]

When we type three lines of text and select ordered-list or bullet-list, we only got one list, and we can't remove the list
Can we do it like github?

iShot_2023-09-28_16.38.42.mp4

iShot_2023-09-28_16.36.50.mp4

[SunnyCheung-cp]

I'm trying to use listItemSchema, but it doesn't work

export const customWrapBulletCommand = $command('CustomWrapBullet', ctx => () => {
  return wrapIn(listItemSchema.type(ctx), { listType: 'bullet' })
})

[zgrybus]

@SunnyCheung-cp You need to call liftListItem.
Feel free to take a look at this code: https://github.com/DareData/notion-style-editor/blob/main/src/lib/components/MenuBar/hooks/useListWrap.tsx
Example page: https://daredata.github.io/notion-style-editor/

[ahamelers]

The prosemirror basic example (https://prosemirror.net/examples/basic/) has this functionality. I tried to discover the difference between the implementations.

It turns out that the milkdown commands wrapInOrderedListCommand and wrapInBulletListCommand are using the prosemirror wrapIn command, while the prosemirror implementation linked is using the wrapInList command!

If you create your own alternative commands from the correct prosemirror one, the new commands work perfectly to set 1 list item per selected p!

import {Editor} from '@milkdown/core';
import {commonmark, bulletListSchema, orderedListSchema} from '@milkdown/preset-commonmark';
import {gfm} from '@milkdown/preset-gfm';
import {wrapInList} from "@milkdown/prose/schema-list";
import {$command} from '@milkdown/utils';

export const bulletWrapCommand = $command('BulletListWrap', (ctx) => () => wrapInList(bulletListSchema.type(ctx)));
export const orderWrapCommand = $command('OrderedListWrap', (ctx) => () => wrapInList(orderedListSchema.type(ctx)));

const editor = Editor
    .make()
    .config((ctx) => {
      [...]
    })
    .use([commonmark, gfm])
    .use([bulletWrapCommand, orderWrapCommand])
    .create()