Using prosemirror-schema-list for list commands

1

Hello,

I updated my interpretation of the tooltip / menu plugins to include list commands, but facing some issues:

// Buttons in toolbox. They have a command assignment (command), and DOM representation description (dom).
let toolboxButtons = [
  {command: toggleMark(editorSchema.marks.strong), dom: toolboxButton(null, "bold")},
  {command: toggleMark(editorSchema.marks.em), dom: toolboxButton(null, "italic")},
  {command: setBlockType(editorSchema.nodes.paragraph), dom: toolboxButton("p", null)},
  heading(1), heading(2), heading(3),
  {command: wrapInList(editorSchema.nodes.bullet_list), dom: toolboxButton(null, "list-bulleted")},
  {command: wrapInList(editorSchema.nodes.ordered_list), dom: toolboxButton(null, "list-numbered")},
  {command: wrapIn(editorSchema.nodes.blockquote), dom: toolboxButton(null, "quote")}
];

I used this as the schema definition and editor:

export const editorSchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
});

//- Editor
let content = document.getElementById("content")
let state = EditorState.create({
  doc: DOMParser.fromSchema(editorSchema).parse(content),
  editorSchema,
  plugins: [
    history(),
    keymap({"Mod-z": undo, "Mod-y": redo}),
    keymap(baseKeymap),
    toolboxPlugin({schema: editorSchema})
  ]
})

Mainly, a switch from simple schema to schema with list nodes.

Issue #1: As soon as I pass this new schema to commands, all of them stop working except the toggleMark. What am I missing? They work with the simple schema.

Issue #2: I re-defined the same schema variable in the plugin file as I could not find a good way to pass the schema from Editor → toolboxPlugin → commands array. Is that OK? How would you do this?

Toolbox plugin definition:

export function toolboxPlugin(args) {

return new Plugin({

	view(editorView) {
		// Create new class to hold editor and internal state such as editorView, HTML Dom elements, commands
		let toolboxView = new ToolboxView(toolboxButtons, editorView)

		// Append DOM portion of toolbox to current editor.
		editorView.dom.parentNode.appendChild(toolboxView.dom);

		// Return toolbox class. Caller will call its update method in every editor update.
		return toolboxView;
	}
})

}

Issue #3: Is this the right way to define commands for ordered/unordered lists? What else do I need?

{command: wrapInList(editorSchema.nodes.bullet_list), dom: toolboxButton(null, "list-bulleted")},

{command: wrapInList(editorSchema.nodes.ordered_list), dom: toolboxButton(null, "list-numbered")},

Original code before above updates: toolbar-plugin/toolboxPlugin.js at master · buzz-software/toolbar-plugin · GitHub

2

No, that’ll cause things to fail—node types and such are compared by identity, so a different instance of a type, even though it has the same content, isn’t going to be compatible with the other schema. You’ll have to pass the schema value around, or define it in some module that both other modules import.

3

Thanks, it worked.