I used react-draft-wysiwyg
editor. It is working fine in desktop mode, but in mobile view it has a small issue. When I click on a mention suggestion, it doesn't get clicked at once. Also, if I first clicked a suggestion, I am not able to select that suggestion.
<Editor
readOnly={readOnly}
editorState={editorState}
editorClassName="editorClassName"
onEditorStateChange={onEditorStateChange}
handlePastedFiles={handlePastedFiles}
onChange={e => feedStateChange(e)}
placeholder={placeholder}
ref={editorReference}
onBlur={() => {
removeCls()
}}
mention={{
separator: ' ',
trigger: '@',
suggestions: data,
}}
toolbar={{
options: ['inline', 'textAlign', 'list', 'embedded'],
inline: {
options: ['bold', 'italic', 'underline'],
italic: { className: 'i-italic-icon' },
bold: { className: 'i-bold-icon' },
underline: { className: 'i-underline-icon' },
},
list: {
options: ['unordered', 'ordered'],
unordered: { className: 'i-unordered-icon' },
ordered: { className: 'i-ordered-icon' },
},
textAlign: {
options: ['left', 'center', 'right', 'justify'],
left: { className: 'i-left-icon' },
center: { className: 'i-center-icon' },
right: { className: 'i-right-icon' },
justify: { className: 'i-justify-icon' },
},
blockType: {
inDropdown: false,
options: ['H1', 'Blockquote'],
className: 'i-bloctype-icon',
},
image: {
urlEnabled: true,
uploadEnabled: true,
previewImage: true,
// alt: { present: true, mandatory: false },
uploadCallback: uploadImageCallBack,
inputAccept: 'application/zip,application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel,image/gif,image/jpeg,image/jpg,image/png,image/svg'
},
embedded: {
className: 'i-embedded-icon',
embedCallback: link => {
const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
return (detectedSrc && detectedSrc[1]) || link;
}
}
}}
/>