how to convert draft js block response to html string with text alignment?

Question

In my React project, I'm using the Draft.js editor with alignment plugins to allow users to align text. Now, I want to export the content from the editor to a PDF file. To do that, I need to convert the Draft.js content (in JSON format) to an HTML string. The problem I'm facing is with converting the inline styles applied to the text, like bold, italic, etc., into corresponding HTML tags. How can I achieve this conversion? `

import { stateToHTML } from "draft-js-export-html";
import createMentionPlugin, {
  defaultSuggestionsFilter,
} from '@draft-js-plugins/mention';
import createSideToolbarPlugin from '@draft-js-plugins/side-toolbar';
import createToolbarPlugin from '@draft-js-plugins/static-toolbar';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton,
  HeadlineOneButton,
  HeadlineTwoButton,
  UnorderedListButton,
  OrderedListButton,
  AlignBlockDefaultButton,
  AlignBlockLeftButton,
  AlignBlockCenterButton,
  AlignBlockRightButton
} from '@draft-js-plugins/buttons';

.....


const [editorState1, setEditorState1] = useState(
    () => EditorState.createEmpty()) // initial state

const sideToolbarPlugin1 = createSideToolbarPlugin();
  const toolbarPlugin1 = createToolbarPlugin();
  const focusPlugin = createFocusPlugin();
  const alignmentPlugin = createAlignmentPlugin();
  const textAlignmentPlugin = createTextAlignmentPlugin();

  const mentionPlugin1 = createMentionPlugin({})
..
..
const [plugins1] = useMemo(() => {
    return [[toolbarPlugin1, sideToolbarPlugin1, mentionPlugin1, alignmentPlugin, textAlignmentPlugin]]
  },
    []);
 const convertHtml = () => {
const htmlString = stateToHTML(editorState1.getCurrentContent())
    console.log(htmlString)
}
return (
                        <Editor
                          editorState={editorState1}
                          onChange={handleEditState}
                          plugins={plugins1}
                          placeholder="Create Document"
                          ref={editorRef}
                          autoFocus
                          handleKeyCommand={handleKeyCommand}
                          keyBindingFn={myKeyBindingFn}
                          blockStyleFn={blockStyleFn}
                        />)

my JSON response
blocks : {
    "key": "b09h7",
    "data": {},
    "text": "dDocument titlefdsf sfsdf sd fffsd sdfdfs dfs dfs g dfssdf fsdfsdfdsf dfsdf sdfsdf dfkdjffdsd ds dsddfdfsdfvsdfsdfsd",
    "type": "unordered-list-item",
    "depth": 0,
    "entityRanges": [],
    "inlineStyleRanges": [
        {
            "style": "UNDERLINE",
            "length": 116,
            "offset": 0
        },
        {
            "style": "center",
            "length": 116,
            "offset": 0
        }
    ]
}

HTML response 
 <li><u>dDocument titlefdsf sfsdf sd fffsd sdfdfs dfs dfs g dfssdf fsdfsdfdsf dfsdf sdfsdf dfkdjffdsd ds dsddfdfsdfvsdfsdfsd</u></li>

here center alignment inline style not added

how to convert draft js block response to html string with text alignment?

0 Answers0