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.