html-to-draftjs Custom tag attributes like id & class are being stripped

Is there a way I can keep the ids and classes applied to the elements. If you can just point me in the right direction then I can fork the repo and modify the code.

For Example -

Initial input CHIEF COMPLAINT[The patient presents with a complaint of headache.]

Final Output CHIEF COMPLAINT[The patient presents with a complaint of headache.]

Expected Output CHIEF COMPLAINT[The patient presents with a complaint of headache.]

Dec 24 '18 12:12 mohitgarg

Hey @mohitgarg : this lib currently is not flexible enough to handle custom elements :( May be code like this: https://github.com/jpuri/html-to-draftjs/blob/master/src/library/index.js#L77 can help you.

Plz let me know if you need more help.

Dec 25 '18 06:12 jpuri

Thank you for the quick reply @jpuri . I tried doing something like you mentioned but that gave me an error in draftjs-to-html couldn't figure it out

Is this what you were suggesting?

if (nodeName === 'p' && node instanceof HTMLParagraphElement) {
    const entityConfig = {}
    entityConfig.id = node.id
    const entityId = Entity.__create(
      'PARAGRAPH',
      'MUTABLE',
      entityConfig
    )
    return { chunk: getAtomicBlockChunk(entityId) };
  }

Another thing that I tried is adding the entity while it is creating block chunks. Something like this:

chunk = getFirstBlockChunk(
          blockType,
          getBlockData(node),
          node.nextElementSibling.id.length > 0 ? Entity.__create(
            'PARAGRAPH',
            'MUTABLE',
            { id: node.nextElementSibling.id }
          ) : null
        );

export const getFirstBlockChunk = (blockType: string, data: Object, entity): Object => {
  let foo = []
  if (entity) {
    foo = [entity]
  }
  return {
    text: '',
    inlines: [],
    entities: foo,
    blocks: [{
      type: blockType,
      depth: 0,
      data: data || new Map({}),
    }],
  };
};

And the raw output from the editor state that I got is this:

{
  "0": {
    "type": "PARAGRAPH",
    "mutability": "MUTABLE",
    "data": {
      "id": "5b7596aa84089257123ef7af"
    }
  }
}

Do you think this will work if I make some changes in the draftjs-to-html?

Dec 25 '18 07:12 mohitgarg

@mohitgarg this is block level data, you can now use it in ur custom renderer like this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/renderer/Image/index.js#L103

Dec 25 '18 08:12 jpuri

That still solves only half the problem. I still have to figure out a way for the inline elements. Thanks @jpuri . Really appreciate the help!

Dec 25 '18 15:12 mohitgarg

Check this for inline: https://github.com/jpuri/html-to-draftjs/blob/master/src/library/processInlineTag.js

Dec 26 '18 07:12 jpuri

https://codesandbox.io/s/react-draft-wysiwyg-table-cuu2s?file=/src/App.js:0-5332 - This code helped me fix this issue.

Jun 28 '23 08:06 GoodJavaJobs