SlateJS by Example

Schema: Lists

January 26, 2019

Examples of schema rules for lists.

A list_item must have an unordered_list or ordered_list as its parent

Allowed

<ordered_list>
  <list_item>Item 1</list_item>
  <list_item>Item 2</list_item>
</ordered_list>

Not Allowed

<paragraph>
  <list_item>Item 1</list_item>
</paragraph>

Schema

const schema = {
  blocks: {
    list_item: {
      parent: [{ type: 'unordered_list' }, { type: 'ordered_list' }],
      normalize: (editor, error) => {
        switch (error.code) {
          case 'parent_type_invalid':
            editor.wrapBlock('unordered-list')
            return
          default:
            return
        }
      },
    },
  },
}

An ordered_list or unordered_list can only have list_items as children

Allowed Allowed

<ordered_list>
  <list_item>Item 1</list_item>
  <list_item>Item 2</list_item>
</ordered_list>

Not Allowed

<ordered_list>
  <paragraph>Item 1</paragraph>
</ordered_list>

Schema

const schema = {
  blocks: {
    ordered_list: {
      nodes: [{ type: 'list_item' }],
    },
    unordered_list: {
      nodes: [{ type: 'list_item' }],
    },
  },
}

Created by Brendan Carney