configureAsListElements

Type: Function

How to get configureAsListElements?

JavaScript

import configureAsListElements from 'fontoxml-list-flow/src/configureAsListElements.js'

Configure a list-like structure existing of a list container element with children representing list items.

Lists may be nested. The options.list.style property may be used to trigger different numbering or bulleting styles.

Some schemata allow lists to specify the list item numbering with an additional element. Use the options.listItem.labelSelector to mark these elements as labels. These labels will automatically be removed when converting a list to a number of paragraphs.

Automatically creating lists

After typing your keys at the beginning of a paragraph, pressing space key will trigger the list macro and create your list. These macros can be undone by pressing the backspace key.

Set the list.nodeName and use one of the predetermined list styles, like configureAsListElements.NUMBERED_LIST_STYLE to enable the default settings of the auto create list macro:

  • typing "1. " will insert a numbered list.

  • typing "* " will insert a bullet list.

It is possible to change default macro triggers or set special macro triggers corresponding to your special list styles. Set list.macroTriggers as an array of trigger strings. If you set an empty array for list.macroTriggers for a predetermined macro list, it will disable the macro for that list.

Set the enable-experiment/enable-auto-create-list-macro configuration variable to false to disable the automatic registration of the list macro. This will still allow setting the macroTriggers option to manually defined them.

Examples

The configuration of a normal unordered list, <ul>, using <li> and <p> inside list items, could look like this:

Other

configureAsListElements(sxModule, {
  list: {
    selector: 'self::ul',
    nodeName: 'ul',
    style: configureAsListElements.BULLETED_LIST_STYLE
  },
  item: {
    nodeName: 'li'
  },
  paragraph: {
    nodeName: 'p'
  }
});

An example of a list for which the numbering represented with a createLabelQueryWidget is:

Other

configureAsListElements(sxModule, {
  item: {
    nodeName: 'item'
  },
  list: {
    selector: 'self::ul',
    style: createLabelQueryWidget('if (self::item[parent::ul[@type = "openBullet"]]) then "\u25cb" else "\u25cf"')
  },
  paragraph: {
    nodeName: 'para'
  }
});

An example of a list for configuring list with custom style and macro keys is:

Other

configureAsListElements(sxModule, {
	list: {
		nodeName: 'ul',
		selector: 'self::ul',
		style: ['\u2013'],
		macroTriggers: ['-', '_']
	},
	item: {
		nodeName: 'li'
	},
	paragraph: {
		nodeName: 'p'
	}
});
});

Arguments

  1. sxModule

    (Required)

    Type: Object

  2. options

    (Required)

    Type: Object

    Properties

Static properties

BULLETED_LIST_STYLE

Type: Array<String>

Specifies the default style for a bulleted list.

EMPTY_LIST_STYLE

Type: Array<String>

Specifies the default style for an unmarked list.

NUMBERED_LIST_STYLE

Type: Array<String>

Specifies the default style for a numbered list.