Convert quill classes to inline styles in next JS

[karthik-js]

Ticket due diligence

• [ x ] I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• [ x ] I can't use the beta version for other reasons

ReactQuill version

• [ ] master
• [ ] v2.0.0-beta.2
• [ ] v2.0.0-beta.1
• [x] 1.3.5
• [ ] 1.3.4 or older
• [ ] Other (fork)

I am using react-quill with next JS framework.

import dynamic from 'next/dynamic';

const QuillEditor = dynamic(() => import('react-quill'), { ssr: false });

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline'],
    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
  ],
  clipboard: {
    matchVisual: true,
  },
};

const formats = [
  'background',
  'font',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'indent',
  'bullet',
  'indent',
  'align',
];

interface TextEditorProps {
  value: string;
  defaultValue?: string;
  placeholder: string;
  onChange: (html: string) => void;
}

const TextEditor: React.FC<TextEditorProps> = (props) => {
  return (
    <div className='text-editor'>
      <QuillEditor
        value={props.value}
        onChange={props.onChange}
        placeholder={props.placeholder}
        modules={modules}
        formats={formats}
        theme='snow'
      />
    </div>
  );
};

export default TextEditor;

The Html string returned in value has ql-classnames. how can I configure quill to produce inline styles?

[karthik-js]

I am hoping to get a response from the community. If not I have to switch to other text editors.

[Capati]

@karthik-js have you found other editor that work best with next.js?

[karthik-js]

@Capati Right now I am using suneditor-react which is working great. You can give it a try

[Capati]

Hi @karthik-js, thanks for your attention. I tried suneditor-react, everything seems to be working as expected.

[karthik-js]

@Capati But there is a catch, production output of suneditor-react has an issue. The package is not emitting css file in production. As of now, for workaround I have been using css from their CDN.

[MatthewTang]

Hi, @karthik-js, @Capati , i also stumbled upon this issue. i understand that it's been a while lol but you might still find this answer useful.

https://stackoverflow.com/a/78026934/16397339