I have no idea why my editor doesn't dispatch checkbox when I enter shortcut

[deli-ght]

    nodes: [
      LinkNode,
      AutoLinkNode,
      ListNode,
      ListItemNode,
      TableNode,
      TableCellNode,
      TableRowNode,
      HorizontalRuleNode,
      CodeNode,
      HeadingNode,
      QuoteNode,
    ],

...
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={
          <ContentEditable className="focus:outline-none h-full" />
        }
        ErrorBoundary={LexicalErrorBoundary}
      />
      <OnChangePlugin onChange={onChange} />
      <ComponentPickerMenuPlugin />
      <HistoryPlugin />
      <TabIndentationPlugin />
      <MarkdownShortcutPlugin />
      <AutoLinkPlugin matchers={MATCHERS} />
      <ListPlugin />
      <CheckListPlugin />
      <ClearEditorPlugin />
      {/* Custom plugins */}
    </LexicalComposer>

I set my plugin like this but when I enter [] on my editor, it doesn't change to checkbox list.
In the lexical playground, I found it works. I just follow the code of playground but it was hard to find out the reason...

[vshjxyz]

you need to define classes in the editor theme

  list: {
    ul: "editor_List-unordered",
    ol: "editor_List-ordered",
    listitem: "editor_ListItem",
    checklist: "editor_checklist",
    listitemChecked: "editor__listItemChecked",
    listitemUnchecked: "editor__listItemUnchecked",
    nested: {
      listitem: "editor_ListItemNested",
    },
  },

then

lexical/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css

Lines 459 to 518 in 1bafc3c

	.PlaygroundEditorTheme__listItemChecked,
	.PlaygroundEditorTheme__listItemUnchecked {
	position: relative;
	margin-left: 8px;
	margin-right: 8px;
	padding-left: 24px;
	padding-right: 24px;
	list-style-type: none;
	outline: none;
	}
	.PlaygroundEditorTheme__listItemChecked {
	text-decoration: line-through;
	}
	.PlaygroundEditorTheme__listItemUnchecked:before,
	.PlaygroundEditorTheme__listItemChecked:before {
	content: '';
	width: 16px;
	height: 16px;
	top: 2px;
	left: 0;
	cursor: pointer;
	display: block;
	background-size: cover;
	position: absolute;
	}
	.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
	.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
	left: auto;
	right: 0;
	}
	.PlaygroundEditorTheme__listItemUnchecked:focus:before,
	.PlaygroundEditorTheme__listItemChecked:focus:before {
	box-shadow: 0 0 0 2px #a6cdfe;
	border-radius: 2px;
	}
	.PlaygroundEditorTheme__listItemUnchecked:before {
	border: 1px solid #999;
	border-radius: 2px;
	}
	.PlaygroundEditorTheme__listItemChecked:before {
	border: 1px solid rgb(61, 135, 245);
	border-radius: 2px;
	background-color: #3d87f5;
	background-repeat: no-repeat;
	}
	.PlaygroundEditorTheme__listItemChecked:after {
	content: '';
	cursor: pointer;
	border-color: #fff;
	border-style: solid;
	position: absolute;
	display: block;
	top: 6px;
	width: 3px;
	left: 7px;
	right: 7px;
	height: 6px;
	transform: rotate(45deg);
	border-width: 0 2px 2px 0;
	}

the checkbox is created via CSS - which is bad IMO as you cannot easily have a full customized checkbox component. Which is what I'm doing now

[deli-ght]

Thanks for the reply. I attached the checkbox transformer code from the playground and it works!