List plugin for Plate rich-text editor providing indent-based list functionality with comprehensive transforms, queries, and React hooks.
—
Type definitions, enums, and constants including the comprehensive ListStyleType enum with 59 international list style values.
Comprehensive enumeration of all supported list style types, including international numbering systems and various bullet styles.
/**
* Enumeration of all supported list style types
* Includes bullets, numbers, and international numbering systems
*/
enum ListStyleType {
ArabicIndic = 'arabic-indic',
Armenian = 'armenian',
Bengali = 'bengali',
Cambodian = 'cambodian',
Circle = 'circle',
CjkDecimal = 'cjk-decimal',
CjkEarthlyBranch = 'cjk-earthly-branch',
CjkHeavenlyStem = 'cjk-heavenly-stem',
Decimal = 'decimal',
DecimalLeadingZero = 'decimal-leading-zero',
Devanagari = 'devanagari',
Disc = 'disc',
DisclosureClosed = 'disclosure-closed',
DisclosureOpen = 'disclosure-open',
EthiopicNumeric = 'ethiopic-numeric',
Georgian = 'georgian',
Gujarati = 'gujarati',
Gurmukhi = 'gurmukhi',
Hebrew = 'hebrew',
Hiragana = 'hiragana',
HiraganaIroha = 'hiragana-iroha',
Inherit = 'inherit',
Initial = 'initial',
JapaneseFormal = 'japanese-formal',
JapaneseInformal = 'japanese-informal',
Kannada = 'kannada',
Katakana = 'katakana',
KatakanaIroha = 'katakana-iroha',
Khmer = 'khmer',
KoreanHangulFormal = 'korean-hangul-formal',
KoreanHanjaFormal = 'korean-hanja-formal',
KoreanHanjaInformal = 'korean-hanja-informal',
Lao = 'lao',
LowerAlpha = 'lower-alpha',
LowerArmenian = 'lower-armenian',
LowerGreek = 'lower-greek',
LowerLatin = 'lower-latin',
LowerRoman = 'lower-roman',
Malayalam = 'malayalam',
Mongolian = 'mongolian',
Myanmar = 'myanmar',
None = 'none',
Oriya = 'oriya',
Persian = 'persian',
SimpChineseFormal = 'simp-chinese-formal',
SimpChineseInformal = 'simp-chinese-informal',
Square = 'square',
Tamil = 'tamil',
Telugu = 'telugu',
Thai = 'thai',
Tibetan = 'tibetan',
TradChineseFormal = 'trad-chinese-formal',
TradChineseInformal = 'trad-chinese-informal',
UpperAlpha = 'upper-alpha',
UpperArmenian = 'upper-armenian',
UpperLatin = 'upper-latin',
UpperRoman = 'upper-roman',
}Usage Examples:
import { ListStyleType, toggleList } from "@udecode/plate-list";
// Common bullet styles
toggleList(editor, { listStyleType: ListStyleType.Disc });
toggleList(editor, { listStyleType: ListStyleType.Circle });
toggleList(editor, { listStyleType: ListStyleType.Square });
// Common numbered styles
toggleList(editor, { listStyleType: ListStyleType.Decimal });
toggleList(editor, { listStyleType: ListStyleType.UpperRoman });
toggleList(editor, { listStyleType: ListStyleType.LowerRoman });
// International numbering
toggleList(editor, { listStyleType: ListStyleType.CjkDecimal });
toggleList(editor, { listStyleType: ListStyleType.Devanagari });
toggleList(editor, { listStyleType: ListStyleType.Hebrew });Constant array containing unordered list style types (bullet-style lists).
/**
* Array of unordered list style types
* Used to distinguish between bulleted and numbered lists
*/
export const ULIST_STYLE_TYPES: readonly [
ListStyleType.Disc,
ListStyleType.Circle,
ListStyleType.Square,
ListStyleType.DisclosureOpen,
ListStyleType.DisclosureClosed,
];Usage Example:
import { ULIST_STYLE_TYPES, ListStyleType } from "@udecode/plate-list";
// Check if a style type is for unordered lists
function isUnorderedListStyle(styleType: ListStyleType): boolean {
return ULIST_STYLE_TYPES.includes(styleType as any);
}
// Get random bullet style
const randomBulletStyle = ULIST_STYLE_TYPES[
Math.floor(Math.random() * ULIST_STYLE_TYPES.length)
];Options interface for list transformation operations.
/**
* Options for list transformation operations
*/
interface ListOptions {
/** Specific location to apply transform (defaults to selection) */
at?: TLocation;
/** Restart list numbering from this value */
listRestart?: number;
/** Politely restart list numbering (only at list start) */
listRestartPolite?: number;
/** List style type to apply */
listStyleType?: ListStyleType | string;
}Comprehensive options interface for sibling list queries with breaking conditions and custom logic.
/**
* Options for sibling list queries
*/
interface GetSiblingListOptions<N extends ElementOf<E>, E extends Editor = Editor> {
/** Break on equal indent with different list style type */
breakOnEqIndentNeqListStyleType?: boolean;
/** Break when encountering list restart markers */
breakOnListRestart?: boolean;
/** Break when encountering lower indentation levels */
breakOnLowerIndent?: boolean;
/** Custom break condition function */
breakQuery?: (siblingNode: TNode, currentNode: TNode) => boolean | undefined;
/** Custom function to get next entry */
getNextEntry?: (entry: NodeEntry<ElementOrTextOf<E>>) => NodeEntry<N> | undefined;
/** Custom function to get previous entry */
getPreviousEntry?: (entry: NodeEntry<ElementOrTextOf<E>>) => NodeEntry<N> | undefined;
/** Only get siblings with equal indentation */
eqIndent?: boolean;
/** Custom query function for sibling matching */
query?: (siblingNode: TNode, currentNode: TNode) => boolean | undefined;
}Options interface for getting multiple list siblings with fine-grained control.
/**
* Options for getting multiple list siblings
*/
interface GetListSiblingsOptions<N extends ElementOf<E>, E extends Editor = Editor>
extends Partial<GetSiblingListOptions<N, E>> {
/** Include current entry in results */
current?: boolean;
/** Include next siblings in results */
next?: boolean;
/** Include previous siblings in results */
previous?: boolean;
}Configuration type for the BaseListPlugin.
/**
* Configuration options for the BaseListPlugin
*/
type BaseListConfig = PluginConfig<
'list',
{
/** Options for getting sibling lists */
getSiblingListOptions?: GetSiblingListOptions<TElement>;
/** Function to map HTML elements to list style type */
getListStyleType?: (element: HTMLElement) => ListStyleType;
}
>;React version of BaseListConfig, used with the React ListPlugin.
/**
* React version of BaseListConfig
*/
type ListConfig = BaseListConfig;// Basic bullet styles
ListStyleType.Disc // •
ListStyleType.Circle // ○
ListStyleType.Square // ■
// Disclosure triangles
ListStyleType.DisclosureOpen // ▼
ListStyleType.DisclosureClosed // ▶
// Special
ListStyleType.None // No marker// Arabic numerals
ListStyleType.Decimal // 1, 2, 3
ListStyleType.DecimalLeadingZero // 01, 02, 03
// Roman numerals
ListStyleType.UpperRoman // I, II, III
ListStyleType.LowerRoman // i, ii, iii
// Latin letters
ListStyleType.UpperLatin // A, B, C
ListStyleType.LowerLatin // a, b, c
ListStyleType.UpperAlpha // A, B, C (alias)
ListStyleType.LowerAlpha // a, b, c (alias)
// Greek
ListStyleType.LowerGreek // α, β, γ// Asian numbering
ListStyleType.CjkDecimal // Chinese/Japanese/Korean decimal
ListStyleType.CjkEarthlyBranch // Chinese earthly branch
ListStyleType.CjkHeavenlyStem // Chinese heavenly stem
ListStyleType.JapaneseFormal // Japanese formal
ListStyleType.JapaneseInformal // Japanese informal
// Korean
ListStyleType.KoreanHangulFormal // Korean Hangul formal
ListStyleType.KoreanHanjaFormal // Korean Hanja formal
ListStyleType.KoreanHanjaInformal // Korean Hanja informal
// Chinese
ListStyleType.SimpChineseFormal // Simplified Chinese formal
ListStyleType.SimpChineseInformal // Simplified Chinese informal
ListStyleType.TradChineseFormal // Traditional Chinese formal
ListStyleType.TradChineseInformal // Traditional Chinese informal
// Japanese syllabaries
ListStyleType.Hiragana // ひらがな
ListStyleType.HiraganaIroha // Hiragana iroha order
ListStyleType.Katakana // カタカナ
ListStyleType.KatakanaIroha // Katakana iroha order// Middle Eastern
ListStyleType.Hebrew // Hebrew numerals
ListStyleType.Armenian // Armenian numerals
ListStyleType.LowerArmenian // Lower Armenian
ListStyleType.UpperArmenian // Upper Armenian
ListStyleType.Persian // Persian numerals
ListStyleType.ArabicIndic // Arabic-Indic numerals
// South Asian
ListStyleType.Devanagari // Devanagari numerals
ListStyleType.Bengali // Bengali numerals
ListStyleType.Gujarati // Gujarati numerals
ListStyleType.Gurmukhi // Gurmukhi numerals
ListStyleType.Kannada // Kannada numerals
ListStyleType.Malayalam // Malayalam numerals
ListStyleType.Oriya // Oriya numerals
ListStyleType.Tamil // Tamil numerals
ListStyleType.Telugu // Telugu numeralsListStyleType.Thai // Thai numerals
ListStyleType.Lao // Lao numerals
ListStyleType.Myanmar // Myanmar numerals
ListStyleType.Khmer // Khmer numerals
ListStyleType.Cambodian // Cambodian numerals (alias)ListStyleType.Georgian // Georgian numerals
ListStyleType.EthiopicNumeric // Ethiopic numerals
ListStyleType.Mongolian // Mongolian numerals
ListStyleType.Tibetan // Tibetan numeralsimport { ListStyleType, ULIST_STYLE_TYPES } from "@udecode/plate-list";
// Check if style is unordered (bullet)
function isUnorderedStyle(style: ListStyleType): boolean {
return ULIST_STYLE_TYPES.includes(style as any);
}
// Check if style is ordered (numbered)
function isOrderedStyle(style: ListStyleType): boolean {
return !isUnorderedStyle(style) && style !== ListStyleType.None;
}
// Get all decimal-based styles
const decimalStyles = [
ListStyleType.Decimal,
ListStyleType.DecimalLeadingZero,
ListStyleType.CjkDecimal,
];
// Get all Roman numeral styles
const romanStyles = [
ListStyleType.UpperRoman,
ListStyleType.LowerRoman,
];// Group styles by region/script
const westernStyles = [
ListStyleType.Decimal,
ListStyleType.UpperRoman,
ListStyleType.LowerRoman,
ListStyleType.UpperLatin,
ListStyleType.LowerLatin,
];
const asianStyles = [
ListStyleType.CjkDecimal,
ListStyleType.JapaneseFormal,
ListStyleType.JapaneseInformal,
ListStyleType.Hiragana,
ListStyleType.Katakana,
];
const middleEasternStyles = [
ListStyleType.Hebrew,
ListStyleType.Armenian,
ListStyleType.Persian,
ListStyleType.ArabicIndic,
];Install with Tessl CLI
npx tessl i tessl/npm-udecode--plate-list