Insert custom html with inline css

[dj-fiorex]

Hello, first of all thanks for the awesome library! i'm here to ask some questions:

1. How can i add custom html (i want to be able to add an accordion like component) to the editor? This is my try based on what i read on the docs, but the editor render only p tag without inline style

const CustomOpt = (props) => {
  const { editorState, onChange } = props;
  const addTest = () => {
    const test = `<div style="display: flex;  justify-content: space-around;">
    <span style="color: black;">*</span>
    <span style="color: green;">*</span>
  </div>`;

    let { contentBlocks, entityMap } = convertFromHTML(test); // or htmlToDraft
    let contentState = Modifier.replaceWithFragment(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      ContentState.createFromBlockArray(
        contentBlocks,
        entityMap,
      ).getBlockMap(),
    );
    onChange(
      EditorState.push(editorState, contentState, 'insert-fragment'),
    );
  };

  return <div onClick={addTest}>⭐</div>;
};

......

<Editor
              toolbarOnFocus
              editorState={editorState}
              wrapperClassName="wrapper"
              toolbarClassName="rich-text__toolbar"
              localization={{
                locale: 'it',
              }}
              onEditorStateChange={(a) => {
                setEditorState(a);
              }}
              onFocus={() => {
                setFocus(true);
              }}
              onBlur={() => {
                setFocus(false);
                updateBlock(id, (b) => ({
                  ...b,
                  html: draftToHtml(
                    convertToRaw(editorState.getCurrentContent()),
                  ),
                  html2Column: '',
                }));
              }}
              toolbarCustomButtons={[<CustomOpt key={'test'} />]}
              toolbar={{
                options: [
                  'inline',
                  'blockType',
                  'fontSize',
                  'list',
                  'textAlign',
                  'colorPicker',
                  'link',
                  'image',
                  'history',
                ],
              }}
            />

I want to be able to add an accordion like div and to have flex columns inside the editor.

Reading in github i saw some people talking about creating custom component but i didn't find anythings

Thanks!

[abhilashsajeev]

+1

[aymenmensi95]

Same Problem, any solutions yet ??