jpuri / draftjs-to-html

please wirte a usage for customEntityTransform,thanks

I'd also like to see an example on how to use customEntityTransform!

@tammomueller : can you plz help here ?

@liSong5713: customEntityTransform currently is required to be a function. If present its call to generate html for entity. Plz not that - if case its present default behavior for entity -> html will not work.

It can take 2 parameter:

entity ( object with { type, mutalibity, data})
text test present in the block.

I will soon plan to add support for custom transformation map so users can pass transformation function for selected entities.

I hope that helps.

Can you please provide a code example to demonstrate the usage?
and Can you also clarify what is the expected result?
Thanks!

I'm currently passing a function with a console log to see the entity and text, however the function is never called even though it is being passed down into draftToHtml.

@RobertoNyentek
you must pass all arguments when calling the function draftToHtml

example:

const customEntityTransform = (entity, text) => {
  if (entity.type !== 'LINK') return;
  // eslint-disable-next-line consistent-return
  return `<a href="${entity.data.url}" target="_blank">${text}</a>`;
};

draftToHtml(rawContentState, {}, false, customEntityTransform);

Similar to @RobertoNyentek, the function I pass to customEntityTransform is never called. By setting break points, I can see that ultimately the code reaches this line, but because the section doesn't have a type (not sure where this is set), this block is skipped over, and my customEntityTransform function isn't called. Any thoughts on what I can do to resolve? Thanks

draftjs-to-html/lib/draftjs-to-html.js

Line 551 in c02452e

if (section.type === 'ENTITY') {

This function customEntityTransform is never called. I have no idea if someone tested that before release. But the amount of forks says no one.

This library only supports base draft-js blocks and there is no info about that in docs, so you have to do a fork to fix that. You have to modify the getBlockMarkup function - there is a condition to verify that blockTag is defined in draft-js. So you can fix that by adding an else condition with the following code:
blockHtml.push(customEntityTransform(block, block.text)).

If you have any problems with that, You can follow my version just here:
https://github.com/playerony/draftjs-to-html

I hope, this info helped someone.

it works with a customized React Component.

e.g.) type === 'IMAGE'

import { DraftEntityMutability, DraftEntityType } from 'draft-js';
import { renderToString } from 'react-dom/server';
import { CustomComponent } from 'customComponent';

const getCustomComponentString = (props: any): string => {
  return renderToString(<CustomComponent {...props} />);
}

type DraftEntity = {
  type: DraftEntityType;
  mutability: DraftEntityMutability;
  data: any;
};
const customEntityTransformFunc = (entity: DraftEntity, text: string): string | undefined => {
  if (entity.type !== 'IMAGE') return;
  if (entity.data?.src?.length > 0) {
    return getCustomComponentString();
  }
};

draftToHtml(JSON.parse(contentState), undefined, undefined, customEntityTransformFunc);

customEntityTransform usage is not clear