0

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;
            }
        }
    }}
/>
pigrammer
  • 2,603
  • 1
  • 11
  • 24

0 Answers0