Draft-js: How to use findStyleRanges() in ContentBlock?

[Raincle]

I want to find a range that I marked with a style in a sentance,
and just find this function in ContentBlock

findStyleRanges(
filterFn: (value: CharacterMetadata) => boolean,
callback: (start: number, end: number) => void
): void

But I don't know how to create a CharacterMetadata to filter the range with the style...

Please help! If you can show an example I'll highly appreciate it!

[Raincle]

Help~~~pleazzz

[Raincle]

@kangax Are you familiar with this?

[mzbac]

I think you want to do something similar like link example except you chang the inline style to your custom style.. then use decorator. no sure if this helps..

[Raincle]

@mzbac I want to get the range that I marked with a style in a ContentBlock.
I don't know if I describe the question clearly.

for example:

How are you.

I want to get the "are"'s range in the sentance above which is marked as boldStyle.

Can I get the "are"'s range position---start at 4 and end at 7?

[mzbac]

@Raincle as I said you can use decorator and in your strategy function you can pass in your custom callback
https://github.com/facebook/draft-js/blob/master/examples/link/link.html#L194
do something like

      function findLinkEntities(contentState, contentBlock, callback) {
        contentBlock.findEntityRanges(
          (character) => {
            const entityKey = character.getEntity();
            return (
              entityKey !== null &&
              contentState.getEntity(entityKey).getType() === 'LINK'
            );
          },
          (start, end) => {
             //do whatever you want
             callback(start, end)
           }
        );
      }

[terencechow]

@mzbac how would I be able to add to the data object of my entity from the callback?
For example, my rich text editor saves to the server the following: <a href='www.example.com'>some text</a>

When I transform that back using the example you provide, I see that getData() on the entity has a url key corresponding to www.example.com. Yet it does not have any other keys. How would I be able to customize my decorator to use the callback to inject a new key in the data object of my entity?

My use case is that I want to click a button such as 'edit' that will prefill a couple fields i.e. the text of the link and the actual url. I was hoping to do this prefilling of data by using getData() and extracting a 'text' and 'url' values

[mzbac]

@terencechow entity date insertion you can check the following
https://github.com/facebook/draft-js/blob/master/examples/link/link.html#L102 // not released in npm yet

for current npm version to insert entity data :

 const entityKey = Entity.create(
    'TOKEN',
    'IMMUTABLE',
     {url: urlValue}
  );

[terencechow]

I ended up using mergeData. Thanks! I thought that link example was outdated cause those functions didn't exist.

    const entity = contentBlock.getEntityAt(start)
    const text = contentBlock.getText().substr(start, end - start)
    Entity.mergeData(entity, { text })
    callback(start, end)

[mzbac]

@terencechow the link example is using current master branch which has API changes of entity.. it will be release later.. so your code need to change when new version released..

[Raincle]

I just want to know how to use "findStyleRanges()". Can anyone give an example, please?

[Raincle]

Especially, what "filterFn" should be...?

[Raincle]

@mzbac contentState.getEntity(entityKey) is not mentioned in documentation. I'm not sure if it's released...

[mzbac]

@Raincle contentState.getEntity(entityKey) didn't release yet. for current npm package you should use
Entity.get(entityKey).getType() === 'LINK'

[Raincle]

@mzbac Thank you very very very much!

And I just get through how to use "findStyleRanges()".
I post here in case that someone has the same problem:

yourBlock.findStyleRanges(
  (character) => {
    return character.hasStyle('YOURSTYLE');
  },
  (start, end) => {
    console.log({ start, end });
  }
);

[goodhyun]

The parameter order has been changed in the recent master repo. https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html#L194

function findLinkEntities(contentBlock, callback, contentState) {
        contentBlock.findEntityRanges(
          (character) => {
            const entityKey = character.getEntity();
            return (
              entityKey !== null &&
              contentState.getEntity(entityKey).getType() === 'LINK'
            );
          },
          callback
        );
      }

      const Link = (props) => {
        const {url} = props.contentState.getEntity(props.entityKey).getData();
        return (
          <a href={url} style={styles.link}>
            {props.children}
          </a>
        );
      };