Question: Ordered list in editer state will be displayed differently with PlainTextPlugin

[yuuminakamura]

Lexical version: latest

unordered list will be displayed with PlainTextPlugin same format but not ordered list. It will not have a space in front of the list. I tried to put extra indent in front of ordered list. but it is always displayed without any space.

Editor

Displaying content

code Editor

const editorConfig = {
    // The editor theme
    theme: exampleTheme,
    // Handling of errors during update
    onError(error: Error) {
        throw error;
    },
    // Any custom nodes go here
    nodes: [ListNode, ListItemNode, AutoLinkNode, LinkNode],
};

const Editor = ({ onChange, initialValue }: Props): JSX.Element => {
    const classes = useStyles();

    return (
        <Grid container>
            <Grid item xs={12} className={classes.editor}>
                <LexicalComposer initialConfig={editorConfig}>
                    <div className={classes.editorContainer}>
                        <ToolbarPlugin />
                        <div className="editor-inner">
                            <RichTextPlugin
                                contentEditable={
                                    <ContentEditable
                                        className={classes.editorInput}
                                    />
                                }
                                initialEditorState={
                                    initialValue ? initialValue : null
                                }
                                placeholder={null}
                            />
                            <OnChangePlugin onChange={onChange} />
                            <AutoFocusPlugin />
                            <ListPlugin />
                            <LinkPlugin />
                        </div>
                    </div>
                </LexicalComposer>
            </Grid>
        </Grid>
    );
};

displaying content code

                    <LexicalComposer
                        initialConfig={{
                            onError(error) {
                                throw error;
                            },
                            readOnly: true,
                            nodes: [LinkNode, ListNode, ListItemNode],
                        }}
                    >
                        <PlainTextPlugin
                            placeholder={null}
                            contentEditable={<ContentEditable />}
                            initialEditorState={value}
                        />
                    </LexicalComposer>

Saved editer state

value: "{\"_nodeMap\":[[\"root\",{\"__children\":[\"641\",\"646\",\"647\"],\"__dir\":\"ltr\",\"__format\":0,\"__indent\":0,\"__key\":\"root\",\"__parent\":null,\"__type\":\"root\"}],[\"641\",{\"__type\":\"list\",\"__parent\":\"root\",\"__key\":\"641\",\"__children\":[\"642\",\"644\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__listType\":\"number\",\"__tag\":\"ol\",\"__start\":1}],[\"642\",{\"__type\":\"listitem\",\"__parent\":\"641\",\"__key\":\"642\",\"__children\":[\"643\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__value\":1}],[\"643\",{\"__type\":\"text\",\"__parent\":\"642\",\"__key\":\"643\",\"__text\":\"Hello\",\"__format\":0,\"__style\":\"\",\"__mode\":0,\"__detail\":0,\"__marks\":null}],[\"644\",{\"__type\":\"listitem\",\"__parent\":\"641\",\"__key\":\"644\",\"__children\":[\"645\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__value\":2}],[\"645\",{\"__type\":\"text\",\"__parent\":\"644\",\"__key\":\"645\",\"__text\":\"Hello\",\"__format\":0,\"__style\":\"\",\"__mode\":0,\"__detail\":0,\"__marks\":null}],[\"646\",{\"__type\":\"paragraph\",\"__parent\":\"root\",\"__key\":\"646\",\"__children\":[],\"__format\":0,\"__indent\":0,\"__dir\":null}],[\"647\",{\"__type\":\"list\",\"__parent\":\"root\",\"__key\":\"647\",\"__children\":[\"648\",\"650\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__listType\":\"bullet\",\"__tag\":\"ul\",\"__start\":1}],[\"648\",{\"__type\":\"listitem\",\"__parent\":\"647\",\"__key\":\"648\",\"__children\":[\"649\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__value\":1}],[\"649\",{\"__type\":\"text\",\"__parent\":\"648\",\"__key\":\"649\",\"__text\":\"Hello\",\"__format\":0,\"__style\":\"\",\"__mode\":0,\"__detail\":0,\"__marks\":null}],[\"650\",{\"__type\":\"listitem\",\"__parent\":\"647\",\"__key\":\"650\",\"__children\":[\"651\"],\"__format\":0,\"__indent\":0,\"__dir\":\"ltr\",\"__value\":2}],[\"651\",{\"__type\":\"text\",\"__parent\":\"650\",\"__key\":\"651\",\"__text\":\"Hello\",\"__format\":0,\"__style\":\"\",\"__mode\":0,\"__detail\":0,\"__marks\":null}]],\"_selection\":{\"anchor\":{\"key\":\"651\",\"offset\":5,\"type\":\"text\"},\"focus\":{\"key\":\"649\",\"offset\":0,\"type\":\"text\"},\"type\":\"range\"}}"

[acywatson]

it looks like your initial config is different? What happens if you pass {theme: exampleTheme} in the initialConfig to the LexicalComposer where you're displaying content?

[yuuminakamura]

@acywatson It solved the problem. Thank you very much again✨

const exampleTheme = {
    ltr: 'ltr',
    rtl: 'rtl',
    placeholder: 'editor-placeholder',
    paragraph: 'editor-paragraph',
    list: {
        nested: {
            listitem: 'editor-nested-listitem',
        },
        ol: 'editor-list-ol',
        ul: 'editor-list-ul',
        listitem: 'editor-listitem',
    },
    link: 'editor-link',
    text: {
        bold: 'editor-text-bold',
        italic: 'editor-text-italic',
    },
};