Custom Bullets Settings

Release 2.17.2311 and above.

Use editor.list.customList to configure custom bullets.

Configuring the config

• Custom bullets support up to 9 levels.
• Items defined beyond level 9 are not displayed.
• If the array is empty ([]), the custom bullet feature does not operate.
• If fewer than 9 items are set, the defined items repeat to fill all 9 levels automatically.
• When runStyle is set in the config, the runStyle configuration takes precedence over any style applied by the user during editing.

format

The available bullet formats applicable to format are as follows:

levelText

Valid only when format is bullet.

'editor.list.customList': [
    { format: 'decimal' },
    { format: 'bullet', levelText: '□' },
    { format: 'bullet', levelText: '♧' },
    { format: 'decimalEnclosedCircle' }
]

runStyle

Release 3.2.2509 and above, Release 2.20.2509 and above.

Adding the runStyle property lets you add custom styles to the bullet.

'editor.list.customList': [
    {
        format: 'bullet',
        levelText: '★',
        runStyle: {
            color: 'yellow',
            fontSize: { value: 12, unit: 'pt' },
            underline: true,
            italic: true,
            strike: true,
            fontWeight: 700,
            backgroundColor: { r: 135, g: 206, b: 250 }
        }
    }
]

distance

Release 3.3.1 and above, Release 2.21.1 and above.

Setting the distance value lets you adjust the spacing between the bullet and the text. (default: -10)

• Negative values widen the gap between the bullet and the text.
• Positive values make the bullet and text overlap each other.

'editor.list.customList': [
    { format: 'bullet', levelText: '★', distance: -20 },
    { format: 'bullet', levelText: '★', distance: -10 },
    { format: 'bullet', levelText: '★', distance: 0 },
    { format: 'bullet', levelText: '★', distance: 20 },
]

distance: -10 (default)	distance: -5	distance: 0

Application Examples

Bullet configuration example

'editor.list.customList': [
    { format: 'decimal' },
    { format: 'bullet', levelText: '□' },
    { format: 'bullet', levelText: '♧' },
    { format: 'decimalEnclosedCircle' }
]

Style configuration example

Release 3.2.2509 and above, Release 2.20.2509 and above.

'editor.list.customList': [
        {
            format: 'bullet',
            levelText: '★',
            distance: -10, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: 'yellow',
                fontSize: { value: 12, unit: 'pt' },
                underline: true,
                italic: true,
                strike: true,
                fontWeight: 700,
                backgroundColor: { r: 135, g: 206, b: 250 }
            }
        },
        {
            format: 'bullet',
            levelText: '＠',
            distance: -5, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: { r: 255, g: 123, b: 45 },
                fontSize: { value: 24, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 235, g: 55, b: 12 }
            }
        },
        {
            format: 'bullet',
            levelText: '#',
            distance: 0, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: { r: 45, g: 255, b: 45 },
                fontSize: { value: 32, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: 'red'
            }
        },
        {
            format: 'bullet',
            levelText: '♤',
            distance: -5, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: '#634948',
                fontSize: { value: 40, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 55, g: 12, b: 235 }
            }
        },
    ]

Related Information

• Bullet Number Settings