Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Creates an Instance. Passing in an Immutable.js List of mentions as an
// argument.
const mentions = fromJS([
{
name: 'Max Stoiber',
link: 'https://twitter.com/mxstbr',
avatar: 'https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU_400x400.jpg',
},
{
name: 'Nik Graf',
link: 'https://twitter.com/nikgraf',
avatar: 'https://pbs.twimg.com/profile_images/535634005769457664/Ppl32NaN_400x400.jpeg',
},
]);
const mentionPlugin = createMentionPlugin({ mentions });
// The Editor accepts an array of plugins. In this case, only the mentionPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
);
export default MyEditor;
constructor(props) {
super(props);
// variable block
this.mentionPlugin = createMentionPlugin({
mentionTrigger: "{{",
mentionComponent: mentionProps =>
<span>
{mentionProps.children}
</span>
});
// formatter block
this.mentionPluginFormatter = createMentionPlugin({
mentionTrigger: "@",
mentionComponent: mentionProps =>
<span>
{mentionProps.children}
</span>
});
// selector block
this.mentionPluginSelector = createMentionPlugin({
mentionTrigger: "[[",
mentionComponent: mentionProps =>
<span>
{mentionProps.children}
</span>
});
let editorState = EditorState.createEmpty();
import createUndoPlugin from 'draft-js-undo-plugin'; // eslint-disable-line import/no-unresolved
import {
// convertToRaw,
// convertFromRaw,
ContentState,
EditorState,
} from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
// import initialState from './initialState';
const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({
stickers,
});
const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [
emojiPlugin,
hashtagPlugin,
stickerPlugin,
linkifyPlugin,
mentionPlugin,
undoPlugin,
maxWidth: '440px',
background: '#fff',
borderRadius: '2px',
boxShadow: '0px 4px 30px 0px rgba(220, 220, 220, 1)',
cursor: 'pointer',
paddingTop: '8px',
paddingBottom: '8px',
zIndex: '2',
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box',
transform: 'scale(0)'
}
};
export const mentionPlugin = createMentionPlugin({
// TODO(mime): theme migration
//theme: styles,
});
const { MentionSuggestions } = mentionPlugin;
export default function Mentions({ mentions }) {
const [suggestions, setSuggestions] = useState(normalizedData() || []);
function normalizedData() {
if (!mentions) {
return [];
}
return mentions.map(mention => {
return {
name: mention.name || mention.username,
);
};
const extractEntries = mention => {
const entries = mention._root.entries;
const keys = _.map(entries, entry => entry[0]);
const values = _.map(entries, entry => entry[1]);
return _.object(keys, values);
};
const mentionPlugin = createMentionPlugin({
mentionPrefix: '@',
});
const { MentionSuggestions } = mentionPlugin;
const plugins = [mentionPlugin];
export default class Editor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
collectedMentions: [],
suggestions: this.props.mentions,
};
this.toggleInlineStyle = this.toggleInlineStyle.bind(this)
this.onClickOutside = this.onClickOutside.bind(this)
this.onPost = this.onPost.bind(this)
this.cancelEdit = this.cancelEdit.bind(this)
this.clearState = this.clearState.bind(this)
this.getEditorState = this.getEditorState.bind(this)
this.setEditorState = this.setEditorState.bind(this)
this.setUploadState = this.setUploadState.bind(this)
this.onSearchChange = this.onSearchChange.bind(this)
this.onAddMention = this.onAddMention.bind(this)
this.openFileUpload = this.openFileUpload.bind(this)
this.processUploadedFiles = this.processUploadedFiles.bind(this)
this.getDownloadAttachmentFilename = this.getDownloadAttachmentFilename.bind(this)
this.removeRawFile = this.removeRawFile.bind(this)
this.removeFile = this.removeFile.bind(this)
this.mentionPlugin = createMentionPlugin({ mentionPrefix: '@' })
this.plugins = plugins.slice(0)
this.plugins.push(this.mentionPlugin)
}
const createMentionPlugin = config => {
return draftJsMentionPlugin(
merge({}, defaultConfig, config)
);
};
function dataSetMentionPlugin() {
return createMentionPlugin({
mentionComponent: DataSetMention,
mentionTrigger: "#",
mentionRegExp: "[\\w\\s]{0,20}",
entityMutability: "IMMUTABLE"
});
}
constructor(props) {
super(props)
this.mentionPlugin = createMentionPlugin({
theme: mentionThemeClass,
mentionPrefix: '@',
})
this.initPubSub()
}