megahertz / react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor
https://megahertz.github.io/react-simple-wysiwyg/
MIT License
119 stars 21 forks source link

Numbered and Bullet lists are not working #31

Closed T3chnoMaciej closed 6 months ago

T3chnoMaciej commented 8 months ago

Hi! I'm using this software in a Next.js 13.5.6 app, in a client component. Every function works fine except for lists , that dont' Here's my code: ` "use client"; import { useState } from 'react'; import { BtnBold, BtnItalic, Editor, EditorProvider, Toolbar, BtnNumberedList, BtnBulletList, BtnUnderline} from 'react-simple-wysiwyg';

export default function NotesComponent() { const [notesValue, setNotesValue] = useState('Start typing...');

function onChangeEditor(e) {
    setNotesValue(e.target.value);
}

return(
    <EditorProvider>
        <Editor value={notesValue} onChange={onChangeEditor} >
            <Toolbar>
                <BtnBold />
                <BtnUnderline />
                <BtnItalic />
                <div className="rsw-separator" />
                <BtnNumberedList />
                <BtnBulletList />
            </Toolbar>
        </Editor>
    </EditorProvider>
)

}

`

megahertz commented 7 months ago

It works fine in my local environment with Chrome 118.0.5993.88. Which browser do you use?

T3chnoMaciej commented 7 months ago

Hi, thanks for the reply. I use Chrome 116 on macOS. I'll check after update.

megahertz commented 7 months ago

So, it looks like the issue isn't related to a browser. I would appreciate it if you could create a simple project that reproduces the issue

T3chnoMaciej commented 7 months ago

Hi,

Sorry for the late reply, I was short on time lately. Here you go: I created a simple project with this problem in a repo . I hope it helps and we can eliminate this bug. Tested on 2 more browsers, same effect.

Cheers, M

megahertz commented 7 months ago

Thank you. I'll take a look in the beginning of the next week.

megahertz commented 6 months ago

These buttons work fine, but the global style in next.js/tailwindcss prevents the list from being displayed correctly.

/* /_next/static/css/app/layout.css?v=1702231607245 */
ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
T3chnoMaciej commented 6 months ago

Thank you for your time, I will debug in my code