Skip to content

Instantly share code, notes, and snippets.

@nicubarbaros
Created April 17, 2018 21:13
Show Gist options
  • Save nicubarbaros/8a35a16dd45065891803bbfa3e451d15 to your computer and use it in GitHub Desktop.
Save nicubarbaros/8a35a16dd45065891803bbfa3e451d15 to your computer and use it in GitHub Desktop.
Draft Js Mentions
import { convertFromRaw, convertToRaw, ContentState } from 'draft-js';
const getIndicesOf = (searchStr, str, caseSensitive) => {
let tempStr = str;
let tempSearchStr = searchStr;
const searchStrLen = tempSearchStr.length;
if (searchStrLen === 0) {
return [];
}
let startIndex = 0;
let index;
const indices = [];
if (!caseSensitive) {
tempStr = tempStr.toLowerCase();
tempSearchStr = tempSearchStr.toLowerCase();
}
while ((index = tempStr.indexOf(tempSearchStr, startIndex)) > -1) {
indices.push(index);
startIndex = index + searchStrLen;
}
return indices;
};
const getEntityRanges = (text, mentionName, mentionKey) => {
const indices = getIndicesOf(mentionName, text);
if (indices.length > 0) {
return indices.map(offset => ({
key: mentionKey,
length: mentionName.length,
offset
}));
}
return null;
};
const createMentionEntities = (text, tags) => {
const rawContent = convertToRaw(ContentState.createFromText(text));
const rawState = tags.map(tag => ({
type: 'mention',
mutability: 'IMMUTABLE',
data: { id: tag.id, name: tag.name }
}));
rawContent.entityMap = [...rawState];
rawContent.blocks = rawContent.blocks.map(block => {
const ranges = [];
tags.forEach((tag, index) => {
const entityRanges = getEntityRanges(block.text, tag.name, index);
if (entityRanges) {
ranges.push(...entityRanges);
}
});
return { ...block, entityRanges: ranges };
});
return convertFromRaw(rawContent);
};
export default createMentionEntities;
@treago
Copy link

treago commented Feb 19, 2023

@hanihusam there is how i managed to do this

  const rawState =
    mentions?.reduce<Record<string, RawDraftEntity>>(
      (previousValue, currentValue, index) => ({
        ...previousValue,
        [index.toString()]: {
          type: 'mention',
          mutability: 'MUTABLE',
          data: { mention: currentValue }
        }
      }),
      {}
    ) ?? {}
  rawContent.entityMap = rawState

@nicubarbaros
Copy link
Author

I've used a @ts-ignore ignore for that line, but probably @treago 's solution is better!

@hanihusam
Copy link

hanihusam commented Feb 21, 2023

@hanihusam there is how i managed to do this

  const rawState =
    mentions?.reduce<Record<string, RawDraftEntity>>(
      (previousValue, currentValue, index) => ({
        ...previousValue,
        [index.toString()]: {
          type: 'mention',
          mutability: 'MUTABLE',
          data: { mention: currentValue }
        }
      }),
      {}
    ) ?? {}
  rawContent.entityMap = rawState

Thanks! It helps me very much. @treago

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment