My previous post was being closed by its own, though it's still not solving my problem HERE
the current RTE toolbar already provide a numerical ordered list, and I want to add more (alphabetical and roman numerals).
In the previous post, one user already provide me the steps to replicate, but the issue is during registering the custom toolbar.
Appreciate if anyone can help me with this.
//customFeature.ts
import {
FixedToolbarFeature,
} from '@payloadcms/richtext-lexical'
import { customListFeature } from './customListFeature.client'
export const customFeature = ({
defaultFeatures,
isContentBlockExcluded,
}: {
defaultFeatures: any
isContentBlockExcluded?: boolean
}) => {
return [
...defaultFeatures?.filter(
(feature: any) => !['inlineCode', 'checklist', 'blockquote'].includes(feature.key),
),
FixedToolbarFeature(),
customListFeature,
]
}//customListFeature.client.tsx
'use client'
import { createClientFeature } from '@payloadcms/richtext-lexical/client'
import { NumericalListButton, AlphaListButton, RomanListButton } from './customListButton'
export const customListFeature = createClientFeature({
key: 'custom-list-feature',
toolbarFixed: {
groups: [
{
key: 'custom-list-dropdown',
type: 'dropdown',
items: [
{ key: 'numerical-list', Component: NumericalListButton },
{ key: 'alpha-list', Component: AlphaListButton },
{ key: 'roman-list', Component: RomanListButton },
],
},
],
},
})//custom-type-list.ts
'use client'
import React from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
export const NumericalListButton: React.FC = () => {
const [editor] = useLexicalComposerContext()
const apply = () => {
editor.update(() => {
const selection = window.getSelection()
if (selection?.focusNode) {
const ol = selection.focusNode.parentElement?.closest('ol')
if (ol) {
ol.style.listStyleType = 'decimal'
}
}
})
}
return <button type="button" onClick={apply}>1.</button>
}
export const AlphaListButton: React.FC = () => {
const [editor] = useLexicalComposerContext()
const apply = () => {
editor.update(() => {
const selection = window.getSelection()
if (selection?.focusNode) {
const ol = selection.focusNode.parentElement?.closest('ol')
if (ol) {
ol.style.listStyleType = 'upper-alpha'
}
}
})
}
return <button type="button" onClick={apply}>A.</button>
}
export const RomanListButton: React.FC = () => {
const [editor] = useLexicalComposerContext()
const apply = () => {
editor.update(() => {
const selection = window.getSelection()
if (selection?.focusNode) {
const ol = selection.focusNode.parentElement?.closest('ol')
if (ol) {
ol.style.listStyleType = 'upper-roman'
}
}
})
}
return <button type="button" onClick={apply}>Ⅰ.</button>
}PayloadCMS 3.49.1 Lexical 0.28.0
