Default Ordered, Default Unordered and Unordered Dot list not showing up properly in editor or after edit.

[SanIbme]

Jodit Version: 3.4.xxxxx
jodit-react 1.3.39

Browser:
Chrome, Firefox
OS:
MacOS Sonoma
Is React App:
True (v17)

Code

import 'jodit';
import JoditEditor from 'jodit-react';

jodit;
setRef = jodit => this.jodit = jodit;

onBlur = (evt) => {
     let submitval = evt;
     if(this.state.content['value'] !== submitval) {
         //  all to update the content, post data
    } 
}
.
.
.

return (
<JoditEditor
      ref={this.setRef}
      value={this.state.content['value'] === "None" ? "" : this.state.content['value']}
      config={this.config}
      tabIndex={1}
      onBlur={this.onBlur} 
/>)

Expected behavior:
Bullets would appear in editor during edit and once saved.

Actual behavior:

• Default and Dot unordered list or ordered list don't appear in editor or when complete. It seems it might be middle past far left of the editor box. The default doesn’t show up, even after moving the text into the editor.
• Unordered Circle, Square and ordered (all except for Default) show up after completed edit and saved, just at the border of the editor text.

During Edit:

After Edit:

[SanIbme]

Hello Jodit Team and Community,
I've had this issue opened for a few weeks now. Can someone please look into this? I noticed that @xdan has been closing issues. I hope it's ok I tag you here. Please let me know what I can do to have this issue looked at and what's the right way to request help so I can get support? Thank you.

[SanIbme]

Hello Jodit Team and Community,
I noticed there was an issue xdan/jodit#799, which was closed. It seems I'm having similar issue, so not sure if the bug has returned. Can someone please help? Thank you.

[SanIbme]

Update: I used css to resolve this issue, but it would be better if this feature worked out of the box. So it's still a bug and should be resolved. Hope someone will be able to follow up and fix this.

[Prashant117]

config

Hi @SanIbme
what CSS changes you did to get is working? Please let me know as well as I am not able to load Unordered dot or default in the editor.

Thanks.

[SanIbme]

Hi @Prashant117,
Below are the styles in my scss file I used with the container id for the editor. I used id instead of class because it works with more specificity. Somehow when I try to use the className in the editor this does not work, so used id instead. Hope this helps!

// two editor containers
#myjoditEditor, #mySecondJoditEditor
{
    // text can start 10 px within the editor
    .jodit-wysiwyg {
        padding-left: 10px;
    }
    // allows default ul and dot to show up 
    ul {
        list-style: inside;
    }
    // allows default ol to show up
    ol {
        list-style: inside;
        list-style-type: number;
    }
    // allows table borders to show up
    td {
        border: solid 1px;
    }
}

[Prashant117]

Hi @Prashant117, Below are the styles in my scss file I used with the container id for the editor. I used id instead of class because it works with more specificity. Somehow when I try to use the className in the editor this does not work, so used id instead. Hope this helps!

// two editor containers
#myjoditEditor, #mySecondJoditEditor
{
    // text can start 10 px within the editor
    .jodit-wysiwyg {
        padding-left: 10px;
    }
    // allows default ul and dot to show up 
    ul {
        list-style: inside;
    }
    // allows default ol to show up
    ol {
        list-style: inside;
        list-style-type: number;
    }
    // allows table borders to show up
    td {
        border: solid 1px;
    }
}

Thanks @SanIbme,
it worked for me for the time being.

[ramespra]

This is still an ongoing bug

[manohar-geekologix]

Thanks @SanIbme, it worked for me for the time being.

[Rogerio234]

Thank you very much! There were many days looking for a solution to this problem.

[ananty1]

Can you please help,how you integrated that into the editor?

[RodrigoDuarteB]

Thanks the scss worked for me. i used the className instead of ids and still worked.

[dlopel]

This worked for me, this is css code. I'm using jodit react v4.1.2, the user agent set up those styles, but not in my case (I saw it from Jodit's website)

.jodit-wysiwyg ul {
list-style-type: disc;
margin: 0;
padding: 0 20px 10px
}

.jodit-wysiwyg ul ul {
list-style-type: circle;
}

.jodit-wysiwyg ul ul ul {
list-style-type: square;
}

.jodit-wysiwyg ol {
list-style-type: decimal;
padding-left: 40px;
margin-top: 1em;
margin-bottom: 1em;
}

.jodit-wysiwyg ol ol {
margin-top: 0;
margin-bottom: 0;
}

.jodit-wysiwyg td {
border: solid 1px;
}