ckEditor5 Context Menu on selected text

[crest-daksh]

📝 Provide a description of the new feature

What is the expected behavior of the proposed feature?

--- I am working on classic ckEditor and I want to add the context menu on selected text to refactor that text from BE . but I fail to add the context menu because there is no prop that I can trigger on selected text . If there is any prop on this editor than let me know . Also I am using below packages :

import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import 'ckeditor5/ckeditor5.css'; import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

here I only want to use classic editor and want to open context menu when we select the text .

I have tried to do it like below code but it is not working at all :

const editorRef = useRef<ClassicEditor | null>(null); const [menuVisible, setMenuVisible] = useState(false);

const handleTextSelection = (editor: ClassicEditor) => {
        const selection = editor.model.document.selection;

        // Check if text is selected
        const selectedText = Array.from(selection.getRanges())
            .map((range) =>
                Array.from(range.getItems({ shallow: true }))
                    .map((item) => {
                        if (item.is('$text') && 'data' in item) {
                            return (item as { data: string }).data;
                        }
                        return '';
                    })
                    .join('')
            )
            .join('');

        if (selectedText && selectedText.length > 0) {
            console.log('Selected text:', selectedText);

            // Example: Show the context menu
            setMenuVisible(true);
        } else {
            setMenuVisible(false);
        }
    };

    const handleEditorReady = (editor: ClassicEditor) => {
        console.log('handleEditor Ready is called::::');
        editorRef.current = editor;

        // Listen for changes in the editor's selection
        editor.editing.view.document.on('selectionChange', () => {
            console.log('in the handle Text selection');
            handleTextSelection(editor);
        });
    };
                                                                              <CKEditor
                                        editor={ClassicEditor as any}
                                        onReady={handleEditorReady as keyof unknown}
                                        data={sectionOutline}
                                        config={{
                                            toolbar: [
                                                'heading',
                                                'bold',
                                                'italic',
                                                'link',
                                                'blockquote',
                                                'numberedList',
                                                'bulletedList',
                                                'indent',
                                                'outdent',
                                                'undo',
                                                'redo',
                                                'insertTable',
                                                'Refactor'
                                            ],
                                            placeholder: '',
                                        }}
                                    />

please help me if I add this feature in my project . Thank you ! If you'd like to see this feature implemented, add a 👍 reaction to this post.