Ordered List Type Attribute

Hello,

I am trying to find a way to add the additional ordered list types to an Editor that is based on ProseMirror. Basically, there are only numbered ordered lists, but they would also like to have alpha (A/a) and roman numerals (I/i).

I have spent some time in the source code but am unable to find anything that can help with this. Is this possible to achieve or is it something that I can do with the schema or create a plugin?

Thank you for your help!

You are going to need to add an attribute to track this intent on the ordered_list and/or bullet_list prosemirror Node. Then on render (toDOM), you could then override the rendering of the <ol> or <ul> to include the dynamic list-style attribute.

In less / other words, they all use the same schema Node, but you just branch the list-style intent using an attribute.

Ex: Adding attribute listOrderStyle to ordered_list (See other examples how to edit existing schema items.) You’ll need some way for the client to create/edit these ordered_list with different attributes (let me know if you might need help tjhere as well)

ordered_list.toDOM override:

[
   "ol",
    {
     // Or html "type": ...
      "style": `list-style: ${node.attrs.listOrderStyle}`,
    },
    0
];
1 Like

@bZichett Thank you for this! This is very helpful. I will definitely need an example for how the client can create/edit the ordered_list with different attributes.

For additional context, I am using the Telerik Kendo Angular Editor which is based on the ProseMirror library. It does have documentation for enhancing the built-in schema.

My guess is that I will need to mark the selected ordered list to apply the new attribute. I believe I can do this with a custom button on the toolbar. Just not entirely sure how I would do this once I have access to the editor on the click event.

No problem. There are two possibilities - the insertion and then editing of existing list Nodes in editor.

For the insertion, it’s essentially the same, you’ll just be manually creating the ordered_list Node with the desired attribute. For editing, you’ll need to find the absolute position of the ordered_list in document, and then apply a setNodeMarkup transform, which will allow you to modify the existing attribute.

Not as familiar with the layer Kendo Editor introduces; from perusing the docs, they give you dropdown lists which you’ll want to create an enumeration of supported list-order styles and then somehow run a custom command to find the ordered_list the caret is closest to.

Definitely a few unknowns from my perspective. If you have familiarity with Kendo, should be pretty quick though (See if you can find the definition for inserting ordered_lists and either add another configuration that shows Ordered List With Styles and on clicking it open a dropdown that when pressing an option, finds the ordered_list and runs setNodeMarkup on it, then apply that transform.

Seems like the customDirective guide could make this possible; the custom button on toolbar right before it encapsulates all logic into a string template so I am not sure that will work - you’ll need to ascertain that absolute position of the ordered_list dynamically.

Might be a bit redundant information above. A bit more useful: perhaps I could suggest a utility to help find the closest ordered_list from caret position. I use this library in my application, pretty useful set of functions:

This one works great for this: https://github.com/atlassian/prosemirror-utils/blob/master/src/selection.js#L68

So you’ll pass the current $pos into this function (editor.state.selection.$from if not a range type), and pass in orderedListSchema def (state.schema.nodes.ordered_list). What it returns is the {node, pos} if its found.

2 Likes

@bZichett many thanks! This gives me a good direction to go with. I think I can just use the edit like you described. I really appreciate your help with this.

1 Like