addListNodes

1

I try:

const mySchema = new Schema({
  nodes: addListNodes(baseSchema.nodeSpec, "paragraph block*", "block"),
  marks: baseSchema.markSpec
})

However lists do not behave like expected. Mainly pressing enter does not start a new list item at the same indentation as the current one, or a new one with a subsequent number for a numbered list.

How can I get the usual wysiwyg editor list behaviour ? (ie the one in gmail/discource/etc)

Is there any sample/demo for this ?

A general comment - it would really be incredibly useful to have a demo that gives all the functionality of a basic common WYSIWYG editor as most users would expect it from using widespread platforms such as gmail etc. This includes things like marks persisting after pressing enter, new lists items created when pressing enter (but not created on shift+enter), menu buttons for indenting in and out, and the menu buttons getting disabled instead of disappearing when not relevant.

This will give a basic fully workable starting point to extend/change from. I think a lot of devs trying to use PM will struggle reinventing the wheel to get above etc working. Or if they have already would be great if they can share the code.

Thanks!

2

Take a look at the commands exported by the prosemirror-schema-list module.

3

Do you mean writing a keymap that connects Enter to splitListItem ?

4

I see in keymap.js

  if (type = schema.nodes.list_item) {
    bind("Enter", splitListItem(type))
    bind("Mod-[", liftListItem(type))
    bind("Mod-]", sinkListItem(type))
  }

but none of them gets called in my case

I use:

const mySchema = new Schema({
  nodes: addListNodes(baseSchema.nodeSpec, "paragraph block*", "block"),
  marks: baseSchema.markSpec
})

let state = EditorState.create({
		doc: DOMParser.fromSchema(schema).parse(''),
		plugins: [
			keymap({ 
				"Enter": chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockKeepMarks),
		})].concat(
			exampleSetup({
				schema, history: false
		})).concat([
			history({
				preserveItems: true
			}),
			collab({
				version: 0,
				clientID
			})
		])
	});
5

You’re putting your custom keymap in the pluginlist before exampleSetup, which will cause it to take precedence over the keys in there. Since splitBlockKeepMarks will match when you press enter in a list item, the binding added by the example setup never gets called.

6

ok thx

ended up with:

"Enter": chainCommands(splitListItem(schema.nodes.list_item), newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockKeepMarks),

which works … is this the right way ?

2 Likes
7

Sure, that seems solid